@oxyhq/services 10.5.0 → 11.1.0

package/src/ui/screens/FileManagementScreen.tsx

@@ -1029,8 +1029,8 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const bloomTheme = useTheme();
     const { colors } = bloomTheme;
-    // FileManagementScreen uses a slightly different light background
-    const backgroundColor = bloomTheme.isDark ? colors.background : '#f2f2f2';
+    // FileManagementScreen uses a slightly elevated page background.
+    const backgroundColor = colors.backgroundSecondary;
     const borderColor = colors.border;
 
     const targetUserId = userId || user?.id;
@@ -1984,12 +1984,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         <Text style={[fileManagementStyles.fileName, { color: colors.text }]} numberOfLines={1}>
                             {file.filename}
                         </Text>
-                        <Text style={[fileManagementStyles.fileDetails, { color: bloomTheme.isDark ? '#BBBBBB' : '#666666' }]}>
+                        <Text style={[fileManagementStyles.fileDetails, { color: colors.textSecondary }]}>
                             {formatFileSize(file.length)} • {new Date(file.uploadDate).toLocaleDateString()}
                         </Text>
                         {file.metadata?.description && (
                             <Text
-                                style={[fileManagementStyles.fileDescription, { color: bloomTheme.isDark ? '#AAAAAA' : '#888888' }]}
+                                style={[fileManagementStyles.fileDescription, { color: colors.textTertiary }]}
                                 numberOfLines={2}
                             >
                                 {file.metadata.description}
@@ -2003,7 +2003,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         {/* Preview button for supported files */}
                         {hasPreview && (
                             <TouchableOpacity
-                                style={[fileManagementStyles.actionButton, { backgroundColor: bloomTheme.isDark ? '#333333' : '#F0F0F0' }]}
+                                style={[fileManagementStyles.actionButton, { backgroundColor: colors.backgroundSecondary }]}
                                 onPress={() => handleFileOpen(file)}
                             >
                                 <Ionicons name="eye" size={20} color={colors.primary} />
@@ -2011,7 +2011,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         )}
 
                         <TouchableOpacity
-                            style={[fileManagementStyles.actionButton, { backgroundColor: bloomTheme.isDark ? '#333333' : '#F0F0F0' }]}
+                            style={[fileManagementStyles.actionButton, { backgroundColor: colors.backgroundSecondary }]}
                             onPress={() => handleFileDownload(file.id, file.filename)}
                         >
                             <Ionicons name="download" size={20} color={colors.primary} />
@@ -2019,7 +2019,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
                         {/* Always show delete button for debugging */}
                         <TouchableOpacity
-                            style={[fileManagementStyles.actionButton, { backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE' }]}
+                            style={[fileManagementStyles.actionButton, { backgroundColor: colors.negativeSubtle }]}
                             onPress={() => confirmFileDelete(file.id, file.filename)}
                             disabled={deleting === file.id}
                         >
@@ -2119,20 +2119,20 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     <View style={fileManagementStyles.groupedActions}>
                         {(isImage || isVideo || file.contentType.includes('pdf')) && (
                             <TouchableOpacity
-                                style={[fileManagementStyles.groupedActionBtn, { backgroundColor: bloomTheme.isDark ? '#333333' : '#F0F0F0' }]}
+                                style={[fileManagementStyles.groupedActionBtn, { backgroundColor: colors.backgroundSecondary }]}
                                 onPress={() => handleFileOpen(file)}
                             >
                                 <Ionicons name="eye" size={18} color={colors.primary} />
                             </TouchableOpacity>
                         )}
                         <TouchableOpacity
-                            style={[fileManagementStyles.groupedActionBtn, { backgroundColor: bloomTheme.isDark ? '#333333' : '#F0F0F0' }]}
+                            style={[fileManagementStyles.groupedActionBtn, { backgroundColor: colors.backgroundSecondary }]}
                             onPress={() => handleFileDownload(file.id, file.filename)}
                         >
                             <Ionicons name="download" size={18} color={colors.primary} />
                         </TouchableOpacity>
                         <TouchableOpacity
-                            style={[fileManagementStyles.groupedActionBtn, { backgroundColor: bloomTheme.isDark ? '#400000' : '#FFEBEE' }]}
+                            style={[fileManagementStyles.groupedActionBtn, { backgroundColor: colors.negativeSubtle }]}
                             onPress={() => confirmFileDelete(file.id, file.filename)}
                             disabled={deleting === file.id}
                         >
@@ -2284,9 +2284,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         if (photos.length === 0) {
             return (
                 <View style={fileManagementStyles.emptyState}>
-                    <Ionicons name="images-outline" size={64} color={bloomTheme.isDark ? '#666666' : '#CCCCCC'} />
+                    <Ionicons name="images-outline" size={64} color={colors.textTertiary} />
                     <Text style={[fileManagementStyles.emptyStateTitle, { color: colors.text }]}>{t('fileManagement.emptyPhotos.title')}</Text>
-                    <Text style={[fileManagementStyles.emptyStateDescription, { color: bloomTheme.isDark ? '#BBBBBB' : '#666666' }]}> {
+                    <Text style={[fileManagementStyles.emptyStateDescription, { color: colors.textSecondary }]}> {
                         user?.id === targetUserId
                             ? t('fileManagement.emptyPhotos.ownDescription')
                             : t('fileManagement.emptyPhotos.otherDescription')
@@ -2338,7 +2338,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 {loadingDimensions && (
                     <View style={fileManagementStyles.dimensionsLoadingIndicator}>
                         <ActivityIndicator size="small" color={colors.primary} />
-                        <Text style={[fileManagementStyles.dimensionsLoadingText, { color: bloomTheme.isDark ? '#BBBBBB' : '#666666' }]}>{t('fileManagement.loadingPhotoLayout')}</Text>
+                        <Text style={[fileManagementStyles.dimensionsLoadingText, { color: colors.textSecondary }]}>{t('fileManagement.loadingPhotoLayout')}</Text>
                     </View>
                 )}
 
@@ -2378,9 +2378,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
 
     const renderEmptyState = () => (
         <View style={fileManagementStyles.emptyState}>
-            <Ionicons name="folder-open-outline" size={64} color={bloomTheme.isDark ? '#666666' : '#CCCCCC'} />
+            <Ionicons name="folder-open-outline" size={64} color={colors.textTertiary} />
             <Text style={[fileManagementStyles.emptyStateTitle, { color: colors.text }]}>{t('fileManagement.emptyFiles.title')}</Text>
-            <Text style={[fileManagementStyles.emptyStateDescription, { color: bloomTheme.isDark ? '#BBBBBB' : '#666666' }]}>
+            <Text style={[fileManagementStyles.emptyStateDescription, { color: colors.textSecondary }]}>
                 {user?.id === targetUserId
                     ? t('fileManagement.emptyFiles.ownDescription')
                     : t('fileManagement.emptyFiles.otherDescription')
@@ -2444,7 +2444,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             width,
                             height,
                             borderRadius,
-                            backgroundColor: bloomTheme.isDark ? '#1E1E1E' : '#F5F5F5',
+                            backgroundColor: colors.backgroundSecondary,
                             overflow: 'hidden',
                             position: 'relative',
                         },
@@ -2459,7 +2459,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             left: 0,
                             right: 0,
                             bottom: 0,
-                            backgroundColor: bloomTheme.isDark ? '#1E1E1E' : '#F5F5F5',
+                            backgroundColor: colors.backgroundSecondary,
                         }}
                     />
                     {/* Shimmer gradient effect */}
@@ -2500,7 +2500,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         alignItems: 'center',
                         paddingHorizontal: 16,
                         paddingVertical: 12,
-                        backgroundColor: bloomTheme.isDark ? '#121212' : '#FFFFFF',
+                        backgroundColor: colors.background,
                         borderBottomWidth: StyleSheet.hairlineWidth,
                         borderBottomColor: colors.border,
                     },
@@ -2965,9 +2965,9 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 >
                     {filteredFiles.length === 0 && searchQuery.length > 0 ? (
                         <View style={fileManagementStyles.emptyState}>
-                            <Ionicons name="search" size={64} color={bloomTheme.isDark ? '#666666' : '#CCCCCC'} />
+                            <Ionicons name="search" size={64} color={colors.textTertiary} />
                             <Text style={[fileManagementStyles.emptyStateTitle, { color: colors.text }]}>{t('fileManagement.noResults.title')}</Text>
-                            <Text style={[fileManagementStyles.emptyStateDescription, { color: bloomTheme.isDark ? '#BBBBBB' : '#666666' }]}>
+                            <Text style={[fileManagementStyles.emptyStateDescription, { color: colors.textSecondary }]}>
                                 {t('fileManagement.noResults.description', { query: searchQuery })}
                             </Text>
                             <TouchableOpacity

package/src/ui/screens/HelpSupportScreen.tsx

@@ -1,32 +1,20 @@
 import React, { useMemo } from 'react';
-import {
-    View,
-    StyleSheet,
-    ScrollView,
-    Linking,
-} from 'react-native';
+import { View, ScrollView, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
+import { useTheme } from '@oxyhq/bloom/theme';
 import Header from '../components/Header';
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
-import { useTheme } from '@oxyhq/bloom/theme';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { Colors } from '../constants/theme';
-import { normalizeColorScheme } from '@oxyhq/core';
-import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 const HelpSupportScreen: React.FC<BaseScreenProps> = ({
     onClose,
-    theme,
     goBack,
     navigate,
 }) => {
     const { t } = useI18n();
     const bloomTheme = useTheme();
-    const colorScheme = useColorScheme();
-    const normalizedColorScheme = normalizeColorScheme(colorScheme);
-    const themeColors = Colors[normalizedColorScheme];
 
     const handleContactSupport = useMemo(() => () => {
         Linking.openURL('mailto:support@oxy.so?subject=Support Request').catch(() => {
@@ -48,85 +36,82 @@ const HelpSupportScreen: React.FC<BaseScreenProps> = ({
         });
     }, [t]);
 
+    const handleDocumentation = useMemo(() => () => {
+        Linking.openURL('https://developer.oxy.so/docs').catch(() => {
+            toast.error(t('help.linkError') || 'Failed to open link');
+        });
+    }, [t]);
+
+    const handleCommunity = useMemo(() => () => {
+        Linking.openURL('https://community.oxy.so').catch(() => {
+            toast.error(t('help.linkError') || 'Failed to open link');
+        });
+    }, [t]);
+
+    const handleDevelopersPortal = useMemo(() => () => {
+        Linking.openURL('https://developer.oxy.so').catch(() => {
+            toast.error(t('help.linkError') || 'Failed to open link');
+        });
+    }, [t]);
+
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header
                 title={t('help.title') || 'Help & Support'}
-
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
             />
 
-            <ScrollView style={styles.content}>
-                {/* Help Options */}
-                <SettingsListGroup title={t('help.options') || 'Get Help'}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="help-circle" color={themeColors.iconSecurity} />}
-                        title={t('help.faq.title') || 'Frequently Asked Questions'}
-                        description={t('help.faq.subtitle') || 'Find answers to common questions'}
-                        onPress={handleFAQ}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="email" color={themeColors.iconPersonalInfo} />}
-                        title={t('help.contact.title') || 'Contact Support'}
-                        description={t('help.contact.subtitle') || 'Get help from our support team'}
-                        onPress={handleContactSupport}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="bug" color={themeColors.iconStorage} />}
-                        title={t('help.reportBug.title') || 'Report a Bug'}
-                        description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
-                        onPress={handleReportBug}
-                    />
-                </SettingsListGroup>
+            <ScrollView className="flex-1">
+                <View className="px-screen-margin pb-space-24">
+                    {/* Help Options */}
+                    <SettingsListGroup title={t('help.options') || 'Get Help'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="help-circle" color={bloomTheme.colors.info} />}
+                            title={t('help.faq.title') || 'Frequently Asked Questions'}
+                            description={t('help.faq.subtitle') || 'Find answers to common questions'}
+                            onPress={handleFAQ}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="email" color={bloomTheme.colors.success} />}
+                            title={t('help.contact.title') || 'Contact Support'}
+                            description={t('help.contact.subtitle') || 'Get help from our support team'}
+                            onPress={handleContactSupport}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="bug" color={bloomTheme.colors.warning} />}
+                            title={t('help.reportBug.title') || 'Report a Bug'}
+                            description={t('help.reportBug.subtitle') || 'Help us improve by reporting issues'}
+                            onPress={handleReportBug}
+                        />
+                    </SettingsListGroup>
 
-                {/* Resources */}
-                <SettingsListGroup title={t('help.resources') || 'Resources'}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
-                        title={t('help.documentation.title') || 'Documentation'}
-                        description={t('help.documentation.subtitle') || 'User guides and tutorials'}
-                        onPress={() => {
-                            Linking.openURL('https://developer.oxy.so/docs').catch(() => {
-                                toast.error(t('help.linkError') || 'Failed to open link');
-                            });
-                        }}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="account-group" color={themeColors.iconData} />}
-                        title={t('help.community.title') || 'Community'}
-                        description={t('help.community.subtitle') || 'Join our community'}
-                        onPress={() => {
-                            Linking.openURL('https://community.oxy.so').catch(() => {
-                                toast.error(t('help.linkError') || 'Failed to open link');
-                            });
-                        }}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="code-tags" color={themeColors.iconSharing} />}
-                        title={t('help.developersPortal.title') || 'Developers Portal'}
-                        description={t('help.developersPortal.subtitle') || 'API documentation and developer resources'}
-                        onPress={() => {
-                            Linking.openURL('https://developer.oxy.so').catch(() => {
-                                toast.error(t('help.linkError') || 'Failed to open link');
-                            });
-                        }}
-                    />
-                </SettingsListGroup>
+                    {/* Resources */}
+                    <SettingsListGroup title={t('help.resources') || 'Resources'}>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="file-document" color={bloomTheme.colors.textTertiary} />}
+                            title={t('help.documentation.title') || 'Documentation'}
+                            description={t('help.documentation.subtitle') || 'User guides and tutorials'}
+                            onPress={handleDocumentation}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="account-group" color={bloomTheme.colors.secondary} />}
+                            title={t('help.community.title') || 'Community'}
+                            description={t('help.community.subtitle') || 'Join our community'}
+                            onPress={handleCommunity}
+                        />
+                        <SettingsListItem
+                            icon={<SettingsIcon name="code-tags" color={bloomTheme.colors.error} />}
+                            title={t('help.developersPortal.title') || 'Developers Portal'}
+                            description={t('help.developersPortal.subtitle') || 'API documentation and developer resources'}
+                            onPress={handleDevelopersPortal}
+                        />
+                    </SettingsListGroup>
+                </View>
             </ScrollView>
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flex: 1,
-        padding: 16,
-    },
-});
-
 export default React.memo(HelpSupportScreen);

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '@oxyhq/bloom';
 import Header from '../components/Header';
@@ -9,21 +9,15 @@ import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list'
 import { SettingsIcon } from '../components/SettingsIcon';
 import { useI18n } from '../hooks/useI18n';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { Colors } from '../constants/theme';
-import { normalizeColorScheme } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import { Dialog, useDialogControl } from '@oxyhq/bloom';
 
 interface HistoryItem { id: string; query: string; type: 'search' | 'browse'; timestamp: Date; }
 
-const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }) => {
+const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) => {
     const { user } = useOxy();
     const { t } = useI18n();
     const bloomTheme = useTheme();
-    const colorScheme = useColorScheme();
-    const normalizedColorScheme = normalizeColorScheme(colorScheme);
-    const themeColors = Colors[normalizedColorScheme];
     const [history, setHistory] = useState<HistoryItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isDeleting, setIsDeleting] = useState(false);
