From adf8d4c0ecc5e9dbd55928a714344b98d1dead81 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Tue, 19 Jul 2022 22:22:42 +0800
Subject: [PATCH] optimize frontend style

---
 .../Settings/ModelSettingBlock.scss           |  3 ++-
 .../components/Settings/ModelSettingBlock.tsx |  2 +-
 .../src/components/Shortcuts/Shortcuts.scss   | 21 ++++++++++++++-----
 .../components/Shortcuts/ShortcutsModal.tsx   | 11 +++++-----
 lama_cleaner/app/src/styles/_Colors.scss      |  5 +++++
 lama_cleaner/app/src/styles/_ColorsDark.scss  |  5 +++++
 6 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
index 29ae13a..3273a40 100644
--- a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
+++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
@@ -2,7 +2,8 @@
   background-color: var(--badge-background-color);
   color: var(--badge-color);
 
-  padding: 3px 12px;
+  padding-left: 5px;
+  padding-right: 5px;
   border-radius: 999px;
   text-decoration: none;
 }
diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
index 8d12abe..39ee892 100644
--- a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
+++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
@@ -151,7 +151,7 @@ function ModelSettingBlock() {
   return (
     <SettingBlock
       className="model-setting-block"
-      title="Inpainting Model"
+      title="Model"
       titleSuffix={renderPaperCodeBadge()}
       input={
         <Selector
diff --git a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
index c353ae1..fc44664 100644
--- a/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
+++ b/lama_cleaner/app/src/components/Shortcuts/Shortcuts.scss
@@ -10,7 +10,6 @@
     display: grid;
     width: 100%;
     height: auto;
-    margin-top: -11rem;
     animation: slideDown 0.2s ease-out;
   }
 }
@@ -26,7 +25,6 @@
     align-items: center;
 
     @include mobile {
-      grid-template-columns: auto;
       column-gap: 0;
       row-gap: 0.6rem;
     }
@@ -34,10 +32,23 @@
 
   .shortcut-key {
     justify-self: end;
-    border: 1px solid var(--modal-hotkey-border-color);
-    padding: 0.4rem 0.4rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     width: max-content;
-    border-radius: 0.2rem;
+    border-radius: 6px;
+    user-select: none;
+    white-space: nowrap;
+
+    color: var(--modal-text-color);
+    background-color: var(--page-bg);
+
+    box-sizing: border-box;
+    box-shadow: var(--box-shadow);
+
+    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+    font-family: inherit;
+    font-weight: 400;
+    line-height: 1.5;
 
     @include mobile {
       padding: 0.2rem 0.4rem;
diff --git a/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx b/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
index 643c47b..f2b500e 100644
--- a/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
+++ b/lama_cleaner/app/src/components/Shortcuts/ShortcutsModal.tsx
@@ -51,15 +51,16 @@ export default function ShortcutsModal() {
     >
       <div className="shortcut-options">
         <ShortCut
-          content="Enable Multi-Stroke Mask Drawing"
+          content="Multi-Stroke Mask Drawing"
           keys={[`Hold ${CmdOrCtrl}`]}
         />
-        <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
-        <ShortCut content="Pan" keys={['Space & Drag']} />
-        <ShortCut content="View Original Image" keys={['Hold Tab']} />
-        <ShortCut content="Reset Zoom/Pan" keys={['Esc']} />
         <ShortCut content="Cancel Mask Drawing" keys={['Esc']} />
         <ShortCut content="Run Inpainting Manually" keys={['Shift', 'R']} />
+        <ShortCut content="Undo Inpainting" keys={[CmdOrCtrl, 'Z']} />
+        <ShortCut content="Redo Inpainting" keys={[CmdOrCtrl, 'Shift', 'Z']} />
+        <ShortCut content="View Original Image" keys={['Hold Tab']} />
+        <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']} />
diff --git a/lama_cleaner/app/src/styles/_Colors.scss b/lama_cleaner/app/src/styles/_Colors.scss
index 704fd3f..48ca967 100644
--- a/lama_cleaner/app/src/styles/_Colors.scss
+++ b/lama_cleaner/app/src/styles/_Colors.scss
@@ -51,4 +51,9 @@
   // badge
   --badge-background-color: hsl(209 13.3% 95.3%);
   --badge-color: hsl(206 6% 43.5%);
+
+  // keyboard shortcuts
+  --box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.1),
+    inset 0 1px 5px hsl(210 16.7% 97.6%), 0px 0px 0px 0.5px hsl(205 10.7% 78%),
+    0px 2px 1px -1px hsl(205 10.7% 78%), 0 1px hsl(205 10.7% 78%);
 }
diff --git a/lama_cleaner/app/src/styles/_ColorsDark.scss b/lama_cleaner/app/src/styles/_ColorsDark.scss
index c1f1ed7..e2671b1 100644
--- a/lama_cleaner/app/src/styles/_ColorsDark.scss
+++ b/lama_cleaner/app/src/styles/_ColorsDark.scss
@@ -49,4 +49,9 @@
   // badge
   --badge-background-color: hsl(197 6.8% 13.6%);
   --badge-color: hsl(206 6% 63%);
+
+  // keyboard shortcuts
+  --box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.1),
+    inset 0 1px 5px hsl(195 7.1% 11%), 0px 0px 0px 0.5px hsl(207 5.6% 31.6%),
+    0px 2px 1px -1px hsl(207 5.6% 31.6%), 0 1px hsl(207 5.6% 31.6%);
 }