@oxyhq/services 5.14.0 → 5.15.0

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -12,20 +12,44 @@ import {
     Platform,
     Image,
 } from 'react-native';
-import type { BaseScreenProps } from '../navigation/types';
-import { useOxy } from '../context/OxyContext';
+import type { BaseScreenProps } from '../types/navigation';
 import Avatar from '../components/Avatar';
 import type { FileMetadata } from '../../models/interfaces';
 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 { Header, GroupedSection, Section } 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 {
+    SCREEN_PADDING_HORIZONTAL,
+    SCREEN_PADDING_VERTICAL,
+    SECTION_GAP,
+    SECTION_GAP_LARGE,
+    COMPONENT_GAP,
+    HEADER_PADDING_TOP_SETTINGS,
+    createScreenContentStyle,
+} from '../constants/spacing';
 
 // Caches for link metadata and location searches
 const linkMetadataCache = new TTLCache<any>(30 * 60 * 1000); // 30 minutes cache for link metadata
@@ -33,6 +57,7 @@ const locationSearchCache = new TTLCache<any[]>(60 * 60 * 1000); // 1 hour cache
 registerCacheForCleanup(linkMetadataCache);
 registerCacheForCleanup(locationSearchCache);
 
+
 const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string; initialSection?: string }> = ({
     onClose,
     theme,
@@ -40,9 +65,18 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     navigate,
     initialField,
     initialSection,
+    scrollTo,
 }) => {
-    const { user: userFromContext, oxyServices, isLoading: authLoading, isAuthenticated, showBottomSheet, activeSessionId } = useOxy();
+    // Use useOxy() hook for OxyContext values
+    const {
+        user: userFromContext,
+        oxyServices,
+        isLoading: authLoading,
+        isAuthenticated,
+        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;
@@ -53,14 +87,14 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const scrollViewRef = useRef<ScrollView>(null);
     const avatarSectionRef = useRef<View>(null);
     const [avatarSectionY, setAvatarSectionY] = useState<number | null>(null);
-    
+
     // Section refs for navigation
     const profilePictureSectionRef = useRef<View>(null);
     const basicInfoSectionRef = useRef<View>(null);
     const aboutSectionRef = useRef<View>(null);
     const quickActionsSectionRef = useRef<View>(null);
     const securitySectionRef = useRef<View>(null);
-    
+
     // Section Y positions for scrolling
     const [profilePictureSectionY, setProfilePictureSectionY] = useState<number | null>(null);
     const [basicInfoSectionY, setBasicInfoSectionY] = useState<number | null>(null);
@@ -89,9 +123,32 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const [links, setLinks] = useState<string[]>([]);
     const [avatarFileId, setAvatarFileId] = useState('');
 
-    // Editing states
-    const [editingField, setEditingField] = useState<string | null>(null);
+    // 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<Array<{
+        id: string;
+        name: string;
+        label?: string;
+        coordinates?: { lat: number; lon: number };
+    }>>([]);
+    const [linksMetadata, setLinksMetadata] = useState<Array<{
+        url: string;
+        title?: string;
+        description?: string;
+        image?: string;
+        id: string;
+    }>>([]);
 
+    // State for inline editing (used by old renderEditingField code)
+    const [editingField, setEditingField] = useState<string | null>(null);
     const [tempDisplayName, setTempDisplayName] = useState('');
     const [tempLastName, setTempLastName] = useState('');
     const [tempUsername, setTempUsername] = useState('');
@@ -99,6 +156,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const [tempBio, setTempBio] = useState('');
     const [tempLocation, setTempLocation] = useState('');
     const [tempLinks, setTempLinks] = useState<string[]>([]);
+    const [tempLocations, setTempLocations] = useState<Array<{
+        id: string;
+        name: string;
+        label?: string;
+        coordinates?: { lat: number; lon: number };
+    }>>([]);
     const [tempLinksWithMetadata, setTempLinksWithMetadata] = useState<Array<{
         url: string;
         title?: string;
@@ -106,37 +169,27 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         image?: string;
         id: string;
     }>>([]);
+    const [isAddingLocation, setIsAddingLocation] = useState(false);
+    const [isSearchingLocations, setIsSearchingLocations] = useState(false);
+    const [locationSearchResults, setLocationSearchResults] = useState<any[]>([]);
+    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<Array<{
-        id: string;
-        name: string;
-        label?: string;
-        coordinates?: { lat: number; lon: number };
-    }>>([]);
-    const [isAddingLocation, setIsAddingLocation] = useState(false);
-    const [newLocationQuery, setNewLocationQuery] = useState('');
-    const [locationSearchResults, setLocationSearchResults] = useState<Array<{
-        place_id: number;
-        display_name: string;
-        lat: string;
-        lon: string;
-        type: string;
-    }>>([]);
-    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: number, onComplete?: () => void) => {
@@ -184,7 +237,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
                 // 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,
@@ -192,13 +245,13 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                     })));
                 } 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
