@oxyhq/services 5.3.1 → 5.3.3

package/lib/typescript/ui/navigation/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAClD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;IAEtD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEtC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE;QACb;;WAEG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QAEzB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/navigation/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;CACxG;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;IAEtD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEtC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE;QACb;;WAEG;QACH,eAAe,CAAC,EAAE,MAAM,CAAC;QAEzB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/lib/typescript/ui/screens/AccountSwitcherScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountSwitcherScreen.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/AccountSwitcherScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKtD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgOpD,CAAC;AA6IF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"AccountSwitcherScreen.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/AccountSwitcherScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoRpD,CAAC;AA6IF,eAAe,qBAAqB,CAAC"}

package/lib/typescript/ui/screens/ModernAccountSwitcherScreen.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseScreenProps } from '../navigation/types';
+declare const ModernAccountSwitcherScreen: React.FC<BaseScreenProps>;
+export default ModernAccountSwitcherScreen;
+//# sourceMappingURL=ModernAccountSwitcherScreen.d.ts.map

package/lib/typescript/ui/screens/ModernAccountSwitcherScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernAccountSwitcherScreen.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/ModernAccountSwitcherScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAanD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD,QAAA,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmV1D,CAAC;AA4LF,eAAe,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oxyhq/services",
-    "version": "5.3.1",
+    "version": "5.3.3",
     "description": "Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀",
     "main": "lib/commonjs/node/index.js",
     "module": "lib/module/node/index.js",

package/src/ui/components/OxyProvider.tsx

@@ -95,6 +95,9 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
 }) => {
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModal>(null);
+    
+    // Create a ref to store the navigation function from OxyRouter
+    const navigationRef = useRef<((screen: string, props?: Record<string, any>) => void) | null>(null);
 
     // Track content height for dynamic sizing
     const [contentHeight, setContentHeight] = useState<number>(0);
@@ -122,16 +125,24 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             // Add a method to navigate between screens
             // @ts-ignore - Adding custom method
             bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
-                // Access the navigation function exposed by OxyRouter
-                // Use internal mechanism to notify router about navigation
-                // We'll use a simple event-based approach
+                console.log(`Navigation requested: ${screenName}`, props);
+                
+                // Try direct navigation function first (most reliable)
+                if (navigationRef.current) {
+                    console.log('Using direct navigation function');
+                    navigationRef.current(screenName, props);
+                    return;
+                }
+                
+                // Fallback to event-based navigation
                 if (typeof document !== 'undefined') {
                     // For web - use a custom event
+                    console.log('Using web event navigation');
                     const event = new CustomEvent('oxy:navigate', { detail: { screen: screenName, props } });
                     document.dispatchEvent(event);
                 } else {
-                    // For React Native - use the navigation prop directly if available
-                    // We'll implement a mechanism in OxyRouter to listen for this
+                    // For React Native - use the global variable approach
+                    console.log('Using React Native global navigation');
                     (global as any).oxyNavigateEvent = { screen: screenName, props };
                 }
             };
@@ -481,6 +492,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                         onAuthenticated={handleAuthenticated}
                         theme={theme}
                         adjustSnapPoints={adjustSnapPoints}
+                        navigationRef={navigationRef}
                     />
                 </Animated.View>
             </BottomSheetScrollView>

package/src/ui/context/OxyContext.tsx

