@oxyhq/services 11.0.0 → 11.1.1

package/lib/module/ui/screens/FeedbackScreen.js

@@ -1,25 +1,49 @@
 "use strict";
 
 import { useState, useRef, useCallback, useMemo } from 'react';
-import { View, Text, TouchableOpacity, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
-import { useThemeColors } from "../styles/theme.js";
+import { View, Platform, KeyboardAvoidingView, ScrollView, Animated, StyleSheet } from 'react-native';
 import { normalizeTheme } from '@oxyhq/core';
+import { packageInfo } from '@oxyhq/core';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '@oxyhq/bloom';
-import { packageInfo } from '@oxyhq/core';
+import { H2, Text } from '@oxyhq/bloom/typography';
+import { Button } from '@oxyhq/bloom/button';
+import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
+import { Switch } from '@oxyhq/bloom/switch';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from "../components/SettingsIcon.js";
+import Header from "../components/Header.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { useOxy } from "../context/OxyContext.js";
-import FormInput from "../components/feedback/FormInput.js";
-import ProgressIndicator from "../components/feedback/ProgressIndicator.js";
 import { useFeedbackForm } from "../components/feedback/useFeedbackForm.js";
-import { createFeedbackStyles } from "../components/feedback/feedbackStyles.js";
 import { FEEDBACK_TYPES, PRIORITY_LEVELS, CATEGORIES } from "../components/feedback/constants.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Step transition timing — measured animation, not a design token. */
+const STEP_FADE_OUT_MS = 250;
+const STEP_FADE_IN_MS = 250;
+const STEP_SLIDE_IN_MS = 300;
+const STEP_SLIDE_FROM = -100;
+const TOTAL_STEPS = 4;
+const LAST_STEP_INDEX = TOTAL_STEPS - 1;
+const SUCCESS_RESET_DELAY_MS = 3000;
+
+/** Maps each feedback type to a Bloom theme role + MaterialCommunityIcons glyph. */
+const TYPE_ICON_GLYPH = {
+  bug: 'bug',
+  feature: 'lightbulb-on',
+  general: 'chat',
+  support: 'help-circle'
+};
+
+/** Maps each priority level to a MaterialCommunityIcons glyph. */
+const PRIORITY_ICON_GLYPH = {
+  low: 'arrow-down',
+  medium: 'minus',
+  high: 'arrow-up',
+  critical: 'alert'
+};
 const FeedbackScreen = ({
-  navigate,
   goBack,
   onClose,
   theme
@@ -29,8 +53,8 @@ const FeedbackScreen = ({
     oxyServices
   } = useOxy();
   const normalizedTheme = normalizeTheme(theme);
-  const colors = useThemeColors(normalizedTheme);
   const bloomTheme = useTheme();
+  const colors = bloomTheme.colors;
   const {
     t
   } = useI18n();
@@ -42,31 +66,62 @@ const FeedbackScreen = ({
     resetForm
   } = useFeedbackForm();
   const [currentStep, setCurrentStep] = useState(0);
-  const [errorMessage, setErrorMessage] = useState('');
+  const [, setErrorMessage] = useState('');
   const fadeAnim = useRef(new Animated.Value(1)).current;
   const slideAnim = useRef(new Animated.Value(0)).current;
-  const styles = useMemo(() => createFeedbackStyles(colors), [colors]);
+
+  /** Theme-role color for each feedback type pill. */
+  const typeColor = useCallback(id => {
+    switch (id) {
+      case 'bug':
+        return colors.negative;
+      case 'feature':
+        return colors.info;
+      case 'general':
+        return colors.success;
+      case 'support':
+        return colors.warning;
+      default:
+        return colors.primary;
+    }
+  }, [colors]);
+
+  /** Theme-role color for each priority level. */
+  const priorityColor = useCallback(id => {
+    switch (id) {
+      case 'low':
+        return colors.success;
+      case 'medium':
+        return colors.warning;
+      case 'high':
+        return colors.negative;
+      case 'critical':
+        return colors.negative;
+      default:
+        return colors.primary;
+    }
+  }, [colors]);
   const animateTransition = useCallback(nextStep => {
     Animated.timing(fadeAnim, {
       toValue: 0,
-      duration: 250,
+      duration: STEP_FADE_OUT_MS,
       useNativeDriver: Platform.OS !== 'web'
     }).start(() => {
       setCurrentStep(nextStep);
-      slideAnim.setValue(-100);
+      slideAnim.setValue(STEP_SLIDE_FROM);
       Animated.parallel([Animated.timing(fadeAnim, {
         toValue: 1,
-        duration: 250,
+        duration: STEP_FADE_IN_MS,
         useNativeDriver: Platform.OS !== 'web'
       }), Animated.timing(slideAnim, {
         toValue: 0,
-        duration: 300,
+        duration: STEP_SLIDE_IN_MS,
         useNativeDriver: Platform.OS !== 'web'
       })]).start();
     });
   }, [fadeAnim, slideAnim]);
   const nextStep = useCallback(() => {
-    if (currentStep < 3) {
+    if (currentStep < LAST_STEP_INDEX) {
       animateTransition(currentStep + 1);
     }
   }, [currentStep, animateTransition]);
@@ -76,13 +131,13 @@ const FeedbackScreen = ({
     }
   }, [currentStep, animateTransition]);
   const isTypeStepValid = useCallback(() => {
-    return feedbackData.type && feedbackData.category;
+    return Boolean(feedbackData.type && feedbackData.category);
   }, [feedbackData.type, feedbackData.category]);
   const isDetailsStepValid = useCallback(() => {
-    return feedbackData.title.trim() && feedbackData.description.trim();
+    return Boolean(feedbackData.title.trim() && feedbackData.description.trim());
   }, [feedbackData.title, feedbackData.description]);
   const isContactStepValid = useCallback(() => {
-    return feedbackData.contactEmail.trim() || user?.email;
+    return Boolean(feedbackData.contactEmail.trim() || user?.email);
   }, [feedbackData.contactEmail, user?.email]);
   const handleSubmitFeedback = useCallback(async () => {
     if (!isTypeStepValid() || !isDetailsStepValid() || !isContactStepValid()) {
@@ -120,15 +175,16 @@ const FeedbackScreen = ({
       setTimeout(() => {
         resetForm();
         setCurrentStep(0);
-      }, 3000);
+      }, SUCCESS_RESET_DELAY_MS);
     } catch (error) {
+      const message = (error instanceof Error ? error.message : null) || t('feedback.toasts.submitFailed') || 'Failed to submit feedback';
       setFeedbackState({
         status: 'error',
-        message: (error instanceof Error ? error.message : null) || t('feedback.toasts.submitFailed') || 'Failed to submit feedback'
+        message
       });
-      toast.error((error instanceof Error ? error.message : null) || t('feedback.toasts.submitFailed') || 'Failed to submit feedback');
+      toast.error(message);
     }
-  }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
+  }, [feedbackData, user, oxyServices, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
   const feedbackTypeData = useMemo(() => FEEDBACK_TYPES.map(type => ({
     ...type,
     isSelected: feedbackData.type === type.id
@@ -141,6 +197,27 @@ const FeedbackScreen = ({
     ...p,
     isSelected: feedbackData.priority === p.id
   })), [feedbackData.priority]);
+  const renderProgress = () => /*#__PURE__*/_jsx(View, {
+    className: "flex-row justify-center gap-space-8 pt-space-8 pb-space-16",
+    accessibilityRole: "progressbar",
+    accessibilityLabel: `Step ${currentStep + 1} of ${TOTAL_STEPS}`,
+    children: Array.from({
+      length: TOTAL_STEPS
+    }, (_, index) => /*#__PURE__*/_jsx(View, {
+      className: currentStep === index ? 'h-space-8 rounded-radius-max bg-fill-brand' : 'h-space-8 rounded-radius-max bg-fill-secondary',
+      style: currentStep === index ? styles.progressDotActive : styles.progressDot
+    }, index))
+  });
+  const renderStepHeader = (title, subtitle) => /*#__PURE__*/_jsxs(View, {
+    className: "w-full gap-space-8 mb-space-24",
+    children: [/*#__PURE__*/_jsx(H2, {
+      className: "text-headerBold font-headerBold text-text",
+      children: title
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-body font-body text-text-secondary",
+      children: subtitle
+    })]
+  });
   const renderTypeStep = () => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
@@ -148,24 +225,13 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.type.title') || 'What type of feedback?'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.type.subtitle') || 'Choose the category that best describes your feedback'
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.fullBleed,
+    children: [renderStepHeader(t('feedback.type.title') || 'What type of feedback?', t('feedback.type.subtitle') || 'Choose the category that best describes your feedback'), /*#__PURE__*/_jsx(View, {
+      className: "w-full",
       children: /*#__PURE__*/_jsx(SettingsListGroup, {
         children: feedbackTypeData.map(type => /*#__PURE__*/_jsx(SettingsListItem, {
           icon: /*#__PURE__*/_jsx(SettingsIcon, {
-            name: type.icon,
-            color: type.color
+            name: TYPE_ICON_GLYPH[type.id],
+            color: typeColor(type.id)
           }),
           title: type.label,
           description: type.description,
@@ -176,21 +242,18 @@ const FeedbackScreen = ({
           showChevron: false
         }, type.id))
       })
-    }), feedbackData.type && /*#__PURE__*/_jsxs(View, {
-      style: styles.categoryContainer,
+    }), feedbackData.type ? /*#__PURE__*/_jsxs(View, {
+      className: "w-full mt-space-24",
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.modernLabel, {
-          marginBottom: 8
-        }],
-        className: "text-muted-foreground",
+        className: "text-caption font-caption text-text-secondary mb-space-8",
         children: t('feedback.category.label') || 'Category'
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.fullBleed,
+        className: "w-full",
         children: /*#__PURE__*/_jsx(SettingsListGroup, {
           children: categoryData.map(cat => /*#__PURE__*/_jsx(SettingsListItem, {
             icon: /*#__PURE__*/_jsx(SettingsIcon, {
-              name: cat.isSelected ? 'check-circle' : 'ellipse-outline',
-              color: cat.isSelected ? colors.primary : colors.secondaryText
+              name: cat.isSelected ? 'check-circle' : 'circle-outline',
+              color: cat.isSelected ? colors.primary : colors.textSecondary
             }),
             title: cat.name,
             onPress: () => updateField('category', cat.name),
@@ -198,44 +261,32 @@ const FeedbackScreen = ({
           }, cat.name))
         })
       })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, {
-          borderRadius: 35
-        }],
-        className: "border-border",
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: "flex-row gap-space-8 mt-space-24 w-full",
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
         onPress: goBack,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/_jsx(Ionicons, {
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: t('common.actions.back') || 'Back'
-        })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, {
-          borderRadius: 35
-        }],
-        className: "bg-primary border-primary",
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
         onPress: nextStep,
         disabled: !isTypeStepValid(),
-        accessibilityRole: "button",
         accessibilityLabel: "Continue to next step",
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: bloomTheme.colors.negativeForeground
-          }],
-          children: t('common.actions.next') || 'Next'
-        }), /*#__PURE__*/_jsx(Ionicons, {
+        iconPosition: "right",
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-forward",
           size: 16,
-          color: bloomTheme.colors.negativeForeground
-        })]
+          color: colors.primaryForeground
+        }),
+        style: styles.navButton,
+        children: t('common.actions.next') || 'Next'
       })]
     })]
   });
