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,12 +1,14 @@
 <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">
+            {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
+          </h5>
           <div class="shortcut-key__wrap">
             <p class="shortcut-key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
@@ -16,16 +18,13 @@
             </p>
           </div>
         </div>
-          <button class="cursor-pointer" @click="$emit('close')">
-            <fluent-icon icon="dismiss" />
-          </button>
       </div>
 
       <div class="shortcut__wrap">
         <div class="title-key__wrap">
-            <span class="sub-block-title">
+          <h5 class="text-block-title">
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
-            </span>
+          </h5>
           <div class="shortcut-key__wrap">
             <div class="open-conversation__key">
               <span class="shortcut-key">
@@ -34,7 +33,7 @@
               <span class="shortcut-key">
                 J
               </span>
-                <span class="forward-slash sub-block-title">
+              <span class="forward-slash text-block-title">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
               </span>
             </div>
@@ -48,9 +47,9 @@
         </div>
 
         <div class="title-key__wrap">
-            <span class="sub-block-title">
+          <h5 class="text-block-title">
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
-            </span>
+          </h5>
           <div class="shortcut-key__wrap">
             <span class="shortcut-key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
@@ -68,9 +67,9 @@
           :key="shortcutKey.id"
           class="title-key__wrap"
         >
-            <span class="sub-block-title">
+          <h5 class="text-block-title">
             {{ title(shortcutKey) }}
-            </span>
+          </h5>
           <div class="shortcut-key__wrap">
             <span class="shortcut-key">
               {{ shortcutKey.firstkey }}
@@ -82,8 +81,7 @@
         </div>
       </div>
     </div>
-    </div>
+  </woot-modal>
-  </transition>
 </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"
       />