@@ -502,25 +502,39 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
 
   // Bottom sheet control methods
   const showBottomSheet = useCallback((screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => {
+    console.log('showBottomSheet called with:', screenOrConfig);
+    
     if (bottomSheetRef?.current) {
-      // Use expand() instead of present() to trigger animations
+      console.log('bottomSheetRef is available');
+      
+      // First, show the bottom sheet
       if (bottomSheetRef.current.expand) {
+        console.log('Expanding bottom sheet');
         bottomSheetRef.current.expand();
+      } else if (bottomSheetRef.current.present) {
+        console.log('Presenting bottom sheet');
+        bottomSheetRef.current.present();
       } else {
-        // Fallback to present if expand is not available
-        bottomSheetRef.current.present?.();
+        console.warn('No expand or present method available on bottomSheetRef');
       }
       
-      // Navigate to the specified screen if provided
+      // Then navigate to the specified screen if provided
       if (screenOrConfig) {
-        if (typeof screenOrConfig === 'string') {
-          // Simple screen name
-          bottomSheetRef.current._navigateToScreen?.(screenOrConfig);
-        } else {
-          // Screen with props
-          bottomSheetRef.current._navigateToScreen?.(screenOrConfig.screen, screenOrConfig.props);
-        }
+        // Add a small delay to ensure the bottom sheet is opened first
+        setTimeout(() => {
+          if (typeof screenOrConfig === 'string') {
+            // Simple screen name
+            console.log('Navigating to screen:', screenOrConfig);
+            bottomSheetRef.current?._navigateToScreen?.(screenOrConfig);
+          } else {
+            // Screen with props
+            console.log('Navigating to screen with props:', screenOrConfig.screen, screenOrConfig.props);
+            bottomSheetRef.current?._navigateToScreen?.(screenOrConfig.screen, screenOrConfig.props);
+          }
+        }, 100);
       }
+    } else {
+      console.warn('bottomSheetRef is not available');
     }
   }, [bottomSheetRef]);
 

package/src/ui/navigation/OxyRouter.tsx

@@ -7,6 +7,7 @@ import SignInScreen from '../screens/SignInScreen';
 import SignUpScreen from '../screens/SignUpScreen';
 import AccountCenterScreen from '../screens/AccountCenterScreen';
 import AccountSwitcherScreen from '../screens/AccountSwitcherScreen';
+import ModernAccountSwitcherScreen from '../screens/ModernAccountSwitcherScreen';
 import SessionManagementScreen from '../screens/SessionManagementScreen';
 import AccountOverviewScreen from '../screens/AccountOverviewScreen';
 import AccountSettingsScreen from '../screens/AccountSettingsScreen';
@@ -40,6 +41,10 @@ const routes: Record<string, RouteConfig> = {
         component: AccountSwitcherScreen,
         snapPoints: ['70%', '100%'],
     },
+    ModernAccountSwitcher: {
+        component: ModernAccountSwitcherScreen,
+        snapPoints: ['70%', '100%'],
+    },
     SessionManagement: {
         component: SessionManagementScreen,
         snapPoints: ['70%', '100%'],
@@ -93,6 +98,7 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
     onAuthenticated,
     theme,
     adjustSnapPoints,
+    navigationRef,
 }) => {
     const [currentScreen, setCurrentScreen] = useState<string>(initialScreen);
     const [screenHistory, setScreenHistory] = useState<string[]>([initialScreen]);
@@ -114,7 +120,22 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         } else {
             console.error(`Screen "${screen}" not found`);
         }
-    };    // Expose the navigate method to the parent component (OxyProvider)
+    };
+
+    // Expose the navigate function to the parent component
+    useEffect(() => {
+        if (navigationRef) {
+            navigationRef.current = navigate;
+        }
+        
+        return () => {
+            if (navigationRef) {
+                navigationRef.current = null;
+            }
+        };
+    }, [navigate, navigationRef]);
+
+    // Expose the navigate method to the parent component (OxyProvider)
     useEffect(() => {
         // Set up event listener for navigation events
         const handleNavigationEvent = (event: any) => {
@@ -132,9 +153,25 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
             }
         };
 
-        // Add event listener (web only)
+        // For React Native - check for global navigation events
+        let intervalId: NodeJS.Timeout | null = null;
+        
         if (typeof document !== 'undefined') {
+            // Web - use custom event listener
             document.addEventListener('oxy:navigate', handleNavigationEvent);
+        } else {
+            // React Native - poll for global navigation events
+            intervalId = setInterval(() => {
+                const globalNav = (global as any).oxyNavigateEvent;
+                if (globalNav) {
+                    console.log(`RN Navigation event received:`, globalNav);
+                    if (globalNav.screen) {
+                        navigate(globalNav.screen, globalNav.props || {});
+                    }
+                    // Clear the event after processing
+                    (global as any).oxyNavigateEvent = null;
+                }
+            }, 100); // Check every 100ms
         }
 
         // Cleanup
@@ -142,6 +179,9 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
             if (typeof document !== 'undefined') {
                 document.removeEventListener('oxy:navigate', handleNavigationEvent);
             }
+            if (intervalId) {
+                clearInterval(intervalId);
+            }
         };
     }, []);
 

package/src/ui/navigation/types.ts

