From 647599e5aaa980a9c9b3b6c38be1bf32190709e0 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 09:44:46 +0530
Subject: [PATCH] refactor: full-width modal for search, transparent tabs

---
 components/app/Lunr.vue                    | 10 ++---
 components/app/Search.vue                  | 30 +++++++++------
 components/graphql/RequestOptions.vue      |  2 +-
 components/graphql/Sidebar.vue             |  4 +-
 components/lenses/ResponseBodyRenderer.vue |  2 +-
 components/smart/Modal.vue                 | 13 +++++--
 components/smart/Tabs.vue                  |  1 -
 helpers/shortcuts.js                       | 44 +++++++++++-----------
 pages/index.vue                            |  4 +-
 pages/realtime.vue                         |  2 +-
 10 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index 3c9eee180..7dd60e2e2 100644
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -4,7 +4,6 @@
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
       class="
-        rounded
         cursor-pointer
         flex
         py-2
@@ -16,10 +15,11 @@
       "
       @click="$emit('action', shortcut.action)"
     >
-      <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
-        {{ shortcut.icon }}
-      </i>
-      <span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
+      <SmartIcon
+        class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
+        :name="shortcut.icon"
+      />
+      <span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
         {{ $t(shortcut.label) }}
       </span>
       <span
diff --git a/components/app/Search.vue b/components/app/Search.vue
index dfe9425b7..df82cfc90 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
+  <SmartModal v-if="show" full-width @close="$emit('hide-modal')">
     <template #body>
       <input
         id="command"
@@ -11,11 +11,11 @@
         class="
           bg-transparent
           border-b border-dividerLight
+          flex flex-shrink-0
           text-secondaryDark text-base
           leading-normal
-          px-4
-          pt-2
-          pb-6
+          py-4
+          px-6
         "
       />
       <AppLunr
@@ -37,18 +37,17 @@
         "
       >
         <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
-          <h5 class="my-2 text-secondaryLight py-2 px-4">
+          <h5 class="my-2 text-secondaryLight py-2 px-6">
             {{ $t(map.section) }}
           </h5>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
             class="
-              rounded
               cursor-pointer
               flex
               py-2
-              px-4
+              px-6
               transition
               items-center
               group
@@ -56,10 +55,19 @@
             "
             @click="runAction(shortcut.action)"
           >
-            <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
-              {{ shortcut.icon }}
-            </i>
-            <span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
+            <SmartIcon
+              class="
+                mr-4
+                opacity-75
+                transition
+                svg-icons
+                group-hover:opacity-100
+              "
+              :name="shortcut.icon"
+            />
+            <span
+              class="flex flex-1 mr-4 transition group-hover:text-secondaryDark"
+            >
               {{ $t(shortcut.label) }}
             </span>
             <span
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index edfab5ca5..6e79dcd99 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
+    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
       <SmartTab :id="'query'" :label="$t('tab.query')" :selected="true">
         <AppSection label="query">
           <div
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 1de2e324f..e0b796011 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <aside>
-    <SmartTabs styles="sticky z-10 top-0">
+    <SmartTabs styles="sticky bg-primary z-10 top-0">
       <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
         <AppSection label="docs">
           <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
@@ -22,7 +22,7 @@
           </div>
           <SmartTabs
             ref="gqlTabs"
-            styles="border-t border-dividerLight sticky z-10 top-sidebarSecondaryStickyFold"
+            styles="border-t border-dividerLight bg-primary sticky z-10 top-sidebarSecondaryStickyFold"
           >
             <div class="gqlTabs">
               <SmartTab
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 36432fc1b..1dccd74c3 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartTabs styles="sticky z-10 top-lowerPrimaryStickyFold">
+  <SmartTabs styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold">
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.renderer"
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index dc61fe753..5c5bacfa4 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -37,7 +37,6 @@
               shadow-lg
               text-left
               w-full
-              p-4
               transform
               transition-all
               inline-block
@@ -46,7 +45,10 @@
               sm:max-w-md sm:align-middle
               md:rounded-lg
             "
-            :class="{ 'mt-24 md:mb-8': placement === 'top' }"
+            :class="[
+              { 'mt-24 md:mb-8': placement === 'top' },
+              { 'p-4': !fullWidth },
+            ]"
           >
             <div
               v-if="title"
@@ -64,7 +66,8 @@
               </span>
             </div>
             <div
-              class="flex flex-col max-h-md py-2 overflow-y-auto hide-scrollbar"
+              class="flex flex-col max-h-md overflow-y-auto hide-scrollbar"
+              :class="{ 'py-2': !fullWidth }"
             >
               <slot name="body"></slot>
             </div>