@@ -93,37 +87,39 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: bloomTheme.colors.background }]}>
+        <View className="flex-1 bg-bg">
             <Header title={t('history.title') || 'History'} onBack={goBack || onClose} variant="minimal" elevation="subtle" />
-            <ScrollView style={styles.content}>
-                <SettingsListGroup title={t('history.actions') || 'Actions'}>
-                    <SettingsListItem
-                        icon={<SettingsIcon name="clock-outline" color={themeColors.iconStorage} />}
-                        title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
-                        description={t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries'}
-                        onPress={() => deleteLast15Dialog.open()}
-                        disabled={isDeleting || history.length === 0}
-                    />
-                    <SettingsListItem
-                        icon={<SettingsIcon name="delete-outline" color={themeColors.iconSharing} />}
-                        title={t('history.clearAll.title') || 'Clear All History'}
-                        description={t('history.clearAll.subtitle') || 'Remove all history entries'}
-                        onPress={() => clearAllDialog.open()}
-                        disabled={isDeleting || history.length === 0}
-                    />
-                </SettingsListGroup>
-                <SettingsListGroup title={t('history.recent') || 'Recent History'}>
-                    {isLoading ? <LoadingState message={t('history.loading') || 'Loading history...'} color={bloomTheme.colors.text} />
-                     : history.length === 0 ? <EmptyState message={t('history.empty') || 'No history yet'} textColor={bloomTheme.colors.text} />
-                     : history.map(item => (
+            <ScrollView className="flex-1">
+                <View className="px-screen-margin pb-space-24">
+                    <SettingsListGroup title={t('history.actions') || 'Actions'}>
                         <SettingsListItem
-                            key={item.id}
-                            icon={<SettingsIcon name={item.type === 'search' ? 'magnify' : 'earth'} color={item.type === 'search' ? themeColors.iconSecurity : themeColors.iconPersonalInfo} />}
-                            title={item.query}
-                            description={formatTime(item.timestamp)}
+                            icon={<SettingsIcon name="clock-outline" color={bloomTheme.colors.warning} />}
+                            title={t('history.deleteLast15Minutes.title') || 'Delete Last 15 Minutes'}
+                            description={t('history.deleteLast15Minutes.subtitle') || 'Remove recent history entries'}
+                            onPress={() => deleteLast15Dialog.open()}
+                            disabled={isDeleting || history.length === 0}
                         />
-                    ))}
-                </SettingsListGroup>
+                        <SettingsListItem
+                            icon={<SettingsIcon name="delete-outline" color={bloomTheme.colors.error} />}
+                            title={t('history.clearAll.title') || 'Clear All History'}
+                            description={t('history.clearAll.subtitle') || 'Remove all history entries'}
+                            onPress={() => clearAllDialog.open()}
+                            disabled={isDeleting || history.length === 0}
+                        />
+                    </SettingsListGroup>
+                    <SettingsListGroup title={t('history.recent') || 'Recent History'}>
+                        {isLoading ? <LoadingState message={t('history.loading') || 'Loading history...'} color={bloomTheme.colors.text} />
+                         : history.length === 0 ? <EmptyState message={t('history.empty') || 'No history yet'} textColor={bloomTheme.colors.text} />
+                         : history.map(item => (
+                            <SettingsListItem
+                                key={item.id}
+                                icon={<SettingsIcon name={item.type === 'search' ? 'magnify' : 'earth'} color={item.type === 'search' ? bloomTheme.colors.info : bloomTheme.colors.primary} />}
+                                title={item.query}
+                                description={formatTime(item.timestamp)}
+                            />
+                        ))}
+                    </SettingsListGroup>
+                </View>
             </ScrollView>
             <Dialog
                 control={deleteLast15Dialog}
@@ -147,6 +143,4 @@ const HistoryViewScreen: React.FC<BaseScreenProps> = ({ onClose, theme, goBack }
     );
 };
 
-const styles = StyleSheet.create({ container: { flex: 1 }, content: { flex: 1, padding: 16 } });
-
 export default React.memo(HistoryViewScreen);