Even more visual changes maybe

.changeset/fix_more_visual_thingies.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix even more visual stuffs.

src/app/components/message/modals/Options.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const UserQuickMenuButton = style({
+  selectors: {
+    '&:not(:hover)': {
+      background: 'transparent',
+    },
+  },
+});

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

@@ -50,6 +50,7 @@ import {
   useIsBookmarked,
 } from '$features/bookmarks';
 import { CopyIcon } from '@phosphor-icons/react';
+import * as OptionsCss from './Options.css';
 
 function WrappedMessage({
   isModal,
@@ -368,6 +369,7 @@ export function OptionQuickMenu({
               size="300"
               radii="300"
               aria-pressed={!!emojiBoardAnchor}
+              className={OptionsCss.UserQuickMenuButton}
             >
               {menuIcon(Smiley)}
             </IconButton>
@@ -382,6 +384,7 @@ export function OptionQuickMenu({
           variant="SurfaceVariant"
           size="300"
           radii="300"
+          className={OptionsCss.UserQuickMenuButton}
         >
           {menuIcon(ArrowBendUpLeftIcon)}
         </IconButton>
@@ -395,6 +398,7 @@ export function OptionQuickMenu({
             variant="SurfaceVariant"
             size="300"
             radii="300"
+            className={OptionsCss.UserQuickMenuButton}
           >
             {menuIcon(ChatCircleDots)}
           </IconButton>
@@ -408,6 +412,7 @@ export function OptionQuickMenu({
             variant="SurfaceVariant"
             size="300"
             radii="300"
+            className={OptionsCss.UserQuickMenuButton}
           >
             {menuIcon(PencilSimple)}
           </IconButton>
@@ -442,6 +447,7 @@ export function OptionQuickMenu({
             radii="300"
             onClick={handleOpenMenu}
             aria-pressed={!!menuAnchor}
+            className={OptionsCss.UserQuickMenuButton}
           >
             {menuIcon(DotsThreeOutlineVerticalIcon, {
               weight: menuAnchor ? 'fill' : 'regular',

src/app/features/navigate/NavigateModal.tsx

@@ -493,8 +493,6 @@ export function RoomSearchModal({ requestClose, pickRoom, isMobile }: RoomSearch
             <>
               Type <b>#</b> for rooms, <b>@</b> for DMs and <b>*</b> for spaces. Hotkey:{' '}
               <b>{isMacOS() ? KeySymbol.Command : 'Ctrl'} + k</b>
-              {' / '}
-              <b>{isMacOS() ? KeySymbol.Command : 'Ctrl'} + f</b>
             </>
           )}
         </Text>

src/app/pages/client/home/Home.tsx

@@ -539,6 +539,7 @@ export function Home() {
                   })}
                 </div>
               </NavCategory>
+              {!isMobile && <div style={{ height: toRem(40) }} />}
             </Box>
           </PageNavContent>
         )}

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

@@ -695,12 +695,7 @@ export function UserMenuTab({ isBottom, isMobile }: { isBottom?: boolean; isMobi
         }
       >
         <AvatarPresence badge={<PresenceBadge presence={currentPresence} size="200" />}>
-          <SidebarAvatar
-            size={isMobile ? '300' : '400'}
-            as="button"
-            onClick={handleToggle}
-            outlined={!isMobile}
-          >
+          <SidebarAvatar size={isMobile ? '300' : '400'} as="button" onClick={handleToggle}>
             <UserAvatar
               userId={userId}
               src={avatarUrl}