@oxyhq/services 5.14.0 → 5.15.0

package/lib/module/ui/screens/AccountSettingsScreen.js

@@ -2,17 +2,33 @@
 
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, TextInput, Animated, Platform, Image } from 'react-native';
-import { useOxy } from '../context/OxyContext';
 import OxyIcon from '../components/icon/OxyIcon';
 import { Ionicons } from '@expo/vector-icons';
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { toast } from '../../lib/sonner';
 import { fontFamilies } from '../styles/fonts';
 import { confirmAction } from '../utils/confirmAction';
 import { useAuthStore } from '../stores/authStore';
-import { Header, GroupedSection } from '../components';
+import { GroupedSection } from '../components';
 import { useI18n } from '../hooks/useI18n';
-import QRCode from 'react-native-qrcode-svg';
+import { useThemeStyles } from '../hooks/useThemeStyles';
+import { useColorScheme } from '../hooks/use-color-scheme';
+import { Colors } from '../constants/theme';
+import { normalizeColorScheme, normalizeTheme } from '../utils/themeUtils';
+import { useHapticPress } from '../hooks/use-haptic-press';
+import { EditDisplayNameModal } from '../components/profile/EditDisplayNameModal';
+import { EditUsernameModal } from '../components/profile/EditUsernameModal';
+import { EditEmailModal } from '../components/profile/EditEmailModal';
+import { EditBioModal } from '../components/profile/EditBioModal';
+import { EditLocationModal } from '../components/profile/EditLocationModal';
+import { EditLinksModal } from '../components/profile/EditLinksModal';
+import { TwoFactorSetupModal } from '../components/profile/TwoFactorSetupModal';
+import { getDisplayName } from '../utils/user-utils';
 import { TTLCache, registerCacheForCleanup } from '../../utils/cache';
