@oxyhq/services 6.9.32 → 6.9.34

package/src/ui/screens/AppInfoScreen.tsx

@@ -18,8 +18,10 @@ import { toast } from '../../lib/sonner';
 import { Ionicons } from '@expo/vector-icons';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { SettingsIcon } from '../components/SettingsIcon';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useColorScheme } from '../hooks/useColorScheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme } from '../utils/themeUtils';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
@@ -47,11 +49,13 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     const [isRunningSystemCheck, setIsRunningSystemCheck] = useState(false);
     const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'disconnected' | 'unknown'>('unknown');
 
+    const bloomTheme = useTheme();
     const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const normalizedColorScheme = normalizeColorScheme(colorScheme);
+    const themeColors = Colors[normalizedColorScheme];
     // AppInfoScreen uses a slightly different light background
-    const backgroundColor = themeStyles.isDarkTheme ? themeStyles.backgroundColor : '#f2f2f2';
-    const primaryColor = themeStyles.colors.iconSecurity;
+    const backgroundColor = bloomTheme.isDark ? bloomTheme.colors.background : '#f2f2f2';
+    const primaryColor = themeColors.iconSecurity;
 
     useEffect(() => {
         const updateDimensions = () => {
@@ -177,30 +181,30 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         onPress={() => copyToClipboard(packageInfo.name, t('appInfo.items.name'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="tag" color={themeStyles.colors.iconData} />}
+                        icon={<SettingsIcon name="tag" color={themeColors.iconData} />}
                         title={t('appInfo.items.version')}
                         description={packageInfo.version}
                         onPress={() => copyToClipboard(packageInfo.version, t('appInfo.items.version'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="file-document" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="file-document" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.description')}
                         description={packageInfo.description || t('appInfo.items.noDescription')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="code-tags" color={themeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="code-tags" color={themeColors.iconStorage} />}
                         title={t('appInfo.items.mainEntry')}
                         description={packageInfo.main || 'N/A'}
                         onPress={() => copyToClipboard(packageInfo.main || 'N/A', t('appInfo.items.mainEntry'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="library" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="library" color={themeColors.iconSharing} />}
                         title={t('appInfo.items.moduleEntry')}
                         description={packageInfo.module || 'N/A'}
                         onPress={() => copyToClipboard(packageInfo.module || 'N/A', t('appInfo.items.moduleEntry'))}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="wrench" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="wrench" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.typesEntry')}
                         description={packageInfo.types || 'N/A'}
                         onPress={() => copyToClipboard(packageInfo.types || 'N/A', t('appInfo.items.typesEntry'))}
@@ -210,27 +214,27 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* System Information */}
                 <SettingsListGroup title={t('appInfo.sections.system')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="cellphone" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="cellphone" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.platform')}
                         description={Platform.OS}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="chip" color={themeStyles.colors.iconData} />}
+                        icon={<SettingsIcon name="chip" color={themeColors.iconData} />}
                         title={t('appInfo.items.platformVersion')}
                         description={systemInfo?.version || t('common.status.loading')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="resize" color={themeStyles.colors.iconStorage} />}
+                        icon={<SettingsIcon name="resize" color={themeColors.iconStorage} />}
                         title={t('appInfo.items.screenWidth')}
                         description={`${systemInfo?.screenDimensions.width || 0}px`}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="resize" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="resize" color={themeColors.iconSharing} />}
                         title={t('appInfo.items.screenHeight')}
                         description={`${systemInfo?.screenDimensions.height || 0}px`}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="cog" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="cog" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.environment')}
                         description={__DEV__ ? t('appInfo.items.development') : t('appInfo.items.production')}
                     />
@@ -239,20 +243,20 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* User Information */}
                 <SettingsListGroup title={t('appInfo.sections.user')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="shield-check" color={isAuthenticated ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="shield-check" color={isAuthenticated ? themeColors.iconPersonalInfo : themeColors.iconSharing} />}
                         title={t('appInfo.items.authStatus')}
                         description={isAuthenticated ? t('appInfo.items.authenticated') : t('appInfo.items.notAuthenticated')}
                     />
                     {user && (
                         <>
                             <SettingsListItem
-                                icon={<SettingsIcon name="account" color={themeStyles.colors.iconSecurity} />}
+                                icon={<SettingsIcon name="account" color={themeColors.iconSecurity} />}
                                 title={t('appInfo.items.userId')}
                                 description={user.id}
                                 onPress={() => copyToClipboard(user.id, t('appInfo.items.userId'))}
                             />
                             <SettingsListItem
-                                icon={<SettingsIcon name="at" color={themeStyles.colors.iconData} />}
+                                icon={<SettingsIcon name="at" color={themeColors.iconData} />}
                                 title={t('appInfo.items.username')}
                                 description={user.username || 'N/A'}
                                 onPress={() => {
@@ -264,7 +268,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 }}
                             />
                             <SettingsListItem
-                                icon={<SettingsIcon name="email" color={themeStyles.colors.iconStorage} />}
+                                icon={<SettingsIcon name="email" color={themeColors.iconStorage} />}
                                 title={t('appInfo.items.email')}
                                 description={user.email || 'N/A'}
                             />
@@ -276,7 +280,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         </>
                     )}
                     <SettingsListItem
-                        icon={<SettingsIcon name="account-group" color={themeStyles.colors.iconPersonalInfo} />}
+                        icon={<SettingsIcon name="account-group" color={themeColors.iconPersonalInfo} />}
                         title={t('appInfo.items.totalActiveSessions')}
                         description={sessions?.length?.toString() || '0'}
                     />
@@ -285,7 +289,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* API Configuration */}
                 <SettingsListGroup title={t('appInfo.sections.api')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="server" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="server" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.apiBaseUrl')}
                         description={oxyServices?.getBaseURL() || t('appInfo.items.notConfigured')}
                         onPress={() => copyToClipboard(oxyServices?.getBaseURL() || t('appInfo.items.notConfigured'), t('appInfo.items.apiBaseUrl'))}
@@ -293,7 +297,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                     <SettingsListItem
                         icon={<SettingsIcon
                             name={connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off'}
-                            color={connectionStatus === 'checking' ? themeStyles.colors.iconStorage : connectionStatus === 'connected' ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing}
+                            color={connectionStatus === 'checking' ? themeColors.iconStorage : connectionStatus === 'connected' ? themeColors.iconPersonalInfo : themeColors.iconSharing}
                         />}
                         title={t('appInfo.items.connectionStatus')}
                         description={connectionStatus === 'checking' ? t('appInfo.items.checking') : connectionStatus === 'connected' ? t('appInfo.items.connected') : connectionStatus === 'disconnected' ? t('appInfo.items.disconnected') : t('appInfo.items.unknown')}
@@ -321,7 +325,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* Build Information */}
                 <SettingsListGroup title={t('appInfo.sections.build')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="clock" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="clock" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.buildTimestamp')}
                         description={systemInfo?.timestamp || t('common.status.loading')}
                         onPress={() => copyToClipboard(systemInfo?.timestamp || t('common.status.loading'), t('appInfo.items.buildTimestamp'))}
@@ -332,7 +336,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                         description={t('appInfo.items.reactNativeValue')}
                     />
                     <SettingsListItem
-                        icon={<SettingsIcon name="flash" color={themeStyles.colors.iconSharing} />}
+                        icon={<SettingsIcon name="flash" color={themeColors.iconSharing} />}
                         title={t('appInfo.items.jsEngine')}
                         description={t('appInfo.items.jsEngineValue')}
                     />
@@ -341,7 +345,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                 {/* Quick Actions */}
                 <SettingsListGroup title={t('appInfo.sections.quickActions')}>
                     <SettingsListItem
-                        icon={<SettingsIcon name="content-copy" color={themeStyles.colors.iconSecurity} />}
+                        icon={<SettingsIcon name="content-copy" color={themeColors.iconSecurity} />}
                         title={t('appInfo.items.copyFullReport')}
                         description={t('appInfo.items.copyFullReportSubtitle')}
                         onPress={handleCopyFullReport}

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -13,8 +13,7 @@ import {
 } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import type { BaseScreenProps } from '../types/navigation';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { normalizeTheme } from '../utils/themeUtils';
 import { Header } from '../components';
 import { useI18n } from '../hooks/useI18n';
@@ -78,10 +77,8 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
     const { user } = useOxy();
     const { t } = useI18n();
     const { saveProfile, updateField, isSaving } = useProfileEditing();
-    const colorScheme = useColorScheme();
+    const bloomTheme = useTheme();
     const normalizedTheme = normalizeTheme(theme);
-    const themeStyles = useThemeStyles(normalizedTheme, colorScheme);
-    const colors = themeStyles.colors;
 
     // State for field values
     const [fieldValues, setFieldValues] = useState<Record<string, string>>({});
@@ -417,24 +414,24 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
 
         return (
             <View key={field.key} style={styles.inputGroup}>
-                <Text style={[styles.label, { color: colors.text }]}>
+                <Text style={[styles.label, { color: bloomTheme.colors.text }]}>
                     {field.label}
                 </Text>
                 <TextInput
                     style={[
                         isTextarea ? styles.textArea : styles.input,
                         {
-                            backgroundColor: colors.card,
-                            color: colors.text,
-                            borderColor: fieldErrors[field.key] ? '#FF3B30' : colors.border,
+                            backgroundColor: bloomTheme.colors.card,
+                            color: bloomTheme.colors.text,
+                            borderColor: fieldErrors[field.key] ? '#FF3B30' : bloomTheme.colors.border,
                         },
                     ]}
                     value={fieldValues[field.key] || ''}
                     onChangeText={(value) => handleFieldChange(field.key, value)}
                     placeholder={field.placeholder}
-                    placeholderTextColor={colors.secondaryText}
+                    placeholderTextColor={bloomTheme.colors.textSecondary}
                     autoFocus={index === 0}
-                    selectionColor={colors.tint}
+                    selectionColor={bloomTheme.colors.primary}
                     {...field.inputProps}
                 />
                 {fieldErrors[field.key] && (
@@ -459,23 +456,23 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
         return (
             <>
                 <View style={styles.inputGroup}>
-                    <Text style={[styles.label, { color: colors.text }]}>{addLabel}</Text>
+                    <Text style={[styles.label, { color: bloomTheme.colors.text }]}>{addLabel}</Text>
                     <View style={styles.addItemRow}>
                         <TextInput
                             style={[
                                 styles.input,
                                 {
-                                    backgroundColor: colors.card,
-                                    color: colors.text,
-                                    borderColor: colors.border,
+                                    backgroundColor: bloomTheme.colors.card,
+                                    color: bloomTheme.colors.text,
+                                    borderColor: bloomTheme.colors.border,
                                     flex: 1,
                                 },
                             ]}
                             value={newItemValue}
                             onChangeText={setNewItemValue}
                             placeholder={placeholder}
-                            placeholderTextColor={colors.secondaryText}
-                            selectionColor={colors.tint}
+                            placeholderTextColor={bloomTheme.colors.textSecondary}
+                            selectionColor={bloomTheme.colors.primary}
                             autoCapitalize="none"
                             autoCorrect={false}
                             onSubmitEditing={handleAddItem}
@@ -485,7 +482,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                         <TouchableOpacity
                             style={[
                                 styles.addButton,
-                                { backgroundColor: newItemValue.trim() ? colors.tint : colors.border }
+                                { backgroundColor: newItemValue.trim() ? bloomTheme.colors.primary : bloomTheme.colors.border }
                             ]}
                             onPress={handleAddItem}
                             disabled={!newItemValue.trim()}
@@ -497,7 +494,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
 
                 {listItems.length > 0 && (
                     <View style={styles.listSection}>
-                        <Text style={[styles.listTitle, { color: colors.text }]}>
+                        <Text style={[styles.listTitle, { color: bloomTheme.colors.text }]}>
                             {listTitle} ({listItems.length})
                         </Text>
                         {listItems.map((item: any) => (
@@ -505,18 +502,18 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                                 key={item.id}
                                 style={[
                                     styles.listItem,
-                                    { backgroundColor: colors.card, borderColor: colors.border }
+                                    { backgroundColor: bloomTheme.colors.card, borderColor: bloomTheme.colors.border }
                                 ]}
                             >
                                 {fieldType === 'links' && item.image && (
                                     <Image source={{ uri: item.image }} style={styles.linkImage} />
                                 )}
                                 <View style={styles.listItemContent}>
-                                    <Text style={[styles.listItemTitle, { color: colors.text }]} numberOfLines={1}>
+                                    <Text style={[styles.listItemTitle, { color: bloomTheme.colors.text }]} numberOfLines={1}>
                                         {fieldType === 'locations' ? item.name : (item.title || item.url)}
                                     </Text>
                                     {fieldType === 'links' && (
-                                        <Text style={[styles.listItemSubtitle, { color: colors.secondaryText }]} numberOfLines={1}>
+                                        <Text style={[styles.listItemSubtitle, { color: bloomTheme.colors.textSecondary }]} numberOfLines={1}>
                                             {item.url}
                                         </Text>
                                     )}
@@ -537,7 +534,8 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
 
     return (
         <KeyboardAvoidingView
-            style={[styles.container, { backgroundColor: normalizedTheme === 'dark' ? '#000000' : '#F5F5F5' }]}
+            style={styles.container}
+            className="bg-background"
             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         >
             <Header
@@ -563,18 +561,18 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
             >
                 {/* Big Title */}
                 <View style={styles.titleContainer}>
-                    <Text style={[styles.bigTitle, { color: colors.text }]}>
+                    <Text style={[styles.bigTitle, { color: bloomTheme.colors.text }]}>
                         {fieldConfig.title}
                     </Text>
                     {fieldConfig.subtitle && (
-                        <Text style={[styles.bigSubtitle, { color: colors.secondaryText }]}>
+                        <Text style={[styles.bigSubtitle, { color: bloomTheme.colors.textSecondary }]}>
                             {fieldConfig.subtitle}
                         </Text>
                     )}
                 </View>
 
                 {/* Form Content */}
-                <View style={[styles.formCard, { backgroundColor: colors.card }]}>
+                <View style={[styles.formCard, { backgroundColor: bloomTheme.colors.card }]}>
                     {fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField)}
                 </View>
             </ScrollView>

package/src/ui/screens/FAQScreen.tsx

@@ -14,7 +14,7 @@ import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
 import { Header, LoadingState, EmptyState } from '../components';
 import { useI18n } from '../hooks/useI18n';
-import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 
 interface FAQ {
@@ -31,7 +31,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const { oxyServices } = useOxy();
     const { t } = useI18n();
-    const themeStyles = useThemeStyles(theme || 'light');
+    const bloomTheme = useTheme();
 
     const [faqs, setFaqs] = useState<FAQ[]>([]);
     const [isLoading, setIsLoading] = useState(true);
@@ -93,10 +93,10 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
         });
     }, []);
 
-    const styles = useMemo(() => createStyles(themeStyles), [themeStyles]);
+    const styles = useMemo(() => createStyles(), []);
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+        <View style={styles.container} className="bg-background">
             <Header
                 title={t('faq.title') || 'FAQ'}
                 onBack={goBack || onClose}
@@ -106,12 +106,12 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
 
             {/* Search bar */}
             <View style={styles.searchContainer}>
-                <View style={[styles.searchInputWrapper, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor }]}>
-                    <Ionicons name="search" size={20} color={themeStyles.mutedTextColor} style={styles.searchIcon} />
+                <View style={[styles.searchInputWrapper, { backgroundColor: bloomTheme.colors.backgroundSecondary, borderColor: bloomTheme.colors.border }]}>
+                    <Ionicons name="search" size={20} color={bloomTheme.colors.textSecondary} style={styles.searchIcon} />
                     <TextInput
-                        style={[styles.searchInput, { color: themeStyles.textColor }]}
+                        style={[styles.searchInput, { color: bloomTheme.colors.text }]}
                         placeholder={t('faq.searchPlaceholder') || 'Search FAQs...'}
-                        placeholderTextColor={themeStyles.mutedTextColor}
+                        placeholderTextColor={bloomTheme.colors.textSecondary}
                         value={searchQuery}
                         onChangeText={setSearchQuery}
                         accessibilityLabel="Search FAQs"
@@ -122,7 +122,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                             accessibilityRole="button"
                             accessibilityLabel="Clear search"
                         >
-                            <Ionicons name="close-circle" size={20} color={themeStyles.mutedTextColor} />
+                            <Ionicons name="close-circle" size={20} color={bloomTheme.colors.textSecondary} />
                         </TouchableOpacity>
                     )}
                 </View>
@@ -140,7 +140,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                         style={[
                             styles.categoryChip,
                             !selectedCategory && styles.categoryChipActive,
-                            { backgroundColor: !selectedCategory ? themeStyles.primaryColor : themeStyles.secondaryBackgroundColor }
+                            { backgroundColor: !selectedCategory ? bloomTheme.colors.primary : bloomTheme.colors.backgroundSecondary }
                         ]}
                         onPress={() => setSelectedCategory(null)}
                         accessibilityRole="button"
@@ -149,7 +149,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                     >
                         <Text style={[
                             styles.categoryChipText,
-                            { color: !selectedCategory ? '#FFFFFF' : themeStyles.textColor }
+                            { color: !selectedCategory ? '#FFFFFF' : bloomTheme.colors.text }
                         ]}>
                             {t('faq.allCategories') || 'All'}
                         </Text>
@@ -160,7 +160,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                             style={[
                                 styles.categoryChip,
                                 selectedCategory === cat && styles.categoryChipActive,
-                                { backgroundColor: selectedCategory === cat ? themeStyles.primaryColor : themeStyles.secondaryBackgroundColor }
+                                { backgroundColor: selectedCategory === cat ? bloomTheme.colors.primary : bloomTheme.colors.backgroundSecondary }
                             ]}
                             onPress={() => setSelectedCategory(cat)}
                             accessibilityRole="button"
@@ -169,7 +169,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                         >
                             <Text style={[
                                 styles.categoryChipText,
-                                { color: selectedCategory === cat ? '#FFFFFF' : themeStyles.textColor }
+                                { color: selectedCategory === cat ? '#FFFFFF' : bloomTheme.colors.text }
                             ]}>
                                 {cat}
                             </Text>
@@ -182,12 +182,12 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                 {isLoading ? (
                     <LoadingState
                         message={t('faq.loading') || 'Loading FAQs...'}
-                        color={themeStyles.textColor}
+                        color={bloomTheme.colors.text}
                     />
                 ) : filteredFaqs.length === 0 ? (
                     <EmptyState
                         message={searchQuery ? (t('faq.noResults') || 'No FAQs match your search') : (t('faq.empty') || 'No FAQs available')}
-                        textColor={themeStyles.textColor}
+                        textColor={bloomTheme.colors.text}
                     />
                 ) : (
                     filteredFaqs.map((faq, index) => {
@@ -197,7 +197,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                                 key={faq.id}
                                 style={[
                                     styles.faqItem,
-                                    { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor: themeStyles.borderColor },
+                                    { backgroundColor: bloomTheme.colors.backgroundSecondary, borderColor: bloomTheme.colors.border },
                                     index === 0 && styles.faqItemFirst,
                                 ]}
                             >
@@ -209,23 +209,23 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
                                     accessibilityHint={isExpanded ? 'Collapse answer' : 'Expand answer'}
                                     accessibilityState={{ expanded: isExpanded }}
                                 >
-                                    <Text style={[styles.faqQuestionText, { color: themeStyles.textColor }]}>
+                                    <Text style={[styles.faqQuestionText, { color: bloomTheme.colors.text }]}>
                                         {faq.question}
                                     </Text>
                                     <Ionicons
                                         name={isExpanded ? 'chevron-up' : 'chevron-down'}
                                         size={20}
-                                        color={themeStyles.mutedTextColor}
+                                        color={bloomTheme.colors.textSecondary}
                                     />
                                 </TouchableOpacity>
                                 {isExpanded && (
-                                    <View style={[styles.faqAnswer, { borderTopColor: themeStyles.borderColor }]}>
-                                        <Text style={[styles.faqAnswerText, { color: themeStyles.mutedTextColor }]}>
+                                    <View style={[styles.faqAnswer, { borderTopColor: bloomTheme.colors.border }]}>
+                                        <Text style={[styles.faqAnswerText, { color: bloomTheme.colors.textSecondary }]}>
                                             {faq.answer}
                                         </Text>
                                         <View style={styles.faqCategory}>
-                                            <Ionicons name="pricetag-outline" size={14} color={themeStyles.primaryColor} />
-                                            <Text style={[styles.faqCategoryText, { color: themeStyles.primaryColor }]}>
+                                            <Ionicons name="pricetag-outline" size={14} color={bloomTheme.colors.primary} />
+                                            <Text style={[styles.faqCategoryText, { color: bloomTheme.colors.primary }]}>
                                                 {faq.category}
                                             </Text>
                                         </View>
@@ -240,7 +240,7 @@ const FAQScreen: React.FC<BaseScreenProps> = ({
     );
 };
 
-const createStyles = (themeStyles: any) => StyleSheet.create({
+const createStyles = () => StyleSheet.create({
     container: {
         flex: 1,
     },