refactor: unify menu bar style

Author: wj-xiao

browser/src/components/menu/fullscreen/index.tsx

@@ -35,7 +35,7 @@ export const Fullscreen = () => {
 
   return (
     <div
-      className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70"
+      className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white"
       onClick={handleFullscreen}
     >
       {isFullscreen ? <MinimizeIcon size={18} /> : <MaximizeIcon size={18} />}

browser/src/components/menu/index.tsx

@@ -10,10 +10,10 @@ import * as storage from '@/libs/storage';
 import { Fullscreen } from './fullscreen';
 import { Keyboard } from './keyboard';
 import { Mouse } from './mouse';
+import { Recorder } from './recorder';
 import { SerialPort } from './serial-port';
 import { Settings } from './settings';
 import { Video } from './video';
-import { Recorder } from './recorder';
 
 export const Menu = () => {
   const serialState = useAtomValue(serialStateAtom);
@@ -63,7 +63,7 @@ export const Menu = () => {
           <Settings />
           <Fullscreen />
           <div
-            className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70"
+            className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white"
             onClick={toggleMenu}
           >
             <XIcon size={18} />

browser/src/components/menu/keyboard/index.tsx

@@ -26,7 +26,7 @@ export const Keyboard = () => {
       open={isPopoverOpen}
       onOpenChange={setIsPopoverOpen}
     >
-      <div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70">
+      <div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white">
         <KeyboardIcon size={18} />
       </div>
     </Popover>

browser/src/components/menu/keyboard/paste.tsx

@@ -50,7 +50,7 @@ export const Paste = () => {
       className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
       onClick={paste}
     >
-      <ClipboardIcon size={18} />
+      <ClipboardIcon size={16} />
       <span>{t('keyboard.paste')}</span>
     </div>
   );

browser/src/components/menu/keyboard/shortcuts/index.tsx

@@ -86,9 +86,7 @@ export const Shortcuts = () => {
       arrow={false}
     >
       <div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
-        <div className="flex size-[18px] items-center justify-center">
-          <CommandIcon size={16} />
-        </div>
+        <CommandIcon size={16} />
         <span>{t('keyboard.shortcut.title')}</span>
       </div>
     </Popover>

browser/src/components/menu/keyboard/virtual-keyboard.tsx

@@ -17,7 +17,7 @@ export const VirtualKeyboard = () => {
       className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50"
       onClick={toggleKeyboard}
     >
-      <KeyboardIcon size={18} />
+      <KeyboardIcon size={16} />
       <span>{t('keyboard.virtualKeyboard')}</span>
     </div>
   );

browser/src/components/menu/mouse/direction.tsx

@@ -45,7 +45,7 @@ export const Direction = (): ReactElement => {
   return (
     <Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
       <div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
-        <ArrowDownUpIcon size={18} />
+        <ArrowDownUpIcon size={16} />
         <span>{t('mouse.direction')}</span>
       </div>
     </Popover>

browser/src/components/menu/mouse/index.tsx

@@ -79,7 +79,7 @@ export const Mouse = () => {
       open={isPopoverOpen}
       onOpenChange={setIsPopoverOpen}
     >
-      <div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-white hover:bg-neutral-700/70">
+      <div className="flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded text-neutral-300 hover:bg-neutral-700/70 hover:text-white">
         <MouseIcon size={18} />
       </div>
     </Popover>

browser/src/components/menu/mouse/jiggler.tsx

@@ -47,7 +47,7 @@ export const Jiggler = () => {
   return (
     <Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
       <div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
-        <MousePointerClickIcon size={18} />
+        <MousePointerClickIcon size={16} />
         <span>{t('mouse.jiggler.title')}</span>
       </div>
     </Popover>

browser/src/components/menu/mouse/mode.tsx

@@ -41,9 +41,7 @@ export const Mode = () => {
   return (
     <Popover content={content} placement="rightTop" arrow={false} align={{ offset: [13, 0] }}>
       <div className="flex h-[32px] cursor-pointer items-center space-x-2 rounded px-3 text-neutral-300 hover:bg-neutral-700/50">
-        <div className="flex size-[18px] items-center justify-center">
-          <SquareMousePointerIcon size={16} />
-        </div>
+        <SquareMousePointerIcon size={16} />
         <span>{t('mouse.mode')}</span>
       </div>
     </Popover>