@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/AccountOverviewScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import {
     View,
     Text,
@@ -11,8 +11,8 @@ import {
     Image,
     TextStyle,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { BaseScreenProps } from '../types/navigation';
 import OxyLogo from '../components/OxyLogo';
 import Avatar from '../components/Avatar';
 import OxyIcon from '../components/icon/OxyIcon';
@@ -20,8 +20,37 @@ import { fontFamilies } from '../styles/fonts';
 import { toast } from '../../lib/sonner';
 import { confirmAction } from '../utils/confirmAction';
 import { Ionicons } from '@expo/vector-icons';
-import { Header, Section, GroupedSection, GroupedItem } from '../components';
+import { Section, GroupedSection, GroupedItem } from '../components';
 import { useI18n } from '../hooks/useI18n';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { getDisplayName, getShortDisplayName } from '../utils/user-utils';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { normalizeTheme } from '../utils/themeUtils';
+import { useOxy } from '../context/OxyContext';
+import {
+    SCREEN_PADDING_HORIZONTAL,
+    SECTION_GAP,
+    HEADER_PADDING_TOP_OVERVIEW,
+    createScreenContentStyle,
+} from '../constants/spacing';
+
+// Optional Lottie import - gracefully handle if not available
+let LottieView: any = null;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    LottieView = require('lottie-react-native').default;
+} catch {
+    // Lottie not available, will use fallback
+}
+
+// Import Lottie animation - will be undefined if file doesn't exist
+let lottieAnimation: any = undefined;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    lottieAnimation = require('../assets/lottie/welcomeheader_background_op1.json');
+} catch {
+    // Animation file not available
+}
 
 /**
  * AccountOverviewScreen - Optimized for performance
@@ -38,30 +67,68 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
     theme,
     navigate,
 }) => {
-    const { user, logout, isLoading, sessions, activeSessionId, oxyServices, isAuthenticated } = useOxy();
+    // Use useOxy() hook for OxyContext values
+    const {
+        user,
+        logout,
+        isLoading,
+        sessions,
+        activeSessionId,
+        oxyServices,
+        isAuthenticated,
+    } = useOxy();
     const { t } = useI18n();
     const [showMoreAccounts, setShowMoreAccounts] = useState(false);
     const [additionalAccountsData, setAdditionalAccountsData] = useState<any[]>([]);
     const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = useState(false);
+    const lottieRef = useRef<any>(null);
+    const hasPlayedRef = useRef(false);
+    const insets = useSafeAreaInsets();
 
-    // Memoize theme-related calculations to prevent unnecessary recalculations
-    const themeStyles = useMemo(() => {
-        const isDarkTheme = theme === 'dark';
-        return {
-            isDarkTheme,
-            textColor: isDarkTheme ? '#FFFFFF' : '#000000',
-            backgroundColor: isDarkTheme ? '#121212' : '#FFFFFF',
-            secondaryBackgroundColor: isDarkTheme ? '#222222' : '#F5F5F5',
-            borderColor: isDarkTheme ? '#444444' : '#E0E0E0',
-            primaryColor: '#d169e5',
-            dangerColor: '#D32F2F',
-            iconColor: isDarkTheme ? '#BBBBBB' : '#666666',
-        };
-    }, [theme]);
+    // Use centralized theme styles hook for consistency
+    const colorScheme = useColorScheme();
+    const normalizedTheme = normalizeTheme(theme);
+    const baseThemeStyles = useThemeStyles(normalizedTheme, colorScheme);
+    const themeStyles = useMemo(() => ({
+        ...baseThemeStyles,
+        // AccountOverviewScreen uses a custom primary color (purple) instead of the default blue
+        primaryColor: '#d169e5',
+        // Keep custom icon color for this screen
+        iconColor: baseThemeStyles.isDarkTheme ? '#BBBBBB' : '#666666',
+    }), [baseThemeStyles]);
+
+    // Compute user data for display
+    const displayName = useMemo(() => getDisplayName(user), [user]);
+    const shortDisplayName = useMemo(() => getShortDisplayName(user), [user]);
+    const avatarUrl = useMemo(() => {
+        if (user?.avatar && oxyServices) {
+            return oxyServices.getFileDownloadUrl(user.avatar, 'thumb');
+        }
+        return undefined;
+    }, [user?.avatar, oxyServices]);
+
+    // Handle avatar press to navigate to EditProfile
+    const handleAvatarPress = useCallback(() => {
+        navigate?.('EditProfile', { initialSection: 'profilePicture', initialField: 'avatar' });
+    }, [navigate]);
+
+    // Play Lottie animation once when component mounts
+    useEffect(() => {
+        if (hasPlayedRef.current || !LottieView || !lottieRef.current || !lottieAnimation) return;
+
+        const timer = setTimeout(() => {
+            if (lottieRef.current && !hasPlayedRef.current) {
+                lottieRef.current.play();
+                hasPlayedRef.current = true;
+            }
+        }, 100);
+
+        return () => clearTimeout(timer);
+    }, []);
 
     // Memoize additional accounts filtering to prevent recalculation on every render
     const additionalAccounts = useMemo(() =>
-        sessions.filter(session =>
+        (sessions || []).filter(session =>
             session.sessionId !== activeSessionId && session.userId !== user?.id
         ), [sessions, activeSessionId, user?.id]
     );
@@ -166,7 +233,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             try {
                                 toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
                                 const blob = await oxyServices.downloadAccountData('json');
-                                
+
                                 // Create download link for web
                                 if (Platform.OS === 'web') {
                                     const url = URL.createObjectURL(blob);
@@ -194,7 +261,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             try {
                                 toast.loading(t('accountOverview.items.downloadData.downloading') || 'Preparing download...');
                                 const blob = await oxyServices.downloadAccountData('csv');
-                                
+
                                 // Create download link for web
                                 if (Platform.OS === 'web') {
                                     const url = URL.createObjectURL(blob);
@@ -285,61 +352,77 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
         );
     }
 
+
     return (
-        <View style={[styles.container, { backgroundColor: '#f2f2f2' }]}>
-            {/* Header */}
-            <Header
-                title={t('accountOverview.title')}
-                theme={theme}
-                onBack={onClose}
-                variant="minimal"
-                elevation="subtle"
-            />
-
-            <ScrollView style={styles.content}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
+            <ScrollView
+                style={styles.content}
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
+            >
+                {/* Centered Avatar and Name Header Section */}
+                {user && (
+                    <View style={styles.headerSection}>
+                        <View style={styles.avatarSectionWrapper}>
+                            <View style={styles.avatarContainer}>
+                                {LottieView && lottieAnimation && (
+                                    <LottieView
+                                        ref={lottieRef}
+                                        source={lottieAnimation}
+                                        style={styles.lottieBackground}
+                                        loop={false}
+                                        autoPlay={false}
+                                    />
+                                )}
+                                <TouchableOpacity
+                                    style={styles.avatarWrapper}
+                                    onPress={handleAvatarPress}
+                                    activeOpacity={0.8}
+                                >
+                                    <Avatar
+                                        uri={avatarUrl}
+                                        name={displayName}
+                                        size={100}
+                                        theme={normalizedTheme}
+                                    />
+                                </TouchableOpacity>
+                            </View>
+                            <View style={styles.nameWrapper}>
+                                <Text style={[styles.welcomeText, { color: themeStyles.textColor }]}>
+                                    {displayName}
+                                </Text>
+                                <Text style={[styles.welcomeSubtext, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    Manage your Oxy account.
+                                </Text>
+                            </View>
+                        </View>
+                    </View>
+                )}
+
                 {/* User Profile Section */}
-                <Section title={t('accountOverview.sections.profile')} theme={theme} isFirst={true}>
+                <Section title={t('accountOverview.sections.profile')} isFirst={true}>
                     <GroupedSection
                         items={[
                             {
                                 id: 'profile-info',
                                 icon: 'person',
-                                iconColor: '#007AFF',
-                                title: user ? (typeof user.name === 'string' ? user.name : user.name?.full || user.name?.first || user.username) : (t('common.status.loading') || 'Loading...'),
+                                iconColor: baseThemeStyles.colors.iconSecurity,
+                                title: displayName,
                                 subtitle: user ? (user.email || user.username) : (t('common.status.loading') || 'Loading...'),
-                                onPress: () => toast.info(t('accountOverview.manageComing')),
-                                customContent: (
-                                    <>
-                                        <View style={styles.userIcon}>
-                                            <Avatar
-                                                uri={user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar as string, 'thumb') : undefined}
-                                                name={user?.name?.full}
-                                                size={40}
-                                                theme={theme}
-                                            />
-                                        </View>
-                                        <TouchableOpacity
-                                            style={styles.manageButton}
-                                            onPress={() => toast.info(t('accountOverview.manageComing'))}
-                                        >
-                                            <Text style={styles.manageButtonText}>{t('accountOverview.actions.manage')}</Text>
-                                        </TouchableOpacity>
-                                    </>
-                                ),
+                                onPress: () => navigate?.('EditProfile', { activeTab: 'profile' }),
                             },
                         ]}
-                        theme={theme}
                     />
                 </Section>
 
                 {/* Account Settings */}
-                <Section title={t('accountOverview.sections.accountSettings')} theme={theme}>
+                <Section title={t('accountOverview.sections.accountSettings')} >
                     <GroupedSection
                         items={[
                             {
                                 id: 'edit-profile',
                                 icon: 'person-circle',
-                                iconColor: '#007AFF',
+                                iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.editProfile.title'),
                                 subtitle: t('accountOverview.items.editProfile.subtitle'),
                                 onPress: () => navigate?.('EditProfile', { activeTab: 'profile' }),
@@ -347,7 +430,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'security-privacy',
                                 icon: 'shield-checkmark',
-                                iconColor: '#30D158',
+                                iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.security.title'),
                                 subtitle: t('accountOverview.items.security.subtitle'),
                                 onPress: () => navigate?.('EditProfile', { activeTab: 'password' }),
@@ -355,7 +438,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'notifications',
                                 icon: 'notifications',
-                                iconColor: '#FF9500',
+                                iconColor: baseThemeStyles.colors.iconStorage,
                                 title: t('accountOverview.items.notifications.title'),
                                 subtitle: t('accountOverview.items.notifications.subtitle'),
                                 onPress: () => navigate?.('EditProfile', { activeTab: 'notifications' }),
@@ -363,7 +446,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'premium-subscription',
                                 icon: 'star',
-                                iconColor: '#FFD700',
+                                iconColor: baseThemeStyles.colors.iconPayments,
                                 title: t('accountOverview.items.premium.title'),
                                 subtitle: user?.isPremium ? t('accountOverview.items.premium.manage') : t('accountOverview.items.premium.upgrade'),
                                 onPress: () => navigate?.('PremiumSubscription'),
@@ -371,44 +454,44 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             ...(user?.isPremium ? [{
                                 id: 'billing-management',
                                 icon: 'card',
-                                iconColor: '#34C759',
+                                iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.billing.title'),
                                 subtitle: t('accountOverview.items.billing.subtitle'),
                                 onPress: () => toast.info(t('accountOverview.items.billing.coming')),
                             }] : []),
                         ]}
-                        theme={theme}
+
                     />
                 </Section>
 
                 {/* Additional Accounts */}
                 {showMoreAccounts && (
-                    <Section title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`} theme={theme}>
+                    <Section title={`${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`} >
                         {loadingAdditionalAccounts ? (
                             <GroupedSection
                                 items={[
                                     {
                                         id: 'loading-accounts',
                                         icon: 'sync',
-                                        iconColor: '#007AFF',
+                                        iconColor: baseThemeStyles.colors.iconSecurity,
                                         title: t('accountOverview.loadingAdditional.title') || 'Loading accounts...',
                                         subtitle: t('accountOverview.loadingAdditional.subtitle') || 'Please wait while we load your additional accounts',
                                         customContent: (
                                             <View style={styles.loadingContainer}>
-                                                <ActivityIndicator size="small" color="#007AFF" />
+                                                <ActivityIndicator size="small" color={baseThemeStyles.colors.iconSecurity} />
                                                 <Text style={styles.loadingText}>{t('accountOverview.loadingAdditional.title') || 'Loading accounts...'}</Text>
                                             </View>
                                         ),
                                     },
                                 ]}
-                                theme={theme}
+
                             />
                         ) : additionalAccountsData.length > 0 ? (
                             <GroupedSection
                                 items={additionalAccountsData.map((account, index) => ({
                                     id: `account-${account.id}`,
                                     icon: 'person',
-                                    iconColor: '#5856D6',
+                                    iconColor: baseThemeStyles.colors.iconData,
                                     title: typeof account.name === 'object'
                                         ? account.name?.full || account.name?.first || account.username
                                         : account.name || account.username,
@@ -436,7 +519,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         </>
                                     ),
                                 }))}
-                                theme={theme}
+
                             />
                         ) : (
                             <GroupedSection
@@ -449,7 +532,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                         subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them',
                                     },
                                 ]}
-                                theme={theme}
+
                             />
                         )}
                     </Section>
@@ -457,13 +540,13 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 
                 {/* Account Management */}
                 {showMoreAccounts && (
-                    <Section title={t('accountOverview.sections.accountManagement') || 'Account Management'} theme={theme}>
+                    <Section title={t('accountOverview.sections.accountManagement') || 'Account Management'} >
                         <GroupedSection
                             items={[
                                 {
                                     id: 'add-account',
                                     icon: 'add',
-                                    iconColor: '#007AFF',
+                                    iconColor: baseThemeStyles.colors.iconSecurity,
                                     title: t('accountOverview.items.addAccount.title') || 'Add Another Account',
                                     subtitle: t('accountOverview.items.addAccount.subtitle') || 'Sign in with a different account',
                                     onPress: handleAddAccount,
@@ -471,25 +554,25 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 {
                                     id: 'sign-out-all',
                                     icon: 'log-out',
-                                    iconColor: '#FF3B30',
+                                    iconColor: baseThemeStyles.colors.iconSharing,
                                     title: t('accountOverview.items.signOutAll.title') || 'Sign out of all accounts',
                                     subtitle: t('accountOverview.items.signOutAll.subtitle') || 'Remove all accounts from this device',
                                     onPress: handleSignOutAll,
                                 },
                             ]}
-                            theme={theme}
+
                         />
                     </Section>
                 )}
 
                 {/* Quick Actions */}
-                <Section title={t('accountOverview.sections.quickActions')} theme={theme}>
+                <Section title={t('accountOverview.sections.quickActions')} >
                     <GroupedSection
                         items={[
                             {
                                 id: 'account-switcher',
                                 icon: 'people',
-                                iconColor: '#5856D6',
+                                iconColor: baseThemeStyles.colors.iconData,
                                 title: showMoreAccounts
                                     ? t('accountOverview.items.accountSwitcher.titleHide')
                                     : t('accountOverview.items.accountSwitcher.titleShow'),
@@ -505,7 +588,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'history-view',
                                 icon: 'time',
-                                iconColor: '#007AFF',
+                                iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.history.title') || 'History',
                                 subtitle: t('accountOverview.items.history.subtitle') || 'View and manage your search history',
                                 onPress: () => navigate?.('HistoryView'),
@@ -513,7 +596,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'saves-collections',
                                 icon: 'bookmark',
-                                iconColor: '#FF9500',
+                                iconColor: baseThemeStyles.colors.iconStorage,
                                 title: t('accountOverview.items.saves.title') || 'Saves & Collections',
                                 subtitle: t('accountOverview.items.saves.subtitle') || 'View your saved items and collections',
                                 onPress: () => navigate?.('SavesCollections'),
@@ -521,7 +604,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'download-data',
                                 icon: 'download',
-                                iconColor: '#34C759',
+                                iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.downloadData.title'),
                                 subtitle: t('accountOverview.items.downloadData.subtitle'),
                                 onPress: handleDownloadData,
@@ -529,24 +612,24 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'delete-account',
                                 icon: 'trash',
-                                iconColor: '#FF3B30',
+                                iconColor: baseThemeStyles.colors.iconSharing,
                                 title: t('accountOverview.items.deleteAccount.title'),
                                 subtitle: t('accountOverview.items.deleteAccount.subtitle'),
                                 onPress: handleDeleteAccount,
                             },
                         ]}
-                        theme={theme}
+
                     />
                 </Section>
 
                 {/* Support & Settings */}
-                <Section title={t('accountOverview.sections.support')} theme={theme}>
+                <Section title={t('accountOverview.sections.support')} >
                     <GroupedSection
                         items={[
                             {
                                 id: 'search-settings',
                                 icon: 'search',
-                                iconColor: '#007AFF',
+                                iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.searchSettings.title') || 'Search Settings',
                                 subtitle: t('accountOverview.items.searchSettings.subtitle') || 'SafeSearch and personalization',
                                 onPress: () => navigate?.('SearchSettings'),
@@ -554,7 +637,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'language-settings',
                                 icon: 'language',
-                                iconColor: '#32D74B',
+                                iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.language.title') || 'Language',
                                 subtitle: t('accountOverview.items.language.subtitle') || 'Choose your preferred language',
                                 onPress: () => navigate?.('LanguageSelector'),
@@ -570,7 +653,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'help-support',
                                 icon: 'help-circle',
-                                iconColor: '#007AFF',
+                                iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.help.title'),
                                 subtitle: t('accountOverview.items.help.subtitle'),
                                 onPress: () => navigate?.('HelpSupport'),
@@ -578,7 +661,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'privacy-policy',
                                 icon: 'shield-checkmark',
-                                iconColor: '#30D158',
+                                iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.privacyPolicy.title') || 'Privacy Policy',
                                 subtitle: t('accountOverview.items.privacyPolicy.subtitle') || 'How we handle your data',
                                 onPress: () => navigate?.('LegalDocuments', { initialStep: 1 }),
@@ -586,7 +669,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'terms-of-service',
                                 icon: 'document-text',
-                                iconColor: '#007AFF',
+                                iconColor: baseThemeStyles.colors.iconSecurity,
                                 title: t('accountOverview.items.termsOfService.title') || 'Terms of Service',
                                 subtitle: t('accountOverview.items.termsOfService.subtitle') || 'Terms and conditions of use',
                                 onPress: () => navigate?.('LegalDocuments', { initialStep: 2 }),
@@ -594,7 +677,7 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                             {
                                 id: 'connected-apps',
                                 icon: 'link',
-                                iconColor: '#32D74B',
+                                iconColor: baseThemeStyles.colors.iconPersonalInfo,
                                 title: t('accountOverview.items.connectedApps.title'),
                                 subtitle: t('accountOverview.items.connectedApps.subtitle'),
                                 onPress: () => toast.info(t('accountOverview.items.connectedApps.coming')),
@@ -608,18 +691,18 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
                                 onPress: () => navigate?.('AppInfo'),
                             },
                         ]}
-                        theme={theme}
+
                     />
                 </Section>
 
                 {/* Sign Out */}
-                <Section title={t('accountOverview.sections.actions')} theme={theme}>
+                <Section title={t('accountOverview.sections.actions')} >
                     <GroupedItem
                         icon="log-out"
                         iconColor="#FF3B30"
                         title={t('accountOverview.items.signOut.title')}
                         subtitle={t('accountOverview.items.signOut.subtitle')}
-                        theme={theme}
+
                         onPress={confirmLogout}
                         isFirst={true}
                         isLast={true}
@@ -634,21 +717,80 @@ const AccountOverviewScreen: React.FC<BaseScreenProps> = ({
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#f2f2f2',
     },
     content: {
         flex: 1,
-        padding: 16,
     },
-
+    scrollContent: createScreenContentStyle(HEADER_PADDING_TOP_OVERVIEW),
+    headerSection: {
+        alignItems: 'center',
+        marginBottom: SECTION_GAP,
+        paddingTop: HEADER_PADDING_TOP_OVERVIEW,
+    },
+    avatarSectionWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+    },
+    avatarContainer: {
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        maxWidth: 600,
+        minHeight: 100,
+        overflow: 'hidden',
+        alignSelf: 'center',
+        aspectRatio: 6,
+    },
+    lottieBackground: {
+        position: 'absolute',
+        width: '100%',
+        maxWidth: 600,
+        minHeight: 100,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 0,
+        aspectRatio: 6,
+    },
+    avatarWrapper: {
+        zIndex: 1,
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 100,
+        height: 100,
+        left: '50%',
+        marginLeft: -50,
+        top: 0,
+    },
+    nameWrapper: {
+        marginTop: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    welcomeText: {
+        fontSize: 28,
+        fontWeight: '600',
+        marginBottom: 8,
+        fontFamily: fontFamilies.phuduBold,
+        maxWidth: '90%',
+    },
+    welcomeSubtext: {
+        fontSize: 16,
+        fontWeight: '400',
+        opacity: 0.6,
+    },
     userIcon: {
         marginRight: 12,
     },
     manageButton: {
-        backgroundColor: '#007AFF',
         paddingHorizontal: 16,
         paddingVertical: 8,
         borderRadius: 16,
+        // backgroundColor should be applied inline using colors.iconSecurity
     },
     manageButtonText: {
         color: '#fff',