fix: proper padding and margins

assets/scss/styles.scss

@@ -166,7 +166,8 @@ hr {
   @apply bg-primary;
   @apply truncate;
   @apply rounded;
-  @apply font-semibold;
+  @apply text-xs;
+  @apply font-semibold font-mono;
   @apply border border-divider;
   @apply transition;
   @apply focus:(outline-none border-accent);

components/environments/index.vue

@@ -9,7 +9,7 @@
             bg-primaryLight
             border-b border-dividerLight
             flex
-            font-medium
+            font-semibold font-mono
             w-full
             py-2
             px-4

components/http/BodyParameters.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-98px
+        top-24
         z-10
         sticky
         items-center

components/http/Headers.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-98px
+        top-24
         z-10
         sticky
         items-center

components/http/Parameters.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-98px
+        top-24
         z-10
         sticky
         items-center

components/http/PreRequestScript.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-98px
+        top-24
         z-10
         sticky
         items-center

components/http/RawBody.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-98px
+        top-24
         z-10
         sticky
         items-center

components/http/Request.vue

@@ -20,8 +20,9 @@
                 cursor-pointer
                 flex
                 font-semibold font-mono
+                h-8
                 text-secondaryDark
-                py-2
+                py-1
                 px-4
                 transition
                 w-28
@@ -53,10 +54,11 @@
         class="
           bg-primaryLight
           border border-divider
+          flex
           font-semibold font-mono
+          flex-1
           text-secondaryDark
-          w-full
+          py-1
-          py-2
           px-4
           transition
           truncate
@@ -76,7 +78,6 @@
         class="rounded-none"
         :label="!loading ? $t('send') : $t('cancel')"
         :shortcut="[getSpecialKey(), 'G']"
-        outline
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
       <span class="inline-flex">
@@ -89,11 +90,7 @@
           arrow
         >
           <template #trigger>
-            <ButtonPrimary
+            <ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
-              class="rounded-l-none"
-              icon="keyboard_arrow_down"
-              outline
-            />
           </template>
           <SmartItem
             :label="$t('import_curl')"
@@ -123,7 +120,7 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded-r-none ml-2"
+        class="rounded-r-none h-8 ml-2"
         :label="$t('save')"
         :shortcut="[getSpecialKey(), 'S']"
         outline
@@ -142,7 +139,7 @@
             <ButtonSecondary
               icon="keyboard_arrow_down"
               outline
-              class="rounded-l-none"
+              class="rounded-l-none h-8"
             />
           </template>
           <input

components/http/Tests.vue

@@ -6,7 +6,7 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-98px
+        top-24
         z-10
         sticky
         items-center
@@ -43,7 +43,7 @@
           border-b border-dividerLight
           flex flex-1
           pl-4
-          top-98px
+          top-24
           z-10
           sticky
           items-center

components/smart/Modal.vue

@@ -3,7 +3,7 @@
     <div
       ref="modal"
       class="
-        bg-primaryLight
+        bg-primaryDark
         flex
         h-full
         w-full

layouts/error.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page page-error">
     <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
-    <h3 class="font-mono text-xs">{{ message }}</h3>
+    <h3 class="font-mono font-semibold text-xs">{{ message }}</h3>
     <p class="mt-4">
       <ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
       <ButtonSecondary

pages/index.vue

@@ -6,7 +6,7 @@
         <Splitpanes :dbl-click-splitter="false" horizontal>
           <Pane class="hide-scrollbar !overflow-auto">
             <HttpRequest />
-            <SmartTabs styles="sticky top-66px z-10">
+            <SmartTabs styles="sticky top-16 z-10">
               <SmartTab
                 :id="'params'"
                 :label="$t('parameters')"