@oxyhq/services 5.14.0 → 5.15.1

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -1,17 +1,16 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import {
     View,
-    Text,
-    TouchableOpacity,
     StyleSheet,
     ScrollView,
-    ActivityIndicator,
     Linking,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
+import type { BaseScreenProps } from '../types/navigation';
 import { toast } from '../../lib/sonner';
-import { Header, Section, GroupedSection } from '../components';
+import { Header, Section, GroupedSection, LoadingState } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
 
 const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
     onClose,
@@ -21,6 +20,8 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
 }) => {
     const { t } = useI18n();
     const [loading, setLoading] = useState(false);
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
 
     // Policy URLs from Oxy Transparency Center
     const POLICY_URLS = {
@@ -64,16 +65,6 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
         };
     }, [t]);
 
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-        };
-    }, [theme]);
-
     // If a specific document type is requested, open it directly
     React.useEffect(() => {
         if (documentType) {
@@ -101,17 +92,14 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
             <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
                 <Header
                     title={getPolicyTitle(documentType)}
-                    theme={theme}
                     onBack={goBack || onClose}
                     variant="minimal"
                     elevation="subtle"
                 />
-                <View style={styles.loadingContainer}>
-                    <ActivityIndicator size="large" color={themeStyles.textColor} />
-                    <Text style={[styles.loadingText, { color: themeStyles.textColor }]}>
-                        {t('legal.opening') || 'Opening document...'}
-                    </Text>
-                </View>
+                <LoadingState
+                    message={t('legal.opening') || 'Opening document...'}
+                    color={themeStyles.textColor}
+                />
             </View>
         );
     }
@@ -121,20 +109,19 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             <Header
                 title={t('legal.title') || 'Legal Documents'}
-                theme={theme}
                 onBack={goBack || onClose}
                 variant="minimal"
                 elevation="subtle"
             />
 
             <ScrollView style={styles.content}>
-                <Section title={t('legal.policies') || 'Policies & Guidelines'} theme={theme} isFirst={true}>
+                <Section title={t('legal.policies') || 'Policies & Guidelines'}  isFirst={true}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'privacy-policy',
                                 icon: 'shield-checkmark',
-                                iconColor: '#30D158',
+                                iconColor: themeStyles.colors.iconPersonalInfo,
                                 title: t('legal.privacyPolicy.title') || 'Privacy Policy',
                                 subtitle: t('legal.privacyPolicy.subtitle') || 'How we handle your data',
                                 onPress: handleOpenPolicy('privacy'),
@@ -142,7 +129,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'terms-of-service',
                                 icon: 'document-text',
-                                iconColor: '#007AFF',
+                                iconColor: themeStyles.colors.iconSecurity,
                                 title: t('legal.termsOfService.title') || 'Terms of Service',
                                 subtitle: t('legal.termsOfService.subtitle') || 'Terms and conditions of use',
                                 onPress: handleOpenPolicy('terms'),
@@ -150,7 +137,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'community-guidelines',
                                 icon: 'people',
-                                iconColor: '#5856D6',
+                                iconColor: themeStyles.colors.iconData,
                                 title: t('legal.communityGuidelines.title') || 'Community Guidelines',
                                 subtitle: t('legal.communityGuidelines.subtitle') || 'Rules and expectations for our community',
                                 onPress: handleOpenPolicy('community'),
@@ -158,7 +145,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'data-retention',
                                 icon: 'time',
-                                iconColor: '#FF9500',
+                                iconColor: themeStyles.colors.iconStorage,
                                 title: t('legal.dataRetention.title') || 'Data Retention Policy',
                                 subtitle: t('legal.dataRetention.subtitle') || 'How long we keep your data',
                                 onPress: handleOpenPolicy('dataRetention'),
@@ -166,7 +153,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'content-moderation',
                                 icon: 'eye',
-                                iconColor: '#FF3B30',
+                                iconColor: themeStyles.colors.iconSharing,
                                 title: t('legal.contentModeration.title') || 'Content Moderation Policy',
                                 subtitle: t('legal.contentModeration.subtitle') || 'How we moderate content',
                                 onPress: handleOpenPolicy('contentModeration'),
@@ -188,7 +175,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
                                 onPress: handleOpenPolicy('cookie'),
                             },
                         ]}
