refactor: full-width modal for search, transparent tabs

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

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

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

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

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"

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()

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;