@oxyhq/services 10.5.0 → 11.1.0

package/src/ui/screens/FeedbackScreen.tsx

@@ -2,81 +2,134 @@ import type React from 'react';
 import { useState, useRef, useCallback, useMemo } from 'react';
 import {
     View,
-    Text,
-    TouchableOpacity,
-    ActivityIndicator,
     Platform,
     KeyboardAvoidingView,
     ScrollView,
     Animated,
-    StatusBar,
+    StyleSheet,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeColors } from '../styles/theme';
 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';
+import Header from '../components/Header';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 
-import FormInput from '../components/feedback/FormInput';
-import ProgressIndicator from '../components/feedback/ProgressIndicator';
 import { useFeedbackForm } from '../components/feedback/useFeedbackForm';
-import { createFeedbackStyles } from '../components/feedback/feedbackStyles';
 import { FEEDBACK_TYPES, PRIORITY_LEVELS, CATEGORIES } from '../components/feedback/constants';
+import type { FeedbackData } from '../components/feedback/types';
+
+/** 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: Record<FeedbackData['type'], string> = {
+    bug: 'bug',
+    feature: 'lightbulb-on',
+    general: 'chat',
+    support: 'help-circle',
+};
+
+/** Maps each priority level to a MaterialCommunityIcons glyph. */
+const PRIORITY_ICON_GLYPH: Record<FeedbackData['priority'], string> = {
+    low: 'arrow-down',
+    medium: 'minus',
+    high: 'arrow-up',
+    critical: 'alert',
+};
 
 const FeedbackScreen: React.FC<BaseScreenProps> = ({
-    navigate,
     goBack,
     onClose,
     theme,
 }) => {
     const { user, oxyServices } = useOxy();
     const normalizedTheme = normalizeTheme(theme);
-    const colors = useThemeColors(normalizedTheme);
     const bloomTheme = useTheme();
+    const colors = bloomTheme.colors;
     const { t } = useI18n();
 
     const { feedbackData, feedbackState, setFeedbackState, updateField, 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: FeedbackData['type']): string => {
+        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: FeedbackData['priority']): string => {
+        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: number) => {
         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]);
@@ -88,15 +141,15 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     }, [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 () => {
@@ -134,13 +187,15 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
             setTimeout(() => {
                 resetForm();
                 setCurrentStep(0);
-            }, 3000);
+            }, SUCCESS_RESET_DELAY_MS);
 
         } catch (error: unknown) {
-            setFeedbackState({ status: 'error', message: (error instanceof Error ? error.message : null) || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback') });
-            toast.error((error instanceof Error ? error.message : null) || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback'));
+            const message = (error instanceof Error ? error.message : null)
+                || (t('feedback.toasts.submitFailed') || 'Failed to submit feedback');
+            setFeedbackState({ status: 'error', message });
+            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,
@@ -157,22 +212,46 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         isSelected: feedbackData.priority === p.id,
     })), [feedbackData.priority]);
 
+    const renderProgress = () => (
+        <View
+            className="flex-row justify-center gap-space-8 pt-space-8 pb-space-16"
+            accessibilityRole="progressbar"
+            accessibilityLabel={`Step ${currentStep + 1} of ${TOTAL_STEPS}`}
+        >
+            {Array.from({ length: TOTAL_STEPS }, (_, index) => (
+                <View
+                    key={index}
+                    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}
+                />
+            ))}
+        </View>
+    );
+
+    const renderStepHeader = (title: string, subtitle: string) => (
+        <View className="w-full gap-space-8 mb-space-24">
+            <H2 className="text-headerBold font-headerBold text-text">{title}</H2>
+            <Text className="text-body font-body text-text-secondary">{subtitle}</Text>
+        </View>
+    );
+
     const renderTypeStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