@@ -209,7 +262,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                         ...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);
@@ -220,10 +273,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                         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}`,
@@ -232,7 +285,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                     }]);
                 } else {
                     setLinks([]);
-                    setTempLinksWithMetadata([]);
+                    setLinksMetadata([]);
                 }
                 isInitializedRef.current = true;
             }
@@ -262,10 +315,101 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const hasSetInitialFieldRef = useRef(false);
     const previousInitialFieldRef = useRef<string | undefined>(undefined);
     const initialFieldTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    
+
     // Delay constant for scroll completion
     const SCROLL_DELAY_MS = 600;
-    
+
+    // Helper functions for inline editing (legacy support)
+    const startEditing = useCallback((field: string, initialValue: string) => {
+        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: string | null) => {
+        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: any) {
+            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: string): string => {
         switch (field) {
@@ -290,7 +434,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     const hasScrolledToSectionRef = useRef(false);
     const previousInitialSectionRef = useRef<string | undefined>(undefined);
     const SCROLL_OFFSET = 100; // Offset to show section near top of viewport
-    
+
     // Map section names to their Y positions
     const sectionYPositions = useMemo(() => ({
         profilePicture: profilePictureSectionY,
@@ -299,7 +443,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         quickActions: quickActionsSectionY,
         security: securitySectionY,
     }), [profilePictureSectionY, basicInfoSectionY, aboutSectionY, quickActionsSectionY, securitySectionY]);
-    
+
     useEffect(() => {
         // If initialSection changed, reset the flag
         if (previousInitialSectionRef.current !== initialSection) {
@@ -310,14 +454,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         // Scroll to the specified section if initialSection is provided and we haven't scrolled yet
         if (initialSection && !hasScrolledToSectionRef.current) {
             const sectionY = sectionYPositions[initialSection as keyof typeof sectionYPositions];
-            
-            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;
                     });
                 });
@@ -336,10 +477,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                 username,
                 email,
                 bio,
-                location: tempLocations.length > 0 ? tempLocations[0].name : '', // Keep backward compatibility
-                locations: tempLocations.length > 0 ? tempLocations : undefined,
+                location: locations.length > 0 ? locations[0].name : '', // Keep backward compatibility
+                locations: locations.length > 0 ? locations : undefined,
                 links,
-                linksMetadata: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata : undefined,
+                linksMetadata: linksMetadata.length > 0 ? linksMetadata : undefined,
             };
 
             // Handle name field
@@ -378,208 +519,112 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     };
 
     const openAvatarPicker = useCallback(() => {
-        showBottomSheet?.({
-            screen: 'FileManagement',
-            props: {
-                selectMode: true,
-                multiSelect: false,
-                afterSelect: 'back',
-                onSelect: async (file: FileMetadata) => {
-                    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;
-                    }
-
-                    // Optimistically update UI immediately
-                    setOptimisticAvatarId(file.id);
-                    setAvatarFileId(file.id);
-
-                    // Auto-save avatar immediately (does not close edit profile screen)
-                    (async () => {
-                        try {
-                            setIsUpdatingAvatar(true);
-
-                            // 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
-                            }
-
-                            // 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: any) {
-                            // 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']
+        toast.info?.(t('editProfile.toasts.avatarPickerUnavailable') || 'Avatar picker is not available in this build.');
+    }, [t]);
+
+    // 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), []);
+
+    // 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;
+
+        // 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 || '');
+
+            // 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([]);
             }
-        });
-    }, [showBottomSheet, oxyServices, avatarFileId, updateUser, user]);
 
-    const startEditing = useCallback((type: string, currentValue: string) => {
-        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;
+            if (currentUser.linksMetadata && Array.isArray(currentUser.linksMetadata)) {
+                setLinksMetadata(currentUser.linksMetadata.map((link, index) => ({
+                    ...link,
+                    id: link.id || `existing-${index}`
+                })));
+            } else {
+                setLinksMetadata([]);
+            }
         }
-        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);
+                // 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);
             }
         }
-        
-        return () => {
-            if (initialFieldTimeoutRef.current) {
-                clearTimeout(initialFieldTimeoutRef.current);
-                initialFieldTimeoutRef.current = null;
-            }
-        };
-    }, [initialField, getFieldCurrentValue, startEditing, openAvatarPicker]);
+    }, [initialField, openAvatarPicker]);
 
-    const saveField = (type: string) => {
-        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;
-        }
-
-        // Complete animation, then reset and close editing
-        animateSaveButton(1, () => {
-            setEditingField(null);
-        });
-    };
-
-    const cancelEditing = () => {
-        setEditingField(null);
-    };
 
 
 
-    const fetchLinkMetadata = async (url: string) => {
+    // Removed fetchLinkMetadata - now handled by EditLinksModal
+    const _fetchLinkMetadata = async (url: string) => {
         // Check cache first
         const cacheKey = url.toLowerCase().trim();
         const cached = linkMetadataCache.get(cacheKey);
@@ -618,6 +663,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         }
     };
 
+    // Helper functions for inline editing (legacy support - still used by renderEditingField)
     const searchLocations = async (query: string) => {
         if (!query.trim() || query.length < 3) {
             setLocationSearchResults([]);
@@ -691,7 +737,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         if (!newLinkUrl.trim()) return;
 
         const url = newLinkUrl.trim();
-        const metadata = await fetchLinkMetadata(url);
+        const metadata = await _fetchLinkMetadata(url);
 
         setTempLinksWithMetadata(prev => [...prev, metadata]);
         setNewLinkUrl('');
@@ -711,15 +757,21 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         });
     };
 
-    const renderEditingField = (type: string) => {
+    // Memoize display name for avatar
+    const displayNameForAvatar = useMemo(() => getDisplayName(user), [user]);
+
+    // Legacy renderEditingField function (still used for twoFactor and fallback)
+    const renderEditingField = (type: string | null) => {
+        if (!type) return null;
+
         if (type === 'twoFactor') {
             const enabled = !!user?.privacySettings?.twoFactorEnabled;
             return (
-                <View style={[styles.editingFieldContainer, { backgroundColor: themeStyles.backgroundColor }]}>
+                <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
                     <View style={styles.editingFieldContent}>
                         <View style={styles.newValueSection}>
                             <View style={styles.editingFieldHeader}>
-                                <Text style={[styles.editingFieldLabel, { color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A' }]}>Two‑Factor Authentication (TOTP)</Text>
+                                <Text style={[styles.editingFieldLabel, { color: colors.text }]}>Two‑Factor Authentication (TOTP)</Text>
                             </View>
 
                             {!enabled ? (
@@ -729,7 +781,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     </Text>
                                     {!totpSetupUrl ? (
                                         <TouchableOpacity
-                                            style={styles.primaryButton}
+                                            style={[styles.primaryButton, { backgroundColor: colors.iconSecurity }]}
                                             disabled={isTotpBusy}
                                             onPress={async () => {
                                                 if (!activeSessionId) { toast.error(t('editProfile.toasts.noActiveSession') || 'No active session'); return; }
@@ -764,7 +816,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                                 />
                                             </View>
                                             <TouchableOpacity
-                                                style={styles.primaryButton}
+                                                style={[styles.primaryButton, { backgroundColor: colors.iconSecurity }]}
                                                 disabled={isTotpBusy || totpCode.length !== 6}
                                                 onPress={async () => {
                                                     if (!activeSessionId) { toast.error(t('editProfile.toasts.noActiveSession') || 'No active session'); return; }
@@ -810,7 +862,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         />
                                     </View>
                                     <TouchableOpacity
-                                        style={[styles.primaryButton, { backgroundColor: '#d9534f' }]}
+                                        style={[styles.primaryButton, { backgroundColor: colors.sidebarIconSharing }]}
                                         disabled={isTotpBusy || totpCode.length !== 6}
                                         onPress={async () => {
                                             if (!activeSessionId) { toast.error(t('editProfile.toasts.noActiveSession') || 'No active session'); return; }
@@ -839,11 +891,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         }
         if (type === 'displayName') {
             return (
-                <View style={[styles.editingFieldContainer, { backgroundColor: themeStyles.backgroundColor }]}>
+                <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
                     <View style={styles.editingFieldContent}>
                         <View style={styles.newValueSection}>
                             <View style={styles.editingFieldHeader}>
-                                <Text style={[styles.editingFieldLabel, { color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A' }]}>Edit Full Name</Text>
+                                <Text style={[styles.editingFieldLabel, { color: colors.text }]}>Edit Full Name</Text>
                             </View>
                             <View style={{ flexDirection: 'row', gap: 12 }}>
                                 <View style={{ flex: 1 }}>
@@ -853,7 +905,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         value={tempDisplayName}
                                         onChangeText={setTempDisplayName}
                                         placeholder="Enter your first name"
-                                        placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                        placeholderTextColor={colors.secondaryText}
                                         autoFocus
                                         selectionColor={themeStyles.primaryColor}
                                     />
@@ -865,7 +917,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         value={tempLastName}
                                         onChangeText={setTempLastName}
                                         placeholder="Enter your last name"
-                                        placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                        placeholderTextColor={colors.secondaryText}
                                         selectionColor={themeStyles.primaryColor}
                                     />
                                 </View>
@@ -878,11 +930,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
         if (type === 'location') {
             return (
-                <View style={[styles.editingFieldContainer, { backgroundColor: themeStyles.backgroundColor }]}>
+                <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
                     <View style={styles.editingFieldContent}>
                         <View style={styles.newValueSection}>
                             <View style={styles.editingFieldHeader}>
-                                <Text style={[styles.editingFieldLabel, { color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A' }]}>Manage Your Locations</Text>
+                                <Text style={[styles.editingFieldLabel, { color: colors.text }]}>Manage Your Locations</Text>
                             </View>
 
                             {/* Add new location section */}
@@ -891,7 +943,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     <Text style={styles.addLocationLabel}>
                                         Add New Location
                                         {isSearchingLocations && (
-                                            <Text style={styles.searchingText}> • Searching...</Text>
+                                            <Text style={[styles.searchingText, { color: colors.iconSecurity }]}> • Searching...</Text>
                                         )}
                                     </Text>
                                     <View style={styles.addLocationInputContainer}>
@@ -903,7 +955,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                                 searchLocations(text);
                                             }}
                                             placeholder="Search for a location..."
-                                            placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                            placeholderTextColor={colors.secondaryText}
                                             autoFocus
                                             selectionColor={themeStyles.primaryColor}
                                         />
@@ -947,7 +999,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     onPress={() => setIsAddingLocation(true)}
                                 >
                                     <OxyIcon name="add" size={20} color={themeStyles.primaryColor} />
-                                    <Text style={styles.addLocationTriggerText}>Add a new location</Text>
+                                    <Text style={[styles.addLocationTriggerText, { color: colors.iconSecurity }]}>Add a new location</Text>
                                 </TouchableOpacity>
                             )}
 
@@ -982,7 +1034,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                                             {location.name}
                                                         </Text>
                                                         {location.label && (
-                                                            <View style={styles.locationLabel}>
+                                                            <View style={[styles.locationLabel, { backgroundColor: colors.iconSecurity }]}>
                                                                 <Text style={styles.locationLabelText}>
                                                                     {location.label}
                                                                 </Text>
@@ -1022,11 +1074,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
         if (type === 'links') {
             return (
-                <View style={[styles.editingFieldContainer, { backgroundColor: themeStyles.backgroundColor }]}>
+                <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
                     <View style={styles.editingFieldContent}>
                         <View style={styles.newValueSection}>
                             <View style={styles.editingFieldHeader}>
-                                <Text style={[styles.editingFieldLabel, { color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A' }]}>Manage Your Links</Text>
+                                <Text style={[styles.editingFieldLabel, { color: colors.text }]}>Manage Your Links</Text>
                             </View>
 
                             <GroupedSection
@@ -1034,11 +1086,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     // 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: (
                                             <View style={styles.addLinkInputContainer}>
                                                 <TextInput
@@ -1046,7 +1097,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                                     value={newLinkUrl}
                                                     onChangeText={setNewLinkUrl}
                                                     placeholder="Enter URL (e.g., https://example.com)"
-                                                    placeholderTextColor={themeStyles.isDarkTheme ? '#aaa' : '#999'}
+                                                    placeholderTextColor={colors.secondaryText}
                                                     keyboardType="url"
                                                     autoFocus
                                                     selectionColor={themeStyles.primaryColor}
@@ -1062,7 +1113,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                                         <Text style={styles.cancelButtonText}>Cancel</Text>
                                                     </TouchableOpacity>
                                                     <TouchableOpacity
-                                                        style={[styles.addLinkButton, styles.addButton, { opacity: isFetchingMetadata ? 0.5 : 1 }]}
+                                                        style={[styles.addLinkButton, styles.addButton, { backgroundColor: colors.iconSecurity, opacity: isFetchingMetadata ? 0.5 : 1 }]}
                                                         onPress={addLink}
                                                         disabled={isFetchingMetadata}
                                                     >
@@ -1077,8 +1128,8 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         ),
                                     }] : [{
                                         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),
@@ -1086,13 +1137,13 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     // 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 ? (
+                                            <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: (
                                             <View style={styles.linkItemActions}>
                                                 <View style={styles.reorderButtons}>
@@ -1121,7 +1172,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         ),
                                     })),
                                 ]}
-                                theme={theme}
+
                             />
                             {tempLinksWithMetadata.length > 0 && (
                                 <View style={styles.reorderHint}>
@@ -1134,12 +1185,12 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
             );
         }
         const fieldConfig = {
-            displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'person', color: '#007AFF', multiline: false, keyboardType: 'default' as const },
-            username: { label: 'Username', value: username, placeholder: 'Choose a username', icon: 'at', color: '#5856D6', multiline: false, keyboardType: 'default' as const },
-            email: { label: 'Email', value: email, placeholder: 'Enter your email address', icon: 'mail', color: '#FF9500', multiline: false, keyboardType: 'email-address' as const },
-            bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'document-text', color: '#34C759', multiline: true, keyboardType: 'default' as const },
-            location: { label: 'Location', value: location, placeholder: 'Enter your location', icon: 'location', color: '#FF3B30', multiline: false, keyboardType: 'default' as const },
-            links: { label: 'Links', value: links.join(', '), placeholder: 'Enter your links (comma separated)', icon: 'link', color: '#32D74B', multiline: false, keyboardType: 'url' as const }
+            displayName: { label: 'Display Name', value: displayName, placeholder: 'Enter your display name', icon: 'person', color: colors.iconPersonalInfo, multiline: false, keyboardType: 'default' as const },
+            username: { label: 'Username', value: username, placeholder: 'Choose a username', icon: 'at', color: colors.iconData, multiline: false, keyboardType: 'default' as const },
+            email: { label: 'Email', value: email, placeholder: 'Enter your email address', icon: 'mail', color: colors.iconStorage, multiline: false, keyboardType: 'email-address' as const },
+            bio: { label: 'Bio', value: bio, placeholder: 'Tell people about yourself...', icon: 'document-text', color: colors.iconPersonalInfo, multiline: true, keyboardType: 'default' as const },
+            location: { label: 'Location', value: location, placeholder: 'Enter your location', icon: 'location', color: colors.iconSharing, multiline: false, keyboardType: 'default' as const },
+            links: { label: 'Links', value: links.join(', '), placeholder: 'Enter your links (comma separated)', icon: 'link', color: colors.iconPersonalInfo, multiline: false, keyboardType: 'url' as const }
         };
 
         const config = fieldConfig[type as keyof typeof fieldConfig];
@@ -1169,11 +1220,11 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
         };
 
         return (
-            <View style={[styles.editingFieldContainer, { backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF' }]}>
+            <View style={[styles.editingFieldContainer, { backgroundColor: colors.background }]}>
                 <View style={styles.editingFieldContent}>
                     <View style={styles.newValueSection}>
                         <View style={styles.editingFieldHeader}>
-                            <Text style={[styles.editingFieldLabel, { color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000' }]}>
+                            <Text style={[styles.editingFieldLabel, { color: colors.text }]}>
                                 {config.label}
                             </Text>
                         </View>
@@ -1204,10 +1255,10 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
 
 
 
-    if (authLoading || !isAuthenticated) {
+    if (isLoading || !isAuthenticated) {
         return (
             <View style={[styles.container, {
-                backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7',
+                backgroundColor: themeStyles.backgroundColor,
                 justifyContent: 'center'
             }]}>
                 <ActivityIndicator size="large" color={themeStyles.primaryColor} />
@@ -1216,21 +1267,21 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
     }
 
     return (
-        <View style={[styles.container, { backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7' }]}>
+        <View style={[styles.container, { backgroundColor: themeStyles.backgroundColor }]}>
             {/* Header */}
             {editingField ? (
                 <View style={[styles.editingHeader, {
-                    backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF',
-                    borderBottomColor: themeStyles.isDarkTheme ? '#38383A' : '#E5E5EA'
+                    backgroundColor: colors.background,
+                    borderBottomColor: colors.border
                 }]}>
                     <View style={styles.editingHeaderContent}>
                         <TouchableOpacity
                             style={[styles.editingBackButton, {
-                                backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+                                backgroundColor: colors.card
                             }]}
                             onPress={cancelEditing}
                         >
-                            <Ionicons name="chevron-back" size={20} color={themeStyles.primaryColor} />
+                            <Ionicons name="chevron-back" size={20} color={colors.tint} />
                         </TouchableOpacity>
                         <View style={styles.editingTitleContainer}>
                         </View>
@@ -1239,49 +1290,49 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 styles.editingSaveButton,
                                 {
                                     opacity: isSaving ? 0.5 : 1,
-                                    backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+                                    backgroundColor: colors.card
                                 }
                             ]}
                             onPress={() => saveField(editingField)}
                             disabled={isSaving}
                         >
                             {isSaving ? (
-                                <ActivityIndicator size="small" color={themeStyles.primaryColor} />
+                                <ActivityIndicator size="small" color={colors.tint} />
                             ) : (
-                                <Text style={[styles.editingSaveButtonText, { color: themeStyles.primaryColor }]}>Save</Text>
+                                <Text style={[styles.editingSaveButtonText, { color: colors.tint }]}>Save</Text>
                             )}
                         </TouchableOpacity>
                     </View>
                     <View style={styles.editingHeaderBottom}>
                         <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`
                         }]}>