-                        theme={theme}
+                        
                     />
                 </Section>
             </ScrollView>
@@ -204,16 +191,6 @@ const styles = StyleSheet.create({
         flex: 1,
         padding: 16,
     },
-    loadingContainer: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 16,
-    },
-    loadingText: {
-        fontSize: 16,
-        marginTop: 12,
-    },
 });
 
 export default React.memo(LegalDocumentsScreen);

package/src/ui/screens/OxyAuthScreen.tsx

@@ -0,0 +1,403 @@
+/**
+ * OxyAuthScreen - Sign in with Oxy
+ * 
+ * This screen is used by OTHER apps in the Oxy ecosystem to authenticate users.
+ * It presents two options:
+ * 1. Scan QR code with Oxy Accounts app
+ * 2. Open Oxy Accounts app directly (via deep link)
+ * 
+ * The Oxy Accounts app is where users manage their cryptographic identity.
+ * This screen should NOT be used within the Accounts app itself.
+ */
+
+import type React from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Linking,
+  Platform,
+  ActivityIndicator,
+} from 'react-native';
+import type { BaseScreenProps } from '../types/navigation';
+import { useThemeColors } from '../styles';
+import { useOxy } from '../context/OxyContext';
+import QRCode from 'react-native-qrcode-svg';
+import OxyLogo from '../components/OxyLogo';
+
+// Deep link scheme for Oxy Accounts app
+const OXY_ACCOUNTS_SCHEME = 'oxyaccounts://';
+const OXY_ACCOUNTS_WEB_URL = 'https://accounts.oxy.so';
+
+// Auth session expiration (5 minutes)
+const AUTH_SESSION_EXPIRY_MS = 5 * 60 * 1000;
+
+interface AuthSession {
+  sessionToken: string;
+  expiresAt: number;
+}
+
+const OxyAuthScreen: React.FC<BaseScreenProps> = ({
+  navigate,
+  goBack,
+  onAuthenticated,
+  theme,
+}) => {
+  const themeValue = (theme === 'light' || theme === 'dark') ? theme : 'light';
+  const colors = useThemeColors(themeValue);
+  const { oxyServices, signIn } = useOxy();
+
+  const [authSession, setAuthSession] = useState<AuthSession | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isPolling, setIsPolling] = useState(false);
+  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Generate a new auth session
+  const generateAuthSession = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // Generate a unique session token for this auth request
+      const sessionToken = generateSessionToken();
+      const expiresAt = Date.now() + AUTH_SESSION_EXPIRY_MS;
+
+      // Register the auth session with the server
+      // The server will associate this token with the user when they authorize in Accounts
+      await oxyServices.makeRequest('POST', '/api/auth/session/create', {
+        sessionToken,
+        expiresAt,
+        appId: Platform.OS, // Identifier for requesting app
+      }, { cache: false });
+
+      setAuthSession({ sessionToken, expiresAt });
+      startPolling(sessionToken);
+    } catch (err: any) {
+      setError(err.message || 'Failed to create auth session');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [oxyServices]);
+
+  // Generate a random session token
+  const generateSessionToken = (): string => {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
+    for (let i = 0; i < 32; i++) {
+      result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+  };
+
+  // Start polling for authorization
+  const startPolling = useCallback((sessionToken: string) => {
+    setIsPolling(true);
+
+    pollingIntervalRef.current = setInterval(async () => {
+      try {
+        const response = await oxyServices.makeRequest<{
+          authorized: boolean;
+          sessionId?: string;
+          publicKey?: string;
+        }>('GET', `/api/auth/session/status/${sessionToken}`, undefined, { cache: false });
+
+        if (response.authorized && response.sessionId) {
+          // Authorization successful!
+          stopPolling();
+
+          // Get token and user data
+          await oxyServices.getTokenBySession(response.sessionId);
+          const user = await oxyServices.getUserBySession(response.sessionId);
+
+          if (onAuthenticated) {
+            onAuthenticated(user);
+          }
+        }
+      } catch (err) {
+        // Silent fail for polling - will retry
+        if (__DEV__) {
+          console.log('Auth polling error:', err);
+        }
+      }
+    }, 2000); // Poll every 2 seconds
+  }, [oxyServices, onAuthenticated]);
+
+  // Stop polling
+  const stopPolling = useCallback(() => {
+    setIsPolling(false);
+    if (pollingIntervalRef.current) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      stopPolling();
+    };
+  }, [stopPolling]);
+
+  // Initialize auth session
+  useEffect(() => {
+    generateAuthSession();
+  }, []);
+
+  // Check if session expired
+  useEffect(() => {
+    if (authSession && Date.now() > authSession.expiresAt) {
+      stopPolling();
+      setAuthSession(null);
+      setError('Session expired. Please try again.');
+    }
+  }, [authSession, stopPolling]);
+
+  // Build the QR code data
+  const getQRData = (): string => {
+    if (!authSession) return '';
+
+    // Format: oxyauth://{sessionToken}
+    return `oxyauth://${authSession.sessionToken}`;
+  };
+
+  // Open Oxy Accounts app
+  const handleOpenAccounts = useCallback(async () => {
+    if (!authSession) return;
+
+    const deepLinkUrl = `${OXY_ACCOUNTS_SCHEME}authorize?token=${authSession.sessionToken}`;
+    const webUrl = `${OXY_ACCOUNTS_WEB_URL}/authorize?token=${authSession.sessionToken}`;
+
+    try {
+      const canOpen = await Linking.canOpenURL(deepLinkUrl);
+
+      if (canOpen) {
+        await Linking.openURL(deepLinkUrl);
+      } else {
+        // Fallback to web URL
+        await Linking.openURL(webUrl);
+      }
+    } catch (err) {
+      // Fallback to web URL
+      try {
+        await Linking.openURL(webUrl);
+      } catch {
+        setError('Unable to open Oxy Accounts. Please install the app or use QR code.');
+      }
+    }
+  }, [authSession]);
+
+  // Refresh session
+  const handleRefresh = useCallback(() => {
+    stopPolling();
+    generateAuthSession();
+  }, [generateAuthSession, stopPolling]);
+
+  if (isLoading) {
+    return (
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <ActivityIndicator size="large" color={colors.primary} />
+        <Text style={[styles.loadingText, { color: colors.secondaryText }]}>
+          Preparing sign in...
+        </Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
+        <Text style={[styles.errorText, { color: colors.error }]}>{error}</Text>
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: colors.primary }]}
+          onPress={handleRefresh}
+        >
+          <Text style={styles.buttonText}>Try Again</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <OxyLogo width={48} height={48} />
+        <Text style={[styles.title, { color: colors.text }]}>Sign in with Oxy</Text>
+        <Text style={[styles.subtitle, { color: colors.secondaryText }]}>
+          Use your Oxy identity to sign in securely
+        </Text>
+      </View>
+
+      {/* QR Code */}
+      <View style={[styles.qrContainer, { backgroundColor: colors.inputBackground, borderColor: colors.border }]}>
+        <View style={styles.qrWrapper}>
+          <QRCode
+            value={getQRData()}
+            size={200}
+            backgroundColor="white"
+            color="black"
+          />
+        </View>
+        <Text style={[styles.qrHint, { color: colors.secondaryText }]}>
+          Scan with Oxy Accounts app
+        </Text>
+      </View>
+
+      {/* Divider */}
+      <View style={styles.dividerContainer}>
+        <View style={[styles.divider, { backgroundColor: colors.border }]} />
+        <Text style={[styles.dividerText, { color: colors.secondaryText }]}>or</Text>
+        <View style={[styles.divider, { backgroundColor: colors.border }]} />
+      </View>
+
+      {/* Open Accounts Button */}
+      <TouchableOpacity
+        style={[styles.button, { backgroundColor: colors.primary }]}
+        onPress={handleOpenAccounts}
+      >
+        <OxyLogo width={20} height={20} fillColor="white" style={styles.buttonIcon} />
+        <Text style={styles.buttonText}>Open Oxy Accounts</Text>
+      </TouchableOpacity>
+
+      {/* Status */}
+      {isPolling && (
+        <View style={styles.statusContainer}>
+          <ActivityIndicator size="small" color={colors.primary} />
+          <Text style={[styles.statusText, { color: colors.secondaryText }]}>
+            Waiting for authorization...
+          </Text>
+        </View>
+      )}
+
+      {/* Footer */}
+      <View style={styles.footer}>
+        <Text style={[styles.footerText, { color: colors.secondaryText }]}>
+          Don't have Oxy Accounts?{' '}
+        </Text>
+        <TouchableOpacity onPress={() => Linking.openURL(OXY_ACCOUNTS_WEB_URL)}>
+          <Text style={[styles.footerLink, { color: colors.primary }]}>
+            Get it here
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Cancel Button */}
+      {goBack && (
+        <TouchableOpacity style={styles.cancelButton} onPress={goBack}>
+          <Text style={[styles.cancelText, { color: colors.secondaryText }]}>Cancel</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 16,
+  },
+  subtitle: {
+    fontSize: 14,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  qrContainer: {
+    padding: 24,
+    borderRadius: 16,
+    borderWidth: 1,
+    alignItems: 'center',
+  },
+  qrWrapper: {
+    padding: 16,
+    backgroundColor: 'white',
+    borderRadius: 12,
+  },
+  qrHint: {
+    marginTop: 16,
+    fontSize: 12,
+  },
+  dividerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 24,
+    width: '100%',
+  },
+  divider: {
+    flex: 1,
+    height: 1,
+  },
+  dividerText: {
+    marginHorizontal: 16,
+    fontSize: 14,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    width: '100%',
+  },
+  buttonIcon: {
+    marginRight: 10,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  statusContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 24,
+  },
+  statusText: {
+    marginLeft: 8,
+    fontSize: 14,
+  },
+  footer: {
+    flexDirection: 'row',
+    marginTop: 32,
+  },
+  footerText: {
+    fontSize: 14,
+  },
+  footerLink: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  cancelButton: {
+    marginTop: 16,
+    padding: 12,
+  },
+  cancelText: {
+    fontSize: 14,
+  },
+  loadingText: {
+    marginTop: 16,
+    fontSize: 14,
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+});
+
+export default OxyAuthScreen;
+

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -16,17 +16,19 @@ import {
     Clipboard,
     useWindowDimensions,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
+import type { BaseScreenProps } from '../types/navigation';
 import { fontFamilies, useThemeColors, createCommonStyles } from '../styles';
+import { normalizeTheme } from '../utils/themeUtils';
 import OxyLogo from '../components/OxyLogo';
 import GroupedPillButtons from '../components/internal/GroupedPillButtons';
-import TextField from '../components/internal/TextField';
+import TextField from '../components/TextField';
 import { Ionicons } from '@expo/vector-icons';
 import { FAIRWalletIcon } from '../components/icon';
 import { toast } from 'sonner';
 import QRCode from 'react-native-qrcode-svg';
 
 import { GroupedSection } from '../components';
+import { useThemeStyles } from '../hooks/useThemeStyles';
 
 // Restrict payment methods to Card, Oxy Pay, and FairCoin (QR)
 const PAYMENT_METHODS = [
@@ -153,9 +155,10 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
     const scaleAnim = useRef(new Animated.Value(1)).current;
     const progressAnim = useRef(new Animated.Value(0.2)).current;
 
-    const colors = useThemeColors(theme);
-    const commonStyles = createCommonStyles(theme);
-    const styles = useMemo(() => createStyles(colors, theme), [colors, theme]);
+    const normalizedTheme = normalizeTheme(theme);
+    const colors = useThemeColors(normalizedTheme);
+    const commonStyles = createCommonStyles(normalizedTheme);
+    const styles = useMemo(() => createStyles(colors, normalizedTheme), [colors, normalizedTheme]);
 
     // Get symbol and name for currency
     const currencySymbol = CURRENCY_SYMBOLS[currency.toUpperCase()] || currency;
@@ -266,7 +269,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         if (onPaymentResult) {
             onPaymentResult({ success: true });
         }
-        navigate('AccountOverview');
+        navigate?.('AccountOverview');
     }, [onPaymentResult, navigate]);
 
     // Handle close/cancel: return failure result if payment is not completed
