@oxyhq/services 11.0.0 → 11.1.1

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

@@ -6,24 +6,48 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
-var _theme = require("../styles/theme.js");
 var _core = require("@oxyhq/core");
-var _theme2 = require("@oxyhq/bloom/theme");
+var _theme = require("@oxyhq/bloom/theme");
 var _vectorIcons = require("@expo/vector-icons");
 var _bloom = require("@oxyhq/bloom");
+var _typography = require("@oxyhq/bloom/typography");
+var _button = require("@oxyhq/bloom/button");
+var _textField = require("@oxyhq/bloom/text-field");
+var _switch = require("@oxyhq/bloom/switch");
 var _settingsList = require("@oxyhq/bloom/settings-list");
 var _SettingsIcon = require("../components/SettingsIcon.js");
+var _Header = _interopRequireDefault(require("../components/Header.js"));
 var _useI18n = require("../hooks/useI18n.js");
 var _OxyContext = require("../context/OxyContext.js");
-var _FormInput = _interopRequireDefault(require("../components/feedback/FormInput.js"));
-var _ProgressIndicator = _interopRequireDefault(require("../components/feedback/ProgressIndicator.js"));
 var _useFeedbackForm = require("../components/feedback/useFeedbackForm.js");
-var _feedbackStyles = require("../components/feedback/feedbackStyles.js");
 var _constants = require("../components/feedback/constants.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** 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
@@ -33,8 +57,8 @@ const FeedbackScreen = ({
     oxyServices
   } = (0, _OxyContext.useOxy)();
   const normalizedTheme = (0, _core.normalizeTheme)(theme);
-  const colors = (0, _theme.useThemeColors)(normalizedTheme);
-  const bloomTheme = (0, _theme2.useTheme)();
+  const bloomTheme = (0, _theme.useTheme)();
+  const colors = bloomTheme.colors;
   const {
     t
   } = (0, _useI18n.useI18n)();
@@ -46,31 +70,62 @@ const FeedbackScreen = ({
     resetForm
   } = (0, _useFeedbackForm.useFeedbackForm)();
   const [currentStep, setCurrentStep] = (0, _react.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
+  const [, setErrorMessage] = (0, _react.useState)('');
   const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
   const slideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const styles = (0, _react.useMemo)(() => (0, _feedbackStyles.createFeedbackStyles)(colors), [colors]);
+
+  /** Theme-role color for each feedback type pill. */
+  const typeColor = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(nextStep => {
     _reactNative.Animated.timing(fadeAnim, {
       toValue: 0,
-      duration: 250,
+      duration: STEP_FADE_OUT_MS,
       useNativeDriver: _reactNative.Platform.OS !== 'web'
     }).start(() => {
       setCurrentStep(nextStep);
-      slideAnim.setValue(-100);
+      slideAnim.setValue(STEP_SLIDE_FROM);
       _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
         toValue: 1,
-        duration: 250,
+        duration: STEP_FADE_IN_MS,
         useNativeDriver: _reactNative.Platform.OS !== 'web'
       }), _reactNative.Animated.timing(slideAnim, {
         toValue: 0,
-        duration: 300,
+        duration: STEP_SLIDE_IN_MS,
         useNativeDriver: _reactNative.Platform.OS !== 'web'
       })]).start();
     });
   }, [fadeAnim, slideAnim]);
   const nextStep = (0, _react.useCallback)(() => {
-    if (currentStep < 3) {
+    if (currentStep < LAST_STEP_INDEX) {
       animateTransition(currentStep + 1);
     }
   }, [currentStep, animateTransition]);
@@ -80,13 +135,13 @@ const FeedbackScreen = ({
     }
   }, [currentStep, animateTransition]);
   const isTypeStepValid = (0, _react.useCallback)(() => {
-    return feedbackData.type && feedbackData.category;
+    return Boolean(feedbackData.type && feedbackData.category);
   }, [feedbackData.type, feedbackData.category]);
   const isDetailsStepValid = (0, _react.useCallback)(() => {
-    return feedbackData.title.trim() && feedbackData.description.trim();
+    return Boolean(feedbackData.title.trim() && feedbackData.description.trim());
   }, [feedbackData.title, feedbackData.description]);
   const isContactStepValid = (0, _react.useCallback)(() => {
-    return feedbackData.contactEmail.trim() || user?.email;
+    return Boolean(feedbackData.contactEmail.trim() || user?.email);
   }, [feedbackData.contactEmail, user?.email]);
   const handleSubmitFeedback = (0, _react.useCallback)(async () => {
     if (!isTypeStepValid() || !isDetailsStepValid() || !isContactStepValid()) {
@@ -124,15 +179,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
       });
-      _bloom.toast.error((error instanceof Error ? error.message : null) || t('feedback.toasts.submitFailed') || 'Failed to submit feedback');
+      _bloom.toast.error(message);
     }
