From 23552b7bd835a1e1f3f6e68585a72ba7d4a14d40 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Sat, 28 Jan 2023 21:44:18 +0800
Subject: [PATCH] optimize shortcuts modal order

---
 .../src/components/Shortcuts/Shortcuts.scss   |  4 +-
 .../components/Shortcuts/ShortcutsModal.tsx   | 46 +++++++++----------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
index d79300a..f190bab 100644
--- a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
+++ b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
@@ -22,7 +22,7 @@
   .shortcut-option {
     display: grid;
     grid-template-columns: repeat(2, auto);
-    column-gap: 6rem;
+    column-gap: 2rem;
     align-items: center;
 
     @include mobile {
@@ -73,5 +73,5 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  width: 400px;
+  width: 320px;
 }
diff --git a/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx b/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
index 5c4f4dc..8e36d0e 100644
--- a/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
+++ b/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
@@ -50,35 +50,33 @@ export default function ShortcutsModal() {
       show={shortcutsShow}
     >
       <div className="shortcut-options">
-        <div className="shortcut-options-column">
-          <ShortCut
-            content="Multi-Stroke Mask Drawing"
-            keys={[`Hold ${CmdOrCtrl}`]}
-          />
-          <ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
-          <ShortCut
-            content="Trigger Manually Inpainting"
-            keys={['Shift', 'R']}
-          />
-          <ShortCut content="Interactive Segmentation" keys={['I']} />
-          <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
-          <ShortCut
-            content="Redo Inpainting"
-            keys={[CmdOrCtrl, 'Shift', 'Z']}
-          />
-          <ShortCut
-            content="Copy Result to Clipboard"
-            keys={[CmdOrCtrl, 'C']}
-          />
-          <ShortCut content="Paste Image to Editor" keys={[CmdOrCtrl, 'V']} />
-          <ShortCut content="View Original Image" keys={['Hold Tab']} />
-        </div>
         <div className="shortcut-options-column">
           <ShortCut content="Pan" keys={['Space + Drag']} />
           <ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
           <ShortCut content="Decrease Brush Size" keys={['[']} />
           <ShortCut content="Increase Brush Size" keys={[']']} />
-          <ShortCut content="Toggle Dark Mode" keys={['Shift', 'D']} />
+          <ShortCut content="View Original Image" keys={['Hold Tab']} />
+          <ShortCut
+            content="Multi-Stroke Drawing"
+            keys={[`Hold ${CmdOrCtrl}`]}
+          />
+          <ShortCut content="Cancel Drawing" keys={['Esc']} />
+        </div>
+
+        <div className="shortcut-options-column">
+          <ShortCut content="Undo" keys={[CmdOrCtrl, 'Z']} />
+          <ShortCut content="Redo" keys={[CmdOrCtrl, 'Shift', 'Z']} />
+          <ShortCut content="Copy Result" keys={[CmdOrCtrl, 'C']} />
+          <ShortCut content="Paste Image" keys={[CmdOrCtrl, 'V']} />
+          <ShortCut
+            content="Trigger Manually Inpainting"
+            keys={['Shift', 'R']}
+          />
+          <ShortCut content="Trigger Interactive Segmentation" keys={['I']} />
+        </div>
+
+        <div className="shortcut-options-column">
+          <ShortCut content="Switch Theme" keys={['Shift', 'D']} />
           <ShortCut content="Toggle Hotkeys Dialog" keys={['H']} />
           <ShortCut content="Toggle Settings Dialog" keys={['S']} />
           <ShortCut content="Toggle File Manager" keys={['F']} />