@oxyhq/services 5.14.0 → 5.15.1

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _OxyContext = require("../context/OxyContext");
 var _OxyIcon = _interopRequireDefault(require("../components/icon/OxyIcon"));
 var _vectorIcons = require("@expo/vector-icons");
 var _sonner = require("../../lib/sonner");
@@ -15,11 +14,28 @@ var _confirmAction = require("../utils/confirmAction");
 var _authStore = require("../stores/authStore");
 var _components = require("../components");
 var _useI18n = require("../hooks/useI18n");
-var _reactNativeQrcodeSvg = _interopRequireDefault(require("react-native-qrcode-svg"));
+var _useThemeStyles = require("../hooks/useThemeStyles");
+var _useColorScheme = require("../hooks/use-color-scheme");
+var _theme = require("../constants/theme");
+var _themeUtils = require("../utils/themeUtils");
+var _useHapticPress = require("../hooks/use-haptic-press");
+var _EditDisplayNameModal = require("../components/profile/EditDisplayNameModal");
+var _EditUsernameModal = require("../components/profile/EditUsernameModal");
+var _EditEmailModal = require("../components/profile/EditEmailModal");
+var _EditBioModal = require("../components/profile/EditBioModal");
+var _EditLocationModal = require("../components/profile/EditLocationModal");
+var _EditLinksModal = require("../components/profile/EditLinksModal");
+var _TwoFactorSetupModal = require("../components/profile/TwoFactorSetupModal");
+var _userUtils = require("../utils/user-utils");
 var _cache = require("../../utils/cache");
+var _reactNativeQrcodeSvg = _interopRequireDefault(require("react-native-qrcode-svg"));
+var _OxyContext = require("../context/OxyContext");
+var _spacing = require("../constants/spacing");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// @ts-ignore - MaterialCommunityIcons is available at runtime
+
 // Caches for link metadata and location searches
 const linkMetadataCache = new _cache.TTLCache(30 * 60 * 1000); // 30 minutes cache for link metadata
 const locationSearchCache = new _cache.TTLCache(60 * 60 * 1000); // 1 hour cache for location searches
