@adminide-stack/yantra-mobile 12.0.54 → 12.0.55-alpha.0

package/lib/components/CustomDrawer.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useMemo,useCallback,useEffect}from'react';import {StyleSheet,View,Image,Pressable,ActivityIndicator}from'react-native';import {DrawerContentScrollView}from'@react-navigation/drawer';import {Ionicons}from'@expo/vector-icons';import {Text}from'@admin-layout/gluestack-ui-mobile';import {useRoute,CommonActions}from'@react-navigation/native';import {afterNativeModalClose}from'../utils/drawerNavigation.js';import {useSafeAreaInsets,SafeAreaView}from'react-native-safe-area-context';import {useDispatch,useSelector}from'react-redux';import {userSelector,logoutAndRedirect}from'@adminide-stack/user-auth0-client';import {useAccountProfileQuery}from'common/graphql';import {mobileTokens}from'../theme/mobileTokens.js';import {pickAuthEmail,pickPrimaryDisplayName,pickAuthPicture,getInitials}from'../utils/authUserDisplay.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useMemo,useCallback,useEffect}from'react';import {StyleSheet,View,Image,Pressable,ActivityIndicator}from'react-native';import {DrawerContentScrollView}from'@react-navigation/drawer';import {Ionicons}from'@expo/vector-icons';import {Text}from'@admin-layout/gluestack-ui-mobile';import {useRoute,CommonActions}from'@react-navigation/native';import {afterNativeModalClose}from'../utils/drawerNavigation.js';import {useSafeAreaInsets,SafeAreaView}from'react-native-safe-area-context';import {useDispatch,useSelector}from'react-redux';import {userSelector,logoutAndRedirect}from'@adminide-stack/user-auth0-client';import {useAccountProfileQuery}from'common/graphql';import {mobileTokens,mobileColors}from'../theme/mobileTokens.js';import {useAppTheme}from'../theme/AppThemeProvider.js';import {pickAuthEmail,pickPrimaryDisplayName,pickProfilePhotoUrl}from'../utils/authUserDisplay.js';import {ProfileAvatar}from'./ProfileAvatar.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -18,15 +18,22 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const APP_ICON = require("../assets/icon.png");
-const PALETTE = {
-  bg: mobileTokens.color.bg,
-  surface: mobileTokens.color.surface,
-  border: mobileTokens.color.border,
-  text: mobileTokens.color.text,
-  textSecondary: mobileTokens.color.textMuted,
-  icon: "#334155",
-  rowHighlight: mobileTokens.color.primarySoft
-};
+function drawerPalette(isDark) {
+  const color = mobileColors(isDark);
+  return {
+    bg: color.bg,
+    surface: color.surface,
+    border: color.border,
+    text: color.text,
+    textSecondary: color.textMuted,
+    icon: isDark ? "#cbd5e1" : "#334155",
+    rowHighlight: isDark ? "rgba(148,163,184,0.12)" : color.primarySoft,
+    focusedText: isDark ? "#f8fafc" : color.primary,
+    chevron: isDark ? "#64748b" : "#c4c4c4",
+    surfaceMuted: color.surfaceMuted,
+    primaryBorder: color.primaryBorder
+  };
+}
 function routeLabel(descriptor, route) {
   var _a, _b, _c;
   const optLabel = (_a = descriptor == null ? void 0 : descriptor.options) == null ? void 0 : _a.drawerLabel;
@@ -42,7 +49,7 @@ function isVisibleDrawerRoute(route, descriptor) {
   if (routeName.includes("WebBuilder") || routeName.toLowerCase().includes("webbuilder")) {
     return false;
   }
-  if (/ChatHistory/i.test(routeName) || /CanvasNative/i.test(routeName) || /(^|\.)Apps$/i.test(routeName)) {
+  if (/ChatHistory/i.test(routeName) || /CanvasNative/i.test(routeName) || /(^|\.)Apps$/i.test(routeName) || /(^|\.)Account$/i.test(routeName)) {
     return false;
   }
   const itemStyle = (_b = descriptor == null ? void 0 : descriptor.options) == null ? void 0 : _b.drawerItemStyle;
@@ -70,23 +77,64 @@ function DrawerListRow({
   focused,
   onPress,
   showDivider,
-  iconNode
+  iconNode,
+  palette
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityState: {
       selected: Boolean(focused)
     }, onPress, style: ({
       pressed
-    }) => [styles.listRow, focused ? styles.listRowFocused : null, pressed && styles.listRowPressed], children: [
-      iconNode != null ? iconNode : /* @__PURE__ */ jsx(Ionicons, { name: icon != null ? icon : "ellipse-outline", size: 22, color: focused ? PALETTE.text : PALETTE.icon }),
-      /* @__PURE__ */ jsx(Text, { style: [styles.listLabel, focused && styles.listLabelFocused], children: label }),
-      /* @__PURE__ */ jsx(Ionicons, { name: "chevron-forward", size: 16, color: "#c4c4c4", style: styles.navChevron })
+    }) => [styles.listRow, {
+      backgroundColor: focused || pressed ? palette.rowHighlight : palette.surface
+    }], children: [
+      iconNode != null ? iconNode : /* @__PURE__ */ jsx(Ionicons, { name: icon != null ? icon : "ellipse-outline", size: 22, color: focused ? palette.focusedText : palette.icon }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.listLabel, {
+        color: focused ? palette.focusedText : palette.text
+      }, focused && styles.listLabelFocused], children: label }),
+      /* @__PURE__ */ jsx(Ionicons, { name: "chevron-forward", size: 16, color: palette.chevron, style: styles.navChevron })
     ] }),
