@oxyhq/services 5.14.0 → 5.15.1

package/lib/commonjs/ui/screens/AccountOverviewScreen.js

@@ -6,16 +6,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _Avatar = _interopRequireDefault(require("../components/Avatar"));
 var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon"));
+var _fonts = require("../styles/fonts");
 var _sonner = require("../../lib/sonner");
 var _confirmAction = require("../utils/confirmAction");
 var _components = require("../components");
 var _useI18n = require("../hooks/useI18n");
+var _useThemeStyles = require("../hooks/useThemeStyles");
+var _userUtils = require("../utils/user-utils");
+var _useColorScheme = require("../hooks/use-color-scheme");
+var _themeUtils = require("../utils/themeUtils");
+var _OxyContext = require("../context/OxyContext");
+var _spacing = require("../constants/spacing");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Optional Lottie import - gracefully handle if not available
+let LottieView = 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 = 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
  * 
@@ -25,11 +50,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * - useCallback for event handlers to prevent unnecessary re-renders
  * - React.memo wrapper to prevent re-renders when props haven't changed
  * - GroupedSection components for better organization and cleaner code
- */const AccountOverviewScreen = ({
+ */
+const AccountOverviewScreen = ({
   onClose,
   theme,
   navigate
 }) => {
+  // Use useOxy() hook for OxyContext values
   const {
     user,
     logout,
@@ -45,24 +72,54 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
   const [showMoreAccounts, setShowMoreAccounts] = (0, _react.useState)(false);
   const [additionalAccountsData, setAdditionalAccountsData] = (0, _react.useState)([]);
   const [loadingAdditionalAccounts, setLoadingAdditionalAccounts] = (0, _react.useState)(false);
+  const lottieRef = (0, _react.useRef)(null);
+  const hasPlayedRef = (0, _react.useRef)(false);
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
 
-  // Memoize theme-related calculations to prevent unnecessary recalculations
-  const themeStyles = (0, _react.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 = (0, _useColorScheme.useColorScheme)();
+  const normalizedTheme = (0, _themeUtils.normalizeTheme)(theme);
+  const baseThemeStyles = (0, _useThemeStyles.useThemeStyles)(normalizedTheme, colorScheme);
+  const themeStyles = (0, _react.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 = (0, _react.useMemo)(() => (0, _userUtils.getDisplayName)(user), [user]);
+  const shortDisplayName = (0, _react.useMemo)(() => (0, _userUtils.getShortDisplayName)(user), [user]);
+  const avatarUrl = (0, _react.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 = (0, _react.useCallback)(() => {
+    navigate?.('EditProfile', {
+      initialSection: 'profilePicture',
+      initialField: 'avatar'
+    });
+  }, [navigate]);
+
+  // Play Lottie animation once when component mounts
+  (0, _react.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 = (0, _react.useMemo)(() => sessions.filter(session => session.sessionId !== activeSessionId && session.userId !== user?.id), [sessions, activeSessionId, user?.id]);
+  const additionalAccounts = (0, _react.useMemo)(() => (sessions || []).filter(session => session.sessionId !== activeSessionId && session.userId !== user?.id), [sessions, activeSessionId, user?.id]);
 
   // Load user profiles for additional accounts
   _react.default.useEffect(() => {
@@ -261,59 +318,74 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
       })
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.container, {
-      backgroundColor: '#f2f2f2'
+      backgroundColor: themeStyles.backgroundColor
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Header, {
-      title: t('accountOverview.title'),
-      theme: theme,
-      onBack: onClose,
-      variant: "minimal",
-      elevation: "subtle"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       style: styles.content,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
+      children: [user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.headerSection,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.avatarSectionWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.avatarContainer,
+            children: [LottieView && lottieAnimation && /*#__PURE__*/(0, _jsxRuntime.jsx)(LottieView, {
+              ref: lottieRef,
+              source: lottieAnimation,
+              style: styles.lottieBackground,
+              loop: false,
+              autoPlay: false
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: styles.avatarWrapper,
+              onPress: handleAvatarPress,
+              activeOpacity: 0.8,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+                uri: avatarUrl,
+                name: displayName,
+                size: 100,
+                theme: normalizedTheme
+              })
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.nameWrapper,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.welcomeText, {
+                color: themeStyles.textColor
+              }],
+              children: displayName
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.welcomeSubtext, {
+                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
+              }],
+              children: "Manage your Oxy account."
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: t('accountOverview.sections.profile'),
-        theme: theme,
         isFirst: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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: () => _sonner.toast.info(t('accountOverview.manageComing')),
-            customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.userIcon,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
-                  uri: user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined,
-                  name: user?.name?.full,
-                  size: 40,
-                  theme: theme
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                style: styles.manageButton,
-                onPress: () => _sonner.toast.info(t('accountOverview.manageComing')),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.manageButtonText,
-                  children: t('accountOverview.actions.manage')
-                })
-              })]
+            onPress: () => navigate?.('EditProfile', {
+              activeTab: 'profile'
             })
-          }],
-          theme: theme
+          }]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: t('accountOverview.sections.accountSettings'),
-        theme: theme,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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', {
@@ -322,7 +394,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             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', {
@@ -331,7 +403,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             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', {
@@ -340,47 +412,44 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             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')
           }, ...(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: () => _sonner.toast.info(t('accountOverview.items.billing.coming'))
-          }] : [])],
-          theme: theme
+          }] : [])]
         })
       }), showMoreAccounts && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: `${t('accountOverview.sections.additionalAccounts') || 'Additional Accounts'}${additionalAccountsData.length > 0 ? ` (${additionalAccountsData.length})` : ''}`,
