refactor(ui): better tabs

components/http/Headers.vue

@@ -50,7 +50,7 @@
         :value="header.key"
         autofocus
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -71,7 +71,7 @@
         v-model="header.value"
         :placeholder="$t('count.value', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -87,7 +87,7 @@
       />
       <input
         v-else
-        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/http/Parameters.vue

@@ -48,7 +48,7 @@
         v-model="param.key"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -64,7 +64,7 @@
       />
       <input
         v-else
-        class="bg-primaryLight flex flex-1 py-2 px-4"
+        class="bg-primary flex flex-1 py-2 px-4"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -82,7 +82,7 @@
         v-model="param.value"
         :placeholder="$t('count.value', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-primary
           flex
           flex-1
           py-1
@@ -98,7 +98,7 @@
       />
       <input
         v-else
-        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="param.value"

components/http/Request.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
+  <div class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky">
     <div class="flex flex-1">
       <div class="flex relative">
         <label for="method">
@@ -26,7 +26,7 @@
                     px-4
                     w-28
                     hover:border-dividerDark
-                    focus-visible:border-accent
+                    focus-visible:bg-primary focus-visible:border-dividerDark
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
@@ -54,11 +54,13 @@
           border border-divider
           flex
           flex-1
+          rounded-r
           text-secondaryDark
           py-1
           px-4
           hover:border-dividerDark
-          focus-visible:border-accent
+          focus-visible:border-dividerDark
+                    focus-visible:bg-primary
         "
           @enter="newSendRequest()"
         />
@@ -70,12 +72,14 @@
           class="
             bg-primaryLight
             border border-divider
+            rounded-r
             flex
             text-secondaryDark
             w-full
             py-2
             px-4
-            focus-visible:border-accent
+            hover:border-dividerDark
+            focus-visible:bg-primary focus-visible:border-dividerDark
           "
           name="url"
           type="text"
@@ -89,7 +93,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none flex-1 min-w-24"
+        class="rounded-r-none flex-1 min-w-22"
         :label="!loading ? $t('action.send') : $t('action.cancel')"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />

components/http/ResponseMeta.vue

@@ -17,12 +17,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">
@@ -33,12 +33,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