optimize shortcuts style

lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss

@@ -34,11 +34,10 @@
 
   .shortcut-key {
     justify-self: end;
-    font-family: 'WorkSans-Bold';
     border: 1px solid var(--modal-hotkey-border-color);
-    padding: 0.4rem 1rem;
+    padding: 0.4rem 0.4rem;
     width: max-content;
-    border-radius: 0.4rem;
+    border-radius: 0.2rem;
 
     @include mobile {
       padding: 0.2rem 0.4rem;
@@ -48,7 +47,6 @@
   .shortcut-description {
     justify-self: start;
     text-align: left;
-    width: 18rem;
 
     @include mobile {
       text-align: left;

lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx

@@ -4,21 +4,37 @@ import { shortcutsState } from '../../store/Atoms'
 import Modal from '../shared/Modal'
 
 interface Shortcut {
-  children: ReactNode
   content: string
+  keys: string[]
 }
 
 function ShortCut(props: Shortcut) {
-  const { children, content } = props
+  const { content, keys } = props
 
   return (
     <div className="shortcut-option">
       <div className="shortcut-description">{content}</div>
-      <div className="shortcut-key">{children}</div>
+      <div style={{ display: 'flex', justifySelf: 'end', gap: '8px' }}>
+        {keys.map((k, index) => (
+          <div className="shortcut-key" key={k}>
+            {k}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
 
+const isMac = (function () {
+  return /macintosh|mac os x/i.test(navigator.userAgent)
+})()
+
+const isWindows = (function () {
+  return /windows|win32/i.test(navigator.userAgent)
+})()
+
+const CmdOrCtrl = isMac ? 'Cmd' : 'Ctrl'
+
 export default function ShortcutsModal() {
   const [shortcutsShow, setShortcutState] = useRecoilState(shortcutsState)
 
@@ -34,39 +50,20 @@ export default function ShortcutsModal() {
       show={shortcutsShow}
     >
       <div className="shortcut-options">
-        <ShortCut content="Enable Multi-Stroke Mask Drawing">
+        <ShortCut
-          <p>Hold Cmd/Ctrl</p>
+          content="Enable Multi-Stroke Mask Drawing"
-        </ShortCut>
+          keys={[`Hold ${CmdOrCtrl}`]}
-        <ShortCut content="Undo Inpainting">
+        />
-          <p>Cmd/Ctrl + Z</p>
+        <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
-        </ShortCut>
+        <ShortCut content="Pan" keys={['Space & Drag']} />
-        <ShortCut content="Pan">
+        <ShortCut content="View Original Image" keys={['Hold Tag']} />
-          <p>Space & Drag</p>
+        <ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
-        </ShortCut>
+        <ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
-        <ShortCut content="View Original Image">
+        <ShortCut content="Run Inpainting Manually" keys={['Shift', 'R']} />
-          <p>Hold Tab</p>
+        <ShortCut content="Decrease Brush Size" keys={['[']} />
-        </ShortCut>
+        <ShortCut content="Increase Brush Size" keys={[']']} />
-        <ShortCut content="Reset Zoom/Pan">
+        <ShortCut content="Toggle Dark Mode" keys={['Shift', 'D']} />
-          <p>Esc</p>
+        <ShortCut content="Toggle Hotkeys Panel" keys={['H']} />
-        </ShortCut>
-        <ShortCut content="Cancel Mask Drawing">
-          <p>Esc</p>
-        </ShortCut>
-        <ShortCut content="Run Inpainting Manually">
-          <p>Shift + R</p>
-        </ShortCut>
-        <ShortCut content="Decrease Brush Size">
-          <p>[</p>
-        </ShortCut>
-        <ShortCut content="Increase Brush Size">
-          <p>]</p>
-        </ShortCut>
-        <ShortCut content="Toggle Dark Mode">
-          <p>Shift + D</p>
-        </ShortCut>
-        <ShortCut content="Toggle Hotkeys Panel">
-          <p>H</p>
-        </ShortCut>
       </div>
     </Modal>
   )

lama_cleaner/app/src/components/shared/Modal.scss

@@ -4,7 +4,10 @@
   inset: 0;
   background-color: var(--model-mask-bg);
   backdrop-filter: blur(12px);
-  animation: opacityReveal 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: opacityReveal 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
 }
 
 @keyframes contentShow {
@@ -46,5 +49,7 @@
     }
   }
 
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
 }