-            <View style={styles.modernHeader}>
-                <Text style={styles.stepTitle} className="text-foreground">
-                    {t('feedback.type.title') || 'What type of feedback?'}
-                </Text>
-                <Text style={styles.modernSubtitle} className="text-muted-foreground">
-                    {t('feedback.type.subtitle') || 'Choose the category that best describes your feedback'}
-                </Text>
-            </View>
-            <View style={styles.fullBleed}>
+            {renderStepHeader(
+                t('feedback.type.title') || 'What type of feedback?',
+                t('feedback.type.subtitle') || 'Choose the category that best describes your feedback',
+            )}
+
+            <View className="w-full">
                 <SettingsListGroup>
                     {feedbackTypeData.map(type => (
                         <SettingsListItem
                             key={type.id}
-                            icon={<SettingsIcon name={type.icon} color={type.color} />}
+                            icon={<SettingsIcon name={TYPE_ICON_GLYPH[type.id]} color={typeColor(type.id)} />}
                             title={type.label}
                             description={type.description}
                             onPress={() => { updateField('type', type.id); updateField('category', ''); }}
@@ -182,17 +261,22 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </SettingsListGroup>
             </View>
 
-            {feedbackData.type && (
-                <View style={styles.categoryContainer}>
-                    <Text style={[styles.modernLabel, { marginBottom: 8 }]} className="text-muted-foreground">
+            {feedbackData.type ? (
+                <View className="w-full mt-space-24">
+                    <Text className="text-caption font-caption text-text-secondary mb-space-8">
                         {t('feedback.category.label') || 'Category'}
                     </Text>
-                    <View style={styles.fullBleed}>
+                    <View className="w-full">
                         <SettingsListGroup>
                             {categoryData.map(cat => (
                                 <SettingsListItem
                                     key={cat.name}
-                                    icon={<SettingsIcon name={cat.isSelected ? 'check-circle' : 'ellipse-outline'} color={cat.isSelected ? colors.primary : colors.secondaryText} />}
+                                    icon={(
+                                        <SettingsIcon
+                                            name={cat.isSelected ? 'check-circle' : 'circle-outline'}
+                                            color={cat.isSelected ? colors.primary : colors.textSecondary}
+                                        />
+                                    )}
                                     title={cat.name}
                                     onPress={() => updateField('category', cat.name)}
                                     showChevron={false}
@@ -201,84 +285,81 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                         </SettingsListGroup>
                     </View>
                 </View>
-            )}
+            ) : null}
 
-            <View style={styles.navigationButtons}>
-                <TouchableOpacity
-                    style={[styles.navButton, { borderRadius: 35 }]}
-                    className="border-border"
+            <View className="flex-row gap-space-8 mt-space-24 w-full">
+                <Button
+                    variant="secondary"
                     onPress={goBack}
-                    accessibilityRole="button"
                     accessibilityLabel="Go back"
+                    icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
+                    style={styles.navButton}
                 >
-                    <Ionicons name="arrow-back" size={16} color={colors.text} />
-                    <Text style={styles.navButtonText} className="text-foreground">{t('common.actions.back') || 'Back'}</Text>
-                </TouchableOpacity>
+                    {t('common.actions.back') || 'Back'}
+                </Button>
 
-                <TouchableOpacity
-                    style={[styles.navButton, { borderRadius: 35 }]}
-                    className="bg-primary border-primary"
+                <Button
+                    variant="primary"
                     onPress={nextStep}
                     disabled={!isTypeStepValid()}
-                    accessibilityRole="button"
                     accessibilityLabel="Continue to next step"
+                    iconPosition="right"
+                    icon={<Ionicons name="arrow-forward" size={16} color={colors.primaryForeground} />}
+                    style={styles.navButton}
                 >
-                    <Text style={[styles.navButtonText, { color: bloomTheme.colors.negativeForeground }]}>{t('common.actions.next') || 'Next'}</Text>
-                    <Ionicons name="arrow-forward" size={16} color={bloomTheme.colors.negativeForeground} />
-                </TouchableOpacity>
+                    {t('common.actions.next') || 'Next'}
+                </Button>
             </View>
         </Animated.View>
     );
 
     const renderDetailsStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
-            <View style={styles.modernHeader}>
-                <Text style={styles.stepTitle} className="text-foreground">
-                    {t('feedback.details.title') || 'Tell us more'}
-                </Text>
-                <Text style={styles.modernSubtitle} className="text-muted-foreground">
-                    {t('feedback.details.subtitle') || 'Provide details about your feedback'}
-                </Text>
-            </View>
-
-            <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"
-            />
+            {renderStepHeader(
+                t('feedback.details.title') || 'Tell us more',
+                t('feedback.details.subtitle') || 'Provide details about your feedback',
+            )}
 
-            <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"
-            />
+            <View className="w-full gap-space-16">
+                <TextField>
+                    <TextFieldInput
+                        floatingLabel
+                        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"
+                    />
+                </TextField>
+
+                <TextField>
+                    <TextFieldInput
+                        floatingLabel
+                        multiline
+                        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"
+                    />
+                </TextField>
+            </View>
 
-            <View style={{ marginBottom: 24 }}>
-                <Text style={[styles.modernLabel, { marginBottom: 8 }]} className="text-muted-foreground">
+            <View className="w-full mt-space-24">
+                <Text className="text-caption font-caption text-text-secondary mb-space-8">
                     {t('feedback.priority.label') || 'Priority Level'}
                 </Text>
-                <View style={styles.fullBleed}>
+                <View className="w-full">
                     <SettingsListGroup>
                         {priorityData.map(p => (
                             <SettingsListItem
                                 key={p.id}
-                                icon={<SettingsIcon name={p.icon} color={p.color} />}
+                                icon={<SettingsIcon name={PRIORITY_ICON_GLYPH[p.id]} color={priorityColor(p.id)} />}
                                 title={p.label}
                                 onPress={() => updateField('priority', p.id)}
                                 showChevron={false}
@@ -288,200 +369,185 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </View>
             </View>
 
-            <View style={styles.navigationButtons}>
-                <TouchableOpacity
-                    style={[styles.navButton, styles.backButton]}
-                    className="border-border"
+            <View className="flex-row gap-space-8 mt-space-24 w-full">
+                <Button
+                    variant="secondary"
                     onPress={prevStep}
-                    accessibilityRole="button"
                     accessibilityLabel="Go back"
+                    icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
+                    style={styles.navButton}
                 >
-                    <Ionicons name="arrow-back" size={16} color={colors.text} />
-                    <Text style={styles.navButtonText} className="text-foreground">{t('common.actions.back') || 'Back'}</Text>
-                </TouchableOpacity>
+                    {t('common.actions.back') || 'Back'}
+                </Button>
 
-                <TouchableOpacity
-                    style={[styles.navButton, styles.nextButton]}
-                    className="bg-primary border-primary"
+                <Button
+                    variant="primary"
                     onPress={nextStep}
                     disabled={!isDetailsStepValid()}
-                    accessibilityRole="button"
                     accessibilityLabel="Continue to next step"
+                    iconPosition="right"
+                    icon={<Ionicons name="arrow-forward" size={16} color={colors.primaryForeground} />}
+                    style={styles.navButton}
                 >
-                    <Text style={[styles.navButtonText, { color: bloomTheme.colors.negativeForeground }]}>{t('common.actions.next') || 'Next'}</Text>
-                    <Ionicons name="arrow-forward" size={16} color={bloomTheme.colors.negativeForeground} />
-                </TouchableOpacity>
+                    {t('common.actions.next') || 'Next'}
+                </Button>
             </View>
         </Animated.View>
     );
 
     const renderContactStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
-            <View style={styles.modernHeader}>
-                <Text style={styles.stepTitle} className="text-foreground">
-                    {t('feedback.contact.title') || 'Contact Information'}
-                </Text>
-                <Text style={styles.modernSubtitle} className="text-muted-foreground">
-                    {t('feedback.contact.subtitle') || 'Help us get back to you'}
-                </Text>
-            </View>
+            {renderStepHeader(
+                t('feedback.contact.title') || 'Contact Information',
+                t('feedback.contact.subtitle') || 'Help us get back to you',
+            )}
 
-            <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"
-            />
+            <View className="w-full">
+                <TextField>
+                    <TextFieldInput
+                        floatingLabel
+                        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"
+                    />
+                </TextField>
+            </View>
 
-            <View style={styles.checkboxContainer}>
-                <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"
-                >
-                    {feedbackData.systemInfo && <Ionicons name="checkmark" size={16} color={bloomTheme.colors.negativeForeground} />}
-                </TouchableOpacity>
-                <Text style={styles.checkboxText} className="text-foreground">
-                    {t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue'}
-                </Text>
+            <View className="w-full mt-space-16">
+                <SettingsListGroup>
+                    <SettingsListItem
+                        icon={<SettingsIcon name="information" color={colors.info} />}
+                        title={t('feedback.contact.includeSystemInfo') || 'Include system information to help us better understand your issue'}
+                        rightElement={(
+                            <Switch
+                                value={feedbackData.systemInfo}
+                                onValueChange={(value) => updateField('systemInfo', value)}
+                                testID="feedback-system-info-switch"
+                            />
+                        )}
+                        showChevron={false}
+                    />
+                </SettingsListGroup>
             </View>
 
-            <View style={styles.navigationButtons}>
-                <TouchableOpacity
-                    style={[styles.navButton, styles.backButton]}
-                    className="border-border"
+            <View className="flex-row gap-space-8 mt-space-24 w-full">
+                <Button
+                    variant="secondary"
                     onPress={prevStep}
-                    accessibilityRole="button"
                     accessibilityLabel="Go back"
+                    icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
+                    style={styles.navButton}
                 >
-                    <Ionicons name="arrow-back" size={16} color={colors.text} />
-                    <Text style={styles.navButtonText} className="text-foreground">Back</Text>
-                </TouchableOpacity>
+                    {t('common.actions.back') || 'Back'}
+                </Button>
 
-                <TouchableOpacity
-                    style={[styles.navButton, styles.nextButton]}
-                    className="bg-primary border-primary"
+                <Button
+                    variant="primary"
                     onPress={nextStep}
                     disabled={!isContactStepValid()}
-                    accessibilityRole="button"
                     accessibilityLabel="Continue to summary"
+                    iconPosition="right"
+                    icon={<Ionicons name="arrow-forward" size={16} color={colors.primaryForeground} />}
+                    style={styles.navButton}
                 >
-                    <Text style={[styles.navButtonText, { color: bloomTheme.colors.negativeForeground }]}>Next</Text>
-                    <Ionicons name="arrow-forward" size={16} color={bloomTheme.colors.negativeForeground} />
-                </TouchableOpacity>
+                    {t('common.actions.next') || 'Next'}
+                </Button>
             </View>
         </Animated.View>
     );
 
+    const renderSummaryRow = (label: string, value: string | undefined) => (
+        <View className="flex-row gap-space-12">
+            <Text className="text-body font-body text-text-secondary" style={styles.summaryLabel}>{label}</Text>
+            <Text className="text-body font-body text-text flex-1">{value}</Text>
+        </View>
+    );
+
     const renderSummaryStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
-            <View style={styles.modernHeader}>
-                <Text style={styles.stepTitle} className="text-foreground">
-                    {t('feedback.summary.title') || 'Summary'}
-                </Text>
-                <Text style={styles.modernSubtitle} className="text-muted-foreground">
-                    {t('feedback.summary.subtitle') || 'Please review your feedback before submitting'}
-                </Text>
-            </View>
+            {renderStepHeader(
+                t('feedback.summary.title') || 'Summary',
+                t('feedback.summary.subtitle') || 'Please review your feedback before submitting',
+            )}
 
-            <View style={styles.summaryContainer}>
-                <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel} className="text-muted-foreground">Type:</Text>
-                    <Text style={styles.summaryValue} className="text-foreground">
-                        {FEEDBACK_TYPES.find(t => t.id === feedbackData.type)?.label}
-                    </Text>
-                </View>
-                <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel} className="text-muted-foreground">Category:</Text>
-                    <Text style={styles.summaryValue} className="text-foreground">{feedbackData.category}</Text>
-                </View>
-                <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel} className="text-muted-foreground">Priority:</Text>
-                    <Text style={styles.summaryValue} className="text-foreground">
-                        {PRIORITY_LEVELS.find(p => p.id === feedbackData.priority)?.label}
-                    </Text>
-                </View>
-                <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel} className="text-muted-foreground">Title:</Text>
-                    <Text style={styles.summaryValue} className="text-foreground">{feedbackData.title}</Text>
-                </View>
-                <View style={styles.summaryRow}>
-                    <Text style={styles.summaryLabel} className="text-muted-foreground">Contact:</Text>
-                    <Text style={styles.summaryValue} className="text-foreground">
-                        {feedbackData.contactEmail || user?.email}
-                    </Text>
-                </View>
+            <View className="w-full gap-space-12 p-space-16 rounded-radius-20 bg-fill mb-space-24">
+                {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,
+                )}
             </View>
 
-            <TouchableOpacity
-                style={styles.button}
-                    className="bg-primary"
+            <Button
+                variant="primary"
                 onPress={handleSubmitFeedback}
                 disabled={feedbackState.status === 'submitting'}
+                loading={feedbackState.status === 'submitting'}
                 testID="submit-feedback-button"
-                accessibilityRole="button"
                 accessibilityLabel="Submit feedback"
+                iconPosition="right"
+                icon={<Ionicons name="send" size={18} color={colors.primaryForeground} />}
+                style={styles.fullWidthButton}
             >
-                {feedbackState.status === 'submitting' ? (
-                    <ActivityIndicator color={bloomTheme.colors.negativeForeground} size="small" />
-                ) : (
-                    <>
-                        <Text style={styles.buttonText}>{t('feedback.actions.submit') || 'Submit Feedback'}</Text>
-                        <Ionicons name="send" size={20} color={bloomTheme.colors.negativeForeground} />
-                    </>
-                )}
-            </TouchableOpacity>
+                {t('feedback.actions.submit') || 'Submit Feedback'}
+            </Button>
 
-            <View style={styles.navigationButtons}>
-                <TouchableOpacity
-                    style={[styles.navButton, { borderRadius: 35 }]}
-                    className="border-border"
+            <View className="flex-row mt-space-16 w-full">
+                <Button
+                    variant="secondary"
                     onPress={prevStep}
-                    accessibilityRole="button"
                     accessibilityLabel="Go back"
+                    icon={<Ionicons name="arrow-back" size={16} color={colors.text} />}
+                    style={styles.navButton}
                 >
-                    <Ionicons name="arrow-back" size={16} color={colors.text} />
-                    <Text style={styles.navButtonText} className="text-foreground">{t('common.actions.back') || 'Back'}</Text>
-                </TouchableOpacity>
+                    {t('common.actions.back') || 'Back'}
+                </Button>
             </View>
         </Animated.View>
     );
 
     const renderSuccessStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
-            <View style={styles.successContainer}>
-                <View style={[styles.successIcon, { backgroundColor: `${colors.success}20`, padding: 24, borderRadius: 50 }]}>
+            <View className="w-full items-center justify-center p-space-32 gap-space-16">
+                <View className="p-space-24 rounded-radius-max bg-fill-secondary">
                     <Ionicons name="checkmark-circle" size={48} color={colors.success} />
                 </View>
-                <Text style={styles.successTitle} className="text-foreground">
+                <H2 className="text-headerBold font-headerBold text-text text-center">
                     {t('feedback.success.thanks') || 'Thank You!'}
-                </Text>
-                <Text style={styles.successMessage} className="text-muted-foreground">
+                </H2>
+                <Text className="text-body font-body text-text-secondary text-center">
                     {t('feedback.success.message') || "Your feedback has been submitted successfully. We'll review it and get back to you soon."}
                 </Text>
-                <TouchableOpacity
-                    style={styles.button}
-                    className="bg-primary"
+                <Button
+                    variant="primary"
                     onPress={() => { resetForm(); setCurrentStep(0); }}
-                    accessibilityRole="button"
                     accessibilityLabel="Submit another feedback"
+                    style={styles.fullWidthButton}
                 >
-                    <Text style={styles.buttonText}>{t('feedback.actions.submitAnother') || 'Submit Another'}</Text>
-                </TouchableOpacity>
+                    {t('feedback.actions.submitAnother') || 'Submit Another'}
+                </Button>
             </View>
         </Animated.View>
     );
@@ -499,25 +565,50 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
 
     return (
         <KeyboardAvoidingView
-            style={[styles.container, { backgroundColor: colors.background }]}
+            className="flex-1 bg-bg"
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         >
-            <StatusBar
-                barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
+            <Header
+                title={t('feedback.title') || 'Feedback'}
+                theme={normalizedTheme}
+                onBack={goBack || onClose}
+                variant="minimal"
+                elevation="subtle"
             />
 
             <ScrollView
-                contentContainerStyle={[styles.scrollContent, { backgroundColor: 'transparent' }]}
+                className="flex-1"
+                contentContainerClassName="px-screen-margin pt-space-24 pb-space-32"
                 showsVerticalScrollIndicator={false}
                 keyboardShouldPersistTaps="handled"
             >
-                {feedbackState.status !== 'success' && (
-                    <ProgressIndicator currentStep={currentStep} totalSteps={4} colors={colors} styles={styles} />
-                )}
+                {feedbackState.status !== 'success' ? renderProgress() : null}
                 {renderCurrentStep()}
             </ScrollView>
         </KeyboardAvoidingView>
     );
 };
 
+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;