-  }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
+  }, [feedbackData, user, oxyServices, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
   const feedbackTypeData = (0, _react.useMemo)(() => _constants.FEEDBACK_TYPES.map(type => ({
     ...type,
     isSelected: feedbackData.type === type.id
@@ -145,6 +201,27 @@ const FeedbackScreen = ({
     ...p,
     isSelected: feedbackData.priority === p.id
   })), [feedbackData.priority]);
+  const renderProgress = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    className: "w-full gap-space-8 mb-space-24",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
+      className: "text-headerBold font-headerBold text-text",
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+      className: "text-body font-body text-text-secondary",
+      children: subtitle
+    })]
+  });
   const renderTypeStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
@@ -152,24 +229,13 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.type.title') || 'What type of feedback?'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.type.subtitle') || 'Choose the category that best describes your feedback'
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: "w-full",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
         children: feedbackTypeData.map(type => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
-            name: type.icon,
-            color: type.color
+            name: TYPE_ICON_GLYPH[type.id],
+            color: typeColor(type.id)
           }),
           title: type.label,
           description: type.description,
@@ -180,21 +246,18 @@ const FeedbackScreen = ({
           showChevron: false
         }, type.id))
       })
-    }), feedbackData.type && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.categoryContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.modernLabel, {
-          marginBottom: 8
-        }],
-        className: "text-muted-foreground",
+    }), feedbackData.type ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "w-full mt-space-24",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+        className: "text-caption font-caption text-text-secondary mb-space-8",
         children: t('feedback.category.label') || 'Category'
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.fullBleed,
+        className: "w-full",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
           children: categoryData.map(cat => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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),
@@ -202,44 +265,32 @@ const FeedbackScreen = ({
           }, cat.name))
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, {
-          borderRadius: 35
-        }],
-        className: "border-border",
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "flex-row gap-space-8 mt-space-24 w-full",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "secondary",
         onPress: goBack,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: t('common.actions.back') || 'Back'
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, {
-          borderRadius: 35
-        }],
-        className: "bg-primary border-primary",
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "primary",
         onPress: nextStep,
         disabled: !isTypeStepValid(),
-        accessibilityRole: "button",
         accessibilityLabel: "Continue to next step",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: bloomTheme.colors.negativeForeground
-          }],
-          children: t('common.actions.next') || 'Next'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        iconPosition: "right",
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-forward",
           size: 16,
-          color: bloomTheme.colors.negativeForeground
-        })]
+          color: colors.primaryForeground
+        }),
+        style: styles.navButton,
+        children: t('common.actions.next') || 'Next'
       })]
     })]
   });
@@ -250,64 +301,51 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.details.title') || 'Tell us more'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "w-full gap-space-16",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.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__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.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__*/(0, _jsxRuntime.jsx)(_FormInput.default, {
-      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__*/(0, _jsxRuntime.jsx)(_FormInput.default, {
-      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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        marginBottom: 24
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.modernLabel, {
-          marginBottom: 8
-        }],
-        className: "text-muted-foreground",
+      className: "w-full mt-space-24",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+        className: "text-caption font-caption text-text-secondary mb-space-8",
         children: t('feedback.priority.label') || 'Priority Level'
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.fullBleed,
+        className: "w-full",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
           children: priorityData.map(p => /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
             icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.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),
@@ -316,39 +354,31 @@ const FeedbackScreen = ({
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
-        className: "border-border",
+      className: "flex-row gap-space-8 mt-space-24 w-full",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "secondary",
         onPress: prevStep,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: t('common.actions.back') || 'Back'
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton],
-        className: "bg-primary border-primary",
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "primary",
         onPress: nextStep,
         disabled: !isDetailsStepValid(),
-        accessibilityRole: "button",
         accessibilityLabel: "Continue to next step",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: bloomTheme.colors.negativeForeground
-          }],
-          children: t('common.actions.next') || 'Next'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        iconPosition: "right",
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-forward",
           size: 16,
-          color: bloomTheme.colors.negativeForeground
-        })]
+          color: colors.primaryForeground
+        }),
+        style: styles.navButton,
+        children: t('common.actions.next') || 'Next'
       })]
     })]
   });
@@ -359,91 +389,83 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.contact.title') || 'Contact Information'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.contact.subtitle') || 'Help us get back to you'
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormInput.default, {
-      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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.checkboxContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: "w-full",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.TextField, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_textField.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.checkboxText,
-        className: "text-foreground",
-        children: t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue'
-      })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: "w-full mt-space-16",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListGroup, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_settingsList.SettingsListItem, {
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingsIcon.SettingsIcon, {
+            name: "information",
+            color: colors.info
+          }),
+          title: t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue',
+          rightElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_switch.Switch, {
+            value: feedbackData.systemInfo,
+            onValueChange: value => updateField('systemInfo', value),
+            testID: "feedback-system-info-switch"
+          }),
+          showChevron: false
+        })
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.backButton],
-        className: "border-border",
+      className: "flex-row gap-space-8 mt-space-24 w-full",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "secondary",
         onPress: prevStep,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: "Back"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, styles.nextButton],
-        className: "bg-primary border-primary",
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "primary",
         onPress: nextStep,
         disabled: !isContactStepValid(),