+import QRCode from 'react-native-qrcode-svg';
+import { useOxy } from '../context/OxyContext';
+import { SECTION_GAP_LARGE, COMPONENT_GAP, HEADER_PADDING_TOP_SETTINGS, createScreenContentStyle } from '../constants/spacing';
 
 // Caches for link metadata and location searches
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,19 +42,21 @@ const AccountSettingsScreen = ({
   goBack,
   navigate,
   initialField,
-  initialSection
+  initialSection,
+  scrollTo
 }) => {
+  // Use useOxy() hook for OxyContext values
   const {
     user: userFromContext,
     oxyServices,
     isLoading: authLoading,
     isAuthenticated,
-    showBottomSheet,
     activeSessionId
   } = useOxy();
   const {
     t
   } = useI18n();
+  const normalizedTheme = normalizeTheme(theme);
   const updateUser = useAuthStore(state => state.updateUser);
   // Get user directly from store to ensure reactivity to avatar changes
   const user = useAuthStore(state => state.user) || userFromContext;
@@ -85,7 +103,20 @@ const AccountSettingsScreen = ({
   const [links, setLinks] = useState([]);
   const [avatarFileId, setAvatarFileId] = useState('');
 
-  // Editing states
+  // Modal visibility states
+  const [showEditDisplayNameModal, setShowEditDisplayNameModal] = useState(false);
+  const [showEditUsernameModal, setShowEditUsernameModal] = useState(false);
+  const [showEditEmailModal, setShowEditEmailModal] = useState(false);
+  const [showEditBioModal, setShowEditBioModal] = useState(false);
+  const [showEditLocationModal, setShowEditLocationModal] = useState(false);
+  const [showEditLinksModal, setShowEditLinksModal] = useState(false);
+  const [showTwoFactorModal, setShowTwoFactorModal] = useState(false);
+
+  // Location and links state (for display only - modals handle editing)
+  const [locations, setLocations] = useState([]);
+  const [linksMetadata, setLinksMetadata] = useState([]);
+
+  // State for inline editing (used by old renderEditingField code)
   const [editingField, setEditingField] = useState(null);
   const [tempDisplayName, setTempDisplayName] = useState('');
   const [tempLastName, setTempLastName] = useState('');
@@ -94,27 +125,29 @@ const AccountSettingsScreen = ({
   const [tempBio, setTempBio] = useState('');
   const [tempLocation, setTempLocation] = useState('');
   const [tempLinks, setTempLinks] = useState([]);
+  const [tempLocations, setTempLocations] = useState([]);
   const [tempLinksWithMetadata, setTempLinksWithMetadata] = useState([]);
+  const [isAddingLocation, setIsAddingLocation] = useState(false);
+  const [isSearchingLocations, setIsSearchingLocations] = useState(false);
+  const [locationSearchResults, setLocationSearchResults] = useState([]);
+  const [newLocationQuery, setNewLocationQuery] = useState('');
   const [isAddingLink, setIsAddingLink] = useState(false);
-  const [newLinkUrl, setNewLinkUrl] = useState('');
   const [isFetchingMetadata, setIsFetchingMetadata] = useState(false);
+  const [newLinkUrl, setNewLinkUrl] = useState('');
 
-  // Location management state
-  const [tempLocations, setTempLocations] = useState([]);
-  const [isAddingLocation, setIsAddingLocation] = useState(false);
-  const [newLocationQuery, setNewLocationQuery] = useState('');
-  const [locationSearchResults, setLocationSearchResults] = useState([]);
-  const [isSearchingLocations, setIsSearchingLocations] = useState(false);
+  // Get theme colors using centralized hook
+  const colorScheme = useColorScheme();
+  const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+  const handlePressIn = useHapticPress();
 
-  // Memoize theme-related calculations to prevent unnecessary recalculations
-  const themeStyles = useMemo(() => {
-    const isDarkTheme = theme === 'dark';
-    return {
-      isDarkTheme,
-      backgroundColor: isDarkTheme ? '#121212' : '#f2f2f2',
-      primaryColor: '#007AFF'
-    };
-  }, [theme]);
+  // Extract colors for convenience - ensure it's always defined
+  // useThemeStyles always returns colors, but add safety check for edge cases
+  const colors = themeStyles.colors || Colors[normalizeColorScheme(colorScheme, theme || 'light')];
+
+  // Memoize onBack handler to provide stable reference for Reanimated
+  const handleBack = useMemo(() => {
+    return goBack || onClose || undefined;
+  }, [goBack, onClose]);
 
   // Memoize animation function to prevent recreation on every render
   const animateSaveButton = useCallback((toValue, onComplete) => {
@@ -158,7 +191,7 @@ const AccountSettingsScreen = ({
 
         // Handle locations - convert single location to array format
         if (user.locations && Array.isArray(user.locations)) {
-          setTempLocations(user.locations.map((loc, index) => ({
+          setLocations(user.locations.map((loc, index) => ({
             id: loc.id || `existing-${index}`,
             name: loc.name,
             label: loc.label,
@@ -166,13 +199,13 @@ const AccountSettingsScreen = ({
           })));
         } else if (user.location) {
           // Convert single location string to array format
-          setTempLocations([{
+          setLocations([{
             id: 'existing-0',
             name: user.location,
             label: 'Location'
           }]);
         } else {
-          setTempLocations([]);
+          setLocations([]);
         }
 
         // Handle links - simple and direct like other fields
@@ -183,7 +216,7 @@ const AccountSettingsScreen = ({
             ...link,
             id: link.id || `existing-${index}`
           }));
-          setTempLinksWithMetadata(metadataWithIds);
+          setLinksMetadata(metadataWithIds);
         } else if (Array.isArray(user.links)) {
           const simpleLinks = user.links.map(l => typeof l === 'string' ? l : l.link).filter(Boolean);
           setLinks(simpleLinks);
@@ -194,10 +227,10 @@ const AccountSettingsScreen = ({
             image: undefined,
             id: `existing-${index}`
           }));
-          setTempLinksWithMetadata(linksWithMetadata);
+          setLinksMetadata(linksWithMetadata);
         } else if (user.website) {
           setLinks([user.website]);
-          setTempLinksWithMetadata([{
+          setLinksMetadata([{
             url: user.website,
             title: user.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
             description: `Link to ${user.website}`,
@@ -206,7 +239,7 @@ const AccountSettingsScreen = ({
           }]);
         } else {
           setLinks([]);
-          setTempLinksWithMetadata([]);
+          setLinksMetadata([]);
         }
         isInitializedRef.current = true;
       }
@@ -239,6 +272,109 @@ const AccountSettingsScreen = ({
   // Delay constant for scroll completion
   const SCROLL_DELAY_MS = 600;
 
+  // Helper functions for inline editing (legacy support)
+  const startEditing = useCallback((field, initialValue) => {
+    setEditingField(field);
+    switch (field) {
+      case 'displayName':
+        setTempDisplayName(initialValue || displayName);
+        setTempLastName(lastName);
+        break;
+      case 'username':
+        setTempUsername(initialValue || username);
+        break;
+      case 'email':
+        setTempEmail(initialValue || email);
+        break;
+      case 'bio':
+        setTempBio(initialValue || bio);
+        break;
+      case 'location':
+        setTempLocations([...locations]);
+        break;
+      case 'links':
+        setTempLinksWithMetadata([...linksMetadata]);
+        break;
+      case 'twoFactor':
+        // No temp state needed for twoFactor
+        break;
+    }
+  }, [displayName, lastName, username, email, bio, locations, linksMetadata]);
+  const cancelEditing = useCallback(() => {
+    setEditingField(null);
+    setTempDisplayName('');
+    setTempLastName('');
+    setTempUsername('');
+    setTempEmail('');
+    setTempBio('');
+    setTempLocation('');
+    setTempLinks([]);
+    setTempLocations([]);
+    setTempLinksWithMetadata([]);
+    setIsAddingLocation(false);
+    setIsSearchingLocations(false);
+    setLocationSearchResults([]);
+    setNewLocationQuery('');
+    setIsAddingLink(false);
+    setIsFetchingMetadata(false);
+    setNewLinkUrl('');
+  }, []);
+  const saveField = useCallback(async field => {
+    if (!field) return;
+    setIsSaving(true);
+    try {
+      switch (field) {
+        case 'displayName':
+          await updateUser({
+            name: {
+              first: tempDisplayName,
+              last: tempLastName
+            }
+          }, oxyServices);
+          setDisplayName(tempDisplayName);
+          setLastName(tempLastName);
+          break;
+        case 'username':
+          await updateUser({
+            username: tempUsername
+          }, oxyServices);
+          setUsername(tempUsername);
+          break;
+        case 'email':
+          await updateUser({
+            email: tempEmail
+          }, oxyServices);
+          setEmail(tempEmail);
+          break;
+        case 'bio':
+          await updateUser({
+            bio: tempBio
+          }, oxyServices);
+          setBio(tempBio);
+          break;
+        case 'location':
+          await updateUser({
+            locations: tempLocations
+          }, oxyServices);
+          setLocations(tempLocations);
+          break;
+        case 'links':
+          await updateUser({
+            linksMetadata: tempLinksWithMetadata
+          }, oxyServices);
+          setLinksMetadata(tempLinksWithMetadata);
+          setLinks(tempLinksWithMetadata.map(l => l.url));
+          break;
+      }
+      setEditingField(null);
+      toast.success(t('editProfile.toasts.saved') || 'Saved');
+    } catch (error) {
+      toast.error(error?.message || t('editProfile.toasts.saveFailed') || 'Failed to save');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [tempDisplayName, tempLastName, tempUsername, tempEmail, tempBio, tempLocations, tempLinksWithMetadata, updateUser, oxyServices, t]);
+
   // Helper to get current value for a field
   const getFieldCurrentValue = useCallback(field => {
     switch (field) {
@@ -282,13 +418,10 @@ const AccountSettingsScreen = ({
     // Scroll to the specified section if initialSection is provided and we haven't scrolled yet
     if (initialSection && !hasScrolledToSectionRef.current) {
       const sectionY = sectionYPositions[initialSection];
-      if (sectionY !== null && sectionY !== undefined && scrollViewRef.current) {
+      if (sectionY !== null && sectionY !== undefined && scrollTo) {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            scrollViewRef.current?.scrollTo({
-              y: Math.max(0, sectionY - SCROLL_OFFSET),
-              animated: true
-            });
+            scrollTo(Math.max(0, sectionY - SCROLL_OFFSET), true);
             hasScrolledToSectionRef.current = true;
           });
         });
@@ -305,11 +438,11 @@ const AccountSettingsScreen = ({
         username,
         email,
         bio,
-        location: tempLocations.length > 0 ? tempLocations[0].name : '',
+        location: locations.length > 0 ? locations[0].name : '',
         // Keep backward compatibility
-        locations: tempLocations.length > 0 ? tempLocations : undefined,
+        locations: locations.length > 0 ? locations : undefined,
         links,
-        linksMetadata: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata : undefined
+        linksMetadata: linksMetadata.length > 0 ? linksMetadata : undefined
       };
 
       // Handle name field
@@ -347,207 +480,106 @@ const AccountSettingsScreen = ({
     });
   };
   const openAvatarPicker = useCallback(() => {
-    showBottomSheet?.({
-      screen: 'FileManagement',
-      props: {
-        selectMode: true,
-        multiSelect: false,
-        afterSelect: 'back',
-        onSelect: async file => {
-          if (!file.contentType.startsWith('image/')) {
-            toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
-            return;
-          }
-          // If already selected, do nothing
-          if (file.id === avatarFileId) {
-            toast.info?.(t('editProfile.toasts.avatarUnchanged') || 'Avatar unchanged');
-            return;
-          }
+    toast.info?.(t('editProfile.toasts.avatarPickerUnavailable') || 'Avatar picker is not available in this build.');
+  }, [t]);
 
-          // Optimistically update UI immediately
-          setOptimisticAvatarId(file.id);
-          setAvatarFileId(file.id);
+  // Handlers to open modals
+  const handleOpenDisplayNameModal = useCallback(() => setShowEditDisplayNameModal(true), []);
+  const handleOpenUsernameModal = useCallback(() => setShowEditUsernameModal(true), []);
+  const handleOpenEmailModal = useCallback(() => setShowEditEmailModal(true), []);
+  const handleOpenBioModal = useCallback(() => setShowEditBioModal(true), []);
+  const handleOpenLocationModal = useCallback(() => setShowEditLocationModal(true), []);
+  const handleOpenLinksModal = useCallback(() => setShowEditLinksModal(true), []);
+  const handleOpenTwoFactorModal = useCallback(() => setShowTwoFactorModal(true), []);
 
-          // Auto-save avatar immediately (does not close edit profile screen)
-          (async () => {
-            try {
-              setIsUpdatingAvatar(true);
+  // Handler to refresh data after modal saves
+  // Note: Access user directly from store when invoked to get latest value,
+  // not from closure which may be stale after modal saves update the backend
+  const handleModalSave = useCallback(() => {
+    // Get fresh user data from store to ensure we have the latest values
+    // after the modal's save operation updates the backend
+    // Read from store directly (not from closure) to avoid stale data
+    const currentUser = useAuthStore.getState().user;
 
-              // Update file visibility to public for avatar
-              try {
-                await oxyServices.assetUpdateVisibility(file.id, 'public');
-              } catch (visError) {
-                // Continue with avatar update even if visibility update fails
-              }
+    // Reload user data to reflect changes
+    if (currentUser) {
+      const userDisplayName = typeof currentUser.name === 'string' ? currentUser.name : currentUser.name?.first || currentUser.name?.full || '';
+      const userLastName = typeof currentUser.name === 'object' ? currentUser.name?.last || '' : '';
+      setDisplayName(userDisplayName);
+      setLastName(userLastName);
+      setUsername(currentUser.username || '');
+      setEmail(currentUser.email || '');
+      setBio(currentUser.bio || '');
 
-              // Update on server directly without using updateUser (which triggers fetchUser)
-              // This prevents the entire component from re-rendering
-              await oxyServices.updateProfile({
-                avatar: file.id
-              });
-
-              // Update the user object in store directly without triggering fetchUser
-              // This prevents isLoading from being set to true, which would show loading screen
-              const currentUser = useAuthStore.getState().user;
-              if (currentUser) {
-                useAuthStore.setState({
-                  user: {
-                    ...currentUser,
-                    avatar: file.id
-                  }
-                  // Don't update lastUserFetch to avoid cache issues
-                });
-              }
-
-              // Update local state - keep avatarFileId set to the new value
-              // Don't clear optimisticAvatarId yet - let it persist until user object updates
-              // This ensures the avatar displays correctly
-              setAvatarFileId(file.id);
-              toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
-
-              // Scroll to avatar section after a brief delay to ensure UI is updated
-              requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                  if (avatarSectionY !== null) {
-                    scrollViewRef.current?.scrollTo({
-                      y: Math.max(0, avatarSectionY - 100),
-                      // Offset to show section near top
-                      animated: true
-                    });
-                  } else {
-                    // Fallback: scroll to approximate position
-                    scrollViewRef.current?.scrollTo({
-                      y: 200,
-                      // Approximate position of avatar section
-                      animated: true
-                    });
-                  }
-                });
-              });
-            } catch (e) {
-              // Revert optimistic update on error
-              setAvatarFileId(typeof user?.avatar === 'string' ? user.avatar : '');
-              setOptimisticAvatarId(null);
-              toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
-            } finally {
-              setIsUpdatingAvatar(false);
-            }
-          })();
-        },
-        // Limit to images client-side by using photos view if later exposed
-        disabledMimeTypes: ['video/', 'audio/', 'application/pdf']
+      // Reload locations and links
+      if (currentUser.locations && Array.isArray(currentUser.locations)) {
+        setLocations(currentUser.locations.map((loc, index) => ({
+          id: loc.id || `existing-${index}`,
+          name: loc.name,
+          label: loc.label,
+          coordinates: loc.coordinates
+        })));
+      } else if (currentUser.location) {
+        setLocations([{
+          id: 'existing-0',
+          name: currentUser.location,
+          label: 'Location'
+        }]);
+      } else {
+        setLocations([]);
+      }
+      if (currentUser.linksMetadata && Array.isArray(currentUser.linksMetadata)) {
+        setLinksMetadata(currentUser.linksMetadata.map((link, index) => ({
+          ...link,
+          id: link.id || `existing-${index}`
+        })));
+      } else {
+        setLinksMetadata([]);
       }
-    });
-  }, [showBottomSheet, oxyServices, avatarFileId, updateUser, user]);
-  const startEditing = useCallback((type, currentValue) => {
-    switch (type) {
-      case 'displayName':
-        setTempDisplayName(displayName);
-        setTempLastName(lastName);
-        break;
-      case 'username':
-        setTempUsername(currentValue);
-        break;
-      case 'email':
-        setTempEmail(currentValue);
-        break;
-      case 'bio':
-        setTempBio(currentValue);
-        break;
-      case 'location':
-        // Don't reset the locations - keep the existing data
-        break;
-      case 'links':
-        // Don't reset the metadata - keep the existing rich metadata
-        // The tempLinksWithMetadata should already contain the rich data from the database
-        break;
-      case 'twoFactor':
-        // Reset TOTP temp state
-        setTotpSetupUrl(null);
-        setTotpCode('');
-        break;
     }
-    setEditingField(type);
-  }, [displayName, lastName]);
+  }, []); // Empty dependency array - callback reads fresh data from store at call time
 
-  // Handle initialField prop - must be after startEditing and openAvatarPicker are declared
+  // Handle initialField prop - open appropriate modal
   useEffect(() => {
-    // Clear any pending timeout
-    if (initialFieldTimeoutRef.current) {
-      clearTimeout(initialFieldTimeoutRef.current);
-      initialFieldTimeoutRef.current = null;
-    }
-
-    // If initialField changed, reset the flag
-    if (previousInitialFieldRef.current !== initialField) {
-      hasSetInitialFieldRef.current = false;
-      previousInitialFieldRef.current = initialField;
-    }
-
-    // Set the editing field if initialField is provided and we haven't set it yet
-    if (initialField && !hasSetInitialFieldRef.current) {
+    if (initialField) {
       // Special handling for avatar - open avatar picker directly
       if (initialField === 'avatar') {
-        // Wait for section to be scrolled, then open picker
-        initialFieldTimeoutRef.current = setTimeout(() => {
+        setTimeout(() => {
           openAvatarPicker();
-          hasSetInitialFieldRef.current = true;
-        }, SCROLL_DELAY_MS);
+        }, 300);
       } else {
-        // For other fields, get current value and start editing after scroll
-        const currentValue = getFieldCurrentValue(initialField);
-
-        // Wait for section to be scrolled, then start editing
-        initialFieldTimeoutRef.current = setTimeout(() => {
-          startEditing(initialField, currentValue);
-          hasSetInitialFieldRef.current = true;
-        }, SCROLL_DELAY_MS);
-      }
-    }
-    return () => {
-      if (initialFieldTimeoutRef.current) {
-        clearTimeout(initialFieldTimeoutRef.current);
-        initialFieldTimeoutRef.current = null;
+        // Open appropriate modal
+        setTimeout(() => {
+          switch (initialField) {
+            case 'displayName':
+              setShowEditDisplayNameModal(true);
+              break;
+            case 'username':
+              setShowEditUsernameModal(true);
+              break;
+            case 'email':
+              setShowEditEmailModal(true);
+              break;
+            case 'bio':
+              setShowEditBioModal(true);
+              break;
+            case 'location':
+              setShowEditLocationModal(true);
+              break;
+            case 'links':
+              setShowEditLinksModal(true);
+              break;
+            case 'twoFactor':
+              setShowTwoFactorModal(true);
+              break;
+          }
+        }, 300);
       }
-    };
-  }, [initialField, getFieldCurrentValue, startEditing, openAvatarPicker]);
-  const saveField = type => {
-    animateSaveButton(0.95); // Scale down slightly for animation
-
-    switch (type) {
-      case 'displayName':
-        setDisplayName(tempDisplayName);
-        setLastName(tempLastName);
-        break;
-      case 'username':
-        setUsername(tempUsername);
-        break;
-      case 'email':
-        setEmail(tempEmail);
-        break;
-      case 'bio':
-        setBio(tempBio);
-        break;
-      case 'location':
-        // Locations are handled in the main save function
-        break;
-      case 'links':
-        // Save both URLs and metadata
-        setLinks(tempLinksWithMetadata.map(link => link.url));
-        // Store full metadata for database
-        setTempLinksWithMetadata(tempLinksWithMetadata);
-        break;
     }
+  }, [initialField, openAvatarPicker]);
 
-    // Complete animation, then reset and close editing
-    animateSaveButton(1, () => {
-      setEditingField(null);
-    });
-  };
-  const cancelEditing = () => {
-    setEditingField(null);
-  };
-  const fetchLinkMetadata = async url => {
+  // Removed fetchLinkMetadata - now handled by EditLinksModal
+  const _fetchLinkMetadata = async url => {
     // Check cache first
     const cacheKey = url.toLowerCase().trim();
     const cached = linkMetadataCache.get(cacheKey);
@@ -583,6 +615,8 @@ const AccountSettingsScreen = ({
       setIsFetchingMetadata(false);
     }
   };
+
+  // Helper functions for inline editing (legacy support - still used by renderEditingField)
   const searchLocations = async query => {
     if (!query.trim() || query.length < 3) {
       setLocationSearchResults([]);
@@ -639,7 +673,7 @@ const AccountSettingsScreen = ({
   const addLink = async () => {
     if (!newLinkUrl.trim()) return;
     const url = newLinkUrl.trim();
-    const metadata = await fetchLinkMetadata(url);
+    const metadata = await _fetchLinkMetadata(url);
     setTempLinksWithMetadata(prev => [...prev, metadata]);
     setNewLinkUrl('');
     setIsAddingLink(false);
@@ -655,12 +689,18 @@ const AccountSettingsScreen = ({
       return newLinks;
     });
   };
+
+  // Memoize display name for avatar
+  const displayNameForAvatar = useMemo(() => getDisplayName(user), [user]);
+
+  // Legacy renderEditingField function (still used for twoFactor and fallback)
   const renderEditingField = type => {
+    if (!type) return null;
     if (type === 'twoFactor') {
       const enabled = !!user?.privacySettings?.twoFactorEnabled;
       return /*#__PURE__*/_jsx(View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/_jsx(View, {
           style: styles.editingFieldContent,
@@ -670,7 +710,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Two\u2011Factor Authentication (TOTP)"
               })
@@ -679,7 +719,9 @@ const AccountSettingsScreen = ({
                 style: styles.editingFieldDescription,
                 children: "Protect your account with a 6\u2011digit code from an authenticator app. Scan the QR code then enter the code to enable."
               }), !totpSetupUrl ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-                style: styles.primaryButton,
+                style: [styles.primaryButton, {
+                  backgroundColor: colors.iconSecurity
+                }],
                 disabled: isTotpBusy,
                 onPress: async () => {
                   if (!activeSessionId) {
@@ -734,7 +776,9 @@ const AccountSettingsScreen = ({
                     maxLength: 6
                   })]
                 }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-                  style: styles.primaryButton,
+                  style: [styles.primaryButton, {
+                    backgroundColor: colors.iconSecurity
+                  }],
                   disabled: isTotpBusy || totpCode.length !== 6,
                   onPress: async () => {
                     if (!activeSessionId) {
@@ -791,7 +835,7 @@ const AccountSettingsScreen = ({
                 })]
               }), /*#__PURE__*/_jsxs(TouchableOpacity, {
                 style: [styles.primaryButton, {
-                  backgroundColor: '#d9534f'
+                  backgroundColor: colors.sidebarIconSharing
                 }],
                 disabled: isTotpBusy || totpCode.length !== 6,
                 onPress: async () => {
@@ -832,7 +876,7 @@ const AccountSettingsScreen = ({
     if (type === 'displayName') {
       return /*#__PURE__*/_jsx(View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/_jsx(View, {
           style: styles.editingFieldContent,
@@ -842,7 +886,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Edit Full Name"
               })
@@ -863,7 +907,7 @@ const AccountSettingsScreen = ({
                   value: tempDisplayName,
                   onChangeText: setTempDisplayName,
                   placeholder: "Enter your first name",
-                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  placeholderTextColor: colors.secondaryText,
                   autoFocus: true,
                   selectionColor: themeStyles.primaryColor
                 })]
@@ -879,7 +923,7 @@ const AccountSettingsScreen = ({
                   value: tempLastName,
                   onChangeText: setTempLastName,
                   placeholder: "Enter your last name",
-                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  placeholderTextColor: colors.secondaryText,
                   selectionColor: themeStyles.primaryColor
                 })]
               })]
@@ -891,7 +935,7 @@ const AccountSettingsScreen = ({
     if (type === 'location') {
       return /*#__PURE__*/_jsx(View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/_jsx(View, {
           style: styles.editingFieldContent,
@@ -901,7 +945,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Manage Your Locations"
               })
@@ -910,7 +954,9 @@ const AccountSettingsScreen = ({
               children: [/*#__PURE__*/_jsxs(Text, {
                 style: styles.addLocationLabel,
                 children: ["Add New Location", isSearchingLocations && /*#__PURE__*/_jsx(Text, {
-                  style: styles.searchingText,
+                  style: [styles.searchingText, {
+                    color: colors.iconSecurity
+                  }],
                   children: " \u2022 Searching..."
                 })]
               }), /*#__PURE__*/_jsxs(View, {
@@ -923,7 +969,7 @@ const AccountSettingsScreen = ({
                     searchLocations(text);
                   },
                   placeholder: "Search for a location...",
-                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  placeholderTextColor: colors.secondaryText,
                   autoFocus: true,
                   selectionColor: themeStyles.primaryColor
                 }), /*#__PURE__*/_jsx(View, {
@@ -964,7 +1010,9 @@ const AccountSettingsScreen = ({
                 size: 20,
                 color: themeStyles.primaryColor
               }), /*#__PURE__*/_jsx(Text, {
-                style: styles.addLocationTriggerText,
+                style: [styles.addLocationTriggerText, {
+                  color: colors.iconSecurity
+                }],
                 children: "Add a new location"
               })]
             }), tempLocations.length > 0 && /*#__PURE__*/_jsxs(View, {
@@ -1009,7 +1057,9 @@ const AccountSettingsScreen = ({
                         numberOfLines: 1,
                         children: location.name
                       }), location.label && /*#__PURE__*/_jsx(View, {
-                        style: styles.locationLabel,
+                        style: [styles.locationLabel, {
+                          backgroundColor: colors.iconSecurity
+                        }],
                         children: /*#__PURE__*/_jsx(Text, {
                           style: styles.locationLabelText,
                           children: location.label
@@ -1049,7 +1099,7 @@ const AccountSettingsScreen = ({
     if (type === 'links') {
       return /*#__PURE__*/_jsx(View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/_jsx(View, {
           style: styles.editingFieldContent,
@@ -1059,7 +1109,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Manage Your Links"
               })
@@ -1068,11 +1118,10 @@ const AccountSettingsScreen = ({
               // Add new link item
               ...(isAddingLink ? [{
                 id: 'add-link-input',
-                icon: 'add',
-                iconColor: '#32D74B',
+                icon: 'plus',
+                iconColor: colors.sidebarIconSharing,
                 title: 'Add New Link',
                 subtitle: isFetchingMetadata ? 'Fetching metadata...' : 'Enter URL to add a new link',
-                multiRow: true,
                 customContent: /*#__PURE__*/_jsxs(View, {
                   style: styles.addLinkInputContainer,
                   children: [/*#__PURE__*/_jsx(TextInput, {
@@ -1080,7 +1129,7 @@ const AccountSettingsScreen = ({
                     value: newLinkUrl,
                     onChangeText: setNewLinkUrl,
                     placeholder: "Enter URL (e.g., https://example.com)",
-                    placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                    placeholderTextColor: colors.secondaryText,
                     keyboardType: "url",
                     autoFocus: true,
                     selectionColor: themeStyles.primaryColor
@@ -1098,6 +1147,7 @@ const AccountSettingsScreen = ({
                       })
                     }), /*#__PURE__*/_jsx(TouchableOpacity, {
                       style: [styles.addLinkButton, styles.addButton, {
+                        backgroundColor: colors.iconSecurity,
                         opacity: isFetchingMetadata ? 0.5 : 1
                       }],
                       onPress: addLink,
@@ -1114,8 +1164,8 @@ const AccountSettingsScreen = ({
                 })
               }] : [{
                 id: 'add-link-trigger',
-                icon: 'add',
-                iconColor: '#32D74B',
+                icon: 'plus',
+                iconColor: colors.sidebarIconSharing,
                 title: 'Add a new link',
                 subtitle: 'Tap to add a new link to your profile',
                 onPress: () => setIsAddingLink(true)
@@ -1123,13 +1173,20 @@ const AccountSettingsScreen = ({
               // Existing links
               ...tempLinksWithMetadata.map((link, index) => ({
                 id: link.id,
-                image: link.image || undefined,
-                imageSize: 32,
-                icon: link.image ? undefined : 'link',
-                iconColor: '#32D74B',
+                customIcon: link.image ? /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: link.image
+                  },
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18
+                  }
+                }) : undefined,
+                icon: !link.image ? 'link-variant' : undefined,
+                iconColor: colors.sidebarIconSharing,
                 title: link.title || link.url,
                 subtitle: link.description && link.description !== link.title ? link.description : link.url,
-                multiRow: true,
                 customContent: /*#__PURE__*/_jsxs(View, {
                   style: styles.linkItemActions,
                   children: [/*#__PURE__*/_jsxs(View, {
@@ -1163,8 +1220,7 @@ const AccountSettingsScreen = ({
                     })
                   })]
                 })
-              }))],
-              theme: theme
+              }))]
             }), tempLinksWithMetadata.length > 0 && /*#__PURE__*/_jsx(View, {
               style: styles.reorderHint,
               children: /*#__PURE__*/_jsx(Text, {
@@ -1182,7 +1238,7 @@ const AccountSettingsScreen = ({
         value: displayName,
         placeholder: 'Enter your display name',
         icon: 'person',
-        color: '#007AFF',
+        color: colors.iconPersonalInfo,
         multiline: false,
         keyboardType: 'default'
       },
@@ -1191,7 +1247,7 @@ const AccountSettingsScreen = ({
         value: username,
         placeholder: 'Choose a username',
         icon: 'at',
-        color: '#5856D6',
+        color: colors.iconData,
         multiline: false,
         keyboardType: 'default'
       },
@@ -1200,7 +1256,7 @@ const AccountSettingsScreen = ({
         value: email,
         placeholder: 'Enter your email address',
         icon: 'mail',
-        color: '#FF9500',
+        color: colors.iconStorage,
         multiline: false,
         keyboardType: 'email-address'
       },
@@ -1209,7 +1265,7 @@ const AccountSettingsScreen = ({
         value: bio,
         placeholder: 'Tell people about yourself...',
         icon: 'document-text',
-        color: '#34C759',
+        color: colors.iconPersonalInfo,
         multiline: true,
         keyboardType: 'default'
       },
@@ -1218,7 +1274,7 @@ const AccountSettingsScreen = ({
         value: location,
         placeholder: 'Enter your location',
         icon: 'location',
-        color: '#FF3B30',
+        color: colors.iconSharing,
         multiline: false,
         keyboardType: 'default'
       },
@@ -1227,7 +1283,7 @@ const AccountSettingsScreen = ({
         value: links.join(', '),
         placeholder: 'Enter your links (comma separated)',
         icon: 'link',
-        color: '#32D74B',
+        color: colors.iconPersonalInfo,
         multiline: false,
         keyboardType: 'url'
       }
@@ -1276,7 +1332,7 @@ const AccountSettingsScreen = ({
     };
     return /*#__PURE__*/_jsx(View, {
       style: [styles.editingFieldContainer, {
-        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF'
+        backgroundColor: colors.background
       }],
       children: /*#__PURE__*/_jsx(View, {
         style: styles.editingFieldContent,
@@ -1286,7 +1342,7 @@ const AccountSettingsScreen = ({
             style: styles.editingFieldHeader,
             children: /*#__PURE__*/_jsx(Text, {
               style: [styles.editingFieldLabel, {
-                color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000'
+                color: colors.text
               }],
               children: config.label
             })
@@ -1310,10 +1366,10 @@ const AccountSettingsScreen = ({
       })
     });
   };
-  if (authLoading || !isAuthenticated) {
+  if (isLoading || !isAuthenticated) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, {
-        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7',
+        backgroundColor: themeStyles.backgroundColor,
         justifyContent: 'center'
       }],
       children: /*#__PURE__*/_jsx(ActivityIndicator, {
@@ -1324,40 +1380,40 @@ const AccountSettingsScreen = ({
   }
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
-      backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7'
+      backgroundColor: themeStyles.backgroundColor
     }],
     children: [editingField ? /*#__PURE__*/_jsxs(View, {
       style: [styles.editingHeader, {
-        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF',
-        borderBottomColor: themeStyles.isDarkTheme ? '#38383A' : '#E5E5EA'
+        backgroundColor: colors.background,
+        borderBottomColor: colors.border
       }],
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.editingHeaderContent,
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.editingBackButton, {
-            backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+            backgroundColor: colors.card
           }],
           onPress: cancelEditing,
           children: /*#__PURE__*/_jsx(Ionicons, {
             name: "chevron-back",
             size: 20,
-            color: themeStyles.primaryColor
+            color: colors.tint
           })
         }), /*#__PURE__*/_jsx(View, {
           style: styles.editingTitleContainer
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           style: [styles.editingSaveButton, {
             opacity: isSaving ? 0.5 : 1,
-            backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+            backgroundColor: colors.card
           }],
           onPress: () => saveField(editingField),
           disabled: isSaving,
           children: isSaving ? /*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
-            color: themeStyles.primaryColor
+            color: colors.tint
           }) : /*#__PURE__*/_jsx(Text, {
             style: [styles.editingSaveButtonText, {
-              color: themeStyles.primaryColor
+              color: colors.tint
             }],
             children: "Save"
           })
@@ -1366,34 +1422,25 @@ const AccountSettingsScreen = ({
         style: styles.editingHeaderBottom,
         children: [/*#__PURE__*/_jsx(View, {
           style: [styles.editingIconContainer, {
-            backgroundColor: editingField === 'displayName' ? '#007AFF20' : editingField === 'username' ? '#5856D620' : editingField === 'email' ? '#FF950020' : editingField === 'bio' ? '#34C75920' : editingField === 'location' ? '#FF3B3020' : editingField === 'links' ? '#32D74B20' : '#007AFF20'
+            backgroundColor: editingField === 'displayName' ? `${colors.sidebarIconPersonalInfo}20` : editingField === 'username' ? `${colors.sidebarIconData}20` : editingField === 'email' ? `${colors.sidebarIconSecurity}20` : editingField === 'bio' ? `${colors.sidebarIconPersonalInfo}20` : editingField === 'location' ? `${colors.sidebarIconSharing}20` : editingField === 'links' ? `${colors.sidebarIconPersonalInfo}20` : `${colors.tint}20`
           }],
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: editingField === 'displayName' ? 'person' : editingField === 'username' ? 'at' : editingField === 'email' ? 'mail' : editingField === 'bio' ? 'document-text' : editingField === 'location' ? 'location' : editingField === 'links' ? 'link' : 'person',
+          children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+            name: editingField === 'displayName' ? 'account-outline' : editingField === 'username' ? 'at' : editingField === 'email' ? 'email-outline' : editingField === 'bio' ? 'text-box-outline' : editingField === 'location' ? 'map-marker-outline' : editingField === 'links' ? 'link-variant' : 'account-outline',
             size: 28,
-            color: editingField === 'displayName' ? '#007AFF' : editingField === 'username' ? '#5856D6' : editingField === 'email' ? '#FF9500' : editingField === 'bio' ? '#34C759' : editingField === 'location' ? '#FF3B30' : editingField === 'links' ? '#32D74B' : '#007AFF'
+            color: editingField === 'displayName' ? colors.sidebarIconPersonalInfo : editingField === 'username' ? colors.sidebarIconData : editingField === 'email' ? colors.sidebarIconSecurity : editingField === 'bio' ? colors.sidebarIconPersonalInfo : editingField === 'location' ? colors.sidebarIconSharing : editingField === 'links' ? colors.sidebarIconPersonalInfo : colors.tint
           })
         }), /*#__PURE__*/_jsx(Text, {
           style: [styles.editingBottomTitle, {
-            color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000'
+            color: colors.text
           }],
           children: editingField === 'displayName' ? t('editProfile.items.displayName.title') || 'Display Name' : editingField === 'username' ? t('editProfile.items.username.title') || 'Username' : editingField === 'email' ? t('editProfile.items.email.title') || 'Email' : editingField === 'bio' ? t('editProfile.items.bio.title') || 'Bio' : editingField === 'location' ? t('editProfile.items.locations.title') || 'Location' : editingField === 'links' ? t('editProfile.items.links.title') || 'Links' : 'Field'
         })]
       })]
-    }) : /*#__PURE__*/_jsx(Header, {
-      title: t('editProfile.title') || 'Edit Profile',
-      theme: theme,
-      onBack: goBack || onClose,
-      rightAction: {
-        icon: 'checkmark',
-        onPress: handleSave,
-        loading: isSaving,
-        disabled: isSaving
-      },
-      elevation: "subtle"
-    }), /*#__PURE__*/_jsx(ScrollView, {
+    }) : null, /*#__PURE__*/_jsx(ScrollView, {
       ref: scrollViewRef,
       style: editingField ? styles.contentEditing : styles.content,
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
       children: editingField ?
       /*#__PURE__*/
       // Show only the editing interface when editing
@@ -1404,7 +1451,24 @@ const AccountSettingsScreen = ({
       /*#__PURE__*/
       // Show all settings when not editing
       _jsxs(_Fragment, {
-        children: [showRecoveryModal && /*#__PURE__*/_jsx(View, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [styles.headerContainer, styles.headerSection],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.modernTitle, {
+              color: themeStyles.textColor,
+              marginBottom: 0,
+              marginTop: 0
+            }],
+            children: t('accountOverview.items.editProfile.title') || t('editProfile.title') || 'Edit Profile'
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.modernSubtitle, {
+              color: colors.secondaryText,
+              marginBottom: 0,
+              marginTop: 0
+            }],
+            children: t('accountOverview.items.editProfile.subtitle') || t('editProfile.subtitle') || 'Manage your profile and preferences'
+          })]
+        }), showRecoveryModal && /*#__PURE__*/_jsx(View, {
           style: {
             position: 'absolute',
             top: 0,
@@ -1490,6 +1554,7 @@ const AccountSettingsScreen = ({
               })]
             }), /*#__PURE__*/_jsxs(TouchableOpacity, {
               style: [styles.primaryButton, {
+                backgroundColor: colors.iconSecurity,
                 alignSelf: 'flex-end',
                 marginTop: 8
               }],
@@ -1523,7 +1588,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.profilePicture') || 'PROFILE PICTURE'
           }), /*#__PURE__*/_jsx(View, {
@@ -1531,29 +1596,20 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/_jsx(GroupedSection, {
               items: [{
                 id: 'profile-photo',
-                icon: avatarFileId ? undefined : 'person',
-                iconColor: '#007AFF',
-                // Use optimistic avatar ID if available, otherwise use saved one
-                image: optimisticAvatarId || avatarFileId ? oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb') : undefined,
-                imageSize: 40,
-                title: 'Profile Photo',
-                subtitle: isUpdatingAvatar ? 'Updating profile picture...' : avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
-                onPress: isUpdatingAvatar ? undefined : openAvatarPicker,
-                disabled: isUpdatingAvatar,
-                customIcon: isUpdatingAvatar ? /*#__PURE__*/_jsxs(Animated.View, {
+                customIcon: optimisticAvatarId || avatarFileId ? isUpdatingAvatar ? /*#__PURE__*/_jsxs(Animated.View, {
                   style: {
                     position: 'relative',
-                    width: 40,
-                    height: 40
+                    width: 36,
+                    height: 36
                   },
-                  children: [(optimisticAvatarId || avatarFileId) && /*#__PURE__*/_jsx(Animated.Image, {
+                  children: [/*#__PURE__*/_jsx(Animated.Image, {
                     source: {
                       uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
                     },
                     style: {
-                      width: 40,
-                      height: 40,
-                      borderRadius: 22,
+                      width: 36,
+                      height: 36,
+                      borderRadius: 18,
                       opacity: 0.6
                     }
                   }), /*#__PURE__*/_jsx(View, {
@@ -1565,24 +1621,38 @@ const AccountSettingsScreen = ({
                       bottom: 0,
                       justifyContent: 'center',
                       alignItems: 'center',
-                      backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
-                      borderRadius: 22
+                      backgroundColor: colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                      borderRadius: 18
                     },
                     children: /*#__PURE__*/_jsx(ActivityIndicator, {
                       size: "small",
-                      color: themeStyles.primaryColor
+                      color: colors.tint
                     })
                   })]
-                }) : undefined
+                }) : /*#__PURE__*/_jsx(Image, {
+                  source: {
+                    uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
+                  },
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18
+                  }
+                }) : undefined,
+                icon: !(optimisticAvatarId || avatarFileId) ? 'account-outline' : undefined,
+                iconColor: colors.sidebarIconPersonalInfo,
+                title: 'Profile Photo',
+                subtitle: isUpdatingAvatar ? 'Updating profile picture...' : avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
+                onPress: isUpdatingAvatar ? undefined : openAvatarPicker,
+                disabled: isUpdatingAvatar
               }, ...(avatarFileId && !isUpdatingAvatar ? [{
                 id: 'remove-profile-photo',
-                icon: 'trash',
-                iconColor: '#FF3B30',
+                icon: 'delete-outline',
+                iconColor: colors.sidebarIconSharing,
                 title: 'Remove Photo',
                 subtitle: 'Delete current profile picture',
                 onPress: handleAvatarRemove
-              }] : [])],
-              theme: theme
+              }] : [])]
             })
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -1596,7 +1666,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.basicInfo') || 'BASIC INFORMATION'
           }), /*#__PURE__*/_jsx(View, {
@@ -1604,27 +1674,26 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/_jsx(GroupedSection, {
               items: [{
                 id: 'display-name',
-                icon: 'person',
-                iconColor: '#007AFF',
+                icon: 'account-outline',
+                iconColor: colors.sidebarIconPersonalInfo,
                 title: t('editProfile.items.displayName.title') || 'Display Name',
                 subtitle: [displayName, lastName].filter(Boolean).join(' ') || t('editProfile.items.displayName.add') || 'Add your display name',
-                onPress: () => startEditing('displayName', '')
+                onPress: handleOpenDisplayNameModal
               }, {
                 id: 'username',
                 icon: 'at',
-                iconColor: '#5856D6',
+                iconColor: colors.sidebarIconData,
                 title: t('editProfile.items.username.title') || 'Username',
                 subtitle: username || t('editProfile.items.username.choose') || 'Choose a username',
-                onPress: () => startEditing('username', username)
+                onPress: handleOpenUsernameModal
               }, {
                 id: 'email',
-                icon: 'mail',
-                iconColor: '#FF9500',
+                icon: 'email-outline',
+                iconColor: colors.sidebarIconSecurity,
                 title: t('editProfile.items.email.title') || 'Email',
                 subtitle: email || t('editProfile.items.email.add') || 'Add your email address',
-                onPress: () => startEditing('email', email)
-              }],
-              theme: theme
+                onPress: handleOpenEmailModal
+              }]
             })
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -1638,7 +1707,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.about') || 'ABOUT YOU'
           }), /*#__PURE__*/_jsx(View, {
@@ -1646,87 +1715,34 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/_jsx(GroupedSection, {
               items: [{
                 id: 'bio',
-                icon: 'document-text',
-                iconColor: '#34C759',
+                icon: 'text-box-outline',
+                iconColor: colors.sidebarIconPersonalInfo,
                 title: t('editProfile.items.bio.title') || 'Bio',
                 subtitle: bio || t('editProfile.items.bio.placeholder') || 'Tell people about yourself',
-                onPress: () => startEditing('bio', bio)
+                onPress: handleOpenBioModal
               }, {
                 id: 'locations',
-                icon: 'location',
-                iconColor: '#FF3B30',
+                icon: 'map-marker-outline',
+                iconColor: colors.sidebarIconSharing,
                 title: t('editProfile.items.locations.title') || 'Locations',
-                subtitle: tempLocations.length > 0 ? tempLocations.length === 1 ? t('editProfile.items.locations.count', {
-                  count: tempLocations.length
-                }) || `${tempLocations.length} location added` : t('editProfile.items.locations.count_plural', {
-                  count: tempLocations.length
-                }) || `${tempLocations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
-                onPress: () => startEditing('location', ''),
-                customContentBelow: tempLocations.length > 0 && /*#__PURE__*/_jsxs(View, {
-                  style: styles.linksPreviewContainer,
-                  children: [tempLocations.slice(0, 2).map((location, index) => /*#__PURE__*/_jsxs(View, {
-                    style: styles.linkPreviewItem,
-                    children: [/*#__PURE__*/_jsx(View, {
-                      style: styles.linkPreviewImage,
-                      children: /*#__PURE__*/_jsx(Text, {
-                        style: styles.linkPreviewImageText,
-                        children: location.name.charAt(0).toUpperCase()
-                      })
-                    }), /*#__PURE__*/_jsxs(View, {
-                      style: styles.linkPreviewContent,
-                      children: [/*#__PURE__*/_jsx(Text, {
-                        style: styles.linkPreviewTitle,
-                        numberOfLines: 1,
-                        children: location.name
-                      }), location.label && /*#__PURE__*/_jsx(Text, {
-                        style: styles.linkPreviewSubtitle,
-                        children: location.label
-                      })]
-                    })]
-                  }, location.id || index)), tempLocations.length > 2 && /*#__PURE__*/_jsxs(Text, {
-                    style: styles.linkPreviewMore,
-                    children: ["+", tempLocations.length - 2, " more"]
-                  })]
-                })
+                subtitle: locations.length > 0 ? locations.length === 1 ? t('editProfile.items.locations.count', {
+                  count: locations.length
+                }) || `${locations.length} location added` : t('editProfile.items.locations.count_plural', {
+                  count: locations.length
+                }) || `${locations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
+                onPress: handleOpenLocationModal
               }, {
                 id: 'links',
-                icon: 'link',
-                iconColor: '#32D74B',
+                icon: 'link-variant',
+                iconColor: colors.sidebarIconSharing,
                 title: t('editProfile.items.links.title') || 'Links',
-                subtitle: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata.length === 1 ? t('editProfile.items.links.count', {
-                  count: tempLinksWithMetadata.length
-                }) || `${tempLinksWithMetadata.length} link added` : t('editProfile.items.links.count_plural', {
-                  count: tempLinksWithMetadata.length
-                }) || `${tempLinksWithMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
-                onPress: () => startEditing('links', ''),
-                multiRow: true,
-                customContentBelow: tempLinksWithMetadata.length > 0 && /*#__PURE__*/_jsxs(View, {
-                  style: styles.linksPreviewContainer,
-                  children: [tempLinksWithMetadata.slice(0, 2).map((link, index) => /*#__PURE__*/_jsxs(View, {
-                    style: styles.linkPreviewItem,
-                    children: [link.image ? /*#__PURE__*/_jsx(Image, {
-                      source: {
-                        uri: link.image
-                      },
-                      style: styles.linkPreviewImage
-                    }) : /*#__PURE__*/_jsx(View, {
-                      style: styles.linkPreviewImage,
-                      children: /*#__PURE__*/_jsx(Text, {
-                        style: styles.linkPreviewImageText,
-                        children: link.title?.charAt(0).toUpperCase() || link.url.charAt(0).toUpperCase()
-                      })
-                    }), /*#__PURE__*/_jsx(Text, {
-                      style: styles.linkPreviewTitle,
-                      numberOfLines: 1,
-                      children: link.title || link.url
-                    })]
-                  }, link.id || index)), tempLinksWithMetadata.length > 2 && /*#__PURE__*/_jsxs(Text, {
-                    style: styles.linkPreviewMore,
-                    children: ["+", tempLinksWithMetadata.length - 2, " more"]
-                  })]
-                })
-              }],
-              theme: theme
+                subtitle: linksMetadata.length > 0 ? linksMetadata.length === 1 ? t('editProfile.items.links.count', {
+                  count: linksMetadata.length
+                }) || `${linksMetadata.length} link added` : t('editProfile.items.links.count_plural', {
+                  count: linksMetadata.length
+                }) || `${linksMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
+                onPress: handleOpenLinksModal
+              }]
             })
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -1740,7 +1756,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.quickActions') || 'QUICK ACTIONS'
           }), /*#__PURE__*/_jsx(View, {
@@ -1749,7 +1765,7 @@ const AccountSettingsScreen = ({
               items: [{
                 id: 'preview-profile',
                 icon: 'eye',
-                iconColor: '#007AFF',
+                iconColor: colors.sidebarIconHome,
                 title: t('editProfile.items.previewProfile.title') || 'Preview Profile',
                 subtitle: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
                 onPress: () => navigate?.('Profile', {
@@ -1757,20 +1773,19 @@ const AccountSettingsScreen = ({
                 })
               }, {
                 id: 'privacy-settings',
-                icon: 'shield-checkmark',
-                iconColor: '#8E8E93',
+                icon: 'shield-check',
+                iconColor: colors.sidebarIconSecurity,
                 title: t('editProfile.items.privacySettings.title') || 'Privacy Settings',
                 subtitle: t('editProfile.items.privacySettings.subtitle') || 'Control who can see your profile',
                 onPress: () => navigate?.('PrivacySettings')
               }, {
                 id: 'verify-account',
-                icon: 'checkmark-circle',
-                iconColor: '#30D158',
+                icon: 'check-circle',
+                iconColor: colors.sidebarIconPersonalInfo,
                 title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
                 subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
                 onPress: () => navigate?.('AccountVerification')
-              }],
-              theme: theme
+              }]
             })
           })]
         }), /*#__PURE__*/_jsxs(View, {
@@ -1784,7 +1799,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/_jsx(Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.security') || 'SECURITY'
           }), /*#__PURE__*/_jsx(View, {
@@ -1792,35 +1807,107 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/_jsx(GroupedSection, {
               items: [{
                 id: 'two-factor',
-                icon: 'shield-checkmark',
-                iconColor: '#007AFF',
+                icon: 'shield-lock',
+                iconColor: colors.sidebarIconSecurity,
                 title: t('editProfile.items.twoFactor.title') || 'Two‑Factor Authentication',
                 subtitle: user?.privacySettings?.twoFactorEnabled ? t('editProfile.items.twoFactor.enabled') || 'Enabled' : t('editProfile.items.twoFactor.disabled') || 'Disabled (recommended)',
-                onPress: () => startEditing('twoFactor', '')
-              }],
-              theme: theme
+                onPress: handleOpenTwoFactorModal
+              }]
             })
           })]
         })]
       })
+    }), /*#__PURE__*/_jsx(EditDisplayNameModal, {
+      visible: showEditDisplayNameModal,
+      onClose: () => setShowEditDisplayNameModal(false),
+      initialDisplayName: displayName,
+      initialLastName: lastName,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/_jsx(EditUsernameModal, {
+      visible: showEditUsernameModal,
+      onClose: () => setShowEditUsernameModal(false),
+      initialValue: username,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/_jsx(EditEmailModal, {
+      visible: showEditEmailModal,
+      onClose: () => setShowEditEmailModal(false),
+      initialValue: email,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/_jsx(EditBioModal, {
+      visible: showEditBioModal,
+      onClose: () => setShowEditBioModal(false),
+      initialValue: bio,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/_jsx(EditLocationModal, {
+      visible: showEditLocationModal,
+      onClose: () => setShowEditLocationModal(false),
+      initialLocations: locations,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/_jsx(EditLinksModal, {
+      visible: showEditLinksModal,
+      onClose: () => setShowEditLinksModal(false),
+      initialLinks: linksMetadata,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/_jsx(TwoFactorSetupModal, {
+      visible: showTwoFactorModal,
+      onClose: () => setShowTwoFactorModal(false),
+      isEnabled: !!user?.privacySettings?.twoFactorEnabled,
+      theme: normalizedTheme
     })]
   });
 };
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flexShrink: 1,
+    width: '100%'
   },
   content: {
-    flex: 1,
-    paddingTop: 8,
-    paddingBottom: 24
+    flexShrink: 1
+  },
+  scrollView: {
+    flexShrink: 1
   },
   contentEditing: {
     flex: 1,
     padding: 0
   },
+  scrollContent: createScreenContentStyle(HEADER_PADDING_TOP_SETTINGS),
+  headerContainer: {
+    width: '100%',
+    maxWidth: 420,
+    alignSelf: 'center',
+    marginBottom: SECTION_GAP_LARGE
+  },
+  headerSection: {
+    alignItems: 'flex-start',
+    width: '100%',
+    gap: COMPONENT_GAP
+  },
+  modernTitle: {
+    fontFamily: fontFamilies.phuduBold,
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 50.4,
+    // 42 * 1.2
+    textAlign: 'left',
+    letterSpacing: -0.5
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    maxWidth: 320,
+    alignSelf: 'flex-start',
+    opacity: 0.8
+  },
   section: {
-    marginBottom: 32
+    marginBottom: SECTION_GAP_LARGE
   },
   sectionTitle: {
     fontSize: 13,
@@ -1828,13 +1915,11 @@ const styles = StyleSheet.create({
     color: '#8E8E93',
     marginBottom: 8,
     marginTop: 4,
-    marginHorizontal: 16,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
     fontFamily: fontFamilies.phuduSemiBold
   },
   groupedSectionWrapper: {
-    marginHorizontal: 16,
     backgroundColor: 'transparent'
   },
   userIcon: {
@@ -1899,7 +1984,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     gap: 8,
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     paddingVertical: 12,
     paddingHorizontal: 16,
     borderRadius: 10
@@ -2046,7 +2131,7 @@ const styles = StyleSheet.create({
     color: '#6C757D'
   },
   addButton: {
-    backgroundColor: '#007AFF'
+    // backgroundColor should be applied inline using colors.iconSecurity
   },
   addButtonText: {
     fontSize: 14,
@@ -2067,7 +2152,7 @@ const styles = StyleSheet.create({
   addLinkTriggerText: {
     fontSize: 14,
     fontWeight: '600',
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     marginLeft: 6
   },
   linksList: {
@@ -2164,7 +2249,7 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 16,
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 8
@@ -2176,7 +2261,7 @@ const styles = StyleSheet.create({
   },
   fetchingText: {
     fontSize: 12,
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     fontStyle: 'italic'
   },
   linksFieldContent: {
@@ -2201,7 +2286,7 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
     borderRadius: 10,
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 6
@@ -2242,7 +2327,7 @@ const styles = StyleSheet.create({
   },
   searchingText: {
     fontSize: 12,
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     fontStyle: 'italic'
   },
   addLocationInputContainer: {
@@ -2283,7 +2368,7 @@ const styles = StyleSheet.create({
   addLocationTriggerText: {
     marginLeft: 8,
     fontSize: 16,
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     fontWeight: '500'
   },
   searchResults: {
@@ -2347,7 +2432,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   locationLabel: {
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 4,