From 7da3480dfe9afcb3310f9f7cfd55cc8ed9803d17 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 10 May 2024 20:22:48 +0200
Subject: [PATCH] style: improve readability of shortcuts

---
 .../event-editor/EventEditorEmpty.module.scss |  6 ++
 .../rundown/event-editor/EventEditorEmpty.tsx | 66 +++++++++++++++----
 apps/client/src/theme/theme.ts                |  8 ++-
 3 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss
index 779d86893..1eceed841 100644
--- a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss
+++ b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.module.scss
@@ -32,3 +32,9 @@
 .prompt {
   font-size: 1rem;
 }
+
+.divider {
+  display: inline-block;
+  text-align: center;
+  width: 1em;
+}
diff --git a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx
index aa015c399..5151b1759 100644
--- a/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx
+++ b/apps/client/src/features/rundown/event-editor/EventEditorEmpty.tsx
@@ -18,49 +18,77 @@ function EventEditorEmpty() {
           <tbody>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↓</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>/</AuxKey>
+                <Kbd>↓</Kbd>
               </td>
               <td>Select entry</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> / <Kbd>↑</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>{deviceMod}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>/</AuxKey>
+                <Kbd>↑</Kbd>
               </td>
               <td>Reorder selected entry</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>E</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>E</Kbd>
               </td>
               <td>Add event below</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>E</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>E</Kbd>
               </td>
               <td>Add event above</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>B</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>B</Kbd>
               </td>
               <td>Add block below</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>B</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>B</Kbd>
               </td>
               <td>Add block above</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>D</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>D</Kbd>
               </td>
               <td>Add delay below</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceAlt}</Kbd> + <Kbd>↑</Kbd> + <Kbd>D</Kbd>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>D</Kbd>
               </td>
               <td>Add delay above</td>
             </tr>
@@ -72,25 +100,35 @@ function EventEditorEmpty() {
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceMod}</Kbd> + <Kbd>⌫</Kbd>
+                <Kbd>{deviceMod}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>⌫</Kbd>
               </td>
               <td>Delete selected entry</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceMod}</Kbd> + <Kbd>C</Kbd>
+                <Kbd>{deviceMod}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>C</Kbd>
               </td>
               <td>Copy selected entry</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceMod}</Kbd> + <Kbd>↑</Kbd> + <Kbd>V</Kbd>
+                <Kbd>{deviceMod}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>↑</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>V</Kbd>
               </td>
               <td>Paste above</td>
             </tr>
             <tr>
               <td>
-                <Kbd>{deviceMod}</Kbd> + <Kbd>V</Kbd>
+                <Kbd>{deviceMod}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>V</Kbd>
               </td>
               <td>Paste below</td>
             </tr>
@@ -100,3 +138,7 @@ function EventEditorEmpty() {
     </div>
   );
 }
+
+function AuxKey({ children }: { children: React.ReactNode }) {
+  return <span className={style.divider}>{children}</span>;
+}
diff --git a/apps/client/src/theme/theme.ts b/apps/client/src/theme/theme.ts
index cd3ae1017..6ac4cdb74 100644
--- a/apps/client/src/theme/theme.ts
+++ b/apps/client/src/theme/theme.ts
@@ -83,9 +83,13 @@ const theme = extendTheme({
     Kbd: {
       baseStyle: {
         borderRadius: '2px',
-        border: '1px solid rgba(255, 255, 255, 0.20)',
+        border: 'none',
         background: 'rgba(255, 255, 255, 0.10)',
-        color: 'white',
+        padding: '0.125rem 0.5rem',
+        color: '#f6f6f6', // $ui-white
+        fontWeight: 400,
+        boxShadow: '0px 0px 3px 0px rgba(0,0,0,0.4)',
+        fontSize: 'calc(1rem - 2px)',
       },
     },
     Menu: {