-        theme: theme,
         children: loadingAdditionalAccounts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
               style: styles.loadingContainer,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                 size: "small",
-                color: "#007AFF"
+                color: baseThemeStyles.colors.iconSecurity
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.loadingText,
                 children: t('accountOverview.loadingAdditional.title') || 'Loading accounts...'
               })]
             })
-          }],
-          theme: theme
+          }]
         }) : additionalAccountsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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,
             subtitle: account.email || account.username,
             onPress: () => {
@@ -409,8 +478,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
                 color: "#ccc"
               })]
             })
-          })),
-          theme: theme
+          }))
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
           items: [{
             id: 'no-accounts',
@@ -418,38 +486,34 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
             iconColor: '#ccc',
             title: t('accountOverview.additional.noAccounts.title') || 'No other accounts',
             subtitle: t('accountOverview.additional.noAccounts.subtitle') || 'Add another account to switch between them'
-          }],
-          theme: theme
+          }]
         })
       }), showMoreAccounts && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: t('accountOverview.sections.accountManagement') || 'Account Management',
-        theme: theme,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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
           }, {
             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
+          }]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: t('accountOverview.sections.quickActions'),
-        theme: theme,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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'),
             subtitle: showMoreAccounts ? t('accountOverview.items.accountSwitcher.subtitleHide') : additionalAccountsData.length > 0 ? t('accountOverview.items.accountSwitcher.subtitleSwitchBetween', {
               count: String(additionalAccountsData.length + 1)
@@ -458,49 +522,47 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             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')
           }, {
             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')
           }, {
             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
           }, {
             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
+          }]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: t('accountOverview.sections.support'),
-        theme: theme,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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')
           }, {
             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')
@@ -514,14 +576,14 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             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')
           }, {
             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', {
@@ -530,7 +592,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             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', {
@@ -539,7 +601,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
           }, {
             id: 'connected-apps',
             icon: 'link',
-            iconColor: '#32D74B',
+            iconColor: baseThemeStyles.colors.iconPersonalInfo,
             title: t('accountOverview.items.connectedApps.title'),
             subtitle: t('accountOverview.items.connectedApps.subtitle'),
             onPress: () => _sonner.toast.info(t('accountOverview.items.connectedApps.coming'))
@@ -550,44 +612,101 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
             title: t('accountOverview.items.about.title'),
             subtitle: t('accountOverview.items.about.subtitle'),
             onPress: () => navigate?.('AppInfo')
-          }],
-          theme: theme
+          }]
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Section, {
         title: t('accountOverview.sections.actions'),
-        theme: theme,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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,
           showChevron: false
         })
       })]
-    })]
+    })
   });
 };
 const styles = _reactNative.StyleSheet.create({
   container: {
-    flex: 1,
-    backgroundColor: '#f2f2f2'
+    flex: 1
   },
   content: {
-    flex: 1,
-    padding: 16
+    flex: 1
+  },
+  scrollContent: (0, _spacing.createScreenContentStyle)(_spacing.HEADER_PADDING_TOP_OVERVIEW),
+  headerSection: {
+    alignItems: 'center',
+    marginBottom: _spacing.SECTION_GAP,
+    paddingTop: _spacing.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: _fonts.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',