@@ -298,7 +301,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                             variant: 'primary',
                         },
                     ]}
-                    colors={useThemeColors(theme)}
+                    colors={useThemeColors(normalizedTheme)}
                 />
             </View>
         );
@@ -407,7 +410,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                                                 </Text>
                                             ),
                                         }))}
-                                        theme={theme}
+
                                     />
                                 </View>
 
@@ -501,7 +504,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                             <FAIRWalletIcon size={20} />
                         ) : undefined,
                     }))}
-                    theme={theme}
+
                 />
             </View>
 
@@ -565,7 +568,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                                     keyboardType="numeric"
                                     maxLength={19}
                                     style={styles.cardFieldContainer}
-                                    leading={<Ionicons name="card-outline" size={18} color={colors.primary} />}
+                                    left={<Ionicons name="card-outline" size={18} color={colors.primary} />}
                                 />
                                 <View style={styles.cardFieldRow}>
                                     <TextField
@@ -578,7 +581,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                                         placeholder="MM/YY"
                                         maxLength={5}
                                         style={styles.cardFieldHalfLeft}
-                                        leading={<Ionicons name="calendar-outline" size={16} color={colors.primary} />}
+                                        left={<Ionicons name="calendar-outline" size={16} color={colors.primary} />}
                                     />
                                     <TextField
                                         value={cardDetails.cvv}