-    showDivider ? /* @__PURE__ */ jsx(View, { style: styles.rowDivider }) : null
+    showDivider ? /* @__PURE__ */ jsx(View, { style: [styles.rowDivider, {
+      backgroundColor: palette.border
+    }] }) : null
+  ] });
+}
+function DrawerAppearanceRow({
+  isDark,
+  onChange,
+  palette
+}) {
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "adjustable", accessibilityLabel: "Appearance", style: [styles.listRow, styles.appearanceRow, {
+    backgroundColor: palette.surface,
+    borderColor: palette.border
+  }], children: [
+    /* @__PURE__ */ jsx(Ionicons, { name: "contrast-outline", size: 20, color: palette.icon }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.listLabel, {
+      color: palette.text
+    }], children: "Appearance" }),
+    /* @__PURE__ */ jsxs(View, { style: [styles.appearanceToggle, {
+      backgroundColor: palette.surfaceMuted,
+      borderColor: palette.border
+    }], children: [
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Light", accessibilityState: {
+        selected: !isDark
+      }, onPress: () => onChange(false), style: [styles.appearanceToggleBtn, !isDark && {
+        backgroundColor: palette.rowHighlight,
+        borderColor: palette.primaryBorder
+      }], hitSlop: 4, children: /* @__PURE__ */ jsx(Ionicons, { name: !isDark ? "sunny" : "sunny-outline", size: 16, color: !isDark ? palette.focusedText : palette.icon }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dark", accessibilityState: {
+        selected: isDark
+      }, onPress: () => onChange(true), style: [styles.appearanceToggleBtn, isDark && {
+        backgroundColor: palette.rowHighlight,
+        borderColor: palette.primaryBorder
+      }], hitSlop: 4, children: /* @__PURE__ */ jsx(Ionicons, { name: isDark ? "moon" : "moon-outline", size: 16, color: isDark ? palette.focusedText : palette.icon }) })
+    ] })
   ] });
 }
 function DrawerProfileHeader({
-  isAuthenticated
+  isAuthenticated,
+  onPress,
+  palette
 }) {
   var _a;
   const authUser = useSelector(userSelector);
@@ -98,30 +146,30 @@ function DrawerProfileHeader({
     skip: !isAuthenticated
   });
   const photoUrl = useMemo(() => {
-    var _a2, _b, _c;
-    const fromProfile = (_c = (_b = (_a2 = profileData == null ? void 0 : profileData.accountProfile) == null ? void 0 : _a2.photos) == null ? void 0 : _b.find((p) => p == null ? void 0 : p.url)) == null ? void 0 : _c.url;
-    if (fromProfile) return fromProfile;
-    return pickAuthPicture(authUser);
+    var _a2;
+    return pickProfilePhotoUrl((_a2 = profileData == null ? void 0 : profileData.accountProfile) == null ? void 0 : _a2.photos, authUser);
   }, [(_a = profileData == null ? void 0 : profileData.accountProfile) == null ? void 0 : _a.photos, authUser]);
   const displayName = useMemo(() => pickPrimaryDisplayName(authUser), [authUser]);
   const email = useMemo(() => pickAuthEmail(authUser), [authUser]);
-  const subtitle = useMemo(() => {
-    var _a2, _b, _c;
-    const u = authUser;
-    const nick = ((_c = (_b = (_a2 = u == null ? void 0 : u.profile) == null ? void 0 : _a2.nickname) != null ? _b : u == null ? void 0 : u.nickname) != null ? _c : "").trim();
-    if (!nick || nick === displayName.trim()) return null;
-    return `@${nick.replace(/^@/, "")}`;
-  }, [authUser, displayName]);
   if (!isAuthenticated) return null;
-  return /* @__PURE__ */ jsx(View, { style: styles.profileCard, children: /* @__PURE__ */ jsxs(View, { style: styles.profileCardInner, children: [
-    /* @__PURE__ */ jsx(View, { style: styles.avatarOuter, children: photoUrl ? /* @__PURE__ */ jsx(Image, { source: {
-      uri: photoUrl
-    }, style: styles.avatarImage, resizeMode: "cover" }) : /* @__PURE__ */ jsx(View, { style: styles.avatarPlaceholder, children: /* @__PURE__ */ jsx(Text, { style: styles.avatarInitials, children: getInitials(displayName) }) }) }),
+  return /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Account", onPress, style: ({
+    pressed
+  }) => [styles.profileCard, {
+    backgroundColor: palette.surface,
+    borderColor: palette.border
+  }, pressed && {
+    backgroundColor: palette.rowHighlight
+  }], children: /* @__PURE__ */ jsxs(View, { style: styles.profileCardInner, children: [
+    /* @__PURE__ */ jsx(ProfileAvatar, { uri: photoUrl, name: displayName, size: 44 }),
     /* @__PURE__ */ jsxs(View, { style: styles.profileMeta, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.profileName, numberOfLines: 2, children: displayName }),
-      subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.profileUsername, numberOfLines: 1, children: subtitle }) : null,
-      email ? /* @__PURE__ */ jsx(Text, { style: styles.profileEmail, numberOfLines: 1, children: email }) : null
-    ] })
+      /* @__PURE__ */ jsx(Text, { style: [styles.profileName, {
+        color: palette.text
+      }], numberOfLines: 1, children: displayName }),
+      email ? /* @__PURE__ */ jsx(Text, { style: [styles.profileEmail, {
+        color: palette.textSecondary
+      }], numberOfLines: 1, children: email }) : null
+    ] }),
+    /* @__PURE__ */ jsx(Ionicons, { name: "chevron-forward", size: 18, color: palette.chevron })
   ] }) });
 }
 function CustomDrawer(props) {
@@ -137,6 +185,11 @@ function CustomDrawer(props) {
   const route = useRoute();
   const insets = useSafeAreaInsets();
   const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const {
+    isDark,
+    setDarkMode
+  } = useAppTheme();
+  const palette = useMemo(() => drawerPalette(isDark), [isDark]);
   const orgName = useMemo(() => pickFocusedOrgName(state, route), [state, route]);
   const focusedRouteName = String((_c = (_b = (_a = state == null ? void 0 : state.routes) == null ? void 0 : _a[state == null ? void 0 : state.index]) == null ? void 0 : _b.name) != null ? _c : "");
   const historyFocused = /ChatHistory/i.test(focusedRouteName);
@@ -216,19 +269,41 @@ function CustomDrawer(props) {
       } : void 0);
     });
   }, [isLoggingOut, navigation, orgName]);
