From a1d69b3210c6f2f447a1ee43dfc156892318d7ff Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 3 Dec 2022 13:01:47 +0530
Subject: [PATCH] chore: minor ui improvements

---
 .../hoppscotch-common/assets/scss/styles.scss | 144 +++++++++---------
 .../hoppscotch-common/src/components.d.ts     |   3 +
 .../src/components/app/Footer.vue             |   7 +-
 .../src/components/app/PowerSearchEntry.vue   |  28 ++--
 .../src/components/app/Sidenav.vue            |  44 ++----
 .../src/components/realtime/Subscription.vue  |   4 +-
 .../src/components/smart/Checkbox.vue         |   9 +-
 .../src/components/smart/Modal.vue            |   2 +-
 .../src/components/smart/Tabs.vue             |  49 ++----
 .../src/components/smart/Windows.vue          |  69 +++------
 .../hoppscotch-common/src/pages/profile.vue   |   2 +-
 11 files changed, 151 insertions(+), 210 deletions(-)

diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss
index 270730424..b3d7c9c2c 100644
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -1,9 +1,9 @@
 * {
   @apply backface-hidden;
-  @apply before: backface-hidden;
-  @apply after: backface-hidden;
-  @apply selection: bg-accentDark;
-  @apply selection: text-accentContrast;
+  @apply before:backface-hidden;
+  @apply after:backface-hidden;
+  @apply selection:bg-accentDark;
+  @apply selection:text-accentContrast;
 }
 
 :root {
@@ -21,8 +21,8 @@
   @apply bg-divider bg-clip-content;
   @apply rounded-full;
   @apply border-solid border-transparent border-4;
-  @apply hover: bg-dividerDark;
-  @apply hover: bg-clip-content;
+  @apply hover:bg-dividerDark;
+  @apply hover:bg-clip-content;
 }
 
 ::-webkit-scrollbar {
@@ -115,7 +115,7 @@ a {
   @apply no-underline;
   @apply transition;
   @apply leading-body;
-  @apply focus: outline-none;
+  @apply focus:outline-none;
 
   &.link {
     @apply items-center;
@@ -123,10 +123,10 @@ a {
     @apply -my-0.5 -mx-1;
     @apply text-accent;
     @apply rounded;
-    @apply hover: text-accentDark;
-    @apply focus-visible: ring;
-    @apply focus-visible: ring-accent;
-    @apply focus-visible: text-accentDark;
+    @apply hover:text-accentDark;
+    @apply focus-visible:ring;
+    @apply focus-visible:ring-accent;
+    @apply focus-visible:text-accentDark;
   }
 }
 
@@ -163,7 +163,7 @@ a {
       @apply px-1;
       @apply my-0 ml-1;
       @apply truncate;
-      @apply sm: inline-flex;
+      @apply sm:inline-flex;
     }
 
     .env-icon {
@@ -198,7 +198,7 @@ a {
     @apply text-secondary text-body;
     @apply p-2;
     @apply leading-normal;
-    @apply focus: outline-none;
+    @apply focus:outline-none;
     scroll-behavior: smooth;
   }
 
@@ -243,7 +243,7 @@ hr {
   @apply rounded;
   @apply text-secondaryDark;
   @apply border border-divider;
-  @apply focus-visible: border-dividerDark;
+  @apply focus-visible:border-dividerDark;
 }
 
 input,
@@ -254,8 +254,8 @@ button {
   @apply transition;
   @apply text-body;
   @apply leading-body;
-  @apply focus: outline-none;
-  @apply disabled: cursor-not-allowed;
+  @apply focus:outline-none;
+  @apply disabled:cursor-not-allowed;
 }
 
 .input[type="file"],
@@ -316,16 +316,16 @@ pre.ace_editor {
 .select-wrapper {
   @apply flex flex-1;
   @apply relative;
-  @apply after: absolute;
-  @apply after: flex;
-  @apply after: inset-y-0;
-  @apply after: items-center;
-  @apply after: justify-center;
-  @apply after: pointer-events-none;
-  @apply after: font-icon;
-  @apply after: text-secondaryLight;
-  @apply after: right-3;
-  @apply after: content-["\e313"];
+  @apply after:absolute;
+  @apply after:flex;
+  @apply after:inset-y-0;
+  @apply after:items-center;
+  @apply after:justify-center;
+  @apply after:pointer-events-none;
+  @apply after:font-icon;
+  @apply after:text-secondaryLight;
+  @apply after:right-3;
+  @apply after:content-["\e313"];
 }
 
 .info-response {
@@ -366,8 +366,8 @@ pre.ace_editor {
       @apply font-semibold;
       @apply transition;
       @apply leading-body;
-      @apply sm: rounded;
-      @apply sm: border;
+      @apply sm:rounded;
+      @apply sm:border;
 
       .action {
         @apply relative;
@@ -381,16 +381,16 @@ pre.ace_editor {
         @apply leading-body;
         @apply tracking-normal;
         @apply rounded;
-        @apply last: ml-4;
-        @apply sm: ml-8;
-        @apply before: absolute;
-        @apply before: bg-current;
-        @apply before: opacity-10;
-        @apply before: inset-0;
-        @apply before: transition;
-        @apply before: content-DEFAULT;
-        @apply hover: no-underline;
-        @apply hover: before:opacity-20;
+        @apply last:ml-4;
+        @apply sm:ml-8;
+        @apply before:absolute;
+        @apply before:bg-current;
+        @apply before:opacity-10;
+        @apply before:inset-0;
+        @apply before:transition;
+        @apply before:content-DEFAULT;
+        @apply hover:no-underline;
+        @apply hover:before:opacity-20;
       }
     }
 
@@ -417,24 +417,24 @@ pre.ace_editor {
 .smart-splitter .splitpanes__splitter {
   @apply relative;
   @apply bg-primaryLight;
-  @apply before: absolute;
-  @apply before: inset-0;
-  @apply before: bg-accentLight;
-  @apply before: opacity-0;
-  @apply before: z-20;
-  @apply before: transition;
-  @apply before: content-DEFAULT;
-  @apply after: absolute;
-  @apply after: inset-0;
-  @apply after: z-20;
-  @apply after: transition;
-  @apply after: flex;
-  @apply after: items-center;
-  @apply after: justify-center;
-  @apply after: text-dividerDark;
-  @apply after: font-icon;
-  @apply hover: before:opacity-100;
-  @apply hover: after:text-accentDark;
+  @apply before:absolute;
+  @apply before:inset-0;
+  @apply before:bg-accentLight;
+  @apply before:opacity-0;
+  @apply before:z-20;
+  @apply before:transition;
+  @apply before:content-DEFAULT;
+  @apply after:absolute;
+  @apply after:inset-0;
+  @apply after:z-20;
+  @apply after:transition;
+  @apply after:flex;
+  @apply after:items-center;
+  @apply after:justify-center;
+  @apply after:text-dividerDark;
+  @apply after:font-icon;
+  @apply hover:before:opacity-100;
+  @apply hover:after:text-accentDark;
 }
 
 .no-splitter .splitpanes__splitter {
@@ -444,18 +444,18 @@ pre.ace_editor {
 
 .smart-splitter.splitpanes--vertical > .splitpanes__splitter {
   @apply w-1;
-  @apply before: -left-0.5;
-  @apply before: -right-0.5;
-  @apply before: h-full;
-  @apply after: content-["\e5d4"];
+  @apply before:-left-0.5;
+  @apply before:-right-0.5;
+  @apply before:h-full;
+  @apply after:content-["\e5d4"];
 }
 
 .smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
   @apply h-1;
-  @apply before: -top-0.5;
-  @apply before: -bottom-0.5;
-  @apply before: w-full;
-  @apply after: content-["\e5d3"];
+  @apply before:-top-0.5;
+  @apply before:-bottom-0.5;
+  @apply before:w-full;
+  @apply after:content-["\e5d3"];
 }
 
 .no-splitter.splitpanes--vertical > .splitpanes__splitter {
@@ -507,7 +507,7 @@ pre.ace_editor {
 }
 
 .capitalize-first {
-  @apply first-letter: capitalize;
+  @apply first-letter:capitalize;
 }
 
 details {
@@ -543,12 +543,16 @@ details[open] summary .indicator {
   @apply bg-accent #{!important};
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-  @apply rounded;
-  padding: 0;
+.color-picker[type="color"] {
+  @apply appearance-none;
 }
 
-input[type="color"]::-webkit-color-swatch {
+.color-picker[type="color"]::-webkit-color-swatch-wrapper {
   @apply rounded;
-  border: none;
+  @apply p-0;
+}
+
+.color-picker[type="color"]::-webkit-color-swatch {
+  @apply rounded;
+  @apply border-0;
 }
diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts
index 40f5e9aa4..c78414770 100644
--- a/packages/hoppscotch-common/src/components.d.ts
+++ b/packages/hoppscotch-common/src/components.d.ts
@@ -99,6 +99,7 @@ declare module '@vue/runtime-core' {
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideBrush: typeof import('~icons/lucide/brush')['default']
     IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
@@ -107,9 +108,11 @@ declare module '@vue/runtime-core' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideLoader: typeof import('~icons/lucide/loader')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
diff --git a/packages/hoppscotch-common/src/components/app/Footer.vue b/packages/hoppscotch-common/src/components/app/Footer.vue
index b9f1f0ba5..6332aa762 100644
--- a/packages/hoppscotch-common/src/components/app/Footer.vue
+++ b/packages/hoppscotch-common/src/components/app/Footer.vue
@@ -149,9 +149,11 @@
           </template>
         </tippy>
         <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="`${t(
+            'app.shortcuts'
+          )} <kbd>${getSpecialKey()}</kbd><kbd>K</kbd>`"
           :icon="IconZap"
-          :title="t('app.shortcuts')"
           @click="showShortcuts = true"
         />
         <ButtonSecondary
@@ -223,6 +225,7 @@ import { useReadonlyStream } from "@composables/stream"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { TippyComponent } from "vue-tippy"
 import SmartItem from "@components/smart/Item.vue"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 const showShortcuts = ref(false)
diff --git a/packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue b/packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue
index a99b10693..631e06cfb 100644
--- a/packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-common/src/components/app/PowerSearchEntry.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex items-center flex-1 px-6 py-3 font-medium cursor-pointer transition search-entry focus:outline-none"
+    class="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
     :class="{ active: active }"
     tabindex="-1"
     @click="emit('action', shortcut.action)"
@@ -8,7 +8,7 @@
   >
     <component
       :is="shortcut.icon"
-      class="mr-4 opacity-50 transition svg-icons"
+      class="mr-4 transition opacity-50 svg-icons"
       :class="{ 'opacity-100 text-secondaryDark': active }"
     />
     <span
@@ -51,24 +51,18 @@ const emit = defineEmits<{
 <style lang="scss" scoped>
 .search-entry {
   @apply relative;
-
-  &::after {
-    @apply absolute;
-    @apply top-0;
-    @apply left-0;
-    @apply bottom-0;
-    @apply bg-transparent;
-    @apply z-2;
-    @apply w-0.5;
-    content: "";
-  }
+  @apply after:absolute;
+  @apply after:top-0;
+  @apply after:left-0;
+  @apply after:bottom-0;
+  @apply after:bg-transparent;
+  @apply after:z-2;
+  @apply after:w-0.5;
+  @apply after:content-DEFAULT;
 
   &.active {
     @apply bg-primaryLight;
-
-    &::after {
-      @apply bg-accentLight;
-    }
+    @apply after:bg-accentLight;
   }
 }
 </style>
diff --git a/packages/hoppscotch-common/src/components/app/Sidenav.vue b/packages/hoppscotch-common/src/components/app/Sidenav.vue
index 43166da25..212d997fc 100644
--- a/packages/hoppscotch-common/src/components/app/Sidenav.vue
+++ b/packages/hoppscotch-common/src/components/app/Sidenav.vue
@@ -78,26 +78,20 @@ const primaryNavigation = [
   @apply justify-center;
   @apply hover: (bg-primaryDark text-secondaryDark);
   @apply focus-visible: text-secondaryDark;
-
-  &::after {
-    @apply absolute;
-    @apply inset-x-0;
-    @apply md: inset-x-auto;
-    @apply md: inset-y-0;
-    @apply bottom-0;
-    @apply md: bottom-auto;
-    @apply md: left-0;
-    @apply z-2;
-    @apply h-0.5;
-    @apply md: h-full;
-    @apply w-full;
-    @apply md: w-0.5;
-    content: "";
-  }
-
-  &:focus::after {
-    @apply bg-divider;
-  }
+  @apply after:absolute;
+  @apply after:inset-x-0;
+  @apply after:md: inset-x-auto;
+  @apply after:md: inset-y-0;
+  @apply after:bottom-0;
+  @apply after:md: bottom-auto;
+  @apply after:md: left-0;
+  @apply after:z-2;
+  @apply after:h-0.5;
+  @apply after:md: h-full;
+  @apply after:w-full;
+  @apply after:md: w-0.5;
+  @apply after:content-DEFAULT;
+  @apply focus: after: bg-divider;
 
   .svg-icons {
     @apply opacity-75;
@@ -112,28 +106,22 @@ const primaryNavigation = [
     @apply text-secondaryDark;
     @apply bg-primaryLight;
     @apply hover: text-secondaryDark;
+    @apply after:bg-accent;
 
     .svg-icons {
       @apply opacity-100;
     }
-
-    &::after {
-      @apply bg-accent;
-    }
   }
 
   &.exact-active-link {
     @apply text-secondaryDark;
     @apply bg-primaryLight;
     @apply hover: text-secondaryDark;
+    @apply after:bg-accent;
 
     .svg-icons {
       @apply opacity-100;
     }
-
-    &::after {
-      @apply bg-accent;
-    }
   }
 }
 </style>
diff --git a/packages/hoppscotch-common/src/components/realtime/Subscription.vue b/packages/hoppscotch-common/src/components/realtime/Subscription.vue
index 1c2324134..4225146b0 100644
--- a/packages/hoppscotch-common/src/components/realtime/Subscription.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Subscription.vue
@@ -3,7 +3,7 @@
     <template #body>
       <div class="flex justify-between mb-4">
         <div
-          class="flex items-center border rounded divide-x border-divider divide-divider"
+          class="flex items-center border divide-x rounded border-divider divide-divider"
         >
           <label class="mx-4">
             {{ t("mqtt.qos") }}
@@ -61,7 +61,7 @@
             id="select-color"
             v-model="color"
             type="color"
-            class="w-8 h-8 p-1 rounded bg-primary"
+            class="w-8 h-8 p-1 rounded bg-primary color-picker"
           />
         </span>
       </div>
diff --git a/packages/hoppscotch-common/src/components/smart/Checkbox.vue b/packages/hoppscotch-common/src/components/smart/Checkbox.vue
index 2958658c4..c584fdab7 100644
--- a/packages/hoppscotch-common/src/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-common/src/components/smart/Checkbox.vue
@@ -9,6 +9,7 @@
       id="checkbox"
       type="checkbox"
       name="checkbox"
+      class="checkbox"
       :checked="on"
       @change="emit('change')"
     />
@@ -35,7 +36,7 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss" scoped>
-input[type="checkbox"] {
+.checkbox[type="checkbox"] {
   @apply appearance-none;
   @apply hidden;
 
@@ -44,7 +45,7 @@ input[type="checkbox"] {
     @apply cursor-pointer;
 
     &::before {
-      @apply border-divider border-2;
+      @apply border-2 border-divider;
       @apply rounded;
       @apply group-hover: border-accentDark;
       @apply inline-flex;
@@ -54,9 +55,9 @@ input[type="checkbox"] {
       @apply h-4;
       @apply w-4;
       @apply font-icon;
-      @apply mr-3;
+      @apply mr-2;
       @apply transition;
-      content: "\e876";
+      @apply content-["\e876"];
     }
   }
 
diff --git a/packages/hoppscotch-common/src/components/smart/Modal.vue b/packages/hoppscotch-common/src/components/smart/Modal.vue
index 24b7ad93a..674061b5b 100644
--- a/packages/hoppscotch-common/src/components/smart/Modal.vue
+++ b/packages/hoppscotch-common/src/components/smart/Modal.vue
@@ -31,7 +31,7 @@
         >
         <Transition name="bounce" appear>
           <div
-            class="inline-block w-full overflow-hidden text-left align-bottom border shadow-lg transition-all transform border-dividerDark bg-primary sm:rounded-xl sm:align-middle"
+            class="inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg sm:border border-dividerDark bg-primary sm:rounded-xl sm:align-middle"
             :class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]"
           >
             <div
diff --git a/packages/hoppscotch-common/src/components/smart/Tabs.vue b/packages/hoppscotch-common/src/components/smart/Tabs.vue
index 6fd6db964..cea8b3004 100644
--- a/packages/hoppscotch-common/src/components/smart/Tabs.vue
+++ b/packages/hoppscotch-common/src/components/smart/Tabs.vue
@@ -182,16 +182,6 @@ const selectTab = (id: string) => {
   @apply overflow-auto;
   @apply flex-shrink-0;
 
-  // &::after {
-  //   @apply absolute;
-  //   @apply inset-x-0;
-  //   @apply bottom-0;
-  //   @apply bg-dividerLight;
-  //   @apply z-1;
-  //   @apply h-0.5;
-  //   content: "";
-  // }
-
   .tab {
     @apply relative;
     @apply flex;
@@ -205,6 +195,15 @@ const selectTab = (id: string) => {
     @apply hover: text-secondaryDark;
     @apply focus: outline-none;
     @apply focus-visible: text-secondaryDark;
+    @apply after:absolute;
+    @apply after:left-4;
+    @apply after:right-4;
+    @apply after:bottom-0;
+    @apply after:bg-transparent;
+    @apply after:z-2;
+    @apply after:h-0.5;
+    @apply after:content-DEFAULT;
+    @apply focus: after: bg-divider;
 
     .tab-info {
       @apply inline-flex;
@@ -219,53 +218,29 @@ const selectTab = (id: string) => {
       @apply text-secondaryLight;
     }
 
-    &::after {
-      @apply absolute;
-      @apply left-4;
-      @apply right-4;
-      @apply bottom-0;
-      @apply bg-transparent;
-      @apply z-2;
-      @apply h-0.5;
-      content: "";
-    }
-
-    &:focus::after {
-      @apply bg-divider;
-    }
-
     &.active {
       @apply text-secondaryDark;
+      @apply after:bg-accent;
 
       .tab-info {
         @apply text-secondary;
         @apply border-dividerDark;
       }
-
-      &::after {
-        @apply bg-accent;
-      }
     }
 
     &.vertical {
       @apply p-2;
       @apply rounded;
-
-      &:focus::after {
-        @apply hidden;
-      }
+      @apply focus: after: hidden;
 
       &.active {
         @apply text-accent;
+        @apply after:hidden;
 
         .tab-info {
           @apply text-secondary;
           @apply border-dividerDark;
         }
-
-        &::after {
-          @apply hidden;
-        }
       }
     }
   }
diff --git a/packages/hoppscotch-common/src/components/smart/Windows.vue b/packages/hoppscotch-common/src/components/smart/Windows.vue
index d7b6272c0..07545ea04 100644
--- a/packages/hoppscotch-common/src/components/smart/Windows.vue
+++ b/packages/hoppscotch-common/src/components/smart/Windows.vue
@@ -9,7 +9,7 @@
             <draggable
               v-bind="dragOptions"
               :list="tabEntries"
-              :style="tabsWidth"
+              :style="tabStyles"
               :item-key="'window-'"
               class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight"
               @sort="sortTabs"
@@ -43,7 +43,7 @@
                     }"
                     :title="t('action.close')"
                     :class="[{ active: modelValue === tabID }, 'close']"
-                    class="rounded mx-2 !py-0.5 !px-1"
+                    class="mx-2 !p-0.5"
                     @click.stop="emit('removeTab', tabID)"
                   />
                 </button>
@@ -127,11 +127,11 @@ const emit = defineEmits<{
   (e: "addTab"): void
 }>()
 const tabEntries = ref<Array<[string, TabMeta]>>([])
-const tabsWidth = computed(() => ({
+const tabStyles = computed(() => ({
   maxWidth: `${tabEntries.value.length * 184}px`,
   width: "100%",
   minWidth: "0px",
-  transition: "max-width 0.2s",
+  // transition: "max-width 0.2s",
 }))
 const dragOptions = {
   group: "tabs",
@@ -201,16 +201,13 @@ const addTab = () => {
   @apply whitespace-nowrap;
   @apply overflow-auto;
   @apply flex-shrink-0;
-
-  &::after {
-    @apply absolute;
-    @apply inset-x-0;
-    @apply bottom-0;
-    @apply bg-dividerLight;
-    @apply z-10;
-    @apply h-0.25;
-    content: "";
-  }
+  @apply after:absolute;
+  @apply after:inset-x-0;
+  @apply after:bottom-0;
+  @apply after:bg-dividerLight;
+  @apply after:z-10;
+  @apply after:h-0.25;
+  @apply after:content-DEFAULT;
 
   .tab {
     @apply relative;
@@ -226,44 +223,20 @@ const addTab = () => {
     @apply hover:bg-primaryDark;
     @apply hover:text-secondary;
     @apply focus-visible:text-secondaryDark;
-
-    &::before {
-      @apply absolute;
-      @apply left-0;
-      @apply right-0;
-      @apply top-0;
-      @apply bg-transparent;
-      @apply z-2;
-      @apply h-0.5;
-      content: "";
-    }
-
-    // &::after {
-    //   @apply absolute;
-    //   @apply left-0;
-    //   @apply right-0;
-    //   @apply bottom-0;
-    //   @apply bg-divider;
-    //   @apply z-2;
-    //   @apply h-0.25;
-    //   content: "";
-    // }
-
-    &:focus::before {
-      @apply bg-divider;
-    }
+    @apply before:absolute;
+    @apply before:left-0;
+    @apply before:right-0;
+    @apply before:top-0;
+    @apply before:bg-transparent;
+    @apply before:z-2;
+    @apply before:h-0.5;
+    @apply before:content-DEFAULT;
+    @apply focus: before: bg-divider;
 
     &.active {
       @apply text-secondaryDark;
       @apply bg-primary;
-
-      &::before {
-        @apply bg-accent;
-      }
-
-      // &::after {
-      //   @apply bg-transparent;
-      // }
+      @apply before:bg-accent;
     }
 
     .close {
diff --git a/packages/hoppscotch-common/src/pages/profile.vue b/packages/hoppscotch-common/src/pages/profile.vue
index 8003147aa..d6f0c9a09 100644
--- a/packages/hoppscotch-common/src/pages/profile.vue
+++ b/packages/hoppscotch-common/src/pages/profile.vue
@@ -284,8 +284,8 @@
           </SmartTabs>
         </div>
       </div>
-      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     </div>
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>