@oxyhq/services 10.2.0 → 10.2.2

package/lib/module/ui/components/AccountMenu.js

@@ -4,22 +4,42 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Modal, Pressable, Platform, ActivityIndicator } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { toast, useDialogControl, Dialog } from '@oxyhq/bloom';
+import { Divider } from '@oxyhq/bloom/divider';
 import { useTheme } from '@oxyhq/bloom/theme';
 import Avatar from "./Avatar.js";
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { logger as loggerUtil } from '@oxyhq/core';
 import { buildAccountRows } from "./accountMenuRows.js";
+import { useDeviceAccounts } from "../hooks/useDeviceAccounts.js";
+
+/**
+ * Web-only anchor for the popover panel. Each field anchors the panel against
+ * one viewport edge, so the popover can be placed against ANY corner: a
+ * top-right avatar chip opens downward/right-aligned (`{ top, right }`), while a
+ * bottom-left account button opens upward/left-aligned (`{ bottom, left }`).
+ *
+ * Callers MUST supply at most one vertical edge (`top` XOR `bottom`) and at most
+ * one horizontal edge (`left` XOR `right`). The panel has a fixed width and
+ * `maxHeight`, so a single vertical + single horizontal edge fully positions it.
+ * Supplying both opposite edges (e.g. `top` AND `bottom`) would stretch the
+ * panel on RN-Web and is unsupported.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isWeb = Platform.OS === 'web';
 
+/** Fixed popover width on web. Callers that compute an anchor (e.g. inbox's
+ * MailboxDrawer) key their gutter math off this — keep them consistent. */
+const PANEL_WIDTH = 360;
+
 /**
- * Reusable account menu modeled after the Google account chooser. Opens from
- * the avatar entry point (`AccountMenuButton`) or any other trigger.
+ * Unified, canonical account switcher for the Oxy ecosystem. Gmail-style: the
+ * accounts list sits at the top (current account first, with a checkmark), then
+ * "Add another account", "Manage account", and the sign-out actions.
  *
- * Reads everything it needs from `useOxy()` — never receive a session via
- * props. Renders as a popover anchored to the trigger on web, and as a
- * full-width bottom-sheet style modal on native.
+ * Reads everything it needs from `useOxy()` / `useDeviceAccounts()` — never
+ * receives a session via props. Renders as a popover anchored to the trigger on
+ * web, and as a full-width bottom-sheet style modal on native.
  */
 const AccountMenu = ({
   open,
@@ -29,39 +49,55 @@ const AccountMenu = ({
   anchor
 }) => {
   const {
-    user,
-    sessions,
     activeSessionId,
     switchSession,
     logout,
     logoutAll,
-    oxyServices
+    removeSession
   } = useOxy();
   const {
-    t,
-    locale
+    t
   } = useI18n();
   const bloomTheme = useTheme();
+  const colors = bloomTheme.colors;
+
+  // Source EVERY account's real name/email/avatar/color from the unified
+  // device-account hook (shared apex `refresh-all` path on `*.oxy.so`, local
+  // `useOxy()` fallback on cross-domain web / native). This also synthesises a
+  // live-user row when the probe is empty, so the signed-in user is always
+  // represented (no "Not signed in" false negative).
+  const {
+    accounts: deviceAccounts
+  } = useDeviceAccounts();
   const [busySessionId, setBusySessionId] = useState(null);
+  const [removingSessionId, setRemovingSessionId] = useState(null);
   const [signingOut, setSigningOut] = useState(false);
   const [signingOutAll, setSigningOutAll] = useState(false);
   const signOutDialog = useDialogControl();
   const signOutAllDialog = useDialogControl();
   const containerRef = useRef(null);
-  const firstActionRef = useRef(null);
-  const rows = useMemo(() => buildAccountRows({
-    sessions,
-    activeSessionId,
-    user,
-    locale,
-    getAvatarUrl: avatarId => oxyServices.getFileDownloadUrl(avatarId, 'thumb')
-  }), [sessions, activeSessionId, user, locale, oxyServices]);
-  const activeRow = useMemo(() => {
-    return rows.find(r => r.isActive) ?? null;
-  }, [rows]);
-  const inactiveRows = useMemo(() => {
-    return rows.filter(r => !r.isActive);
-  }, [rows]);
+
+  // Current account first, then the rest in their existing order — matching
+  // the Gmail-style chooser the inbox design ports from.
+  const rows = useMemo(() => {
+    const built = buildAccountRows({
+      accounts: deviceAccounts
+    });
+    const current = built.filter(row => row.isActive);
+    const others = built.filter(row => !row.isActive);
+    return [...current, ...others];
+  }, [deviceAccounts]);
+  const isSwitching = busySessionId !== null;
+
+  // Switch to a non-active account. We route ALL rows through
+  // `useOxy().switchSession(sessionId)` — the SDK's canonical switch path. On
+  // WEB it already performs the same silent activation the auth chooser uses:
+  // when the target `ClientSession` carries an `authuser` slot, it rotates that
+  // slot via `oxyServices.refreshTokenViaCookie({ authuser })` and plants the
+  // fresh access token before validating (see `useSessionManagement.switchSession`).
+  // On NATIVE it validates the session id directly. There is no separate
+  // "activate by authuser" SDK entry point, so reusing `switchSession`
+  // (rather than inventing a parallel mechanism) keeps a single source of truth.
   const handleSwitch = useCallback(async sessionId => {
     if (sessionId === activeSessionId || busySessionId) {
       return;
@@ -82,6 +118,29 @@ const AccountMenu = ({
       setBusySessionId(null);
     }
   }, [activeSessionId, busySessionId, switchSession, t, onClose]);
+
+  // Sign out a SPECIFIC inactive account from its per-row icon. `removeSession`
+  // is the SDK's canonical per-session sign-out: it targets the given session
+  // id (cookie-cleared logout via `authuser` slot on web, bearer logout
+  // otherwise) and removes ONLY that account without switching/clearing the
+  // active session. The menu stays open so the user can keep managing accounts.
+  const handleRemove = useCallback(async sessionId => {
+    if (sessionId === activeSessionId || removingSessionId) {
+      return;
+    }
+    setRemovingSessionId(sessionId);
+    try {
+      await removeSession(sessionId);
+      toast.success(t('common.actions.signedOut') || 'Signed out');
+    } catch (error) {
+      loggerUtil.warn('Remove account failed', {
+        component: 'AccountMenu'
+      }, error);
+      toast.error(t('common.errors.signOutFailed') || 'Failed to sign out');
+    } finally {
+      setRemovingSessionId(null);
+    }
+  }, [activeSessionId, removingSessionId, removeSession, t]);
   const performSignOut = useCallback(async () => {
     if (signingOut) {
       return;
@@ -137,73 +196,52 @@ const AccountMenu = ({
     return null;
   }
   const overlayStyles = isWeb ? styles.webOverlay : styles.nativeOverlay;
-  const panelStyles = isWeb ? [styles.panelBase, styles.panelWeb, anchor ? {
-    top: anchor.top,
-    right: anchor.right
+
+  // Apply ONLY the edges the anchor supplies (so the panel never sets
+  // conflicting opposite edges). When no anchor is provided, fall back to the
+  // historical top-right placement used by `AccountMenuButton`.
+  const anchorStyle = anchor ? {
+    ...(anchor.top !== undefined ? {
+      top: anchor.top
+    } : null),
+    ...(anchor.bottom !== undefined ? {
+      bottom: anchor.bottom
+    } : null),
+    ...(anchor.left !== undefined ? {
+      left: anchor.left
+    } : null),
+    ...(anchor.right !== undefined ? {
+      right: anchor.right
+    } : null)
   } : {
     top: 64,
     right: 16
-  }, {
-    backgroundColor: bloomTheme.colors.background,
-    borderColor: bloomTheme.colors.border
+  };
+  const panelStyles = isWeb ? [styles.panelBase, styles.panelWeb, anchorStyle, {
+    backgroundColor: colors.background,
+    borderColor: colors.border
   }] : [styles.panelBase, styles.panelNative, {
-    backgroundColor: bloomTheme.colors.background
+    backgroundColor: colors.background
   }];
-  const content = /*#__PURE__*/_jsxs(View, {
-    ref: containerRef,
+  const actionDisabled = isSwitching || signingOut || signingOutAll;
+  const content = /*#__PURE__*/_jsx(Pressable, {
+    ref: containerRef
+    // Swallow taps inside the panel so they never reach the overlay's
+    // outside-tap-to-close handler. (On web the panel is a direct,
+    // absolutely-positioned child of the overlay so the anchor resolves
+    // against the viewport.)
+    ,
+    onPress: () => undefined,
     style: panelStyles,
     accessibilityRole: "menu",
     accessibilityLabel: t('accountMenu.label') || 'Account menu',
-    children: [activeRow ? /*#__PURE__*/_jsxs(View, {
-      style: styles.header,
-      children: [/*#__PURE__*/_jsx(Avatar, {
-        uri: activeRow.avatarUri,
-        name: activeRow.displayName,
-        size: 64
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.headerName, {
-          color: bloomTheme.colors.text
-        }],
-        numberOfLines: 1,
-        children: activeRow.displayName
-      }), activeRow.secondary ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.headerSecondary, {
-          color: bloomTheme.colors.textSecondary
-        }],
-        numberOfLines: 1,
-        children: activeRow.secondary
-      }) : null]
-    }) : /*#__PURE__*/_jsx(View, {
-      style: styles.header,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.headerName, {
-          color: bloomTheme.colors.text
-        }],
-        children: t('common.status.notSignedIn') || 'Not signed in'
-      })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      ref: firstActionRef,
-      accessibilityRole: "menuitem",
-      accessibilityLabel: t('accountMenu.manage') || 'Manage your Oxy Account',
-      style: [styles.primaryButton, {
-        borderColor: bloomTheme.colors.border
-      }],
-      onPress: () => {
-        onClose();
-        onNavigateManage();
-      },
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.primaryButtonText, {
-          color: bloomTheme.colors.primary
-        }],
-        children: t('accountMenu.manage') || 'Manage your Oxy Account'
-      })
-    }), rows.length > 0 ? /*#__PURE__*/_jsx(ScrollView, {
-      style: styles.list,
-      contentContainerStyle: styles.listContent,
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scroll,
+      contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,
-      children: rows.map(row => {
+      children: [rows.map(row => {
         const isBusy = busySessionId === row.sessionId;
+        const isRemoving = removingSessionId === row.sessionId;
         return /*#__PURE__*/_jsxs(TouchableOpacity, {
           accessibilityRole: "menuitem",
           accessibilityLabel: row.displayName,
@@ -211,101 +249,161 @@ const AccountMenu = ({
             selected: row.isActive
           },
           onPress: () => handleSwitch(row.sessionId),
-          disabled: row.isActive || isBusy,
-          style: [styles.row, row.isActive && {
-            backgroundColor: bloomTheme.colors.primarySubtle
-          }],
+          disabled: row.isActive || isBusy || isSwitching,
+          activeOpacity: 0.6,
+          style: [styles.accountRow, row.isActive && {
+            backgroundColor: colors.primarySubtle
+          }, isSwitching && !row.isActive && styles.rowDisabled],
           children: [/*#__PURE__*/_jsx(Avatar, {
             uri: row.avatarUri,
             name: row.displayName,
-            size: 36
+            size: row.isActive ? 40 : 32
           }), /*#__PURE__*/_jsxs(View, {
-            style: styles.rowInfo,
+            style: styles.accountInfo,
             children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.rowName, {
-                color: bloomTheme.colors.text
-              }],
+              style: [styles.accountName, {
+                color: colors.text
+              }, row.isActive && styles.accountNameActive],
               numberOfLines: 1,
               children: row.displayName
             }), row.secondary ? /*#__PURE__*/_jsx(Text, {
-              style: [styles.rowSecondary, {
-                color: bloomTheme.colors.textSecondary
+              style: [styles.accountEmail, {
+                color: colors.textSecondary
               }],
               numberOfLines: 1,
               children: row.secondary
             }) : null]
           }), isBusy ? /*#__PURE__*/_jsx(ActivityIndicator, {
-            color: bloomTheme.colors.primary,
+            color: colors.primary,
             size: "small"
           }) : row.isActive ? /*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark-circle",
+            name: "checkmark",
             size: 20,
-            color: bloomTheme.colors.primary
-          }) : null]
+            color: colors.primary
+          }) : isRemoving ? /*#__PURE__*/_jsx(ActivityIndicator, {
+            color: colors.textSecondary,
+            size: "small"
+          }) : /*#__PURE__*/_jsx(TouchableOpacity, {
+            accessibilityRole: "button",
+            accessibilityLabel: t('accountMenu.signOutAccount', {
+              name: row.displayName
+            }) || `Sign out ${row.displayName}`,
+            onPress: () => handleRemove(row.sessionId),
+            disabled: isSwitching || removingSessionId !== null,
+            activeOpacity: 0.6,
+            hitSlop: {
+              top: 8,
+              bottom: 8,
+              left: 8,
+              right: 8
+            },
+            style: styles.rowSignOutButton,
+            children: /*#__PURE__*/_jsx(Ionicons, {
+              name: "log-out-outline",
+              size: 18,
+              color: colors.textSecondary
+            })
+          })]
         }, `account-${row.sessionId}`);
-      })
-    }) : null, /*#__PURE__*/_jsxs(TouchableOpacity, {
-      accessibilityRole: "menuitem",
-      accessibilityLabel: t('accountMenu.addAnother') || 'Add another account',
-      onPress: () => {
-        onClose();
-        onAddAccount();
-      },
-      style: [styles.row, styles.actionRow],
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.actionIcon, {
-          backgroundColor: bloomTheme.colors.primarySubtle
-        }],
-        children: /*#__PURE__*/_jsx(Ionicons, {
+      }), isSwitching ? /*#__PURE__*/_jsxs(View, {
+        style: styles.switchingRow,
+        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+          color: colors.textSecondary,
+          size: "small"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.switchingText, {
+            color: colors.textSecondary
+          }],
+          children: t('accountMenu.switching') || 'Switching account…'
+        })]
+      }) : null, /*#__PURE__*/_jsx(Divider, {
+        color: colors.border,
+        spacing: 4
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        accessibilityRole: "menuitem",
+        accessibilityLabel: t('accountMenu.addAnother') || 'Add another account',
+        onPress: () => {
+          onClose();
+          onAddAccount();
+        },
+        disabled: actionDisabled,
+        activeOpacity: 0.6,
+        style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
           name: "person-add-outline",
-          size: 18,
-          color: bloomTheme.colors.primary
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.rowInfo,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.rowName, {
-            color: bloomTheme.colors.text
+          size: 20,
+          color: colors.icon
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionText, {
+            color: colors.text
           }],
           children: t('accountMenu.addAnother') || 'Add another account'
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: [styles.footer, {
-        borderTopColor: bloomTheme.colors.border
-      }],
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        })]
+      }), /*#__PURE__*/_jsx(Divider, {
+        color: colors.border,
+        spacing: 4
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        accessibilityRole: "menuitem",
+        accessibilityLabel: t('accountMenu.manage') || 'Manage your Oxy Account',
+        onPress: () => {
+          onClose();
+          onNavigateManage();
+        },
+        disabled: actionDisabled,
+        activeOpacity: 0.6,
+        style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: "settings-outline",
+          size: 18,
+          color: colors.icon
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionText, {
+            color: colors.text
+          }],
+          children: t('accountMenu.manage') || 'Manage your Oxy Account'
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
         accessibilityRole: "menuitem",
         accessibilityLabel: t('common.actions.signOut') || 'Sign out',
         onPress: () => signOutDialog.open(),
-        disabled: signingOut || signingOutAll,
-        style: styles.footerButton,
-        children: signingOut ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          color: bloomTheme.colors.error,
+        disabled: actionDisabled,
+        activeOpacity: 0.6,
+        style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+        children: [signingOut ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: colors.error,
           size: "small"
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: [styles.footerButtonText, {
-            color: bloomTheme.colors.error
+        }) : /*#__PURE__*/_jsx(Ionicons, {
+          name: "log-out-outline",
+          size: 18,
+          color: colors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionText, {
+            color: colors.error
           }],
           children: t('common.actions.signOut') || 'Sign out'
-        })
-      }), rows.length > 1 ? /*#__PURE__*/_jsx(TouchableOpacity, {
+        })]
+      }), rows.length > 1 ? /*#__PURE__*/_jsxs(TouchableOpacity, {
         accessibilityRole: "menuitem",
         accessibilityLabel: t('accountMenu.signOutAll') || 'Sign out of all accounts',
         onPress: () => signOutAllDialog.open(),
-        disabled: signingOut || signingOutAll,
-        style: styles.footerButton,
-        children: signingOutAll ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          color: bloomTheme.colors.error,
+        disabled: actionDisabled,
+        activeOpacity: 0.6,
+        style: [styles.actionRow, actionDisabled && styles.rowDisabled],
+        children: [signingOutAll ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: colors.error,
           size: "small"
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: [styles.footerButtonText, {
-            color: bloomTheme.colors.error
+        }) : /*#__PURE__*/_jsx(Ionicons, {
+          name: "log-out-outline",
+          size: 18,
+          color: colors.error
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.actionText, {
+            color: colors.error
           }],
           children: t('accountMenu.signOutAll') || 'Sign out of all accounts'
-        })
+        })]
       }) : null]