-                            <Ionicons
+                            <MaterialCommunityIcons
                                 name={
-                                    editingField === 'displayName' ? 'person' as any :
+                                    editingField === 'displayName' ? 'account-outline' as any :
                                         editingField === 'username' ? 'at' as any :
-                                            editingField === 'email' ? 'mail' as any :
-                                                editingField === 'bio' ? 'document-text' as any :
-                                                    editingField === 'location' ? 'location' as any :
-                                                        editingField === 'links' ? 'link' as any : 'person' as any
+                                            editingField === 'email' ? 'email-outline' as any :
+                                                editingField === 'bio' ? 'text-box-outline' as any :
+                                                    editingField === 'location' ? 'map-marker-outline' as any :
+                                                        editingField === 'links' ? 'link-variant' as any : 'account-outline' as any
                                 }
                                 size={28}
                                 color={
-                                    editingField === 'displayName' ? '#007AFF' :
-                                        editingField === 'username' ? '#5856D6' :
-                                            editingField === 'email' ? '#FF9500' :
-                                                editingField === 'bio' ? '#34C759' :
-                                                    editingField === 'location' ? '#FF3B30' :
-                                                        editingField === 'links' ? '#32D74B' : '#007AFF'
+                                    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
                                 }
                             />
                         </View>
-                        <Text style={[styles.editingBottomTitle, { color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000' }]}>
+                        <Text style={[styles.editingBottomTitle, { color: colors.text }]}>
                             {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') :
@@ -1291,24 +1342,13 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                         </Text>
                     </View>
                 </View>
-            ) : (
-                <Header
-                    title={t('editProfile.title') || 'Edit Profile'}
-                    theme={theme}
-                    onBack={goBack || onClose}
-                    rightAction={{
-                        icon: 'checkmark',
-                        onPress: handleSave,
-                        loading: isSaving,
-                        disabled: isSaving,
-                    }}
-                    elevation="subtle"
-                />
-            )}
+            ) : null}
 
             <ScrollView
                 ref={scrollViewRef}
                 style={editingField ? styles.contentEditing : styles.content}