@@ -246,64 +297,51 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.details.title') || 'Tell us more'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.details.subtitle') || 'Provide details about your feedback'
+    children: [renderStepHeader(t('feedback.details.title') || 'Tell us more', t('feedback.details.subtitle') || 'Provide details about your feedback'), /*#__PURE__*/_jsxs(View, {
+      className: "w-full gap-space-16",
+      children: [/*#__PURE__*/_jsx(TextField, {
+        children: /*#__PURE__*/_jsx(TextFieldInput, {
+          floatingLabel: true,
+          label: t('feedback.fields.title.label') || 'Title',
+          value: feedbackData.title,
+          onChangeText: text => {
+            updateField('title', text);
+            setErrorMessage('');
+          },
+          placeholder: t('feedback.fields.title.placeholder') || 'Brief summary of your feedback',
+          testID: "feedback-title-input",
+          accessibilityLabel: "Feedback title",
+          accessibilityHint: "Enter a brief summary of your feedback"
+        })
+      }), /*#__PURE__*/_jsx(TextField, {
+        children: /*#__PURE__*/_jsx(TextFieldInput, {
+          floatingLabel: true,
+          multiline: true,
+          numberOfLines: 6,
+          label: t('feedback.fields.description.label') || 'Description',
+          value: feedbackData.description,
+          onChangeText: text => {
+            updateField('description', text);
+            setErrorMessage('');
+          },
+          placeholder: t('feedback.fields.description.placeholder') || 'Please provide detailed information...',
+          testID: "feedback-description-input",
+          accessibilityLabel: "Feedback description",
+          accessibilityHint: "Provide detailed information about your feedback"
+        })
       })]
-    }), /*#__PURE__*/_jsx(FormInput, {
-      icon: "create-outline",
-      label: t('feedback.fields.title.label') || 'Title',
-      value: feedbackData.title,
-      onChangeText: text => {
-        updateField('title', text);
-        setErrorMessage('');
-      },
-      placeholder: t('feedback.fields.title.placeholder') || 'Brief summary of your feedback',
-      testID: "feedback-title-input",
-      colors: colors,
-      styles: styles,
-      accessibilityLabel: "Feedback title",
-      accessibilityHint: "Enter a brief summary of your feedback"
-    }), /*#__PURE__*/_jsx(FormInput, {
-      icon: "document-text-outline",
-      label: t('feedback.fields.description.label') || 'Description',
-      value: feedbackData.description,
-      onChangeText: text => {
-        updateField('description', text);
-        setErrorMessage('');
-      },
-      placeholder: t('feedback.fields.description.placeholder') || 'Please provide detailed information...',
-      multiline: true,
-      numberOfLines: 6,
-      testID: "feedback-description-input",
-      colors: colors,
-      styles: styles,
-      accessibilityLabel: "Feedback description",
-      accessibilityHint: "Provide detailed information about your feedback"
     }), /*#__PURE__*/_jsxs(View, {
-      style: {
-        marginBottom: 24
-      },
+      className: "w-full mt-space-24",
       children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.modernLabel, {
-          marginBottom: 8
-        }],
-        className: "text-muted-foreground",
+        className: "text-caption font-caption text-text-secondary mb-space-8",
         children: t('feedback.priority.label') || 'Priority Level'
       }), /*#__PURE__*/_jsx(View, {
-        style: styles.fullBleed,
+        className: "w-full",
         children: /*#__PURE__*/_jsx(SettingsListGroup, {
           children: priorityData.map(p => /*#__PURE__*/_jsx(SettingsListItem, {
             icon: /*#__PURE__*/_jsx(SettingsIcon, {
-              name: p.icon,
-              color: p.color
+              name: PRIORITY_ICON_GLYPH[p.id],
+              color: priorityColor(p.id)
             }),
             title: p.label,
             onPress: () => updateField('priority', p.id),
@@ -312,39 +350,31 @@ const FeedbackScreen = ({
         })
       })]
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
-        className: "border-border",
+      className: "flex-row gap-space-8 mt-space-24 w-full",
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
         onPress: prevStep,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/_jsx(Ionicons, {
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: t('common.actions.back') || 'Back'
-        })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton],
-        className: "bg-primary border-primary",
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
         onPress: nextStep,
         disabled: !isDetailsStepValid(),
-        accessibilityRole: "button",
         accessibilityLabel: "Continue to next step",
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: bloomTheme.colors.negativeForeground
-          }],
-          children: t('common.actions.next') || 'Next'
-        }), /*#__PURE__*/_jsx(Ionicons, {
+        iconPosition: "right",
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-forward",
           size: 16,
-          color: bloomTheme.colors.negativeForeground
-        })]
+          color: colors.primaryForeground
+        }),
+        style: styles.navButton,
+        children: t('common.actions.next') || 'Next'
       })]
     })]
   });