-    })]
+    })
   });
   return /*#__PURE__*/_jsxs(Modal, {
     visible: open,
@@ -317,11 +415,7 @@ const AccountMenu = ({
       accessibilityLabel: t('common.actions.close') || 'Close',
       onPress: onClose,
       style: overlayStyles,
-      children: /*#__PURE__*/_jsx(Pressable, {
-        onPress: () => undefined,
-        style: styles.panelTouchable,
-        children: content
-      })
+      children: content
     }), /*#__PURE__*/_jsx(Dialog, {
       control: signOutDialog,
       title: t('common.actions.signOut') || 'Sign out',
@@ -352,19 +446,20 @@ const AccountMenu = ({
 const styles = StyleSheet.create({
   webOverlay: {
     flex: 1,
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    // Explicit positioning context: the absolutely-positioned panel is a
+    // direct child and resolves its anchor edges (top/bottom/left/right)
+    // against this full-viewport overlay — matching the trigger-rect math
+    // callers compute from `window.innerWidth` / `window.innerHeight`.
+    position: 'relative'
   },
   nativeOverlay: {
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.32)',
     justifyContent: 'flex-end'
   },
-  panelTouchable: {
-    // Pressable wrapper that owns no styling — just absorbs taps.
-  },
   panelBase: {
-    borderRadius: 24,
-    paddingVertical: 12,
+    borderRadius: 12,
     shadowColor: '#000',
     shadowOpacity: 0.18,
     shadowRadius: 24,
@@ -377,103 +472,79 @@ const styles = StyleSheet.create({
   },
   panelWeb: {
     position: 'absolute',
-    width: 360,
+    width: PANEL_WIDTH,
     maxHeight: '85%',
     borderWidth: 1
   },
   panelNative: {
     marginHorizontal: 0,
-    borderTopLeftRadius: 28,
-    borderTopRightRadius: 28,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
-    paddingTop: 20,
-    paddingBottom: 24,
+    paddingBottom: 12,
     maxHeight: '85%'
   },
-  header: {
+  scroll: {
+    flexGrow: 0
+  },
+  scrollContent: {
+    paddingVertical: 4
+  },
+  accountRow: {
+    flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 16
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 10
   },
-  headerName: {
-    fontSize: 18,
-    fontWeight: '600',
-    marginTop: 12,
-    textAlign: 'center'
+  rowDisabled: {
+    opacity: 0.4
   },
-  headerSecondary: {
-    fontSize: 14,
-    marginTop: 4,
-    textAlign: 'center'
+  accountInfo: {
+    flex: 1,
+    minWidth: 0
   },
-  primaryButton: {
-    marginHorizontal: 20,
-    marginBottom: 12,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 999,
-    borderWidth: 1,
-    alignItems: 'center'
+  accountName: {
+    fontSize: 13,
+    fontWeight: '500'
   },
-  primaryButtonText: {
-    fontSize: 14,
+  accountNameActive: {
     fontWeight: '600'
   },
-  list: {
-    maxHeight: 280
+  accountEmail: {
+    fontSize: 11,
+    marginTop: 1
   },
-  listContent: {
-    paddingHorizontal: 12,
-    paddingBottom: 4
-  },
-  row: {
-    flexDirection: 'row',
+  rowSignOutButton: {
+    width: 28,
+    height: 28,
     alignItems: 'center',
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    borderRadius: 16,
-    marginVertical: 2
-  },
-  actionRow: {
-    marginHorizontal: 12,
-    marginTop: 4
+    justifyContent: 'center',
+    borderRadius: 14,
+    opacity: 0.6
   },
-  actionIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 18,
+  switchingRow: {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    paddingVertical: 8,
+    gap: 8
   },
-  rowInfo: {
-    flex: 1,
-    marginLeft: 12
-  },
-  rowName: {
-    fontSize: 15,
+  switchingText: {
+    fontSize: 12,
     fontWeight: '500'
   },
-  rowSecondary: {
-    fontSize: 13,
-    marginTop: 2
-  },
-  footer: {
-    marginTop: 12,
-    paddingTop: 8,
-    paddingHorizontal: 12,
-    borderTopWidth: StyleSheet.hairlineWidth,
+  actionRow: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-around'
-  },
-  footerButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 12
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    gap: 10
   },
-  footerButtonText: {
-    fontSize: 14,
-    fontWeight: '600'
+  actionText: {
+    fontSize: 13,
+    fontWeight: '500'
   }
 });
 export default AccountMenu;