+                contentContainerStyle={styles.scrollContent}
+                showsVerticalScrollIndicator={false}
             >
                 {editingField ? (
                     // Show only the editing interface when editing
@@ -1318,6 +1358,16 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                 ) : (
                     // Show all settings when not editing
                     <>
+                        {/* Title and Subtitle Header */}
+                        <View style={[styles.headerContainer, styles.headerSection]}>
+                            <Text style={[styles.modernTitle, { color: themeStyles.textColor, marginBottom: 0, marginTop: 0 }]}>
+                                {t('accountOverview.items.editProfile.title') || t('editProfile.title') || 'Edit Profile'}
+                            </Text>
+                            <Text style={[styles.modernSubtitle, { color: colors.secondaryText, marginBottom: 0, marginTop: 0 }]}>
+                                {t('accountOverview.items.editProfile.subtitle') || t('editProfile.subtitle') || 'Manage your profile and preferences'}
+                            </Text>
+                        </View>
+
                         {showRecoveryModal && (
                             <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 50, padding: 16, justifyContent: 'center' }}>
                                 <View style={{ backgroundColor: '#fff', borderRadius: 20, padding: 20, maxHeight: '80%' }}>
@@ -1344,7 +1394,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         </View>
                                     )}
                                     <TouchableOpacity
