small changes

Signed-off-by: Shea <nu@she-a.eu>

Author: nushea

src/app/pages/client/navigate/Navigate.tsx

@@ -71,15 +71,11 @@ export function Navigate() {
         <Box grow="Yes" direction="Column" style={{ background: color.Background.Container }}>
           <PageNavHeader size="600">
             <Box grow="Yes" gap="300" justifyContent="Center">
-              {!hideText ? (
-                <Box grow="Yes">
-                  <Text size="H4" align="Center" truncate style={{ width: '100%' }}>
-                    Navigate
-                  </Text>
-                </Box>
-              ) : (
-                sizedIcon(SquaresFour, '200', { filled: true })
-              )}
+              <Box grow="Yes">
+                <Text size="H4" align="Center" truncate style={{ width: '100%' }}>
+                  Navigate
+                </Text>
+              </Box>
             </Box>
           </PageNavHeader>
           <Scroll hideTrack visibility="Hover">

src/app/pages/client/profile/Profile.tsx

@@ -34,7 +34,12 @@ import { useUserProfile } from '$hooks/useUserProfile';
 import type { SettingsMenuItem } from '$features/settings';
 import { settingsMenuIcons, settingsSections, useOpenSettings } from '$features/settings';
 import { UserQuickTools } from '../sidebar/UserQuickTools';
-import { CaretDownIcon, CaretRightIcon, SignOutIcon } from '@phosphor-icons/react';
+import {
+  CaretDownIcon,
+  CaretRightIcon,
+  PencilSimpleIcon,
+  SignOutIcon,
+} from '@phosphor-icons/react';
 import { UseStateProvider } from '$components/UseStateProvider';
 import { FocusTrap } from 'focus-trap-react';
 import { LogoutDialog } from '$components/LogoutDialog';
@@ -133,6 +138,15 @@ export function ProfileMobile() {
         justifyContent="SpaceBetween"
         style={{ width: '100%', minWidth: '100%' }}
       >
+        <PageNavHeader size="600">
+          <Box grow="Yes" gap="300" justifyContent="Center">
+            <Box grow="Yes">
+              <Text size="H4" align="Center" truncate style={{ width: '100%' }}>
+                Account
+              </Text>
+            </Box>
+          </Box>
+        </PageNavHeader>
         <Menu
           style={{
             minWidth: '100%',
@@ -159,10 +173,23 @@ export function ProfileMobile() {
 
           <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
             <UnverifiedMenuOption />
+            <MenuItem
+              size="300"
+              radii="300"
+              before={menuIcon(PencilSimpleIcon)}
+              style={{
+                background: isSettingsOpen ? color.Surface.Container : color.Background.Container,
+              }}
+              onClick={() => openSettings('account')}
+            >
+              <Text style={{ flexGrow: 1 }} size="T300">
+                Edit profile
+              </Text>
+            </MenuItem>
           </Box>
           <Line variant="Surface" size="300" />
 
-          <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          <Box direction="Column" style={{ padding: config.space.S100 }}>
             <PresenceMenuOption isMobile />
           </Box>
           <AccountMenuOption isMobile />
@@ -209,15 +236,16 @@ export function ProfileMobile() {
 
             <UseStateProvider initial={false}>
               {(logout, setLogout) => (
-                <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                <>
+                  <Line variant="Surface" size="300" />
                   <MenuItem
                     size="300"
                     variant="Background"
                     style={{ color: color.Critical.OnContainer }}
                     before={menuIcon(SignOutIcon)}
                     onClick={() => setLogout(true)}
                   >
-                    <Text size="B400">Logout</Text>
+                    <Text size="T300">Logout</Text>
                   </MenuItem>
                   {logout && (
                     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -234,9 +262,10 @@ export function ProfileMobile() {
                       </OverlayCenter>
                     </Overlay>
                   )}
-                </Box>
+                </>
               )}
             </UseStateProvider>
+            <div style={{ height: toRem(60) }} />
           </Box>
         </Menu>
       </Box>

src/app/pages/client/sidebar/UserMenuTab.tsx

@@ -8,8 +8,6 @@ import {
   Chip,
   Dialog,
   Header,
-  Icon,
-  Icons,
   Line,
   Menu,
   MenuItem,
@@ -38,7 +36,7 @@ import { createLogger } from '$utils/debug';
 import type { Session } from '$state/sessions';
 import { activeSessionIdAtom, backgroundUnreadCountsAtom, sessionsAtom } from '$state/sessions';
 import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge';
-import { Check, chipIcon, Plus } from '$components/icons/phosphor';
+import { Check, chipIcon, menuIcon, Plus } from '$components/icons/phosphor';
 import { useSessionProfiles } from '$hooks/useSessionProfiles';
 import { useClientConfig } from '$hooks/useClientConfig';
 import { getHomePath, getLoginPath, getProfilePath, withSearchParam } from '$pages/pathUtils';
@@ -56,7 +54,14 @@ import {
   useUnverifiedDeviceCount,
   VerificationStatus,
 } from '$hooks/useDeviceVerificationStatus';
-import { ShieldWarningIcon } from '@phosphor-icons/react';
+import {
+  CaretDownIcon,
+  CaretRightIcon,
+  GearSixIcon,
+  PencilSimpleIcon,
+  ShieldWarningIcon,
+  UserIcon,
+} from '@phosphor-icons/react';
 import * as css from './UserMenuTab.css';
 
 const log = createLogger('AccountSwitcherTab');
@@ -262,10 +267,8 @@ export function AccountMenuOption({ isMobile, isRight }: { isMobile: boolean; is
         <MenuItem
           size="300"
           radii="300"
-          before={<Icon size="100" src={Icons.User} />}
-          after={
-            <Icon size="100" src={isOpen && isMobile ? Icons.ChevronBottom : Icons.ChevronRight} />
-          }
+          before={menuIcon(UserIcon)}
+          after={isOpen && isMobile ? menuIcon(CaretDownIcon) : menuIcon(CaretRightIcon)}
           style={{
             position: 'relative',
             background: isMobile
@@ -465,7 +468,7 @@ export function PresenceMenuOption({
               display: 'flex',
               justifyContent: 'center',
               alignContent: 'center',
-              width: 18,
+              width: toRem(20),
             }}
           >
             {savingStatus ? (
@@ -479,9 +482,7 @@ export function PresenceMenuOption({
             )}
           </div>
         }
-        after={
-          <Icon size="100" src={isOpen && isMobile ? Icons.ChevronBottom : Icons.ChevronRight} />
-        }
+        after={isOpen && isMobile ? menuIcon(CaretDownIcon) : menuIcon(CaretRightIcon)}
         style={{
           position: 'relative',
           background: isMobile
@@ -766,7 +767,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
                     onClick={() => openSettings('account')}
                     size="300"
                     radii="300"
-                    before={<Icon size="100" src={Icons.Pencil} />}
+                    before={menuIcon(PencilSimpleIcon)}
                   >
                     <Text style={{ flexGrow: 1 }} size="T300">
                       Edit Profile
@@ -790,7 +791,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
                       <MenuItem
                         size="300"
                         radii="300"
-                        before={<Icon size="100" src={Icons.Setting} />}
+                        before={menuIcon(GearSixIcon)}
                         onClick={() => openSettings()}
                       >
                         <Text style={{ flexGrow: 1 }} size="T300">