From bd22541d94f7cebc8c2306e11ae854ed25169ff2 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 21 Mar 2022 18:57:23 +0530
Subject: [PATCH] refactor: improve ui consistency

---
 packages/hoppscotch-app/assets/scss/themes.scss  | 16 +++++-----------
 .../hoppscotch-app/components/app/Footer.vue     |  6 +++---
 .../hoppscotch-app/components/app/Sidenav.vue    |  3 +--
 .../components/http/Authorization.vue            | 12 ++++++------
 .../hoppscotch-app/components/http/Headers.vue   |  6 +++---
 .../components/http/PreRequestScript.vue         |  6 +++---
 .../hoppscotch-app/components/http/Request.vue   |  2 +-
 .../lenses/renderers/JSONLensRenderer.vue        |  6 +++---
 packages/hoppscotch-app/windi.config.js          |  3 ---
 9 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 8c51d87a9..a1b025231 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/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"] {
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 9ee429d2a..0c3acd548 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/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"
         />
diff --git a/packages/hoppscotch-app/components/app/Sidenav.vue b/packages/hoppscotch-app/components/app/Sidenav.vue
index 04eccd140..71e4d331f 100644
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/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;
 
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index 52c52537d..d5370f581 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/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
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index 0afde5df5..67c00b3e0 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/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' }"
diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index dc6be26ed..8cd5fe7ae 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/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' }"
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 7fc74dc85..7939be844 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 1d8cab5c2..1bf8e9c0c 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/windi.config.js b/packages/hoppscotch-app/windi.config.js
index ca0ed979e..9c7ed19c8 100644
--- a/packages/hoppscotch-app/windi.config.js
+++ b/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)",