-                                        style={[styles.primaryButton, { alignSelf: 'flex-end', marginTop: 8 }]}
+                                        style={[styles.primaryButton, { backgroundColor: colors.iconSecurity, alignSelf: 'flex-end', marginTop: 8 }]}
                                         onPress={() => { setShowRecoveryModal(false); setEditingField(null); toast.success(t('editProfile.toasts.twoFactorEnabled') || 'Two‑Factor Authentication enabled'); }}
                                     >
                                         <Ionicons name="checkmark" size={18} color="#fff" />
@@ -1366,7 +1416,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setProfilePictureSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93' }]}>
+                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
                                 {t('editProfile.sections.profilePicture') || 'PROFILE PICTURE'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -1374,58 +1424,59 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     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 ? (
-                                                <Animated.View style={{ position: 'relative', width: 40, height: 40 }}>
-                                                    {(optimisticAvatarId || avatarFileId) && (
+                                            customIcon: (optimisticAvatarId || avatarFileId) ? (
+                                                isUpdatingAvatar ? (
+                                                    <Animated.View style={{ position: 'relative', width: 36, height: 36 }}>
                                                         <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
                                                             }}
                                                         />
-                                                    )}
-                                                    <View style={{
-                                                        position: 'absolute',
-                                                        top: 0,
-                                                        left: 0,
-                                                        right: 0,
-                                                        bottom: 0,
-                                                        justifyContent: 'center',
-                                                        alignItems: 'center',
-                                                        backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
-                                                        borderRadius: 22,
-                                                    }}>
-                                                        <ActivityIndicator size="small" color={themeStyles.primaryColor} />
-                                                    </View>
-                                                </Animated.View>
+                                                        <View style={{
+                                                            position: 'absolute',
+                                                            top: 0,
+                                                            left: 0,
+                                                            right: 0,
+                                                            bottom: 0,
+                                                            justifyContent: 'center',
+                                                            alignItems: 'center',
+                                                            backgroundColor: colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                                                            borderRadius: 18,
+                                                        }}>
+                                                            <ActivityIndicator size="small" color={colors.tint} />
+                                                        </View>
+                                                    </Animated.View>
+                                                ) : (
+                                                    <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}
                                 />
                             </View>
                         </View>
@@ -1439,7 +1490,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setBasicInfoSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93' }]}>
+                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
                                 {t('editProfile.sections.basicInfo') || 'BASIC INFORMATION'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -1447,30 +1498,29 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     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),
+                                            onPress: handleOpenEmailModal,
                                         },
                                     ]}
