chore: Refactor shortcuts modal to use modal component (#6151)

* chore: Refactor SHortcuts modal to use modal component

* Typography changes

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -1,89 +1,87 @@
 <template>
-  <transition name="slide-up">
+  <woot-modal :show="show" size="medium" :on-close="() => $emit('close')">
-    <div class="modal-mask">
+    <div class="column content-box">
-      <div v-on-clickaway="() => $emit('clickaway')" class="modal-container">
+      <woot-modal-header
-        <div class="header-wrap">
+        :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"
-          <div class="title-shortcut-key__wrap">
+      />
-            <h2 class="page-title">
+      <div class="shortcut__wrap margin-top-3">
-              {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+        <div class="title-key__wrap">
-            </h2>
+          <h5 class="text-block-title">
-            <div class="shortcut-key__wrap">
+            {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
-              <p class="shortcut-key">
+          </h5>
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
+          <div class="shortcut-key__wrap">
-              </p>
+            <p class="shortcut-key">
-              <p class="shortcut-key key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
+            </p>
-              </p>
+            <p class="shortcut-key key">
-            </div>
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="shortcut__wrap">
+        <div class="title-key__wrap">
+          <h5 class="text-block-title">
+            {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
+          </h5>
+          <div class="shortcut-key__wrap">
+            <div class="open-conversation__key">
+              <span class="shortcut-key">
+                {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
+              </span>
+              <span class="shortcut-key">
+                J
+              </span>
+              <span class="forward-slash text-block-title">
+                {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
+              </span>
+            </div>
+            <span class="shortcut-key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
+            </span>
+            <span class="shortcut-key key">
+              K
+            </span>
           </div>
-          <button class="cursor-pointer" @click="$emit('close')">
-            <fluent-icon icon="dismiss" />
-          </button>
         </div>
 
-        <div class="shortcut__wrap">
+        <div class="title-key__wrap">
-          <div class="title-key__wrap">
+          <h5 class="text-block-title">
-            <span class="sub-block-title">
+            {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
-              {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
+          </h5>
+          <div class="shortcut-key__wrap">
+            <span class="shortcut-key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
+            </span>
+            <span class="shortcut-key">
+              {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
+            </span>
+            <span class="shortcut-key key">
+              E
             </span>
-            <div class="shortcut-key__wrap">
-              <div class="open-conversation__key">
-                <span class="shortcut-key">
-                  {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-                </span>
-                <span class="shortcut-key">
-                  J
-                </span>
-                <span class="forward-slash sub-block-title">
-                  {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-                </span>
-              </div>
-              <span class="shortcut-key">
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-              </span>
-              <span class="shortcut-key key">
-                K
-              </span>
-            </div>
           </div>
-
+        </div>
-          <div class="title-key__wrap">
+        <div
-            <span class="sub-block-title">
+          v-for="shortcutKey in shortcutKeys"
-              {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
+          :key="shortcutKey.id"
+          class="title-key__wrap"
+        >
+          <h5 class="text-block-title">
+            {{ title(shortcutKey) }}
+          </h5>
+          <div class="shortcut-key__wrap">
+            <span class="shortcut-key">
+              {{ shortcutKey.firstkey }}
             </span>
-            <div class="shortcut-key__wrap">
+            <span class="shortcut-key key">
-              <span class="shortcut-key">
+              {{ shortcutKey.secondKey }}
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-              </span>
-              <span class="shortcut-key">
-                {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-              </span>
-              <span class="shortcut-key key">
-                E
-              </span>
-            </div>
-          </div>
-          <div
-            v-for="shortcutKey in shortcutKeys"
-            :key="shortcutKey.id"
-            class="title-key__wrap"
-          >
-            <span class="sub-block-title">
-              {{ title(shortcutKey) }}
             </span>
-            <div class="shortcut-key__wrap">
-              <span class="shortcut-key">
-                {{ shortcutKey.firstkey }}
-              </span>
-              <span class="shortcut-key key">
-                {{ shortcutKey.secondKey }}
-              </span>
-            </div>
           </div>
         </div>
       </div>
     </div>
-  </transition>
+  </woot-modal>
 </template>
 
 <script>
@@ -92,6 +90,12 @@ import { SHORTCUT_KEYS } from './constants';
 
 export default {
   mixins: [clickaway],
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       shortcutKeys: SHORTCUT_KEYS,
@@ -106,19 +110,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal-container {
-  padding: var(--space-medium) var(--space-large) var(--space-large)
-    var(--space-large);
-  width: fit-content;
-}
-
-.header-wrap {
-  align-items: flex-start;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--space-slab);
-}
-
 .title-shortcut-key__wrap {
   display: flex;
 }
@@ -140,6 +131,7 @@ export default {
   grid-template-columns: repeat(2, 0.5fr);
   gap: var(--space-smaller) var(--space-large);
   margin-top: var(--space-small);
+  padding: 0 var(--space-large) var(--space-large);
 }
 
 .title-key__wrap {
@@ -149,11 +141,6 @@ export default {
   min-width: 40rem;
 }
 
-.sub-block-title {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-medium);
-}
-
 .forward-slash {
   display: flex;
   align-items: center;

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -278,6 +278,7 @@
     }
   },
   "KEYBOARD_SHORTCUTS": {
+    "TOGGLE_MODAL": "View all shortcuts",
     "TITLE": {
       "OPEN_CONVERSATION": "Open conversation",
       "RESOLVE_AND_NEXT": "Resolve and move to next",

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -22,7 +22,7 @@
         @close-account-create-modal="closeCreateAccountModal"
       />
       <woot-key-shortcut-modal
-        v-if="showShortcutModal"
+        :show.sync="showShortcutModal"
         @close="closeKeyShortcutModal"
         @clickaway="closeKeyShortcutModal"
       />