refactor(ui): better tabs

components/graphql/Field.vue

@@ -86,4 +86,8 @@ export default {
 .field-highlighted {
   @apply border-b-2 border-accent;
 }
+
+.field-title {
+  @apply select-text;
+}
 </style>

components/graphql/Request.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="flex-1 inline-flex">
+    <div class="space-x-2 flex-1 inline-flex">
       <input
         id="url"
         v-model="url"
@@ -10,12 +10,13 @@
         class="
           bg-primaryLight
           border border-divider
-          rounded-l
+          rounded
           text-secondaryDark
           w-full
           py-2
           px-4
-          focus-visible:border-accent
+          hover:border-dividerDark
+          focus-visible:bg-primary focus-visible:border-dividerDark
         "
         :placeholder="$t('request.url')"
         @keyup.enter="onConnectClick"
@@ -24,7 +25,7 @@
         id="get"
         name="get"
         :label="!connected ? $t('action.connect') : $t('action.disconnect')"
-        class="rounded-l-none w-28"
+        class="w-32"
         @click.native="onConnectClick"
       />
     </div>

components/graphql/RequestOptions.vue

@@ -159,7 +159,7 @@
               :value="header.key"
               autofocus
               styles="
-                bg-primaryLight
+                bg-primary
                 flex
                 flex-1
                 py-1
@@ -176,7 +176,7 @@
               "
             />
             <input
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="`value ${index}`"
               :value="header.value"

components/graphql/Response.vue

@@ -67,12 +67,12 @@
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.show_all") }}
           </span>
-          <span class="flex flex-1 items-center">
+          <!-- <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.command_menu") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.help_menu") }}
-          </span>
+          </span> -->
         </div>
         <div class="flex flex-col space-y-4">
           <div class="flex">
@@ -83,12 +83,12 @@
             <span class="shortcut-key">{{ getSpecialKey() }}</span>
             <span class="shortcut-key">K</span>
           </div>
-          <div class="flex">
+          <!-- <div class="flex">
             <span class="shortcut-key">/</span>
           </div>
           <div class="flex">
             <span class="shortcut-key">?</span>
-          </div>
+          </div> -->
         </div>
       </div>
       <ButtonSecondary

components/graphql/Sidebar.vue

@@ -3,21 +3,13 @@
     <SmartTabs styles="sticky z-10 top-0">
       <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
         <AppSection label="docs">
-          <div
-            class="
-              bg-primaryLight
-              flex
-              top-sidebarPrimaryStickyFold
-              z-10
-              sticky
-            "
-          >
+          <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
             <div class="search-wrapper">
               <input
                 v-model="graphqlFieldsFilterText"
                 type="search"
                 :placeholder="$t('action.search')"
-                class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
+                class="bg-primary flex w-full py-2 pr-2 pl-10"
               />
             </div>
             <div class="flex">
@@ -138,7 +130,6 @@
             v-if="schemaString"
             class="
               bg-primary
-              border-b border-dividerLight
               flex flex-1
               top-sidebarPrimaryStickyFold
               pl-4