-                                    theme={theme}
                                 />
                             </View>
                         </View>
@@ -1484,7 +1534,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setAboutSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93' }]}>
+                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
                                 {t('editProfile.sections.about') || 'ABOUT YOU'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -1492,92 +1542,37 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     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`))
+                                            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: () => startEditing('location', ''),
-                                            customContentBelow: tempLocations.length > 0 && (
-                                                <View style={styles.linksPreviewContainer}>
-                                                    {tempLocations.slice(0, 2).map((location, index) => (
-                                                        <View key={location.id || index} style={styles.linkPreviewItem}>
-                                                            <View style={styles.linkPreviewImage}>
-                                                                <Text style={styles.linkPreviewImageText}>
-                                                                    {location.name.charAt(0).toUpperCase()}
-                                                                </Text>
-                                                            </View>
-                                                            <View style={styles.linkPreviewContent}>
-                                                                <Text style={styles.linkPreviewTitle} numberOfLines={1}>
-                                                                    {location.name}
-                                                                </Text>
-                                                                {location.label && (
-                                                                    <Text style={styles.linkPreviewSubtitle}>
-                                                                        {location.label}
-                                                                    </Text>
-                                                                )}
-                                                            </View>
-                                                        </View>
-                                                    ))}
-                                                    {tempLocations.length > 2 && (
-                                                        <Text style={styles.linkPreviewMore}>
-                                                            +{tempLocations.length - 2} more
-                                                        </Text>
-                                                    )}
-                                                </View>
-                                            ),
+                                            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`))
+                                            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: () => startEditing('links', ''),
-                                            multiRow: true,
-                                            customContentBelow: tempLinksWithMetadata.length > 0 && (
-                                                <View style={styles.linksPreviewContainer}>
-                                                    {tempLinksWithMetadata.slice(0, 2).map((link, index) => (
-                                                        <View key={link.id || index} style={styles.linkPreviewItem}>
-                                                            {link.image ? (
-                                                                <Image source={{ uri: link.image }} style={styles.linkPreviewImage} />
-                                                            ) : (
-                                                                <View style={styles.linkPreviewImage}>
-                                                                    <Text style={styles.linkPreviewImageText}>
-                                                                        {link.title?.charAt(0).toUpperCase() || link.url.charAt(0).toUpperCase()}
-                                                                    </Text>
-                                                                </View>
-                                                            )}
-                                                            <Text style={styles.linkPreviewTitle} numberOfLines={1}>
-                                                                {link.title || link.url}
-                                                            </Text>
-                                                        </View>
-                                                    ))}
-                                                    {tempLinksWithMetadata.length > 2 && (
-                                                        <Text style={styles.linkPreviewMore}>
-                                                            +{tempLinksWithMetadata.length - 2} more
-                                                        </Text>
-                                                    )}
-                                                </View>
-                                            ),
+                                            onPress: handleOpenLinksModal,
                                         },
                                     ]}
