@oxyhq/services 6.9.46 → 6.10.2

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,8 +14,9 @@ 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 { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { SettingsIcon } from '../components/SettingsIcon';
@@ -41,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();
@@ -225,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>
@@ -310,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>
@@ -355,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'}
@@ -382,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>
@@ -439,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>
@@ -466,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!'}