refactor: improve ui consistency

packages/hoppscotch-app/assets/scss/themes.scss

@@ -251,13 +251,11 @@
   --upper-tertiary-sticky-fold: 8.188rem;
   --upper-mobile-primary-sticky-fold: 6.625rem;
   --upper-mobile-secondary-sticky-fold: 8.625rem;
-  --upper-mobile-tertiary-sticky-fold: 10.625rem;
-  --upper-mobile-raw-sticky-fold: 10.675rem;
+  --upper-mobile-raw-sticky-fold: 10.688rem;
   --upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
   --lower-primary-sticky-fold: 3rem;
   --lower-secondary-sticky-fold: 5rem;
   --sidebar-primary-sticky-fold: 2rem;
-  --sidebar-secondary-sticky-fold: 4rem;
 }
 
 @mixin font-medium {
@@ -268,13 +266,11 @@
   --upper-tertiary-sticky-fold: 8.813rem;
   --upper-mobile-primary-sticky-fold: 7.125rem;
   --upper-mobile-secondary-sticky-fold: 9.375rem;
-  --upper-mobile-tertiary-sticky-fold: 10.875rem;
-  --upper-mobile-raw-sticky-fold: 11.695rem;
-  --upper-mobile-raw-tertiary-sticky-fold: 8.925rem;
+  --upper-mobile-raw-sticky-fold: 11.688rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 8.938rem;
   --lower-primary-sticky-fold: 3.25rem;
   --lower-secondary-sticky-fold: 5.5rem;
   --sidebar-primary-sticky-fold: 2.25rem;
-  --sidebar-secondary-sticky-fold: 4.5rem;
 }
 
 @mixin font-large {
@@ -285,13 +281,11 @@
   --upper-tertiary-sticky-fold: 9.5rem;
   --upper-mobile-primary-sticky-fold: 7.625rem;
   --upper-mobile-secondary-sticky-fold: 10.125rem;
-  --upper-mobile-tertiary-sticky-fold: 11.375rem;
-  --upper-mobile-raw-sticky-fold: 12.695rem;
-  --upper-mobile-raw-tertiary-sticky-fold: 9.7rem;
+  --upper-mobile-raw-sticky-fold: 12.688rem;
+  --upper-mobile-raw-tertiary-sticky-fold: 9.688rem;
   --lower-primary-sticky-fold: 3.5rem;
   --lower-secondary-sticky-fold: 6rem;
   --sidebar-primary-sticky-fold: 2.5rem;
-  --sidebar-secondary-sticky-fold: 5rem;
 }
 
 :root[data-font-size="small"] {

packages/hoppscotch-app/components/app/Footer.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-primary">
-    <div class="flex justify-between">
+  <div>
+    <div class="flex justify-between bg-primary">
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -166,7 +166,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="COLUMN_LAYOUT ? t('layout.row') : t('layout.column')"
           svg="columns"
-          class="transform hidden sm:inline"
+          class="hidden transform sm:inline"
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -1,6 +1,6 @@
 <template>
   <aside class="flex justify-between h-full md:flex-col">
-    <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
+    <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none bg-primary">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"
@@ -71,7 +71,6 @@ const primaryNavigation = [
   @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
-  @apply bg-primary;
   @apply hover:(bg-primaryDark text-secondaryDark);
   @apply focus-visible:text-secondaryDark;
 

packages/hoppscotch-app/components/http/Authorization.vue

@@ -4,9 +4,9 @@
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">{{
-          $t("authorization.type")
-        }}</label>
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("authorization.type") }}
+        </label>
         <tippy
           ref="authTypeOptions"
           interactive
@@ -185,9 +185,9 @@
             <SmartEnvInput v-model="apiValue" placeholder="Value" />
           </div>
           <div class="flex items-center border-b border-dividerLight">
-            <label class="ml-4 text-secondaryLight">{{
-              $t("authorization.pass_key_by")
-            }}</label>
+            <label class="ml-4 text-secondaryLight">
+              {{ $t("authorization.pass_key_by") }}
+            </label>
             <tippy
               ref="addToOptions"
               interactive

packages/hoppscotch-app/components/http/Headers.vue

@@ -3,9 +3,9 @@
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">{{
-        t("request.header_list")
-      }}</label>
+      <label class="font-semibold text-secondaryLight">
+        {{ t("request.header_list") }}
+      </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-app/components/http/PreRequestScript.vue

@@ -3,9 +3,9 @@
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">{{
-        t("preRequest.javascript_code")
-      }}</label>
+      <label class="font-semibold text-secondaryLight">
+        {{ t("preRequest.javascript_code") }}
+      </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-app/components/http/Request.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex-none sm:flex sm:flex-shrink-0 p-4 overflow-x-auto sm:space-x-2 bg-primary hide-scrollbar"
+    class="sticky top-0 z-10 flex-none p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary hide-scrollbar"
   >
     <div
       class="flex flex-1 overflow-auto border rounded min-w-52 border-divider whitespace-nowrap hide-scrollbar"

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -3,9 +3,9 @@
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">{{
-        t("response.body")
-      }}</label>
+      <label class="font-semibold text-secondaryLight">
+        {{ t("response.body") }}
+      </label>
       <div class="flex">
         <ButtonSecondary
           v-if="response.body"

packages/hoppscotch-app/windi.config.js

@@ -13,15 +13,12 @@ export default defineConfig({
         upperMobilePrimaryStickyFold: "var(--upper-mobile-primary-sticky-fold)",
         upperMobileSecondaryStickyFold:
           "var(--upper-mobile-secondary-sticky-fold)",
-        upperMobileTertiaryStickyFold:
-          "var(--upper-mobile-tertiary-sticky-fold)",
         upperMobileRawStickyFold: "var(--upper-mobile-raw-sticky-fold)",
         upperMobileRawTertiaryStickyFold:
           "var(--upper-mobile-raw-tertiary-sticky-fold)",
         lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
         lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
-        sidebarSecondaryStickyFold: "var(--sidebar-secondary-sticky-fold)",
       },
       colors: {
         primary: "var(--primary-color)",