@@ -591,7 +594,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                                         keyboardType="numeric"
                                         maxLength={4}
                                         style={styles.cardFieldHalfRight}
-                                        leading={<Ionicons name="lock-closed-outline" size={16} color={colors.primary} />}
+                                        left={<Ionicons name="lock-closed-outline" size={16} color={colors.primary} />}
                                     />
                                 </View>
                             </View>
@@ -647,6 +650,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                             )}
                             <View style={{ height: 18 }} />
                             <Text style={styles.faircoinWaiting}>Waiting for payment...</Text>
+                            {/* TODO: Integrate QR code generator for FAIRWallet payments */}
                             <Text style={styles.faircoinPlaceholder}>(This is a placeholder. Integrate with a QR code generator for production.)</Text>
                         </View>
                     </View>
@@ -732,7 +736,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                             subtitle: 'Paid via QR',
                         }] : []),
                     ]}
-                    theme={theme}
+
                 />
             </View>
             <GroupedPillButtons
@@ -806,15 +810,9 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
         }
     };
 
-    // Memoize theme-related calculations to prevent unnecessary recalculations
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            isDarkTheme,
-            backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
-            primaryColor: '#007AFF',
-        };
-    }, [theme]);
+    // Use centralized theme styles hook for consistency
+    // primaryColor from hook (#007AFF) is already correct for this screen
+    const themeStyles = useThemeStyles(normalizedTheme);
 
     return (
         <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>