@@ -115,6 +118,10 @@ export default defineComponent({
       type: String,
       default: "top",
     },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 7ed17f84f..6f229af58 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -69,7 +69,6 @@ export default defineComponent({
   @apply flex;
   @apply whitespace-nowrap;
   @apply overflow-auto;
-  @apply bg-primary;
 
   // &::after {
   //   @apply absolute;
diff --git a/helpers/shortcuts.js b/helpers/shortcuts.js
index 97a7c4025..01cce5d48 100644
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -123,13 +123,13 @@ export const spotlight = [
         keys: ["?"],
         label: "shortcut.general.help_menu",
         action: "modals.support.toggle",
-        icon: "support",
+        icon: "life-buoy",
       },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
         action: "flyouts.keybinds.toggle",
-        icon: "keyboard",
+        icon: "zap",
       },
     ],
   },
@@ -140,43 +140,43 @@ export const spotlight = [
         keys: [getPlatformSpecialKey(), "←"],
         label: "shortcut.navigation.back",
         action: "navigation.jump.back",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformSpecialKey(), "→"],
         label: "shortcut.navigation.forward",
         action: "navigation.jump.forward",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "R"],
         label: "shortcut.navigation.rest",
         action: "navigation.jump.rest",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
         action: "navigation.jump.graphql",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
         label: "shortcut.navigation.realtime",
         action: "navigation.jump.realtime",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "D"],
         label: "shortcut.navigation.documentation",
         action: "navigation.jump.documentation",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
         label: "shortcut.navigation.settings",
         action: "navigation.jump.settings",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
     ],
   },
@@ -187,7 +187,7 @@ export const spotlight = [
         keys: [getPlatformSpecialKey(), "M"],
         label: "shortcut.miscellaneous.invite",
         action: "modals.share.toggle",
-        icon: "person_add_alt",
+        icon: "gift",
       },
     ],
   },
@@ -198,70 +198,70 @@ export const lunr = [
     keys: ["?"],
     label: "shortcut.general.help_menu",
     action: "modals.support.toggle",
-    icon: "support",
-    tags: "help support documentation troubleshooting chat community feedback report bug issue ticket",
+    icon: "life-buoy",
+    tags: "help support menu discord twitter documentation troubleshooting chat community feedback report bug issue ticket",
   },
   {
     keys: [getPlatformSpecialKey(), "K"],
     label: "shortcut.general.show_all",
     action: "flyouts.keybinds.toggle",
-    icon: "keyboard",
+    icon: "zap",
     tags: "keyboard shortcuts",
   },
   {
     keys: [getPlatformSpecialKey(), "←"],
     label: "shortcut.navigation.back",
     action: "navigation.jump.back",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "back jump page navigation go",
   },
   {
     keys: [getPlatformSpecialKey(), "→"],
     label: "shortcut.navigation.forward",
     action: "navigation.jump.forward",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "forward jump next forward page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "R"],
     label: "shortcut.navigation.rest",
     action: "navigation.jump.rest",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "rest jump page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "Q"],
     label: "shortcut.navigation.graphql",
     action: "navigation.jump.graphql",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "graphql jump page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "W"],
     label: "shortcut.navigation.realtime",
     action: "navigation.jump.realtime",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "realtime jump page navigation websocket socket mqtt sse go",
   },
   {
     keys: [getPlatformAlternateKey(), "D"],
     label: "shortcut.navigation.documentation",
     action: "navigation.jump.documentation",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "documentation jump page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "S"],
     label: "shortcut.navigation.settings",
     action: "navigation.jump.settings",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "settings jump page navigation account theme go",
   },
   {
     keys: [getPlatformSpecialKey(), "M"],
     label: "shortcut.miscellaneous.invite",
     action: "modals.share.toggle",
-    icon: "person_add_alt",
-    tags: "invite share app social",
+    icon: "gift",
+    tags: "invite share app friends people social",
   },
 ]
diff --git a/pages/index.vue b/pages/index.vue
index 03ff139e0..42ceaf1fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,7 +4,7 @@
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
-          <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
+          <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
             <SmartTab
               :id="'params'"
               :label="$t('tab.parameters')"
@@ -55,7 +55,7 @@
       class="hide-scrollbar !overflow-auto"
     >
       <aside>
-        <SmartTabs styles="sticky z-10 top-0">
+        <SmartTabs styles="sticky bg-primary z-10 top-0">
           <SmartTab :id="'history'" :label="$t('tab.history')" :selected="true">
             <History ref="historyComponent" :page="'rest'" />
           </SmartTab>
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 2b386c7bd..50b89d445 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     class="h-full overflow-hidden"
-    styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
+    styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
   >
     <SmartTab
       id="websocket"