-                                    theme={theme}
                                 />
                             </View>
                         </View>
@@ -1591,7 +1586,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setQuickActionsSectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93' }]}>
+                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
                                 {t('editProfile.sections.quickActions') || 'QUICK ACTIONS'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -1600,29 +1595,28 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                         {
                                             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', { userId: user?.id }),
                                         },
                                         {
                                             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}
                                 />
                             </View>
                         </View>
@@ -1636,7 +1630,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                 setSecuritySectionY(y);
                             }}
                         >
-                            <Text style={[styles.sectionTitle, { color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93' }]}>
+                            <Text style={[styles.sectionTitle, { color: colors.secondaryText }]}>
                                 {t('editProfile.sections.security') || 'SECURITY'}
                             </Text>
                             <View style={styles.groupedSectionWrapper}>
@@ -1644,41 +1638,121 @@ const AccountSettingsScreen: React.FC<BaseScreenProps & { initialField?: string;
                                     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', ''),
+                                            onPress: handleOpenTwoFactorModal,
                                         },
                                     ]}
-                                    theme={theme}
                                 />
                             </View>
                         </View>
                     </>
                 )}
             </ScrollView>
+
+            {/* Modal Components */}
+            <EditDisplayNameModal
+                visible={showEditDisplayNameModal}
+                onClose={() => setShowEditDisplayNameModal(false)}
+                initialDisplayName={displayName}
+                initialLastName={lastName}
+                theme={normalizedTheme}
+                onSave={handleModalSave}
+            />
+            <EditUsernameModal
+                visible={showEditUsernameModal}
+                onClose={() => setShowEditUsernameModal(false)}
+                initialValue={username}
+                theme={normalizedTheme}
+                onSave={handleModalSave}
+            />
+            <EditEmailModal
+                visible={showEditEmailModal}
+                onClose={() => setShowEditEmailModal(false)}
+                initialValue={email}
+                theme={normalizedTheme}
+                onSave={handleModalSave}
+            />
+            <EditBioModal
+                visible={showEditBioModal}
+                onClose={() => setShowEditBioModal(false)}
+                initialValue={bio}
+                theme={normalizedTheme}
+                onSave={handleModalSave}
+            />
+            <EditLocationModal
+                visible={showEditLocationModal}
+                onClose={() => setShowEditLocationModal(false)}
+                initialLocations={locations}
+                theme={normalizedTheme}
+                onSave={handleModalSave}
+            />
+            <EditLinksModal
+                visible={showEditLinksModal}
+                onClose={() => setShowEditLinksModal(false)}
+                initialLinks={linksMetadata}
+                theme={normalizedTheme}
+                onSave={handleModalSave}
+            />
+            <TwoFactorSetupModal
+                visible={showTwoFactorModal}
+                onClose={() => setShowTwoFactorModal(false)}
+                isEnabled={!!user?.privacySettings?.twoFactorEnabled}
+                theme={normalizedTheme}
+            />
         </View>
     );
 };
 
 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,