@@ -33,6 +33,7 @@ export interface OxyRouterProps {
   onAuthenticated?: (user: User) => void;
   theme: 'light' | 'dark';
   adjustSnapPoints: (snapPoints: string[]) => void;
+  navigationRef?: React.MutableRefObject<((screen: string, props?: Record<string, any>) => void) | null>;
 }
 
 /**

package/src/ui/screens/AccountSwitcherScreen.tsx

@@ -8,17 +8,26 @@ import {
     ScrollView,
     Alert,
     Platform,
+    Image,
+    Dimensions,
 } from 'react-native';
 import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { SecureClientSession } from '../../models/secureSession';
 import { fontFamilies } from '../styles/fonts';
+import { User } from '../../models/interfaces';
+
+interface SessionWithUser extends SecureClientSession {
+    userProfile?: User;
+    isLoadingProfile?: boolean;
+}
 
 const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     onClose,
     theme,
     navigate,
     goBack,
+    oxyServices,
 }) => {
     const { 
         user, 
@@ -30,17 +39,68 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
         isLoading 
     } = useOxy();
 
+    const [sessionsWithUsers, setSessionsWithUsers] = useState<SessionWithUser[]>([]);
     const [switchingToUserId, setSwitchingToUserId] = useState<string | null>(null);
     const [removingUserId, setRemovingUserId] = useState<string | null>(null);
 
+    const screenWidth = Dimensions.get('window').width;
     const isDarkTheme = theme === 'dark';
-    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
-    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
-    const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#F5F5F5';
-    const borderColor = isDarkTheme ? '#444444' : '#E0E0E0';
-    const primaryColor = '#0066CC';
-    const dangerColor = '#D32F2F';
-    const successColor = '#2E7D32';
+    
+    // Modern color scheme
+    const colors = {
+        background: isDarkTheme ? '#000000' : '#FFFFFF',
+        surface: isDarkTheme ? '#1C1C1E' : '#F2F2F7',
+        card: isDarkTheme ? '#2C2C2E' : '#FFFFFF',
+        text: isDarkTheme ? '#FFFFFF' : '#000000',
+        secondaryText: isDarkTheme ? '#8E8E93' : '#6D6D70',
+        accent: '#007AFF',
+        destructive: '#FF3B30',
+        success: '#34C759',
+        border: isDarkTheme ? '#38383A' : '#C6C6C8',
+        activeCard: isDarkTheme ? '#0A84FF20' : '#007AFF15',
+        shadow: isDarkTheme ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)',
+    };
+
+    // Load user profiles for sessions
+    useEffect(() => {
+        const loadUserProfiles = async () => {
+            if (!sessions.length || !oxyServices) return;
+
+            const updatedSessions: SessionWithUser[] = sessions.map(session => ({
+                ...session,
+                isLoadingProfile: true,
+            }));
+            setSessionsWithUsers(updatedSessions);
+
+            // Load profiles for each session
+            for (let i = 0; i < sessions.length; i++) {
+                const session = sessions[i];
+                try {
+                    // Try to get user profile using the session
+                    const userProfile = await oxyServices.getUserBySession(session.sessionId);
+                    
+                    setSessionsWithUsers(prev => 
+                        prev.map(s => 
+                            s.sessionId === session.sessionId 
+                                ? { ...s, userProfile, isLoadingProfile: false }
+                                : s
+                        )
+                    );
+                } catch (error) {
+                    console.error(`Failed to load profile for session ${session.sessionId}:`, error);
+                    setSessionsWithUsers(prev => 
+                        prev.map(s => 
+                            s.sessionId === session.sessionId 
+                                ? { ...s, isLoadingProfile: false }
+                                : s
+                        )
+                    );
+                }
+            }
+        };
+
+        loadUserProfiles();
+    }, [sessions, oxyServices]);
 
     const handleSwitchSession = async (sessionId: string) => {
         if (sessionId === user?.sessionId) return; // Already active session
@@ -134,20 +194,20 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 style={[
                     styles.userItem,
                     {
-                        backgroundColor: isActive ? primaryColor + '20' : secondaryBackgroundColor,
-                        borderColor: isActive ? primaryColor : borderColor,
+                        backgroundColor: isActive ? colors.activeCard : colors.surface,
+                        borderColor: isActive ? colors.accent : colors.border,
                     },
                 ]}
             >
                 <View style={styles.userInfo}>
-                    <Text style={[styles.username, { color: textColor }]}>
+                    <Text style={[styles.username, { color: colors.text }]}>
                         {isActive ? user?.username || 'Current Account' : 'Account Session'}
                     </Text>
                     <Text style={[styles.email, { color: isDarkTheme ? '#BBBBBB' : '#666666' }]}>
                         Last active: {new Date(session.lastActive).toLocaleDateString()}
                     </Text>
                     {isActive && (
-                        <View style={[styles.activeBadge, { backgroundColor: successColor }]}>
+                        <View style={[styles.activeBadge, { backgroundColor: colors.success }]}>
                             <Text style={styles.activeBadgeText}>Active</Text>
                         </View>
                     )}
@@ -156,27 +216,27 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 <View style={styles.userActions}>
                     {!isActive && (
                         <TouchableOpacity
-                            style={[styles.switchButton, { borderColor: primaryColor }]}
+                            style={[styles.switchButton, { borderColor: colors.accent }]}
                             onPress={() => handleSwitchSession(session.sessionId)}
                             disabled={isSwitching || isRemoving}
                         >
                             {isSwitching ? (
-                                <ActivityIndicator color={primaryColor} size="small" />
+                                <ActivityIndicator color={colors.accent} size="small" />
                             ) : (
-                                <Text style={[styles.switchButtonText, { color: primaryColor }]}>Switch</Text>
+                                <Text style={[styles.switchButtonText, { color: colors.accent }]}>Switch</Text>
                             )}
                         </TouchableOpacity>
                     )}
 
                     <TouchableOpacity
-                        style={[styles.removeButton, { borderColor: dangerColor }]}
+                        style={[styles.removeButton, { borderColor: colors.destructive }]}
                         onPress={() => handleRemoveSession(session.sessionId)}
                         disabled={isSwitching || isRemoving || sessions.length === 1}
                     >
                         {isRemoving ? (
-                            <ActivityIndicator color={dangerColor} size="small" />
+                            <ActivityIndicator color={colors.destructive} size="small" />
                         ) : (
-                            <Text style={[styles.removeButtonText, { color: dangerColor }]}>Remove</Text>
+                            <Text style={[styles.removeButtonText, { color: colors.destructive }]}>Remove</Text>
                         )}
                     </TouchableOpacity>
                 </View>
@@ -185,12 +245,12 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <View style={[styles.container, { backgroundColor }]}>
+        <View style={[styles.container, { backgroundColor: colors.background }]}>
             <View style={styles.header}>
                 <TouchableOpacity style={styles.backButton} onPress={goBack}>
-                    <Text style={[styles.backButtonText, { color: primaryColor }]}>‹ Back</Text>
+                    <Text style={[styles.backButtonText, { color: colors.accent }]}>‹ Back</Text>
                 </TouchableOpacity>
-                <Text style={[styles.title, { color: textColor }]}>Account Switcher</Text>
+                <Text style={[styles.title, { color: colors.text }]}>Account Switcher</Text>
                 <View style={styles.placeholder} />
             </View>
 
@@ -202,7 +262,7 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <View style={styles.usersContainer}>
-                    <Text style={[styles.sectionTitle, { color: textColor }]}>
+                    <Text style={[styles.sectionTitle, { color: colors.text }]}>
                         Sessions ({sessions.length})
                     </Text>
                     
@@ -211,10 +271,10 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
 
                 <View style={styles.actionsContainer}>
                     <TouchableOpacity
-                        style={[styles.actionButton, { borderColor }]}
+                        style={[styles.actionButton, { borderColor: colors.border }]}
                         onPress={() => navigate('SignIn')}
                     >
-                        <Text style={[styles.actionButtonText, { color: textColor }]}>
+                        <Text style={[styles.actionButtonText, { color: colors.text }]}>
                             Add Another Account
                         </Text>
                     </TouchableOpacity>
@@ -226,9 +286,9 @@ const AccountSwitcherScreen: React.FC<BaseScreenProps> = ({
                             disabled={isLoading}
                         >
                             {isLoading ? (
-                                <ActivityIndicator color={dangerColor} size="small" />
+                                <ActivityIndicator color={colors.destructive} size="small" />
                             ) : (
-                                <Text style={[styles.dangerButtonText, { color: dangerColor }]}>
+                                <Text style={[styles.dangerButtonText, { color: colors.destructive }]}>
                                     Sign Out All Sessions
                                 </Text>
                             )}