+  const handleOpenAccount = useCallback(() => {
+    var _a2;
+    if (isLoggingOut) return;
+    (_a2 = navigation == null ? void 0 : navigation.closeDrawer) == null ? void 0 : _a2.call(navigation);
+    afterNativeModalClose(() => {
+      var _a3;
+      (_a3 = navigation == null ? void 0 : navigation.navigate) == null ? void 0 : _a3.call(navigation, "MainStack.Account", orgName ? {
+        orgName
+      } : void 0);
+    });
+  }, [isLoggingOut, navigation, orgName]);
   useEffect(() => {
     if (authUser) {
       setIsLoggingOut(false);
     }
   }, [authUser]);
-  return /* @__PURE__ */ jsx(SafeAreaView, { style: styles.safeArea, edges: ["left", "bottom"], children: /* @__PURE__ */ jsxs(View, { style: styles.drawerColumn, children: [
-    /* @__PURE__ */ jsxs(DrawerContentScrollView, __spreadProps(__spreadValues({}, props), { style: styles.scroll, contentContainerStyle: scrollContentStyle, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.brandBlock, children: /* @__PURE__ */ jsxs(View, { style: styles.brandStrip, children: [
+  return /* @__PURE__ */ jsx(SafeAreaView, { style: [styles.safeArea, {
+    backgroundColor: palette.bg
+  }], edges: ["left", "bottom"], children: /* @__PURE__ */ jsxs(View, { style: styles.drawerColumn, children: [
+    /* @__PURE__ */ jsxs(DrawerContentScrollView, __spreadProps(__spreadValues({}, props), { style: [styles.scroll, {
+      backgroundColor: palette.bg
+    }], contentContainerStyle: scrollContentStyle, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.brandBlock, {
+        borderBottomColor: palette.border
+      }], children: /* @__PURE__ */ jsxs(View, { style: styles.brandStrip, children: [
         /* @__PURE__ */ jsx(Image, { source: APP_ICON, style: styles.brandIconSmall, resizeMode: "contain" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.brandStripTitle, children: "Yantra" })
+        /* @__PURE__ */ jsx(Text, { style: [styles.brandStripTitle, {
+          color: palette.text
+        }], children: "Yantra" })
       ] }) }),
-      /* @__PURE__ */ jsx(DrawerProfileHeader, { isAuthenticated }),
-      isAuthenticated ? /* @__PURE__ */ jsxs(View, { style: styles.menuCard, children: [
+      /* @__PURE__ */ jsx(DrawerProfileHeader, { isAuthenticated, onPress: handleOpenAccount, palette }),
+      isAuthenticated ? /* @__PURE__ */ jsxs(View, { style: [styles.menuCard, {
+        backgroundColor: palette.surface,
+        borderColor: palette.border
+      }], children: [
         visibleRoutes.map((r) => {
           var _a2, _b2;
           const descriptor = descriptors == null ? void 0 : descriptors[r.key];
@@ -236,8 +311,8 @@ function CustomDrawer(props) {
           const label = routeLabel(descriptor, r);
           const iconFn = (_b2 = descriptor == null ? void 0 : descriptor.options) == null ? void 0 : _b2.drawerIcon;
           const fallbackIcon = label.trim().toLowerCase() === "chat" ? "chatbubbles-outline" : "home-outline";
-          return /* @__PURE__ */ jsx(DrawerListRow, { label, focused, showDivider: true, icon: fallbackIcon, iconNode: typeof iconFn === "function" ? iconFn({
-            color: focused ? PALETTE.text : PALETTE.icon,
+          return /* @__PURE__ */ jsx(DrawerListRow, { label, focused, showDivider: true, icon: fallbackIcon, palette, iconNode: typeof iconFn === "function" ? iconFn({
+            color: focused ? palette.focusedText : palette.icon,
             size: 22,
             focused
           }) : void 0, onPress: () => {
@@ -247,14 +322,21 @@ function CustomDrawer(props) {
             } : void 0);
           } }, r.key);
         }),
-        /* @__PURE__ */ jsx(DrawerListRow, { icon: "apps-outline", label: "Apps", focused: appsFocused, onPress: handleOpenApps, showDivider: true }),
-        /* @__PURE__ */ jsx(DrawerListRow, { icon: "time-outline", label: "History", focused: historyFocused, onPress: handleOpenHistory, showDivider: true }),
-        /* @__PURE__ */ jsx(DrawerListRow, { icon: "card-outline", label: "Billing", focused: billingFocused, onPress: handleOpenBilling })
+        /* @__PURE__ */ jsx(DrawerListRow, { icon: "apps-outline", label: "Apps", focused: appsFocused, onPress: handleOpenApps, showDivider: true, palette }),
+        /* @__PURE__ */ jsx(DrawerListRow, { icon: "time-outline", label: "History", focused: historyFocused, onPress: handleOpenHistory, showDivider: true, palette }),
+        /* @__PURE__ */ jsx(DrawerListRow, { icon: "card-outline", label: "Billing", focused: billingFocused, onPress: handleOpenBilling, palette })
       ] }) : null,
-      !isAuthenticated ? /* @__PURE__ */ jsxs(View, { style: styles.loggedOutStateCard, children: [
+      !isAuthenticated ? /* @__PURE__ */ jsxs(View, { style: [styles.loggedOutStateCard, {
+        backgroundColor: palette.surface,
+        borderColor: palette.border
+      }], children: [
         /* @__PURE__ */ jsx(View, { style: styles.loggedOutStateIconWrap, children: /* @__PURE__ */ jsx(Ionicons, { name: "shield-checkmark-outline", size: 22, color: mobileTokens.color.primary }) }),
-        /* @__PURE__ */ jsx(Text, { style: styles.loggedOutStateTitle, children: "Sign in to continue" }),
-        /* @__PURE__ */ jsx(Text, { style: styles.loggedOutStateSubtitle, children: "Access your chat history, profile, and personalized workspace after login." }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.loggedOutStateTitle, {
+          color: palette.text
+        }], children: "Sign in to continue" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.loggedOutStateSubtitle, {
+          color: palette.textSecondary
+        }], children: "Access your chat history, profile, and personalized workspace after login." }),
         /* @__PURE__ */ jsxs(Pressable, { onPress: handleLogin, accessibilityRole: "button", accessibilityLabel: "Log in", style: ({
           pressed
         }) => [styles.loggedOutStateButton, pressed && styles.loggedOutStateButtonPressed], children: [
@@ -263,18 +345,29 @@ function CustomDrawer(props) {
         ] })
       ] }) : null
     ] })),
-    showLogout && isAuthenticated ? /* @__PURE__ */ jsx(View, { style: styles.logoutFooter, children: /* @__PURE__ */ jsxs(Pressable, { onPress: handleLogout, disabled: isLoggingOut, accessibilityRole: "button", accessibilityLabel: "Log out", style: ({
-      pressed
-    }) => [styles.logoutButton, pressed && !isLoggingOut && styles.logoutButtonPressed], children: [
-      /* @__PURE__ */ jsx(View, { style: styles.logoutIconCircle, children: isLoggingOut ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: "#b91c1c" }) : /* @__PURE__ */ jsx(Ionicons, { name: "log-out-outline", size: 20, color: "#b91c1c" }) }),
-      /* @__PURE__ */ jsx(Text, { style: styles.logoutLabel, children: isLoggingOut ? "Logging out..." : "Log out" })
-    ] }) }) : showLogout ? /* @__PURE__ */ jsx(View, { style: styles.logoutFooter, children: /* @__PURE__ */ jsx(Text, { style: styles.loggedOutFooterHint, children: "You are currently signed out" }) }) : null
+    /* @__PURE__ */ jsxs(View, { style: [styles.footerStack, {
+      backgroundColor: palette.bg
+    }], children: [
+      /* @__PURE__ */ jsx(DrawerAppearanceRow, { isDark, onChange: setDarkMode, palette }),
+      showLogout && isAuthenticated ? /* @__PURE__ */ jsxs(Pressable, { onPress: handleLogout, disabled: isLoggingOut, accessibilityRole: "button", accessibilityLabel: "Log out", style: ({
+        pressed
+      }) => [styles.logoutButton, {
+        backgroundColor: pressed && !isLoggingOut ? palette.rowHighlight : palette.surface,
+        borderColor: palette.border
+      }], children: [
+        isLoggingOut ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: palette.icon }) : /* @__PURE__ */ jsx(Ionicons, { name: "log-out-outline", size: 22, color: palette.icon }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.logoutLabel, {
+          color: palette.text
+        }], children: isLoggingOut ? "Logging out..." : "Log out" })
+      ] }) : showLogout ? /* @__PURE__ */ jsx(Text, { style: [styles.loggedOutFooterHint, {
+        color: palette.textSecondary
+      }], children: "You are currently signed out" }) : null
+    ] })
   ] }) });
 }
 const styles = StyleSheet.create({
   safeArea: {
-    flex: 1,
-    backgroundColor: PALETTE.bg
+    flex: 1
   },
   drawerColumn: {
     flex: 1
@@ -290,8 +383,7 @@ const styles = StyleSheet.create({
   brandBlock: {
     marginBottom: 16,
     paddingBottom: 14,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: PALETTE.border
+    borderBottomWidth: StyleSheet.hairlineWidth
   },
   brandStrip: {
     flexDirection: "row",
@@ -304,108 +396,63 @@ const styles = StyleSheet.create({
     borderRadius: 10
   },
   brandStripTitle: {
-    color: PALETTE.text,
     fontSize: 22,
     fontWeight: "800",
     letterSpacing: -0.6
   },
   profileCard: {
-    borderRadius: 12,
+    borderRadius: 20,
     overflow: "hidden",
     marginBottom: 20,
-    backgroundColor: PALETTE.surface,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: PALETTE.border
+    borderWidth: StyleSheet.hairlineWidth
   },
   profileCardInner: {
     flexDirection: "row",
-    padding: 16,
-    gap: 14
-  },
-  avatarOuter: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    overflow: "hidden",
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: PALETTE.border,
-    backgroundColor: PALETTE.rowHighlight
-  },
-  avatarImage: {
-    width: "100%",
-    height: "100%"
-  },
-  avatarPlaceholder: {
-    flex: 1,
     alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: PALETTE.rowHighlight
-  },
-  avatarInitials: {
-    fontSize: 20,
-    fontWeight: "700",
-    color: mobileTokens.color.primary,
-    letterSpacing: 0.3
+    paddingVertical: 14,
+    paddingLeft: 14,
+    paddingRight: 12,
+    gap: 12
   },
   profileMeta: {
     flex: 1,
     minWidth: 0,
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: 2
   },
   profileName: {
-    fontSize: 19,
+    fontSize: 16,
     fontWeight: "600",
-    color: PALETTE.text,
-    letterSpacing: -0.3,
-    lineHeight: 24
-  },
-  profileUsername: {
-    marginTop: 4,
-    fontSize: 14,
-    fontWeight: "500",
-    color: PALETTE.textSecondary,
-    letterSpacing: -0.1
+    letterSpacing: -0.2,
+    lineHeight: 20
   },
   profileEmail: {
-    marginTop: 6,
     fontSize: 13,
     fontWeight: "400",
-    color: PALETTE.textSecondary
+    lineHeight: 17
   },
   menuCard: {
     borderRadius: 16,
     overflow: "hidden",
-    backgroundColor: PALETTE.surface,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: PALETTE.border
+    borderWidth: StyleSheet.hairlineWidth
   },
   listRow: {
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 15,
     paddingHorizontal: 16,
-    gap: 14,
-    backgroundColor: PALETTE.surface
-  },
-  listRowFocused: {
-    backgroundColor: PALETTE.rowHighlight
-  },
-  listRowPressed: {
-    backgroundColor: PALETTE.rowHighlight
+    gap: 14
   },
   listLabel: {
     flex: 1,
     fontSize: 16,
-    fontWeight: "400",
-    color: PALETTE.text
+    fontWeight: "400"
   },
   listLabelFocused: {
-    fontWeight: "600",
-    color: mobileTokens.color.primary
+    fontWeight: "600"
   },
   rowDivider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: PALETTE.border,
     marginLeft: 52
   },
   loggedOutStateCard: {
@@ -413,9 +460,7 @@ const styles = StyleSheet.create({
     borderRadius: 14,
     paddingHorizontal: 16,
     paddingVertical: 18,
-    backgroundColor: PALETTE.surface,
     borderWidth: StyleSheet.hairlineWidth,
-    borderColor: PALETTE.border,
     alignItems: "center",
     gap: 10
   },
@@ -432,13 +477,11 @@ const styles = StyleSheet.create({
   loggedOutStateTitle: {
     fontSize: 17,
     fontWeight: "700",
-    color: PALETTE.text,
     letterSpacing: -0.2
   },
   loggedOutStateSubtitle: {
     fontSize: 13,
     lineHeight: 19,
-    color: PALETTE.textSecondary,
     textAlign: "center",
     paddingHorizontal: 4
   },
@@ -463,43 +506,53 @@ const styles = StyleSheet.create({
   navChevron: {
     marginLeft: "auto"
   },
-  logoutFooter: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: PALETTE.border,
-    paddingHorizontal: 18,
-    paddingTop: 10,
-    paddingBottom: 8,
-    backgroundColor: PALETTE.surface
+  appearanceRow: {
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    marginBottom: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    gap: 10
   },
-  logoutButton: {
+  appearanceToggle: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    borderRadius: 14
+    marginLeft: "auto",
+    borderRadius: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    padding: 2,
+    gap: 1
   },
-  logoutIconCircle: {
-    width: 40,
-    height: 40,
-    borderRadius: 12,
-    backgroundColor: "#fef2f2",
+  appearanceToggleBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "transparent"
   },
-  logoutButtonPressed: {
-    opacity: 0.75,
-    backgroundColor: "#fef2f2"
+  footerStack: {
+    paddingHorizontal: 18,
+    paddingTop: 8,
+    paddingBottom: 12
+  },
+  logoutButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    paddingVertical: 15,
+    paddingHorizontal: 16,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth
   },
   logoutLabel: {
     fontSize: 16,
-    fontWeight: "600",
-    color: "#b91c1c"
+    fontWeight: "400"
   },
   loggedOutFooterHint: {
     fontSize: 12,
     textAlign: "center",
-    color: PALETTE.textSecondary,
     paddingVertical: 8
   }
 });export{CustomDrawer as default};//# sourceMappingURL=CustomDrawer.js.map