fix navigation and some visual issues

Co-authored-by: niki <295591807+nikiwastaken@users.noreply.github.com>
Signed-off-by: Shea <nu@she-a.eu>

Author: nushea

src/app/components/message/modals/Options.tsx

@@ -599,7 +599,7 @@ export function OptionMenu({
                   onReactionToggle(mEvent.getId() ?? '', key, shortcode);
                   onTotalClose();
                 }}
-                count={isModal ? 6 : 4}
+                count={isModal ? 8 : 4}
               />
             )}
             <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
@@ -615,6 +615,23 @@ export function OptionMenu({
                   </Text>
                 </MenuItem>
               )}
+
+              {canEditEvent(mx, mEvent) && onEditId && isModal && (
+                <MenuItem
+                  size="300"
+                  after={menuIcon(PencilSimple)}
+                  radii="300"
+                  data-event-id={mEvent.getId()}
+                  onClick={() => {
+                    onEditId(mEvent.getId());
+                    onTotalClose();
+                  }}
+                >
+                  <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
+                    Edit Message
+                  </Text>
+                </MenuItem>
+              )}
               {/* Only show "Add to User Sticker Pack" if the sticker isn't already in the default pack and isn't encrypted */}
               {isStickerMessage &&
                 mEvent.getContent().url &&
@@ -654,35 +671,35 @@ export function OptionMenu({
                   Reply
                 </Text>
               </MenuItem>
-              {canEditEvent(mx, mEvent) && onEditId && (
+              {!isThreadedMessage && (
                 <MenuItem
                   size="300"
-                  after={menuIcon(PencilSimple)}
+                  after={menuIcon(ChatCircleDots)}
                   radii="300"
                   data-event-id={mEvent.getId()}
-                  onClick={() => {
-                    onEditId(mEvent.getId());
+                  onClick={(evt) => {
+                    onReplyClick(evt, true);
                     onTotalClose();
                   }}
                 >
                   <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
-                    Edit Message
+                    Reply in Thread
                   </Text>
                 </MenuItem>
               )}
-              {!isThreadedMessage && (
+              {canEditEvent(mx, mEvent) && onEditId && !isModal && (
                 <MenuItem
                   size="300"
-                  after={menuIcon(ChatCircleDots)}
+                  after={menuIcon(PencilSimple)}
                   radii="300"
                   data-event-id={mEvent.getId()}
-                  onClick={(evt) => {
-                    onReplyClick(evt, true);
+                  onClick={() => {
+                    onEditId(mEvent.getId());
                     onTotalClose();
                   }}
                 >
                   <Text className={css.MessageMenuItemText} as="span" size="T300" truncate>
-                    Reply in Thread
+                    Edit Message
                   </Text>
                 </MenuItem>
               )}

src/app/features/navigate/NavigateModal.tsx

@@ -2,6 +2,7 @@ import FocusTrap from 'focus-trap-react';
 import {
   Avatar,
   Box,
+  color,
   config,
   IconButton,
   Input,
@@ -133,9 +134,10 @@ export type RoomSearchPickRoomConfig = {
 export type RoomSearchModalProps = {
   requestClose?: () => void;
   pickRoom?: RoomSearchPickRoomConfig;
+  isMobile?: boolean;
 };
 
-export function RoomSearchModal({ requestClose, pickRoom }: RoomSearchModalProps) {
+export function RoomSearchModal({ requestClose, pickRoom, isMobile }: RoomSearchModalProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -307,7 +309,10 @@ export function RoomSearchModal({ requestClose, pickRoom }: RoomSearchModalProps
       <Box
         shrink="No"
         grow="Yes"
-        style={{ padding: config.space.S400, paddingBottom: 0, width: '100%' }}
+        style={{
+          padding: `${config.space.S400} ${isMobile ? config.space.S0 : config.space.S400} 0`,
+          width: '100%',
+        }}
         direction="Column"
       >
         <Input
@@ -396,7 +401,7 @@ export function RoomSearchModal({ requestClose, pickRoom }: RoomSearchModalProps
                     data-space={room.isSpaceRoom()}
                     onClick={handleRoomClick}
                     disabled={pickRoom?.busy}
-                    variant={listFocus.index === index ? 'Primary' : 'Surface'}
+                    variant={listFocus.index === index ? 'Primary' : 'Background'}
                     aria-pressed={listFocus.index === index}
                     radii="400"
                     style={{ width: '100%' }}
@@ -534,7 +539,14 @@ export function SearchWrapper({ requestClose, pickRoom }: RoomSearchModalProps)
             },
           }}
         >
-          <Modal size="400" style={{ maxHeight: toRem(400), borderRadius: config.radii.R500 }}>
+          <Modal
+            size="400"
+            style={{
+              maxHeight: toRem(400),
+              borderRadius: config.radii.R500,
+              background: color.Background.Container,
+            }}
+          >
             <RoomSearchModal requestClose={requestClose} pickRoom={pickRoom} />
           </Modal>
         </FocusTrap>

src/app/pages/client/inbox/Inbox.tsx

@@ -91,7 +91,12 @@ export function Inbox() {
           <Box grow="Yes" gap="300" justifyContent="Center">
             {!hideText ? (
               <Box grow="Yes">
-                <Text size="H4" truncate>
+                <Text
+                  size="H4"
+                  truncate
+                  align={isMobile ? 'Center' : undefined}
+                  style={{ width: '100%' }}
+                >
                   Inbox
                 </Text>
               </Box>

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

@@ -1,21 +1,13 @@
 import { Box, Scroll, toRem, Text, color, config } from 'folds';
 import { SquaresFour, sizedIcon } from '$components/icons/phosphor';
-import {
-  Page,
-  PageContent,
-  PageContentCenter,
-  PageHeroSection,
-  PageNav,
-  PageNavHeader,
-} from '$components/page';
+import { Page, PageContent, PageContentCenter, PageNav, PageNavHeader } from '$components/page';
 import { useEffect, useState } from 'react';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
 import { SidebarResizer } from '../sidebar/SidebarResizer';
 import { useSetAtom } from 'jotai';
 import { isResizingSidebarAtom } from '$state/isResizingSidebar';
-import { ListMagnifyingGlassIcon } from '@phosphor-icons/react';
 import { RoomSearchModal } from '$features/navigate';
 import { UserQuickTools } from '../sidebar/UserQuickTools';
 
@@ -41,24 +33,26 @@ export function Navigate() {
             position: 'relative',
             width: toRem(curWidth),
             borderRight: 'solid',
-            borderColor: color.SurfaceVariant.ContainerLine,
+            borderColor: color.Background.ContainerLine,
             borderWidth: `0 ${config.borderWidth.B300} 0 0`,
+            background: color.Background.Container,
           }}
         >
           <PageNav>
             <PageNavHeader size="600">
               <Box grow="Yes" gap="300" justifyContent="Center">
                 {!hideText ? (
                   <Box grow="Yes">
-                    <Text size="H4" truncate align="Center">
-                      Navigate
+                    <Text size="H4" truncate>
+                      Inbox
                     </Text>
                   </Box>
                 ) : (
                   sizedIcon(SquaresFour, '200', { filled: true })
                 )}
               </Box>
             </PageNavHeader>
+
             <SidebarResizer
               setCurWidth={setCurWidth}
               sidebarWidth={roomSidebarWidth}
@@ -74,17 +68,26 @@ export function Navigate() {
         </Box>
       )}
       <Page>
-        <Box grow="Yes">
+        <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>
+          </PageNavHeader>
           <Scroll hideTrack visibility="Hover">
             <PageContent style={{ height: '100%', paddingBottom: '0' }}>
               <PageContentCenter style={{ height: '100%' }}>
-                <PageHeroSection style={{ height: '100%', paddingBottom: '0' }}>
-                  <Box direction="Column" gap="100" alignItems="Center" style={{ height: '100%' }}>
-                    {sizedIcon(ListMagnifyingGlassIcon, '600')}
-                    <Text size="H1"> Navigate </Text>
-                    <RoomSearchModal />
-                  </Box>
-                </PageHeroSection>
+                <Box direction="Column" gap="100" alignItems="Center" style={{ height: '100%' }}>
+                  <RoomSearchModal isMobile />
+                </Box>
               </PageContentCenter>
             </PageContent>
           </Scroll>