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,7 @@ 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 +133,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,6 +168,19 @@ 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" />
 

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
@@ -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">