@@ -1686,13 +1760,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',
     },
 
@@ -1759,7 +1831,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,
@@ -1906,7 +1978,7 @@ const styles = StyleSheet.create({
         color: '#6C757D',
     },
     addButton: {
-        backgroundColor: '#007AFF',
+        // backgroundColor should be applied inline using colors.iconSecurity
     },
     addButtonText: {
         fontSize: 14,
@@ -1927,7 +1999,7 @@ const styles = StyleSheet.create({
     addLinkTriggerText: {
         fontSize: 14,
         fontWeight: '600',
-        color: '#007AFF',
+        // color should be applied inline using colors.iconSecurity
         marginLeft: 6,
     },
     linksList: {
@@ -2024,7 +2096,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,
@@ -2036,7 +2108,7 @@ const styles = StyleSheet.create({
     },
     fetchingText: {
         fontSize: 12,
-        color: '#007AFF',
+        // color should be applied inline using colors.iconSecurity
         fontStyle: 'italic',
     },
     linksFieldContent: {
@@ -2061,7 +2133,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,
@@ -2102,7 +2174,7 @@ const styles = StyleSheet.create({
     },
     searchingText: {
         fontSize: 12,
-        color: '#007AFF',
+        // color should be applied inline using colors.iconSecurity
         fontStyle: 'italic',
     },
     addLocationInputContainer: {
@@ -2143,7 +2215,7 @@ const styles = StyleSheet.create({
     addLocationTriggerText: {
         marginLeft: 8,
         fontSize: 16,
-        color: '#007AFF',
+        // color should be applied inline using colors.iconSecurity
         fontWeight: '500',
     },
     searchResults: {
@@ -2207,7 +2279,7 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     locationLabel: {
-        backgroundColor: '#007AFF',
+        // backgroundColor should be applied inline using colors.iconSecurity
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,