@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/AppInfoScreen.tsx

@@ -13,8 +13,7 @@ import {
     ScrollView,
     ActivityIndicator,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { fontFamilies } from '../styles/fonts';
 import { packageInfo } from '../../constants/version';
 import { toast } from '../../lib/sonner';
@@ -23,6 +22,9 @@ import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
 import OxyServicesLogo from '../../assets/icons/OxyServices';
 import { Section, GroupedSection } from '../components';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { useOxy } from '../context/OxyContext';
 
 
 interface SystemInfo {
@@ -40,14 +42,17 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, sessions, oxyServices, isAuthenticated } = useOxy();
     const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
     const [isRunningSystemCheck, setIsRunningSystemCheck] = useState(false);
     const [connectionStatus, setConnectionStatus] = useState<'checking' | 'connected' | 'disconnected' | 'unknown'>('unknown');
 
-    const isDarkTheme = theme === 'dark';
-    const backgroundColor = isDarkTheme ? '#121212' : '#f2f2f2';
-    const primaryColor = '#007AFF';
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    // AppInfoScreen uses a slightly different light background
+    const backgroundColor = themeStyles.isDarkTheme ? themeStyles.backgroundColor : '#f2f2f2';
+    const primaryColor = themeStyles.colors.iconSecurity;
 
     useEffect(() => {
         const updateDimensions = () => {
@@ -165,13 +170,13 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
 
             <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
                 {/* Package Information */}
-                <Section title="Package Information" theme={theme}>
+                <Section title="Package Information" >
                     <GroupedSection
                         items={[
                             {
                                 id: 'name',
                                 icon: 'information-circle',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Name',
                                 subtitle: packageInfo.name,
                                 onPress: () => copyToClipboard(packageInfo.name, 'Package name'),
@@ -180,7 +185,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'version',
                                 icon: 'pricetag',
-                                iconColor: '#5856D6',
+                                iconColor: themeStyles.colors.iconData,
                                 title: 'Version',
                                 subtitle: packageInfo.version,
                                 onPress: () => copyToClipboard(packageInfo.version, 'Version'),
@@ -188,14 +193,14 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'description',
                                 icon: 'document-text',
-                                iconColor: '#34C759',
+                                iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Description',
                                 subtitle: packageInfo.description || 'No description',
                             },
                             {
                                 id: 'main-entry',
                                 icon: 'code',
-                                iconColor: '#FF9500',
+                                iconColor: themeStyles.colors.iconStorage,
                                 title: 'Main Entry',
                                 subtitle: packageInfo.main || 'N/A',
                                 onPress: () => copyToClipboard(packageInfo.main || 'N/A', 'Main entry'),
@@ -203,7 +208,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'module-entry',
                                 icon: 'library',
-                                iconColor: '#FF3B30',
+                                iconColor: themeStyles.colors.iconSharing,
                                 title: 'Module Entry',
                                 subtitle: packageInfo.module || 'N/A',
                                 onPress: () => copyToClipboard(packageInfo.module || 'N/A', 'Module entry'),
@@ -211,68 +216,66 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'types-entry',
                                 icon: 'construct',
-                                iconColor: '#32D74B',
+                                iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Types Entry',
                                 subtitle: packageInfo.types || 'N/A',
                                 onPress: () => copyToClipboard(packageInfo.types || 'N/A', 'Types entry'),
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
 
                 {/* System Information */}
-                <Section title="System Information" theme={theme}>
+                <Section title="System Information" >
                     <GroupedSection
                         items={[
                             {
                                 id: 'platform',
                                 icon: 'phone-portrait',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Platform',
                                 subtitle: Platform.OS,
                             },
                             {
                                 id: 'platform-version',
                                 icon: 'hardware-chip',
-                                iconColor: '#5856D6',
+                                iconColor: themeStyles.colors.iconData,
                                 title: 'Platform Version',
                                 subtitle: systemInfo?.version || 'Loading...',
                             },
                             {
                                 id: 'screen-width',
                                 icon: 'resize',
-                                iconColor: '#FF9500',
+                                iconColor: themeStyles.colors.iconStorage,
                                 title: 'Screen Width',
                                 subtitle: `${systemInfo?.screenDimensions.width || 0}px`,
                             },
                             {
                                 id: 'screen-height',
                                 icon: 'resize',
-                                iconColor: '#FF3B30',
+                                iconColor: themeStyles.colors.iconSharing,
                                 title: 'Screen Height',
                                 subtitle: `${systemInfo?.screenDimensions.height || 0}px`,
                             },
                             {
                                 id: 'environment',
                                 icon: 'settings',
-                                iconColor: '#34C759',
+                                iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Environment',
                                 subtitle: __DEV__ ? 'Development' : 'Production',
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
 
                 {/* User Information */}
-                <Section title="User Information" theme={theme}>
+                <Section title="User Information" >
                     <GroupedSection
                         items={[
                             {
                                 id: 'auth-status',
                                 icon: 'shield-checkmark',
-                                iconColor: isAuthenticated ? '#34C759' : '#FF3B30',
+                                iconColor: isAuthenticated ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing,
                                 title: 'Authentication Status',
                                 subtitle: isAuthenticated ? 'Authenticated' : 'Not Authenticated',
                             },
@@ -280,7 +283,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 {
                                     id: 'user-id',
                                     icon: 'person',
-                                    iconColor: '#007AFF',
+                                    iconColor: themeStyles.colors.iconSecurity,
                                     title: 'User ID',
                                     subtitle: user.id,
                                     onPress: () => copyToClipboard(user.id, 'User ID'),
@@ -288,7 +291,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 {
                                     id: 'username',
                                     icon: 'at',
-                                    iconColor: '#5856D6',
+                                    iconColor: themeStyles.colors.iconData,
                                     title: 'Username',
                                     subtitle: user.username || 'N/A',
                                     onPress: () => {
@@ -302,7 +305,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 {
                                     id: 'email',
                                     icon: 'mail',
-                                    iconColor: '#FF9500',
+                                    iconColor: themeStyles.colors.iconStorage,
                                     title: 'Email',
                                     subtitle: user.email || 'N/A',
                                 },
@@ -317,23 +320,22 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'active-sessions',
                                 icon: 'people',
-                                iconColor: '#32D74B',
+                                iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: 'Total Active Sessions',
                                 subtitle: sessions?.length?.toString() || '0',
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
 
                 {/* API Configuration */}
-                <Section title="API Configuration" theme={theme}>
+                <Section title="API Configuration" >
                     <GroupedSection
                         items={[
                             {
                                 id: 'api-base-url',
                                 icon: 'server',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: 'API Base URL',
                                 subtitle: oxyServices?.getBaseURL() || 'Not configured',
                                 onPress: () => copyToClipboard(oxyServices?.getBaseURL() || 'Not configured', 'API Base URL'),
@@ -341,7 +343,7 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'connection-status',
                                 icon: connectionStatus === 'checking' ? 'sync' : connectionStatus === 'connected' ? 'wifi' : 'wifi-off',
-                                iconColor: connectionStatus === 'checking' ? '#FF9500' : connectionStatus === 'connected' ? '#34C759' : '#FF3B30',
+                                iconColor: connectionStatus === 'checking' ? themeStyles.colors.iconStorage : connectionStatus === 'connected' ? themeStyles.colors.iconPersonalInfo : themeStyles.colors.iconSharing,
                                 title: 'Connection Status',
                                 subtitle: connectionStatus === 'checking' ? 'Checking...' : connectionStatus === 'connected' ? 'Connected' : connectionStatus === 'disconnected' ? 'Disconnected' : 'Unknown',
                                 onPress: async () => {
@@ -364,18 +366,17 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 },
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
 
                 {/* Build Information */}
-                <Section title="Build Information" theme={theme}>
+                <Section title="Build Information" >
                     <GroupedSection
                         items={[
                             {
                                 id: 'build-timestamp',
                                 icon: 'time',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Build Timestamp',
                                 subtitle: systemInfo?.timestamp || 'Loading...',
                                 onPress: () => copyToClipboard(systemInfo?.timestamp || 'Loading...', 'Build timestamp'),
@@ -390,23 +391,22 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'js-engine',
                                 icon: 'flash',
-                                iconColor: '#FF3B30',
+                                iconColor: themeStyles.colors.iconSharing,
                                 title: 'JavaScript Engine',
                                 subtitle: 'Hermes',
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
 
                 {/* Quick Actions */}
-                <Section title="Quick Actions" theme={theme}>
+                <Section title="Quick Actions" >
                     <GroupedSection
                         items={[
                             {
                                 id: 'copy-full-report',
                                 icon: 'copy',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: 'Copy Full Report',
                                 subtitle: 'Copy complete application information to clipboard',
                                 onPress: handleCopyFullReport,
@@ -426,7 +426,6 @@ const AppInfoScreen: React.FC<BaseScreenProps> = ({
                                 ) : null,
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
             </ScrollView>

package/src/ui/screens/FeedbackScreen.tsx

@@ -14,14 +14,16 @@ import {
     Alert,
     Dimensions,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import { useThemeColors } from '../styles';
+import { normalizeTheme } from '../utils/themeUtils';
 import { Ionicons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { packageInfo } from '../../constants/version';
 import { GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useOxy } from '../context/OxyContext';
+import { screenContentStyle } from '../constants/spacing';
 
 // Types for better type safety
 interface FeedbackData {
@@ -72,9 +74,7 @@ const createStyles = (colors: any, theme: string) => StyleSheet.create({
     },
     scrollContent: {
         flexGrow: 1,
-        paddingHorizontal: 24,
-        paddingTop: 40,
-        paddingBottom: 20,
+        ...screenContentStyle,
     },
     stepContainer: {
         flex: 1,
@@ -512,8 +512,10 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
 }) => {
+    // Use useOxy() hook for OxyContext values
     const { user, oxyServices } = useOxy();
-    const colors = useThemeColors(theme);
+    const normalizedTheme = normalizeTheme(theme);
+    const colors = useThemeColors(normalizedTheme);
     const { t } = useI18n();
 
     // Form state
@@ -528,7 +530,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
     const slideAnim = useRef(new Animated.Value(0)).current;
 
     // Memoized styles
-    const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
+    const styles = useMemo(() => createStyles(colors, normalizedTheme), [colors, normalizedTheme]);
 
     // Animation functions
     const animateTransition = useCallback((nextStep: number) => {
@@ -609,8 +611,9 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 } : undefined,
             };
 
-            // For now, we'll simulate the API call
-            // In a real implementation, you would call oxyServices.submitFeedback(feedbackPayload)
+            // TODO: Implement actual API integration
+            // Replace setTimeout simulation with actual API call: await oxyServices.submitFeedback(feedbackPayload)
+            // Currently simulates API call with setTimeout for development/testing purposes
             await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API call
 
             setFeedbackState({ status: 'success', message: t('feedback.toasts.submitSuccess') || 'Feedback submitted successfully!' });
@@ -679,14 +682,14 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
                 </Text>
             </View>
             <View style={styles.fullBleed}>
-                <GroupedSection items={feedbackTypeItems} theme={theme as 'light' | 'dark'} />
+                <GroupedSection items={feedbackTypeItems} />
             </View>
 
             {feedbackData.type && (
                 <View style={styles.categoryContainer}>
                     <Text style={[styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }]}>{t('feedback.category.label') || 'Category'}</Text>
                     <View style={styles.fullBleed}>
-                        <GroupedSection items={categoryItems} theme={theme as 'light' | 'dark'} />
+                        <GroupedSection items={categoryItems} />
                     </View>
                 </View>
             )}
@@ -775,7 +778,7 @@ const FeedbackScreen: React.FC<BaseScreenProps> = ({
             <View style={{ marginBottom: 24 }}>
                 <Text style={[styles.modernLabel, { color: colors.secondaryText, marginBottom: 8 }]}>{t('feedback.priority.label') || 'Priority Level'}</Text>
                 <View style={styles.fullBleed}>
-                    <GroupedSection items={priorityItems} theme={theme as 'light' | 'dark'} />
+                    <GroupedSection items={priorityItems} />
                 </View>
             </View>