@@ -355,91 +385,83 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.contact.title') || 'Contact Information'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.contact.subtitle') || 'Help us get back to you'
-      })]
-    }), /*#__PURE__*/_jsx(FormInput, {
-      icon: "mail-outline",
-      label: t('feedback.fields.email.label') || 'Email Address',
-      value: feedbackData.contactEmail,
-      onChangeText: text => {
-        updateField('contactEmail', text);
-        setErrorMessage('');
-      },
-      placeholder: user?.email || t('feedback.fields.email.placeholder') || 'Enter your email address',
-      testID: "feedback-email-input",
-      colors: colors,
-      styles: styles,
-      accessibilityLabel: "Email address",
-      accessibilityHint: "Enter your email so we can respond"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.checkboxContainer,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.checkbox, {
-          borderColor: feedbackData.systemInfo ? colors.primary : colors.border,
-          backgroundColor: feedbackData.systemInfo ? colors.primary : 'transparent'
-        }],
-        onPress: () => updateField('systemInfo', !feedbackData.systemInfo),
-        accessibilityRole: "checkbox",
-        accessibilityState: {
-          checked: feedbackData.systemInfo
-        },
-        accessibilityLabel: "Include system information",
-        children: feedbackData.systemInfo && /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark",
-          size: 16,
-          color: bloomTheme.colors.negativeForeground
+    children: [renderStepHeader(t('feedback.contact.title') || 'Contact Information', t('feedback.contact.subtitle') || 'Help us get back to you'), /*#__PURE__*/_jsx(View, {
+      className: "w-full",
+      children: /*#__PURE__*/_jsx(TextField, {
+        children: /*#__PURE__*/_jsx(TextFieldInput, {
+          floatingLabel: true,
+          label: t('feedback.fields.email.label') || 'Email Address',
+          value: feedbackData.contactEmail,
+          onChangeText: text => {
+            updateField('contactEmail', text);
+            setErrorMessage('');
+          },
+          placeholder: user?.email || t('feedback.fields.email.placeholder') || 'Enter your email address',
+          keyboardType: "email-address",
+          autoCapitalize: "none",
+          autoCorrect: false,
+          testID: "feedback-email-input",
+          accessibilityLabel: "Email address",
+          accessibilityHint: "Enter your email so we can respond"
         })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.checkboxText,
-        className: "text-foreground",
-        children: t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue'
-      })]
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      className: "w-full mt-space-16",
+      children: /*#__PURE__*/_jsx(SettingsListGroup, {
+        children: /*#__PURE__*/_jsx(SettingsListItem, {
+          icon: /*#__PURE__*/_jsx(SettingsIcon, {
+            name: "information",
+            color: colors.info
+          }),
+          title: t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue',
+          rightElement: /*#__PURE__*/_jsx(Switch, {
+            value: feedbackData.systemInfo,
+            onValueChange: value => updateField('systemInfo', value),
+            testID: "feedback-system-info-switch"
+          }),
+          showChevron: false
+        })
+      })
     }), /*#__PURE__*/_jsxs(View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
-        className: "border-border",
+      className: "flex-row gap-space-8 mt-space-24 w-full",
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
         onPress: prevStep,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/_jsx(Ionicons, {
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: "Back"
-        })]
-      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton],
-        className: "bg-primary border-primary",
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
         onPress: nextStep,
         disabled: !isContactStepValid(),
