@oxyhq/services 6.9.45 → 6.10.1

package/src/ui/screens/CreateManagedAccountScreen.tsx

@@ -12,12 +12,11 @@ import {
   KeyboardAvoidingView,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { fontFamilies } from '../styles/fonts';
 import { Header } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { screenContentStyle } from '../constants/spacing';
 
 type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
@@ -126,7 +125,7 @@ const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
 
   const getStatusColor = (): string => {
     switch (usernameStatus) {
-      case 'available': return '#34C759';
+      case 'available': return bloomTheme.colors.success;
       case 'taken':
       case 'invalid': return bloomTheme.colors.error;
       case 'checking': return bloomTheme.colors.primary;
@@ -182,7 +181,7 @@ const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
                 <ActivityIndicator size="small" color={bloomTheme.colors.primary} />
               )}
               {usernameStatus === 'available' && (
-                <Text style={styles.statusIcon}>OK</Text>
+                <Text style={[styles.statusIcon, { color: bloomTheme.colors.success }]}>OK</Text>
               )}
             </View>
             {usernameMessage ? (
@@ -240,9 +239,9 @@ const CreateManagedAccountScreen: React.FC<BaseScreenProps> = ({
             activeOpacity={0.7}
           >
             {isCreating ? (
-              <ActivityIndicator size="small" color="#fff" />
+              <ActivityIndicator size="small" color={bloomTheme.colors.negativeForeground} />
             ) : (
-              <Text style={styles.createButtonText}>Create Identity</Text>
+              <Text style={[styles.createButtonText, { color: bloomTheme.colors.negativeForeground }]}>Create Identity</Text>
             )}
           </TouchableOpacity>
         </ScrollView>
@@ -262,14 +261,12 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 22,
     marginBottom: 24,
-    fontFamily: fontFamilies.inter,
   },
   fieldGroup: {
     marginBottom: 20,
   },
   label: {
     fontSize: 14,
-    fontFamily: fontFamilies.interSemiBold,
     fontWeight: Platform.OS === 'web' ? '600' : undefined,
     marginBottom: 8,
   },
@@ -283,13 +280,11 @@ const styles = StyleSheet.create({
   },
   inputPrefix: {
     fontSize: 16,
-    fontFamily: fontFamilies.inter,
     marginRight: 2,
   },
   input: {
     flex: 1,
     fontSize: 16,
-    fontFamily: fontFamilies.inter,
     paddingVertical: 0,
   },
   bioContainer: {
@@ -302,18 +297,14 @@ const styles = StyleSheet.create({
   },
   statusIcon: {
     fontSize: 13,
-    fontFamily: fontFamilies.interSemiBold,
     fontWeight: Platform.OS === 'web' ? '600' : undefined,
-    color: '#34C759',
   },
   statusMessage: {
     fontSize: 13,
-    fontFamily: fontFamilies.inter,
     marginTop: 6,
   },
   charCount: {
     fontSize: 12,
-    fontFamily: fontFamilies.inter,
     textAlign: 'right',
     marginTop: 4,
   },
@@ -328,9 +319,7 @@ const styles = StyleSheet.create({
     opacity: 0.5,
   },
   createButtonText: {
-    color: '#fff',
     fontSize: 16,
-    fontFamily: fontFamilies.interSemiBold,
     fontWeight: Platform.OS === 'web' ? '600' : undefined,
   },
 });

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -19,8 +19,7 @@ import { Header } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
-import { fontFamilies } from '../styles/fonts';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { EMAIL_REGEX } from '@oxyhq/core';
 
 /**
@@ -423,7 +422,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                         {
                             backgroundColor: bloomTheme.colors.card,
                             color: bloomTheme.colors.text,
-                            borderColor: fieldErrors[field.key] ? '#FF3B30' : bloomTheme.colors.border,
+                            borderColor: fieldErrors[field.key] ? bloomTheme.colors.error : bloomTheme.colors.border,
                         },
                     ]}
                     value={fieldValues[field.key] || ''}
@@ -435,7 +434,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                     {...field.inputProps}
                 />
                 {fieldErrors[field.key] && (
-                    <Text style={styles.errorText}>{fieldErrors[field.key]}</Text>
+                    <Text style={[styles.errorText, { color: bloomTheme.colors.error }]}>{fieldErrors[field.key]}</Text>
                 )}
             </View>
         );
@@ -487,7 +486,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                             onPress={handleAddItem}
                             disabled={!newItemValue.trim()}
                         >
-                            <Ionicons name="add" size={20} color="#fff" />
+                            <Ionicons name="add" size={20} color={bloomTheme.colors.negativeForeground} />
                         </TouchableOpacity>
                     </View>
                 </View>
@@ -522,7 +521,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                                     onPress={() => handleRemoveItem(item.id)}
                                     style={styles.removeButton}
                                 >
-                                    <Ionicons name="trash-outline" size={18} color="#FF3B30" />
+                                    <Ionicons name="trash-outline" size={18} color={bloomTheme.colors.error} />
                                 </TouchableOpacity>
                             </View>
                         ))}
@@ -597,7 +596,6 @@ const styles = StyleSheet.create({
     bigTitle: {
         fontSize: 34,
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-        fontFamily: fontFamilies.interBold,
         lineHeight: 40,
         marginBottom: 8,
         letterSpacing: -0.5,
@@ -619,7 +617,6 @@ const styles = StyleSheet.create({
     label: {
         fontSize: 14,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
     },
     input: {
         borderWidth: StyleSheet.hairlineWidth,
@@ -637,7 +634,6 @@ const styles = StyleSheet.create({
     },
     errorText: {
         fontSize: 12,
-        color: '#FF3B30',
         marginTop: 4,
     },
     addItemRow: {
@@ -658,7 +654,6 @@ const styles = StyleSheet.create({
     listTitle: {
         fontSize: 16,
         fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
         marginBottom: 12,
     },
     listItem: {

package/src/ui/screens/FAQScreen.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { Header, LoadingState, EmptyState } from '../components';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
@@ -149,7 +149,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                     >
                         <Text style={[
                             styles.categoryChipText,
-                            { color: !selectedCategory ? '#FFFFFF' : bloomTheme.colors.text }
+                            { color: !selectedCategory ? bloomTheme.colors.negativeForeground : bloomTheme.colors.text }
                         ]}>
                             {t('faq.allCategories') || 'All'}
                         </Text>
@@ -169,7 +169,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                         >
                             <Text style={[
                                 styles.categoryChipText,
-                                { color: selectedCategory === cat ? '#FFFFFF' : bloomTheme.colors.text }
+                                { color: selectedCategory === cat ? bloomTheme.colors.negativeForeground : bloomTheme.colors.text }
                             ]}>
                                 {cat}
                             </Text>

package/src/ui/screens/FeedbackScreen.tsx

@@ -14,10 +14,12 @@ import {
 import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
 import { normalizeTheme } from '../utils/themeUtils';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { Ionicons } from '@expo/vector-icons';
-import { toast } from '../../lib/sonner';
+import { toast } from '@oxyhq/bloom';
 import { packageInfo } from '@oxyhq/core';
-import { GroupedSection } from '../components';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useOxy } from '../context/OxyContext';
 
@@ -40,6 +42,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     const { user, oxyServices } = useOxy();
     const normalizedTheme = normalizeTheme(theme);
     const colors = useThemeColors(normalizedTheme);
+    const bloomTheme = useTheme();
     const { t } = useI18n();
 
     const { feedbackData, feedbackState, setFeedbackState, updateField, resetForm } = useFeedbackForm();
@@ -143,40 +146,20 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
         }
     }, [feedbackData, user, isTypeStepValid, isDetailsStepValid, isContactStepValid, resetForm, setFeedbackState, t]);
 
-    const feedbackTypeItems = useMemo(() => FEEDBACK_TYPES.map(type => ({
-        id: type.id,
-        icon: type.icon,
-        iconColor: type.color,
-        title: type.label,
-        subtitle: type.description,
-        onPress: () => { updateField('type', type.id); updateField('category', ''); },
-        selected: feedbackData.type === type.id,
-        showChevron: false,
-        multiRow: true,
-        dense: true,
-    })), [feedbackData.type, updateField]);
-
-    const categoryItems = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
-        id: cat,
-        icon: feedbackData.category === cat ? 'check-circle' : 'ellipse-outline',
-        iconColor: feedbackData.category === cat ? colors.primary : colors.secondaryText,
-        title: cat,
-        onPress: () => updateField('category', cat),
-        selected: feedbackData.category === cat,
-        showChevron: false,
-        dense: true,
-    })) : []), [feedbackData.type, feedbackData.category, colors.primary, colors.secondaryText, updateField]);
-
-    const priorityItems = useMemo(() => PRIORITY_LEVELS.map(p => ({
-        id: p.id,
-        icon: p.icon,
-        iconColor: p.color,
-        title: p.label,
-        onPress: () => updateField('priority', p.id),
-        selected: feedbackData.priority === p.id,
-        showChevron: false,
-        dense: true,
-    })), [feedbackData.priority, updateField]);
+    const feedbackTypeData = useMemo(() => FEEDBACK_TYPES.map(type => ({
+        ...type,
+        isSelected: feedbackData.type === type.id,
+    })), [feedbackData.type]);
+
+    const categoryData = useMemo(() => (feedbackData.type ? (CATEGORIES[feedbackData.type] || []).map(cat => ({
+        name: cat,
+        isSelected: feedbackData.category === cat,
+    })) : []), [feedbackData.type, feedbackData.category]);
+
+    const priorityData = useMemo(() => PRIORITY_LEVELS.map(p => ({
+        ...p,
+        isSelected: feedbackData.priority === p.id,
+    })), [feedbackData.priority]);
 
     const renderTypeStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
@@ -189,7 +172,18 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </Text>
             </View>
             <View style={styles.fullBleed}>
-                <GroupedSection items={feedbackTypeItems} />
+                <SettingsListGroup>
+                    {feedbackTypeData.map(type => (
+                        <SettingsListItem
+                            key={type.id}
+                            icon={<SettingsIcon name={type.icon} color={type.color} />}
+                            title={type.label}
+                            description={type.description}
+                            onPress={() => { updateField('type', type.id); updateField('category', ''); }}
+                            showChevron={false}
+                        />
+                    ))}
+                </SettingsListGroup>
             </View>
 
             {feedbackData.type && (
@@ -198,7 +192,17 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                         {t('feedback.category.label') || 'Category'}
                     </Text>
                     <View style={styles.fullBleed}>
-                        <GroupedSection items={categoryItems} />
+                        <SettingsListGroup>
+                            {categoryData.map(cat => (
+                                <SettingsListItem
+                                    key={cat.name}
+                                    icon={<SettingsIcon name={cat.isSelected ? 'check-circle' : 'ellipse-outline'} color={cat.isSelected ? colors.primary : colors.secondaryText} />}
+                                    title={cat.name}
+                                    onPress={() => updateField('category', cat.name)}
+                                    showChevron={false}
+                                />
+                            ))}
+                        </SettingsListGroup>
                     </View>
                 </View>
             )}
@@ -223,8 +227,8 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     accessibilityRole="button"
                     accessibilityLabel="Continue to next step"
                 >
-                    <Text style={[styles.navButtonText, { color: '#FFFFFF' }]}>{t('common.actions.next') || 'Next'}</Text>
-                    <Ionicons name="arrow-forward" size={16} color="#FFFFFF" />
+                    <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>
             </View>
         </Animated.View>
@@ -274,7 +278,17 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     {t('feedback.priority.label') || 'Priority Level'}
                 </Text>
                 <View style={styles.fullBleed}>
-                    <GroupedSection items={priorityItems} />
+                    <SettingsListGroup>
+                        {priorityData.map(p => (
+                            <SettingsListItem
+                                key={p.id}
+                                icon={<SettingsIcon name={p.icon} color={p.color} />}
+                                title={p.label}
+                                onPress={() => updateField('priority', p.id)}
+                                showChevron={false}
+                            />
+                        ))}
+                    </SettingsListGroup>
                 </View>
             </View>
 
@@ -298,8 +312,8 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     accessibilityRole="button"
                     accessibilityLabel="Continue to next step"
                 >
-                    <Text style={[styles.navButtonText, { color: '#FFFFFF' }]}>{t('common.actions.next') || 'Next'}</Text>
-                    <Ionicons name="arrow-forward" size={16} color="#FFFFFF" />
+                    <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>
             </View>
         </Animated.View>
@@ -343,7 +357,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     accessibilityState={{ checked: feedbackData.systemInfo }}
                     accessibilityLabel="Include system information"
                 >
-                    {feedbackData.systemInfo && <Ionicons name="checkmark" size={16} color="#FFFFFF" />}
+                    {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'}
@@ -370,8 +384,8 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                     accessibilityRole="button"
                     accessibilityLabel="Continue to summary"
                 >
-                    <Text style={[styles.navButtonText, { color: '#FFFFFF' }]}>Next</Text>
-                    <Ionicons name="arrow-forward" size={16} color="#FFFFFF" />
+                    <Text style={[styles.navButtonText, { color: bloomTheme.colors.negativeForeground }]}>Next</Text>
+                    <Ionicons name="arrow-forward" size={16} color={bloomTheme.colors.negativeForeground} />
                 </TouchableOpacity>
             </View>
         </Animated.View>
@@ -427,11 +441,11 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 accessibilityLabel="Submit feedback"
             >
                 {feedbackState.status === 'submitting' ? (
-                    <ActivityIndicator color="#FFFFFF" size="small" />
+                    <ActivityIndicator color={bloomTheme.colors.negativeForeground} size="small" />
                 ) : (
                     <>
                         <Text style={styles.buttonText}>{t('feedback.actions.submit') || 'Submit Feedback'}</Text>
-                        <Ionicons name="send" size={20} color="#FFFFFF" />
+                        <Ionicons name="send" size={20} color={bloomTheme.colors.negativeForeground} />
                     </>
                 )}
             </TouchableOpacity>
@@ -454,8 +468,8 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     const renderSuccessStep = () => (
         <Animated.View style={[styles.stepContainer, { opacity: fadeAnim, transform: [{ translateX: slideAnim }] }]}>
             <View style={styles.successContainer}>
-                <View style={[styles.successIcon, { backgroundColor: `${colors.success || '#34C759'}20`, padding: 24, borderRadius: 50 }]}>
-                    <Ionicons name="checkmark-circle" size={48} color={colors.success || '#34C759'} />
+                <View style={[styles.successIcon, { backgroundColor: `${colors.success}20`, padding: 24, borderRadius: 50 }]}>
+                    <Ionicons name="checkmark-circle" size={48} color={colors.success} />
                 </View>
                 <Text style={styles.successTitle} className="text-foreground">
                     {t('feedback.success.thanks') || 'Thank You!'}