From 4e6ff9569147814e7a456bbf69e56f94514ffbaf Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Wed, 6 Dec 2023 22:06:56 +0100
Subject: [PATCH] Update HotkeysModal

---
 src/components/IconSmall.svelte |  6 ++++
 src/modals/HotkeysModal.svelte  | 58 ++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/IconSmall.svelte b/src/components/IconSmall.svelte
index aa3db139e..d36d18206 100644
--- a/src/components/IconSmall.svelte
+++ b/src/components/IconSmall.svelte
@@ -18,6 +18,7 @@
     | "collapse"
     | "commit"
     | "cross"
+    | "cursor"
     | "delegate"
     | "device"
     | "diff"
@@ -189,6 +190,11 @@
       d="M3.163 3.163a.556.556 0 01.785 0L8 7.214l4.052-4.051a.556.556 0 01.785.785L8.786 8l4.051 4.052a.556.556 0 01-.785.785L8 8.786l-4.052 4.051a.556.556 0 01-.785-.785L7.214 8 3.163 3.948a.556.556 0 010-.785z"
       clip-rule="evenodd">
     </path>
+  {:else if name === "cursor"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.62672 2.32908C5.22095 2.00257 5.94947 2.15788 6.60157 2.60621C6.61264 2.61382 6.62339 2.62186 6.6338 2.63034L12.6308 7.50811C13.4117 8.14331 13.0756 9.40302 12.082 9.56471L10.5513 9.8138L11.7818 12.1598C12.0808 12.7299 11.8615 13.4344 11.2919 13.7341C11.2915 13.7344 11.291 13.7346 11.2905 13.7349L10.3375 14.2411L10.3352 14.2424C9.76458 14.5417 9.05939 14.3217 8.7601 13.7511L7.53168 11.4091L6.48794 12.5074C5.79339 13.2383 4.56132 12.8035 4.47941 11.7986L3.85193 4.09987C3.85193 4.09991 3.85192 4.09982 3.85193 4.09987C3.79086 3.35282 4.02701 2.6586 4.62672 2.32908ZM5.10827 3.2055C4.98313 3.27426 4.8056 3.49265 4.8486 4.01834L5.47611 11.7173C5.48781 11.8609 5.66382 11.923 5.76304 11.8186L7.28772 10.2141C7.39881 10.0972 7.55945 10.0411 7.71916 10.0633C7.87888 10.0856 8.01806 10.1835 8.09296 10.3263L9.64568 13.2866C9.68829 13.3679 9.78851 13.3993 9.86988 13.3572C9.8696 13.3574 9.87015 13.3571 9.86988 13.3572L10.8237 12.8505L10.826 12.8493C10.9075 12.8065 10.939 12.7058 10.8962 12.6243L9.34349 9.66396C9.26883 9.52163 9.26715 9.35209 9.33896 9.2083C9.41078 9.06452 9.54733 8.96402 9.70597 8.9382L11.9214 8.57769C12.0633 8.55459 12.1114 8.37463 11.9998 8.28389L6.01914 3.41941C5.5398 3.09522 5.2375 3.13449 5.10827 3.2055Z" />
   {:else if name === "device"}
     <path
       fill-rule="evenodd"
diff --git a/src/modals/HotkeysModal.svelte b/src/modals/HotkeysModal.svelte
index 420a6450b..87cf1d854 100644
--- a/src/modals/HotkeysModal.svelte
+++ b/src/modals/HotkeysModal.svelte
@@ -1,31 +1,28 @@
 <script lang="ts">
-  import Modal from "@app/components/Modal.svelte";
   import Icon from "@app/components/Icon.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
   import KeyHint from "@app/components/KeyHint.svelte";
+  import Modal from "@app/components/Modal.svelte";
 </script>
 
 <style>
   .hotkeys {
-    gap: 3rem;
     justify-content: center;
+    gap: 1rem;
     display: flex;
-    font-size: var(--font-size-small);
-  }
-
-  .description {
-    text-align: left;
+    flex-direction: column;
+    font-size: var(--font-size-regular);
   }
 
   .pair {
     display: flex;
-    width: 8rem;
+    width: 24rem;
     justify-content: space-between;
   }
-
-  .group {
+  .keys {
     display: flex;
-    gap: 1rem;
-    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
   }
 </style>
 
@@ -34,29 +31,30 @@
 
   <div slot="body">
     <div class="hotkeys">
-      <div class="group">
-        <div class="pair">
-          <div class="description">Shortcuts</div>
-          <KeyHint>?</KeyHint>
-        </div>
-
-        {#if import.meta.env.DEV}
-          <div class="pair">
-            <div class="description">Color palette</div>
-            <KeyHint>d</KeyHint>
-          </div>
-        {/if}
+      <div class="pair">
+        <span>Submit</span>
+        <KeyHint>⏎</KeyHint>
       </div>
 
-      <div class="group">
-        <div class="pair">
-          <div class="description">Submit</div>
+      <div class="pair">
+        <span>Post comment</span>
+        <div class="keys">
+          <KeyHint>⌘</KeyHint> +
           <KeyHint>⏎</KeyHint>
         </div>
+      </div>
 
-        <div class="pair">
-          <div class="description">Close</div>
-          <KeyHint>esc</KeyHint>
+      <div class="pair">
+        <span>Close</span>
+        <KeyHint>ESC</KeyHint>
+      </div>
+
+      <div class="pair">
+        <span>Select multiple lines</span>
+        <div class="keys">
+          <KeyHint>Shift</KeyHint>
+          +
+          <IconSmall name="cursor" />
         </div>
       </div>
     </div>