-        accessibilityRole: "button",
         accessibilityLabel: "Continue to summary",
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.navButtonText, {
-            color: bloomTheme.colors.negativeForeground
-          }],
-          children: "Next"
-        }), /*#__PURE__*/_jsx(Ionicons, {
+        iconPosition: "right",
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-forward",
           size: 16,
-          color: bloomTheme.colors.negativeForeground
-        })]
+          color: colors.primaryForeground
+        }),
+        style: styles.navButton,
+        children: t('common.actions.next') || 'Next'
       })]
     })]
   });
+  const renderSummaryRow = (label, value) => /*#__PURE__*/_jsxs(View, {
+    className: "flex-row gap-space-12",
+    children: [/*#__PURE__*/_jsx(Text, {
+      className: "text-body font-body text-text-secondary",
+      style: styles.summaryLabel,
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-body font-body text-text flex-1",
+      children: value
+    })]
+  });
   const renderSummaryStep = () => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
@@ -447,115 +469,37 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.summary.title') || 'Summary'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.summary.subtitle') || 'Please review your feedback before submitting'
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.summaryContainer,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Type:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: FEEDBACK_TYPES.find(t => t.id === feedbackData.type)?.label
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Category:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: feedbackData.category
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Priority:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: PRIORITY_LEVELS.find(p => p.id === feedbackData.priority)?.label
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Title:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: feedbackData.title
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Contact:"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: feedbackData.contactEmail || user?.email
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: styles.button,
-      className: "bg-primary",
+    children: [renderStepHeader(t('feedback.summary.title') || 'Summary', t('feedback.summary.subtitle') || 'Please review your feedback before submitting'), /*#__PURE__*/_jsxs(View, {
+      className: "w-full gap-space-12 p-space-16 rounded-radius-20 bg-fill mb-space-24",
+      children: [renderSummaryRow(t('feedback.summary.type') || 'Type:', FEEDBACK_TYPES.find(ft => ft.id === feedbackData.type)?.label), renderSummaryRow(t('feedback.summary.category') || 'Category:', feedbackData.category), renderSummaryRow(t('feedback.summary.priority') || 'Priority:', PRIORITY_LEVELS.find(p => p.id === feedbackData.priority)?.label), renderSummaryRow(t('feedback.summary.titleField') || 'Title:', feedbackData.title), renderSummaryRow(t('feedback.summary.contact') || 'Contact:', feedbackData.contactEmail || user?.email)]
+    }), /*#__PURE__*/_jsx(Button, {
+      variant: "primary",
       onPress: handleSubmitFeedback,
       disabled: feedbackState.status === 'submitting',
+      loading: feedbackState.status === 'submitting',
       testID: "submit-feedback-button",
-      accessibilityRole: "button",
       accessibilityLabel: "Submit feedback",
-      children: feedbackState.status === 'submitting' ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: bloomTheme.colors.negativeForeground,
-        size: "small"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.buttonText,
-          children: t('feedback.actions.submit') || 'Submit Feedback'
-        }), /*#__PURE__*/_jsx(Ionicons, {
-          name: "send",
-          size: 20,
-          color: bloomTheme.colors.negativeForeground
-        })]
-      })
+      iconPosition: "right",
+      icon: /*#__PURE__*/_jsx(Ionicons, {
+        name: "send",
+        size: 18,
+        color: colors.primaryForeground
+      }),
+      style: styles.fullWidthButton,
+      children: t('feedback.actions.submit') || 'Submit Feedback'
     }), /*#__PURE__*/_jsx(View, {
-      style: styles.navigationButtons,
-      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.navButton, {
-          borderRadius: 35
-        }],
-        className: "border-border",
+      className: "flex-row mt-space-16 w-full",
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
         onPress: prevStep,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/_jsx(Ionicons, {
+        icon: /*#__PURE__*/_jsx(Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: t('common.actions.back') || 'Back'
-        })]
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
       })
     })]
   });