-        accessibilityRole: "button",
         accessibilityLabel: "Continue to summary",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.navButtonText, {
-            color: bloomTheme.colors.negativeForeground
-          }],
-          children: "Next"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        iconPosition: "right",
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    className: "flex-row gap-space-12",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+      className: "text-body font-body text-text-secondary",
+      style: styles.summaryLabel,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+      className: "text-body font-body text-text flex-1",
+      children: value
+    })]
+  });
   const renderSummaryStep = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
@@ -451,115 +473,37 @@ const FeedbackScreen = ({
         translateX: slideAnim
       }]
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.modernHeader,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.stepTitle,
-        className: "text-foreground",
-        children: t('feedback.summary.title') || 'Summary'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.modernSubtitle,
-        className: "text-muted-foreground",
-        children: t('feedback.summary.subtitle') || 'Please review your feedback before submitting'
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.summaryContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Type:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: _constants.FEEDBACK_TYPES.find(t => t.id === feedbackData.type)?.label
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Category:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: feedbackData.category
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Priority:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: _constants.PRIORITY_LEVELS.find(p => p.id === feedbackData.priority)?.label
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Title:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: feedbackData.title
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.summaryRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryLabel,
-          className: "text-muted-foreground",
-          children: "Contact:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.summaryValue,
-          className: "text-foreground",
-          children: feedbackData.contactEmail || user?.email
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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:', _constants.FEEDBACK_TYPES.find(ft => ft.id === feedbackData.type)?.label), renderSummaryRow(t('feedback.summary.category') || 'Category:', feedbackData.category), renderSummaryRow(t('feedback.summary.priority') || 'Priority:', _constants.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__*/(0, _jsxRuntime.jsx)(_button.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__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: bloomTheme.colors.negativeForeground,
-        size: "small"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.buttonText,
-          children: t('feedback.actions.submit') || 'Submit Feedback'
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-          name: "send",
-          size: 20,
-          color: bloomTheme.colors.negativeForeground
-        })]
-      })
+      iconPosition: "right",
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        name: "send",
+        size: 18,
+        color: colors.primaryForeground
+      }),
+      style: styles.fullWidthButton,
+      children: t('feedback.actions.submit') || 'Submit Feedback'
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.navigationButtons,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.navButton, {
-          borderRadius: 35
-        }],
-        className: "border-border",
+      className: "flex-row mt-space-16 w-full",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "secondary",
         onPress: prevStep,
-        accessibilityRole: "button",
         accessibilityLabel: "Go back",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "arrow-back",
           size: 16,
           color: colors.text
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.navButtonText,
-          className: "text-foreground",
-          children: t('common.actions.back') || 'Back'
-        })]
+        }),
+        style: styles.navButton,
+        children: t('common.actions.back') || 'Back'
       })
     })]
   });
@@ -571,39 +515,29 @@ const FeedbackScreen = ({
       }]
     }],
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.successContainer,
+      className: "w-full items-center justify-center p-space-32 gap-space-16",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.successIcon, {
-          backgroundColor: `${colors.success}20`,
-          padding: 24,
-          borderRadius: 50
-        }],
+        className: "p-space-24 rounded-radius-max bg-fill-secondary",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
           name: "checkmark-circle",
           size: 48,
           color: colors.success
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.successTitle,
-        className: "text-foreground",
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H2, {
+        className: "text-headerBold font-headerBold text-text text-center",
         children: t('feedback.success.thanks') || 'Thank You!'
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.successMessage,
-        className: "text-muted-foreground",
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Text, {
+        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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: styles.button,
-        className: "bg-primary",
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        variant: "primary",
         onPress: () => {
           resetForm();
           setCurrentStep(0);
         },
-        accessibilityRole: "button",
         accessibilityLabel: "Submit another feedback",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.buttonText,
-          children: t('feedback.actions.submitAnother') || 'Submit Another'
-        })
+        style: styles.fullWidthButton,
+        children: t('feedback.actions.submitAnother') || 'Submit Another'
       })]
     })
   });
@@ -623,26 +557,43 @@ const FeedbackScreen = ({
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.KeyboardAvoidingView, {
-    style: [styles.container, {
-      backgroundColor: colors.background
-    }],
+    className: "flex-1 bg-bg",
     behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
-      barStyle: theme === 'dark' ? 'light-content' : 'dark-content'
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.default, {
+      title: t('feedback.title') || 'Feedback',
+      theme: normalizedTheme,
+      onBack: goBack || onClose,
+      variant: "minimal",
+      elevation: "subtle"
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_ProgressIndicator.default, {
-        currentStep: currentStep,
-        totalSteps: 4,
-        colors: colors,
-        styles: styles
-      }), renderCurrentStep()]
+      children: [feedbackState.status !== 'success' ? renderProgress() : null, renderCurrentStep()]
     })]
   });
 };
+const styles = _reactNative.StyleSheet.create({
+  stepContainer: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  navButton: {
+    flex: 1
+  },
+  fullWidthButton: {
+    width: '100%'
+  },
+  summaryLabel: {
+    width: 90
+  },
+  progressDot: {
+    width: 8
+  },
+  progressDotActive: {
+    width: 24
+  }
+});
 var _default = exports.default = FeedbackScreen;
 //# sourceMappingURL=FeedbackScreen.js.map