@@ -31,19 +47,21 @@ const AccountSettingsScreen = ({
   goBack,
   navigate,
   initialField,
-  initialSection
+  initialSection,
+  scrollTo
 }) => {
+  // Use useOxy() hook for OxyContext values
   const {
     user: userFromContext,
     oxyServices,
     isLoading: authLoading,
     isAuthenticated,
-    showBottomSheet,
     activeSessionId
   } = (0, _OxyContext.useOxy)();
   const {
     t
   } = (0, _useI18n.useI18n)();
+  const normalizedTheme = (0, _themeUtils.normalizeTheme)(theme);
   const updateUser = (0, _authStore.useAuthStore)(state => state.updateUser);
   // Get user directly from store to ensure reactivity to avatar changes
   const user = (0, _authStore.useAuthStore)(state => state.user) || userFromContext;
@@ -90,7 +108,20 @@ const AccountSettingsScreen = ({
   const [links, setLinks] = (0, _react.useState)([]);
   const [avatarFileId, setAvatarFileId] = (0, _react.useState)('');
 
-  // Editing states
+  // Modal visibility states
+  const [showEditDisplayNameModal, setShowEditDisplayNameModal] = (0, _react.useState)(false);
+  const [showEditUsernameModal, setShowEditUsernameModal] = (0, _react.useState)(false);
+  const [showEditEmailModal, setShowEditEmailModal] = (0, _react.useState)(false);
+  const [showEditBioModal, setShowEditBioModal] = (0, _react.useState)(false);
+  const [showEditLocationModal, setShowEditLocationModal] = (0, _react.useState)(false);
+  const [showEditLinksModal, setShowEditLinksModal] = (0, _react.useState)(false);
+  const [showTwoFactorModal, setShowTwoFactorModal] = (0, _react.useState)(false);
+
+  // Location and links state (for display only - modals handle editing)
+  const [locations, setLocations] = (0, _react.useState)([]);
+  const [linksMetadata, setLinksMetadata] = (0, _react.useState)([]);
+
+  // State for inline editing (used by old renderEditingField code)
   const [editingField, setEditingField] = (0, _react.useState)(null);
   const [tempDisplayName, setTempDisplayName] = (0, _react.useState)('');
   const [tempLastName, setTempLastName] = (0, _react.useState)('');
@@ -99,27 +130,29 @@ const AccountSettingsScreen = ({
   const [tempBio, setTempBio] = (0, _react.useState)('');
   const [tempLocation, setTempLocation] = (0, _react.useState)('');
   const [tempLinks, setTempLinks] = (0, _react.useState)([]);
+  const [tempLocations, setTempLocations] = (0, _react.useState)([]);
   const [tempLinksWithMetadata, setTempLinksWithMetadata] = (0, _react.useState)([]);
+  const [isAddingLocation, setIsAddingLocation] = (0, _react.useState)(false);
+  const [isSearchingLocations, setIsSearchingLocations] = (0, _react.useState)(false);
+  const [locationSearchResults, setLocationSearchResults] = (0, _react.useState)([]);
+  const [newLocationQuery, setNewLocationQuery] = (0, _react.useState)('');
   const [isAddingLink, setIsAddingLink] = (0, _react.useState)(false);
-  const [newLinkUrl, setNewLinkUrl] = (0, _react.useState)('');
   const [isFetchingMetadata, setIsFetchingMetadata] = (0, _react.useState)(false);
+  const [newLinkUrl, setNewLinkUrl] = (0, _react.useState)('');
 
-  // Location management state
-  const [tempLocations, setTempLocations] = (0, _react.useState)([]);
-  const [isAddingLocation, setIsAddingLocation] = (0, _react.useState)(false);
-  const [newLocationQuery, setNewLocationQuery] = (0, _react.useState)('');
-  const [locationSearchResults, setLocationSearchResults] = (0, _react.useState)([]);
-  const [isSearchingLocations, setIsSearchingLocations] = (0, _react.useState)(false);
+  // Get theme colors using centralized hook
+  const colorScheme = (0, _useColorScheme.useColorScheme)();
+  const themeStyles = (0, _useThemeStyles.useThemeStyles)(theme || 'light', colorScheme);
+  const handlePressIn = (0, _useHapticPress.useHapticPress)();
 
-  // Memoize theme-related calculations to prevent unnecessary recalculations
-  const themeStyles = (0, _react.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 || _theme.Colors[(0, _themeUtils.normalizeColorScheme)(colorScheme, theme || 'light')];
+
+  // Memoize onBack handler to provide stable reference for Reanimated
+  const handleBack = (0, _react.useMemo)(() => {
+    return goBack || onClose || undefined;
+  }, [goBack, onClose]);
 
   // Memoize animation function to prevent recreation on every render
   const animateSaveButton = (0, _react.useCallback)((toValue, onComplete) => {
@@ -163,7 +196,7 @@ const AccountSettingsScreen = ({
 
         // Handle locations - convert single location to array format
         if (user.locations && Array.isArray(user.locations)) {
-          setTempLocations(user.locations.map((loc, index) => ({
+          setLocations(user.locations.map((loc, index) => ({
             id: loc.id || `existing-${index}`,
             name: loc.name,
             label: loc.label,
@@ -171,13 +204,13 @@ const AccountSettingsScreen = ({
           })));
         } else if (user.location) {
           // Convert single location string to array format
-          setTempLocations([{
+          setLocations([{
             id: 'existing-0',
             name: user.location,
             label: 'Location'
           }]);
         } else {
-          setTempLocations([]);
+          setLocations([]);
         }
 
         // Handle links - simple and direct like other fields
@@ -188,7 +221,7 @@ const AccountSettingsScreen = ({
             ...link,
             id: link.id || `existing-${index}`
           }));
-          setTempLinksWithMetadata(metadataWithIds);
+          setLinksMetadata(metadataWithIds);
         } else if (Array.isArray(user.links)) {
           const simpleLinks = user.links.map(l => typeof l === 'string' ? l : l.link).filter(Boolean);
           setLinks(simpleLinks);
@@ -199,10 +232,10 @@ const AccountSettingsScreen = ({
             image: undefined,
             id: `existing-${index}`
           }));
-          setTempLinksWithMetadata(linksWithMetadata);
+          setLinksMetadata(linksWithMetadata);
         } else if (user.website) {
           setLinks([user.website]);
-          setTempLinksWithMetadata([{
+          setLinksMetadata([{
             url: user.website,
             title: user.website.replace(/^https?:\/\//, '').replace(/\/$/, ''),
             description: `Link to ${user.website}`,
@@ -211,7 +244,7 @@ const AccountSettingsScreen = ({
           }]);
         } else {
           setLinks([]);
-          setTempLinksWithMetadata([]);
+          setLinksMetadata([]);
         }
         isInitializedRef.current = true;
       }
@@ -244,6 +277,109 @@ const AccountSettingsScreen = ({
   // Delay constant for scroll completion
   const SCROLL_DELAY_MS = 600;
 
+  // Helper functions for inline editing (legacy support)
+  const startEditing = (0, _react.useCallback)((field, initialValue) => {
+    setEditingField(field);
+    switch (field) {
+      case 'displayName':
+        setTempDisplayName(initialValue || displayName);
+        setTempLastName(lastName);
+        break;
+      case 'username':
+        setTempUsername(initialValue || username);
+        break;
+      case 'email':
+        setTempEmail(initialValue || email);
+        break;
+      case 'bio':
+        setTempBio(initialValue || bio);
+        break;
+      case 'location':
+        setTempLocations([...locations]);
+        break;
+      case 'links':
+        setTempLinksWithMetadata([...linksMetadata]);
+        break;
+      case 'twoFactor':
+        // No temp state needed for twoFactor
+        break;
+    }
+  }, [displayName, lastName, username, email, bio, locations, linksMetadata]);
+  const cancelEditing = (0, _react.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 = (0, _react.useCallback)(async field => {
+    if (!field) return;
+    setIsSaving(true);
+    try {
+      switch (field) {
+        case 'displayName':
+          await updateUser({
+            name: {
+              first: tempDisplayName,
+              last: tempLastName
+            }
+          }, oxyServices);
+          setDisplayName(tempDisplayName);
+          setLastName(tempLastName);
+          break;
+        case 'username':
+          await updateUser({
+            username: tempUsername
+          }, oxyServices);
+          setUsername(tempUsername);
+          break;
+        case 'email':
+          await updateUser({
+            email: tempEmail
+          }, oxyServices);
+          setEmail(tempEmail);
+          break;
+        case 'bio':
+          await updateUser({
+            bio: tempBio
+          }, oxyServices);
+          setBio(tempBio);
+          break;
+        case 'location':
+          await updateUser({
+            locations: tempLocations
+          }, oxyServices);
+          setLocations(tempLocations);
+          break;
+        case 'links':
+          await updateUser({
+            linksMetadata: tempLinksWithMetadata
+          }, oxyServices);
+          setLinksMetadata(tempLinksWithMetadata);
+          setLinks(tempLinksWithMetadata.map(l => l.url));
+          break;
+      }
+      setEditingField(null);
+      _sonner.toast.success(t('editProfile.toasts.saved') || 'Saved');
+    } catch (error) {
+      _sonner.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 = (0, _react.useCallback)(field => {
     switch (field) {
@@ -287,13 +423,10 @@ const AccountSettingsScreen = ({
     // Scroll to the specified section if initialSection is provided and we haven't scrolled yet
     if (initialSection && !hasScrolledToSectionRef.current) {
       const sectionY = sectionYPositions[initialSection];
-      if (sectionY !== null && sectionY !== undefined && scrollViewRef.current) {
+      if (sectionY !== null && sectionY !== undefined && scrollTo) {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            scrollViewRef.current?.scrollTo({
-              y: Math.max(0, sectionY - SCROLL_OFFSET),
-              animated: true
-            });
+            scrollTo(Math.max(0, sectionY - SCROLL_OFFSET), true);
             hasScrolledToSectionRef.current = true;
           });
         });
@@ -310,11 +443,11 @@ const AccountSettingsScreen = ({
         username,
         email,
         bio,
-        location: tempLocations.length > 0 ? tempLocations[0].name : '',
+        location: locations.length > 0 ? locations[0].name : '',
         // Keep backward compatibility
-        locations: tempLocations.length > 0 ? tempLocations : undefined,
+        locations: locations.length > 0 ? locations : undefined,
         links,
-        linksMetadata: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata : undefined
+        linksMetadata: linksMetadata.length > 0 ? linksMetadata : undefined
       };
 
       // Handle name field
@@ -352,207 +485,106 @@ const AccountSettingsScreen = ({
     });
   };
   const openAvatarPicker = (0, _react.useCallback)(() => {
-    showBottomSheet?.({
-      screen: 'FileManagement',
-      props: {
-        selectMode: true,
-        multiSelect: false,
-        afterSelect: 'back',
-        onSelect: async file => {
-          if (!file.contentType.startsWith('image/')) {
-            _sonner.toast.error(t('editProfile.toasts.selectImage') || 'Please select an image file');
-            return;
-          }
-          // If already selected, do nothing
-          if (file.id === avatarFileId) {
-            _sonner.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);
+    _sonner.toast.info?.(t('editProfile.toasts.avatarPickerUnavailable') || 'Avatar picker is not available in this build.');
+  }, [t]);
 
-              // 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
-              }
+  // Handlers to open modals
+  const handleOpenDisplayNameModal = (0, _react.useCallback)(() => setShowEditDisplayNameModal(true), []);
+  const handleOpenUsernameModal = (0, _react.useCallback)(() => setShowEditUsernameModal(true), []);
+  const handleOpenEmailModal = (0, _react.useCallback)(() => setShowEditEmailModal(true), []);
+  const handleOpenBioModal = (0, _react.useCallback)(() => setShowEditBioModal(true), []);
+  const handleOpenLocationModal = (0, _react.useCallback)(() => setShowEditLocationModal(true), []);
+  const handleOpenLinksModal = (0, _react.useCallback)(() => setShowEditLinksModal(true), []);
+  const handleOpenTwoFactorModal = (0, _react.useCallback)(() => setShowTwoFactorModal(true), []);
 
-              // Update on server directly without using updateUser (which triggers fetchUser)
-              // This prevents the entire component from re-rendering
-              await oxyServices.updateProfile({
-                avatar: file.id
-              });
+  // 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 = (0, _react.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 = _authStore.useAuthStore.getState().user;
 
-              // 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 = _authStore.useAuthStore.getState().user;
-              if (currentUser) {
-                _authStore.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);
-              _sonner.toast.success(t('editProfile.toasts.avatarUpdated') || 'Avatar updated');
+    // 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 || '');
 
-              // Scroll to avatar section after a brief delay to ensure UI is updated
-              requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                  if (avatarSectionY !== null) {
-                    scrollViewRef.current?.scrollTo({
-                      y: Math.max(0, avatarSectionY - 100),
-                      // Offset to show section near top
-                      animated: true
-                    });
-                  } else {
-                    // Fallback: scroll to approximate position
-                    scrollViewRef.current?.scrollTo({
-                      y: 200,
-                      // Approximate position of avatar section
-                      animated: true
-                    });
-                  }
-                });
-              });
-            } catch (e) {
-              // Revert optimistic update on error
-              setAvatarFileId(typeof user?.avatar === 'string' ? user.avatar : '');
-              setOptimisticAvatarId(null);
-              _sonner.toast.error(e.message || t('editProfile.toasts.updateAvatarFailed') || 'Failed to update avatar');
-            } finally {
-              setIsUpdatingAvatar(false);
-            }
-          })();
-        },
-        // Limit to images client-side by using photos view if later exposed
-        disabledMimeTypes: ['video/', 'audio/', 'application/pdf']
+      // Reload locations and links
+      if (currentUser.locations && Array.isArray(currentUser.locations)) {
+        setLocations(currentUser.locations.map((loc, index) => ({
+          id: loc.id || `existing-${index}`,
+          name: loc.name,
+          label: loc.label,
+          coordinates: loc.coordinates
+        })));
+      } else if (currentUser.location) {
+        setLocations([{
+          id: 'existing-0',
+          name: currentUser.location,
+          label: 'Location'
+        }]);
+      } else {
+        setLocations([]);
+      }
+      if (currentUser.linksMetadata && Array.isArray(currentUser.linksMetadata)) {
+        setLinksMetadata(currentUser.linksMetadata.map((link, index) => ({
+          ...link,
+          id: link.id || `existing-${index}`
+        })));
+      } else {
+        setLinksMetadata([]);
       }
-    });
-  }, [showBottomSheet, oxyServices, avatarFileId, updateUser, user]);
-  const startEditing = (0, _react.useCallback)((type, currentValue) => {
-    switch (type) {
-      case 'displayName':
-        setTempDisplayName(displayName);
-        setTempLastName(lastName);
-        break;
-      case 'username':
-        setTempUsername(currentValue);
-        break;
-      case 'email':
-        setTempEmail(currentValue);
-        break;
-      case 'bio':
-        setTempBio(currentValue);
-        break;
-      case 'location':
-        // Don't reset the locations - keep the existing data
-        break;
-      case 'links':
-        // Don't reset the metadata - keep the existing rich metadata
-        // The tempLinksWithMetadata should already contain the rich data from the database
-        break;
-      case 'twoFactor':
-        // Reset TOTP temp state
-        setTotpSetupUrl(null);
-        setTotpCode('');
-        break;
     }
-    setEditingField(type);
-  }, [displayName, lastName]);
+  }, []); // Empty dependency array - callback reads fresh data from store at call time
 
-  // Handle initialField prop - must be after startEditing and openAvatarPicker are declared
+  // Handle initialField prop - open appropriate modal
   (0, _react.useEffect)(() => {
-    // Clear any pending timeout
-    if (initialFieldTimeoutRef.current) {
-      clearTimeout(initialFieldTimeoutRef.current);
-      initialFieldTimeoutRef.current = null;
-    }
-
-    // If initialField changed, reset the flag
-    if (previousInitialFieldRef.current !== initialField) {
-      hasSetInitialFieldRef.current = false;
-      previousInitialFieldRef.current = initialField;
-    }
-
-    // Set the editing field if initialField is provided and we haven't set it yet
-    if (initialField && !hasSetInitialFieldRef.current) {
+    if (initialField) {
       // Special handling for avatar - open avatar picker directly
       if (initialField === 'avatar') {
-        // Wait for section to be scrolled, then open picker
-        initialFieldTimeoutRef.current = setTimeout(() => {
+        setTimeout(() => {
           openAvatarPicker();
-          hasSetInitialFieldRef.current = true;
-        }, SCROLL_DELAY_MS);
+        }, 300);
       } else {
-        // For other fields, get current value and start editing after scroll
-        const currentValue = getFieldCurrentValue(initialField);
-
-        // Wait for section to be scrolled, then start editing
-        initialFieldTimeoutRef.current = setTimeout(() => {
-          startEditing(initialField, currentValue);
-          hasSetInitialFieldRef.current = true;
-        }, SCROLL_DELAY_MS);
-      }
-    }
-    return () => {
-      if (initialFieldTimeoutRef.current) {
-        clearTimeout(initialFieldTimeoutRef.current);
-        initialFieldTimeoutRef.current = null;
+        // Open appropriate modal
+        setTimeout(() => {
+          switch (initialField) {
+            case 'displayName':
+              setShowEditDisplayNameModal(true);
+              break;
+            case 'username':
+              setShowEditUsernameModal(true);
+              break;
+            case 'email':
+              setShowEditEmailModal(true);
+              break;
+            case 'bio':
+              setShowEditBioModal(true);
+              break;
+            case 'location':
+              setShowEditLocationModal(true);
+              break;
+            case 'links':
+              setShowEditLinksModal(true);
+              break;
+            case 'twoFactor':
+              setShowTwoFactorModal(true);
+              break;
+          }
+        }, 300);
       }
-    };
-  }, [initialField, getFieldCurrentValue, startEditing, openAvatarPicker]);
-  const saveField = type => {
-    animateSaveButton(0.95); // Scale down slightly for animation
-
-    switch (type) {
-      case 'displayName':
-        setDisplayName(tempDisplayName);
-        setLastName(tempLastName);
-        break;
-      case 'username':
-        setUsername(tempUsername);
-        break;
-      case 'email':
-        setEmail(tempEmail);
-        break;
-      case 'bio':
-        setBio(tempBio);
-        break;
-      case 'location':
-        // Locations are handled in the main save function
-        break;
-      case 'links':
-        // Save both URLs and metadata
-        setLinks(tempLinksWithMetadata.map(link => link.url));
-        // Store full metadata for database
-        setTempLinksWithMetadata(tempLinksWithMetadata);
-        break;
     }
+  }, [initialField, openAvatarPicker]);
 
-    // Complete animation, then reset and close editing
-    animateSaveButton(1, () => {
-      setEditingField(null);
-    });
-  };
-  const cancelEditing = () => {
-    setEditingField(null);
-  };
-  const fetchLinkMetadata = async url => {
+  // Removed fetchLinkMetadata - now handled by EditLinksModal
+  const _fetchLinkMetadata = async url => {
     // Check cache first
     const cacheKey = url.toLowerCase().trim();
     const cached = linkMetadataCache.get(cacheKey);
@@ -588,6 +620,8 @@ const AccountSettingsScreen = ({
       setIsFetchingMetadata(false);
     }
   };
+
+  // Helper functions for inline editing (legacy support - still used by renderEditingField)
   const searchLocations = async query => {
     if (!query.trim() || query.length < 3) {
       setLocationSearchResults([]);
@@ -644,7 +678,7 @@ const AccountSettingsScreen = ({
   const addLink = async () => {
     if (!newLinkUrl.trim()) return;
     const url = newLinkUrl.trim();
-    const metadata = await fetchLinkMetadata(url);
+    const metadata = await _fetchLinkMetadata(url);
     setTempLinksWithMetadata(prev => [...prev, metadata]);
     setNewLinkUrl('');
     setIsAddingLink(false);
@@ -660,12 +694,18 @@ const AccountSettingsScreen = ({
       return newLinks;
     });
   };
+
+  // Memoize display name for avatar
+  const displayNameForAvatar = (0, _react.useMemo)(() => (0, _userUtils.getDisplayName)(user), [user]);
+
+  // Legacy renderEditingField function (still used for twoFactor and fallback)
   const renderEditingField = type => {
+    if (!type) return null;
     if (type === 'twoFactor') {
       const enabled = !!user?.privacySettings?.twoFactorEnabled;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.editingFieldContent,
@@ -675,7 +715,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Two\u2011Factor Authentication (TOTP)"
               })
@@ -684,7 +724,9 @@ const AccountSettingsScreen = ({
                 style: styles.editingFieldDescription,
                 children: "Protect your account with a 6\u2011digit code from an authenticator app. Scan the QR code then enter the code to enable."
               }), !totpSetupUrl ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-                style: styles.primaryButton,
+                style: [styles.primaryButton, {
+                  backgroundColor: colors.iconSecurity
+                }],
                 disabled: isTotpBusy,
                 onPress: async () => {
                   if (!activeSessionId) {
@@ -739,7 +781,9 @@ const AccountSettingsScreen = ({
                     maxLength: 6
                   })]
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-                  style: styles.primaryButton,
+                  style: [styles.primaryButton, {
+                    backgroundColor: colors.iconSecurity
+                  }],
                   disabled: isTotpBusy || totpCode.length !== 6,
                   onPress: async () => {
                     if (!activeSessionId) {
@@ -796,7 +840,7 @@ const AccountSettingsScreen = ({
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
                 style: [styles.primaryButton, {
-                  backgroundColor: '#d9534f'
+                  backgroundColor: colors.sidebarIconSharing
                 }],
                 disabled: isTotpBusy || totpCode.length !== 6,
                 onPress: async () => {
@@ -837,7 +881,7 @@ const AccountSettingsScreen = ({
     if (type === 'displayName') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.editingFieldContent,
@@ -847,7 +891,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Edit Full Name"
               })
@@ -868,7 +912,7 @@ const AccountSettingsScreen = ({
                   value: tempDisplayName,
                   onChangeText: setTempDisplayName,
                   placeholder: "Enter your first name",
-                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  placeholderTextColor: colors.secondaryText,
                   autoFocus: true,
                   selectionColor: themeStyles.primaryColor
                 })]
@@ -884,7 +928,7 @@ const AccountSettingsScreen = ({
                   value: tempLastName,
                   onChangeText: setTempLastName,
                   placeholder: "Enter your last name",
-                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  placeholderTextColor: colors.secondaryText,
                   selectionColor: themeStyles.primaryColor
                 })]
               })]
@@ -896,7 +940,7 @@ const AccountSettingsScreen = ({
     if (type === 'location') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.editingFieldContent,
@@ -906,7 +950,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Manage Your Locations"
               })
@@ -915,7 +959,9 @@ const AccountSettingsScreen = ({
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
                 style: styles.addLocationLabel,
                 children: ["Add New Location", isSearchingLocations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.searchingText,
+                  style: [styles.searchingText, {
+                    color: colors.iconSecurity
+                  }],
                   children: " \u2022 Searching..."
                 })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -928,7 +974,7 @@ const AccountSettingsScreen = ({
                     searchLocations(text);
                   },
                   placeholder: "Search for a location...",
-                  placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                  placeholderTextColor: colors.secondaryText,
                   autoFocus: true,
                   selectionColor: themeStyles.primaryColor
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -969,7 +1015,9 @@ const AccountSettingsScreen = ({
                 size: 20,
                 color: themeStyles.primaryColor
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.addLocationTriggerText,
+                style: [styles.addLocationTriggerText, {
+                  color: colors.iconSecurity
+                }],
                 children: "Add a new location"
               })]
             }), tempLocations.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1014,7 +1062,9 @@ const AccountSettingsScreen = ({
                         numberOfLines: 1,
                         children: location.name
                       }), location.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                        style: styles.locationLabel,
+                        style: [styles.locationLabel, {
+                          backgroundColor: colors.iconSecurity
+                        }],
                         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                           style: styles.locationLabelText,
                           children: location.label
@@ -1054,7 +1104,7 @@ const AccountSettingsScreen = ({
     if (type === 'links') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.editingFieldContainer, {
-          backgroundColor: themeStyles.backgroundColor
+          backgroundColor: colors.background
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.editingFieldContent,
@@ -1064,7 +1114,7 @@ const AccountSettingsScreen = ({
               style: styles.editingFieldHeader,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: [styles.editingFieldLabel, {
-                  color: themeStyles.isDarkTheme ? '#FFFFFF' : '#1A1A1A'
+                  color: colors.text
                 }],
                 children: "Manage Your Links"
               })
@@ -1073,11 +1123,10 @@ const AccountSettingsScreen = ({
               // Add new link item
               ...(isAddingLink ? [{
                 id: 'add-link-input',
-                icon: 'add',
-                iconColor: '#32D74B',
+                icon: 'plus',
+                iconColor: colors.sidebarIconSharing,
                 title: 'Add New Link',
                 subtitle: isFetchingMetadata ? 'Fetching metadata...' : 'Enter URL to add a new link',
-                multiRow: true,
                 customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                   style: styles.addLinkInputContainer,
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
@@ -1085,7 +1134,7 @@ const AccountSettingsScreen = ({
                     value: newLinkUrl,
                     onChangeText: setNewLinkUrl,
                     placeholder: "Enter URL (e.g., https://example.com)",
-                    placeholderTextColor: themeStyles.isDarkTheme ? '#aaa' : '#999',
+                    placeholderTextColor: colors.secondaryText,
                     keyboardType: "url",
                     autoFocus: true,
                     selectionColor: themeStyles.primaryColor
@@ -1103,6 +1152,7 @@ const AccountSettingsScreen = ({
                       })
                     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
                       style: [styles.addLinkButton, styles.addButton, {
+                        backgroundColor: colors.iconSecurity,
                         opacity: isFetchingMetadata ? 0.5 : 1
                       }],
                       onPress: addLink,
@@ -1119,8 +1169,8 @@ const AccountSettingsScreen = ({
                 })
               }] : [{
                 id: 'add-link-trigger',
-                icon: 'add',
-                iconColor: '#32D74B',
+                icon: 'plus',
+                iconColor: colors.sidebarIconSharing,
                 title: 'Add a new link',
                 subtitle: 'Tap to add a new link to your profile',
                 onPress: () => setIsAddingLink(true)
@@ -1128,13 +1178,20 @@ const AccountSettingsScreen = ({
               // Existing links
               ...tempLinksWithMetadata.map((link, index) => ({
                 id: link.id,
-                image: link.image || undefined,
-                imageSize: 32,
-                icon: link.image ? undefined : 'link',
-                iconColor: '#32D74B',
+                customIcon: link.image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: link.image
+                  },
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18
+                  }
+                }) : undefined,
+                icon: !link.image ? 'link-variant' : undefined,
+                iconColor: colors.sidebarIconSharing,
                 title: link.title || link.url,
                 subtitle: link.description && link.description !== link.title ? link.description : link.url,
-                multiRow: true,
                 customContent: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                   style: styles.linkItemActions,
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1168,8 +1225,7 @@ const AccountSettingsScreen = ({
                     })
                   })]
                 })
-              }))],
-              theme: theme
+              }))]
             }), tempLinksWithMetadata.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: styles.reorderHint,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -1187,7 +1243,7 @@ const AccountSettingsScreen = ({
         value: displayName,
         placeholder: 'Enter your display name',
         icon: 'person',
-        color: '#007AFF',
+        color: colors.iconPersonalInfo,
         multiline: false,
         keyboardType: 'default'
       },
@@ -1196,7 +1252,7 @@ const AccountSettingsScreen = ({
         value: username,
         placeholder: 'Choose a username',
         icon: 'at',
-        color: '#5856D6',
+        color: colors.iconData,
         multiline: false,
         keyboardType: 'default'
       },
@@ -1205,7 +1261,7 @@ const AccountSettingsScreen = ({
         value: email,
         placeholder: 'Enter your email address',
         icon: 'mail',
-        color: '#FF9500',
+        color: colors.iconStorage,
         multiline: false,
         keyboardType: 'email-address'
       },
@@ -1214,7 +1270,7 @@ const AccountSettingsScreen = ({
         value: bio,
         placeholder: 'Tell people about yourself...',
         icon: 'document-text',
-        color: '#34C759',
+        color: colors.iconPersonalInfo,
         multiline: true,
         keyboardType: 'default'
       },
@@ -1223,7 +1279,7 @@ const AccountSettingsScreen = ({
         value: location,
         placeholder: 'Enter your location',
         icon: 'location',
-        color: '#FF3B30',
+        color: colors.iconSharing,
         multiline: false,
         keyboardType: 'default'
       },
@@ -1232,7 +1288,7 @@ const AccountSettingsScreen = ({
         value: links.join(', '),
         placeholder: 'Enter your links (comma separated)',
         icon: 'link',
-        color: '#32D74B',
+        color: colors.iconPersonalInfo,
         multiline: false,
         keyboardType: 'url'
       }
@@ -1281,7 +1337,7 @@ const AccountSettingsScreen = ({
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.editingFieldContainer, {
-        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF'
+        backgroundColor: colors.background
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.editingFieldContent,
@@ -1291,7 +1347,7 @@ const AccountSettingsScreen = ({
             style: styles.editingFieldHeader,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [styles.editingFieldLabel, {
-                color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000'
+                color: colors.text
               }],
               children: config.label
             })
@@ -1315,10 +1371,10 @@ const AccountSettingsScreen = ({
       })
     });
   };
-  if (authLoading || !isAuthenticated) {
+  if (isLoading || !isAuthenticated) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.container, {
-        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7',
+        backgroundColor: themeStyles.backgroundColor,
         justifyContent: 'center'
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
@@ -1329,40 +1385,40 @@ const AccountSettingsScreen = ({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, {
-      backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#F5F5F7'
+      backgroundColor: themeStyles.backgroundColor
     }],
     children: [editingField ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.editingHeader, {
-        backgroundColor: themeStyles.isDarkTheme ? '#000000' : '#FFFFFF',
-        borderBottomColor: themeStyles.isDarkTheme ? '#38383A' : '#E5E5EA'
+        backgroundColor: colors.background,
+        borderBottomColor: colors.border
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.editingHeaderContent,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.editingBackButton, {
-            backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+            backgroundColor: colors.card
           }],
           onPress: cancelEditing,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
             name: "chevron-back",
             size: 20,
-            color: themeStyles.primaryColor
+            color: colors.tint
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.editingTitleContainer
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: [styles.editingSaveButton, {
             opacity: isSaving ? 0.5 : 1,
-            backgroundColor: themeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7'
+            backgroundColor: colors.card
           }],
           onPress: () => saveField(editingField),
           disabled: isSaving,
           children: isSaving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
             size: "small",
-            color: themeStyles.primaryColor
+            color: colors.tint
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.editingSaveButtonText, {
-              color: themeStyles.primaryColor
+              color: colors.tint
             }],
             children: "Save"
           })
@@ -1371,34 +1427,25 @@ const AccountSettingsScreen = ({
         style: styles.editingHeaderBottom,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.editingIconContainer, {
-            backgroundColor: editingField === 'displayName' ? '#007AFF20' : editingField === 'username' ? '#5856D620' : editingField === 'email' ? '#FF950020' : editingField === 'bio' ? '#34C75920' : editingField === 'location' ? '#FF3B3020' : editingField === 'links' ? '#32D74B20' : '#007AFF20'
+            backgroundColor: editingField === 'displayName' ? `${colors.sidebarIconPersonalInfo}20` : editingField === 'username' ? `${colors.sidebarIconData}20` : editingField === 'email' ? `${colors.sidebarIconSecurity}20` : editingField === 'bio' ? `${colors.sidebarIconPersonalInfo}20` : editingField === 'location' ? `${colors.sidebarIconSharing}20` : editingField === 'links' ? `${colors.sidebarIconPersonalInfo}20` : `${colors.tint}20`
           }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
-            name: editingField === 'displayName' ? 'person' : editingField === 'username' ? 'at' : editingField === 'email' ? 'mail' : editingField === 'bio' ? 'document-text' : editingField === 'location' ? 'location' : editingField === 'links' ? 'link' : 'person',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.MaterialCommunityIcons, {
+            name: editingField === 'displayName' ? 'account-outline' : editingField === 'username' ? 'at' : editingField === 'email' ? 'email-outline' : editingField === 'bio' ? 'text-box-outline' : editingField === 'location' ? 'map-marker-outline' : editingField === 'links' ? 'link-variant' : 'account-outline',
             size: 28,
-            color: editingField === 'displayName' ? '#007AFF' : editingField === 'username' ? '#5856D6' : editingField === 'email' ? '#FF9500' : editingField === 'bio' ? '#34C759' : editingField === 'location' ? '#FF3B30' : editingField === 'links' ? '#32D74B' : '#007AFF'
+            color: editingField === 'displayName' ? colors.sidebarIconPersonalInfo : editingField === 'username' ? colors.sidebarIconData : editingField === 'email' ? colors.sidebarIconSecurity : editingField === 'bio' ? colors.sidebarIconPersonalInfo : editingField === 'location' ? colors.sidebarIconSharing : editingField === 'links' ? colors.sidebarIconPersonalInfo : colors.tint
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: [styles.editingBottomTitle, {
-            color: themeStyles.isDarkTheme ? '#FFFFFF' : '#000000'
+            color: colors.text
           }],
           children: editingField === 'displayName' ? t('editProfile.items.displayName.title') || 'Display Name' : editingField === 'username' ? t('editProfile.items.username.title') || 'Username' : editingField === 'email' ? t('editProfile.items.email.title') || 'Email' : editingField === 'bio' ? t('editProfile.items.bio.title') || 'Bio' : editingField === 'location' ? t('editProfile.items.locations.title') || 'Location' : editingField === 'links' ? t('editProfile.items.links.title') || 'Links' : 'Field'
         })]
       })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Header, {
-      title: t('editProfile.title') || 'Edit Profile',
-      theme: theme,
-      onBack: goBack || onClose,
-      rightAction: {
-        icon: 'checkmark',
-        onPress: handleSave,
-        loading: isSaving,
-        disabled: isSaving
-      },
-      elevation: "subtle"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       ref: scrollViewRef,
       style: editingField ? styles.contentEditing : styles.content,
+      contentContainerStyle: styles.scrollContent,
+      showsVerticalScrollIndicator: false,
       children: editingField ?
       /*#__PURE__*/
       // Show only the editing interface when editing
@@ -1409,7 +1456,24 @@ const AccountSettingsScreen = ({
       /*#__PURE__*/
       // Show all settings when not editing
       (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [showRecoveryModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [styles.headerContainer, styles.headerSection],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.modernTitle, {
+              color: themeStyles.textColor,
+              marginBottom: 0,
+              marginTop: 0
+            }],
+            children: t('accountOverview.items.editProfile.title') || t('editProfile.title') || 'Edit Profile'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.modernSubtitle, {
+              color: colors.secondaryText,
+              marginBottom: 0,
+              marginTop: 0
+            }],
+            children: t('accountOverview.items.editProfile.subtitle') || t('editProfile.subtitle') || 'Manage your profile and preferences'
+          })]
+        }), showRecoveryModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: {
             position: 'absolute',
             top: 0,
@@ -1495,6 +1559,7 @@ const AccountSettingsScreen = ({
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
               style: [styles.primaryButton, {
+                backgroundColor: colors.iconSecurity,
                 alignSelf: 'flex-end',
                 marginTop: 8
               }],
@@ -1528,7 +1593,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.profilePicture') || 'PROFILE PICTURE'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1536,29 +1601,20 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
               items: [{
                 id: 'profile-photo',
-                icon: avatarFileId ? undefined : 'person',
-                iconColor: '#007AFF',
-                // Use optimistic avatar ID if available, otherwise use saved one
-                image: optimisticAvatarId || avatarFileId ? oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb') : undefined,
-                imageSize: 40,
-                title: 'Profile Photo',
-                subtitle: isUpdatingAvatar ? 'Updating profile picture...' : avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
-                onPress: isUpdatingAvatar ? undefined : openAvatarPicker,
-                disabled: isUpdatingAvatar,
-                customIcon: isUpdatingAvatar ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+                customIcon: optimisticAvatarId || avatarFileId ? isUpdatingAvatar ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
                   style: {
                     position: 'relative',
-                    width: 40,
-                    height: 40
+                    width: 36,
+                    height: 36
                   },
-                  children: [(optimisticAvatarId || avatarFileId) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Image, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Image, {
                     source: {
                       uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
                     },
                     style: {
-                      width: 40,
-                      height: 40,
-                      borderRadius: 22,
+                      width: 36,
+                      height: 36,
+                      borderRadius: 18,
                       opacity: 0.6
                     }
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1570,24 +1626,38 @@ const AccountSettingsScreen = ({
                       bottom: 0,
                       justifyContent: 'center',
                       alignItems: 'center',
-                      backgroundColor: themeStyles.isDarkTheme ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
-                      borderRadius: 22
+                      backgroundColor: colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.7)',
+                      borderRadius: 18
                     },
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
                       size: "small",
-                      color: themeStyles.primaryColor
+                      color: colors.tint
                     })
                   })]
-                }) : undefined
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+                  source: {
+                    uri: oxyServices.getFileDownloadUrl(optimisticAvatarId || avatarFileId, 'thumb')
+                  },
+                  style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: 18
+                  }
+                }) : undefined,
+                icon: !(optimisticAvatarId || avatarFileId) ? 'account-outline' : undefined,
+                iconColor: colors.sidebarIconPersonalInfo,
+                title: 'Profile Photo',
+                subtitle: isUpdatingAvatar ? 'Updating profile picture...' : avatarFileId ? 'Tap to change your profile picture' : 'Tap to add a profile picture',
+                onPress: isUpdatingAvatar ? undefined : openAvatarPicker,
+                disabled: isUpdatingAvatar
               }, ...(avatarFileId && !isUpdatingAvatar ? [{
                 id: 'remove-profile-photo',
-                icon: 'trash',
-                iconColor: '#FF3B30',
+                icon: 'delete-outline',
+                iconColor: colors.sidebarIconSharing,
                 title: 'Remove Photo',
                 subtitle: 'Delete current profile picture',
                 onPress: handleAvatarRemove
-              }] : [])],
-              theme: theme
+              }] : [])]
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1601,7 +1671,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.basicInfo') || 'BASIC INFORMATION'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1609,27 +1679,26 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
               items: [{
                 id: 'display-name',
-                icon: 'person',
-                iconColor: '#007AFF',
+                icon: 'account-outline',
+                iconColor: colors.sidebarIconPersonalInfo,
                 title: t('editProfile.items.displayName.title') || 'Display Name',
                 subtitle: [displayName, lastName].filter(Boolean).join(' ') || t('editProfile.items.displayName.add') || 'Add your display name',
-                onPress: () => startEditing('displayName', '')
+                onPress: handleOpenDisplayNameModal
               }, {
                 id: 'username',
                 icon: 'at',
-                iconColor: '#5856D6',
+                iconColor: colors.sidebarIconData,
                 title: t('editProfile.items.username.title') || 'Username',
                 subtitle: username || t('editProfile.items.username.choose') || 'Choose a username',
-                onPress: () => startEditing('username', username)
+                onPress: handleOpenUsernameModal
               }, {
                 id: 'email',
-                icon: 'mail',
-                iconColor: '#FF9500',
+                icon: 'email-outline',
+                iconColor: colors.sidebarIconSecurity,
                 title: t('editProfile.items.email.title') || 'Email',
                 subtitle: email || t('editProfile.items.email.add') || 'Add your email address',
-                onPress: () => startEditing('email', email)
-              }],
-              theme: theme
+                onPress: handleOpenEmailModal
+              }]
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1643,7 +1712,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.about') || 'ABOUT YOU'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1651,87 +1720,34 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
               items: [{
                 id: 'bio',
-                icon: 'document-text',
-                iconColor: '#34C759',
+                icon: 'text-box-outline',
+                iconColor: colors.sidebarIconPersonalInfo,
                 title: t('editProfile.items.bio.title') || 'Bio',
                 subtitle: bio || t('editProfile.items.bio.placeholder') || 'Tell people about yourself',
-                onPress: () => startEditing('bio', bio)
+                onPress: handleOpenBioModal
               }, {
                 id: 'locations',
-                icon: 'location',
-                iconColor: '#FF3B30',
+                icon: 'map-marker-outline',
+                iconColor: colors.sidebarIconSharing,
                 title: t('editProfile.items.locations.title') || 'Locations',
-                subtitle: tempLocations.length > 0 ? tempLocations.length === 1 ? t('editProfile.items.locations.count', {
-                  count: tempLocations.length
-                }) || `${tempLocations.length} location added` : t('editProfile.items.locations.count_plural', {
-                  count: tempLocations.length
-                }) || `${tempLocations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
-                onPress: () => startEditing('location', ''),
-                customContentBelow: tempLocations.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                  style: styles.linksPreviewContainer,
-                  children: [tempLocations.slice(0, 2).map((location, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                    style: styles.linkPreviewItem,
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                      style: styles.linkPreviewImage,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                        style: styles.linkPreviewImageText,
-                        children: location.name.charAt(0).toUpperCase()
-                      })
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                      style: styles.linkPreviewContent,
-                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                        style: styles.linkPreviewTitle,
-                        numberOfLines: 1,
-                        children: location.name
-                      }), location.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                        style: styles.linkPreviewSubtitle,
-                        children: location.label
-                      })]
-                    })]
-                  }, location.id || index)), tempLocations.length > 2 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: styles.linkPreviewMore,
-                    children: ["+", tempLocations.length - 2, " more"]
-                  })]
-                })
+                subtitle: locations.length > 0 ? locations.length === 1 ? t('editProfile.items.locations.count', {
+                  count: locations.length
+                }) || `${locations.length} location added` : t('editProfile.items.locations.count_plural', {
+                  count: locations.length
+                }) || `${locations.length} locations added` : t('editProfile.items.locations.add') || 'Add your locations',
+                onPress: handleOpenLocationModal
               }, {
                 id: 'links',
-                icon: 'link',
-                iconColor: '#32D74B',
+                icon: 'link-variant',
+                iconColor: colors.sidebarIconSharing,
                 title: t('editProfile.items.links.title') || 'Links',
-                subtitle: tempLinksWithMetadata.length > 0 ? tempLinksWithMetadata.length === 1 ? t('editProfile.items.links.count', {
-                  count: tempLinksWithMetadata.length
-                }) || `${tempLinksWithMetadata.length} link added` : t('editProfile.items.links.count_plural', {
-                  count: tempLinksWithMetadata.length
-                }) || `${tempLinksWithMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
-                onPress: () => startEditing('links', ''),
-                multiRow: true,
-                customContentBelow: tempLinksWithMetadata.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                  style: styles.linksPreviewContainer,
-                  children: [tempLinksWithMetadata.slice(0, 2).map((link, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                    style: styles.linkPreviewItem,
-                    children: [link.image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-                      source: {
-                        uri: link.image
-                      },
-                      style: styles.linkPreviewImage
-                    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                      style: styles.linkPreviewImage,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                        style: styles.linkPreviewImageText,
-                        children: link.title?.charAt(0).toUpperCase() || link.url.charAt(0).toUpperCase()
-                      })
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                      style: styles.linkPreviewTitle,
-                      numberOfLines: 1,
-                      children: link.title || link.url
-                    })]
-                  }, link.id || index)), tempLinksWithMetadata.length > 2 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                    style: styles.linkPreviewMore,
-                    children: ["+", tempLinksWithMetadata.length - 2, " more"]
-                  })]
-                })
-              }],
-              theme: theme
+                subtitle: linksMetadata.length > 0 ? linksMetadata.length === 1 ? t('editProfile.items.links.count', {
+                  count: linksMetadata.length
+                }) || `${linksMetadata.length} link added` : t('editProfile.items.links.count_plural', {
+                  count: linksMetadata.length
+                }) || `${linksMetadata.length} links added` : t('editProfile.items.links.add') || 'Add your links',
+                onPress: handleOpenLinksModal
+              }]
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1745,7 +1761,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.quickActions') || 'QUICK ACTIONS'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1754,7 +1770,7 @@ const AccountSettingsScreen = ({
               items: [{
                 id: 'preview-profile',
                 icon: 'eye',
-                iconColor: '#007AFF',
+                iconColor: colors.sidebarIconHome,
                 title: t('editProfile.items.previewProfile.title') || 'Preview Profile',
                 subtitle: t('editProfile.items.previewProfile.subtitle') || 'See how your profile looks to others',
                 onPress: () => navigate?.('Profile', {
@@ -1762,20 +1778,19 @@ const AccountSettingsScreen = ({
                 })
               }, {
                 id: 'privacy-settings',
-                icon: 'shield-checkmark',
-                iconColor: '#8E8E93',
+                icon: 'shield-check',
+                iconColor: colors.sidebarIconSecurity,
                 title: t('editProfile.items.privacySettings.title') || 'Privacy Settings',
                 subtitle: t('editProfile.items.privacySettings.subtitle') || 'Control who can see your profile',
                 onPress: () => navigate?.('PrivacySettings')
               }, {
                 id: 'verify-account',
-                icon: 'checkmark-circle',
-                iconColor: '#30D158',
+                icon: 'check-circle',
+                iconColor: colors.sidebarIconPersonalInfo,
                 title: t('editProfile.items.verifyAccount.title') || 'Verify Account',
                 subtitle: t('editProfile.items.verifyAccount.subtitle') || 'Get a verified badge',
                 onPress: () => navigate?.('AccountVerification')
-              }],
-              theme: theme
+              }]
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -1789,7 +1804,7 @@ const AccountSettingsScreen = ({
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
-              color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
+              color: colors.secondaryText
             }],
             children: t('editProfile.sections.security') || 'SECURITY'
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -1797,35 +1812,107 @@ const AccountSettingsScreen = ({
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GroupedSection, {
               items: [{
                 id: 'two-factor',
-                icon: 'shield-checkmark',
-                iconColor: '#007AFF',
+                icon: 'shield-lock',
+                iconColor: colors.sidebarIconSecurity,
                 title: t('editProfile.items.twoFactor.title') || 'Two‑Factor Authentication',
                 subtitle: user?.privacySettings?.twoFactorEnabled ? t('editProfile.items.twoFactor.enabled') || 'Enabled' : t('editProfile.items.twoFactor.disabled') || 'Disabled (recommended)',
-                onPress: () => startEditing('twoFactor', '')
-              }],
-              theme: theme
+                onPress: handleOpenTwoFactorModal
+              }]
             })
           })]
         })]
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditDisplayNameModal.EditDisplayNameModal, {
+      visible: showEditDisplayNameModal,
+      onClose: () => setShowEditDisplayNameModal(false),
+      initialDisplayName: displayName,
+      initialLastName: lastName,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditUsernameModal.EditUsernameModal, {
+      visible: showEditUsernameModal,
+      onClose: () => setShowEditUsernameModal(false),
+      initialValue: username,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditEmailModal.EditEmailModal, {
+      visible: showEditEmailModal,
+      onClose: () => setShowEditEmailModal(false),
+      initialValue: email,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditBioModal.EditBioModal, {
+      visible: showEditBioModal,
+      onClose: () => setShowEditBioModal(false),
+      initialValue: bio,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditLocationModal.EditLocationModal, {
+      visible: showEditLocationModal,
+      onClose: () => setShowEditLocationModal(false),
+      initialLocations: locations,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditLinksModal.EditLinksModal, {
+      visible: showEditLinksModal,
+      onClose: () => setShowEditLinksModal(false),
+      initialLinks: linksMetadata,
+      theme: normalizedTheme,
+      onSave: handleModalSave
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TwoFactorSetupModal.TwoFactorSetupModal, {
+      visible: showTwoFactorModal,
+      onClose: () => setShowTwoFactorModal(false),
+      isEnabled: !!user?.privacySettings?.twoFactorEnabled,
+      theme: normalizedTheme
     })]
   });
 };
 const styles = _reactNative.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: (0, _spacing.createScreenContentStyle)(_spacing.HEADER_PADDING_TOP_SETTINGS),
+  headerContainer: {
+    width: '100%',
+    maxWidth: 420,
+    alignSelf: 'center',
+    marginBottom: _spacing.SECTION_GAP_LARGE
+  },
+  headerSection: {
+    alignItems: 'flex-start',
+    width: '100%',
+    gap: _spacing.COMPONENT_GAP
+  },
+  modernTitle: {
+    fontFamily: _fonts.fontFamilies.phuduBold,
+    fontWeight: _reactNative.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: _spacing.SECTION_GAP_LARGE
   },
   sectionTitle: {
     fontSize: 13,
@@ -1833,13 +1920,11 @@ const styles = _reactNative.StyleSheet.create({
     color: '#8E8E93',
     marginBottom: 8,
     marginTop: 4,
-    marginHorizontal: 16,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
     fontFamily: _fonts.fontFamilies.phuduSemiBold
   },
   groupedSectionWrapper: {
-    marginHorizontal: 16,
     backgroundColor: 'transparent'
   },
   userIcon: {
@@ -1904,7 +1989,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     gap: 8,
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     paddingVertical: 12,
     paddingHorizontal: 16,
     borderRadius: 10
@@ -2051,7 +2136,7 @@ const styles = _reactNative.StyleSheet.create({
     color: '#6C757D'
   },
   addButton: {
-    backgroundColor: '#007AFF'
+    // backgroundColor should be applied inline using colors.iconSecurity
   },
   addButtonText: {
     fontSize: 14,
@@ -2072,7 +2157,7 @@ const styles = _reactNative.StyleSheet.create({
   addLinkTriggerText: {
     fontSize: 14,
     fontWeight: '600',
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     marginLeft: 6
   },
   linksList: {
@@ -2169,7 +2254,7 @@ const styles = _reactNative.StyleSheet.create({
     width: 32,
     height: 32,
     borderRadius: 16,
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 8
@@ -2181,7 +2266,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   fetchingText: {
     fontSize: 12,
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     fontStyle: 'italic'
   },
   linksFieldContent: {
@@ -2206,7 +2291,7 @@ const styles = _reactNative.StyleSheet.create({
     width: 20,
     height: 20,
     borderRadius: 10,
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 6
@@ -2247,7 +2332,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   searchingText: {
     fontSize: 12,
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     fontStyle: 'italic'
   },
   addLocationInputContainer: {
@@ -2288,7 +2373,7 @@ const styles = _reactNative.StyleSheet.create({
   addLocationTriggerText: {
     marginLeft: 8,
     fontSize: 16,
-    color: '#007AFF',
+    // color should be applied inline using colors.iconSecurity
     fontWeight: '500'
   },
   searchResults: {
@@ -2352,7 +2437,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   locationLabel: {
-    backgroundColor: '#007AFF',
+    // backgroundColor should be applied inline using colors.iconSecurity
     paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 4,