@@ -567,39 +511,29 @@ const FeedbackScreen = ({
       }]
     }],
     children: /*#__PURE__*/_jsxs(View, {
-      style: styles.successContainer,
+      className: "w-full items-center justify-center p-space-32 gap-space-16",
       children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.successIcon, {
-          backgroundColor: `${colors.success}20`,
-          padding: 24,
-          borderRadius: 50
-        }],
+        className: "p-space-24 rounded-radius-max bg-fill-secondary",
         children: /*#__PURE__*/_jsx(Ionicons, {
           name: "checkmark-circle",
           size: 48,
           color: colors.success
         })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.successTitle,
-        className: "text-foreground",
+      }), /*#__PURE__*/_jsx(H2, {
+        className: "text-headerBold font-headerBold text-text text-center",
         children: t('feedback.success.thanks') || 'Thank You!'
       }), /*#__PURE__*/_jsx(Text, {
-        style: styles.successMessage,
-        className: "text-muted-foreground",
+        className: "text-body font-body text-text-secondary text-center",
         children: t('feedback.success.message') || "Your feedback has been submitted successfully. We'll review it and get back to you soon."
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.button,
-        className: "bg-primary",
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "primary",
         onPress: () => {
           resetForm();
           setCurrentStep(0);
         },
-        accessibilityRole: "button",
         accessibilityLabel: "Submit another feedback",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.buttonText,
-          children: t('feedback.actions.submitAnother') || 'Submit Another'
-        })
+        style: styles.fullWidthButton,
+        children: t('feedback.actions.submitAnother') || 'Submit Another'
       })]
     })
   });
@@ -619,26 +553,43 @@ const FeedbackScreen = ({
     }
   };
   return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
-    style: [styles.container, {
-      backgroundColor: colors.background
-    }],
+    className: "flex-1 bg-bg",
     behavior: Platform.OS === 'ios' ? 'padding' : 'height',
-    children: [/*#__PURE__*/_jsx(StatusBar, {
-      barStyle: theme === 'dark' ? 'light-content' : 'dark-content'
+    children: [/*#__PURE__*/_jsx(Header, {
+      title: t('feedback.title') || 'Feedback',
+      theme: normalizedTheme,
+      onBack: goBack || onClose,
+      variant: "minimal",
+      elevation: "subtle"
     }), /*#__PURE__*/_jsxs(ScrollView, {
-      contentContainerStyle: [styles.scrollContent, {
-        backgroundColor: 'transparent'
-      }],
+      className: "flex-1",
+      contentContainerClassName: "px-screen-margin pt-space-24 pb-space-32",
       showsVerticalScrollIndicator: false,
       keyboardShouldPersistTaps: "handled",
-      children: [feedbackState.status !== 'success' && /*#__PURE__*/_jsx(ProgressIndicator, {
-        currentStep: currentStep,
-        totalSteps: 4,
-        colors: colors,
-        styles: styles
-      }), renderCurrentStep()]
+      children: [feedbackState.status !== 'success' ? renderProgress() : null, renderCurrentStep()]
     })]
   });
 };
+const styles = StyleSheet.create({
+  stepContainer: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  navButton: {
+    flex: 1
+  },
+  fullWidthButton: {
+    width: '100%'
+  },
+  summaryLabel: {
+    width: 90
+  },
+  progressDot: {
+    width: 8
+  },
+  progressDotActive: {
+    width: 24
+  }
+});
 export default FeedbackScreen;
 //# sourceMappingURL=FeedbackScreen.js.map