chore: minor ui improvements

packages/hoppscotch-common/assets/scss/styles.scss

@@ -543,12 +543,16 @@ details[open] summary .indicator {
   @apply bg-accent #{!important};
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
+.color-picker[type="color"] {
-  @apply rounded;
+  @apply appearance-none;
-  padding: 0;
 }
 
-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;
 }

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']

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)

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;
-
+  @apply after:absolute;
-  &::after {
+  @apply after:top-0;
-    @apply absolute;
+  @apply after:left-0;
-    @apply top-0;
+  @apply after:bottom-0;
-    @apply left-0;
+  @apply after:bg-transparent;
-    @apply bottom-0;
+  @apply after:z-2;
-    @apply bg-transparent;
+  @apply after:w-0.5;
-    @apply z-2;
+  @apply after:content-DEFAULT;
-    @apply w-0.5;
-    content: "";
-  }
 
   &.active {
     @apply bg-primaryLight;
-
+    @apply after:bg-accentLight;
-    &::after {
-      @apply bg-accentLight;
-    }
   }
 }
 </style>

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;
-
+  @apply after:absolute;
-  &::after {
+  @apply after:inset-x-0;
-    @apply absolute;
+  @apply after:md: inset-x-auto;
-    @apply inset-x-0;
+  @apply after:md: inset-y-0;
-    @apply md: inset-x-auto;
+  @apply after:bottom-0;
-    @apply md: inset-y-0;
+  @apply after:md: bottom-auto;
-    @apply bottom-0;
+  @apply after:md: left-0;
-    @apply md: bottom-auto;
+  @apply after:z-2;
-    @apply md: left-0;
+  @apply after:h-0.5;
-    @apply z-2;
+  @apply after:md: h-full;
-    @apply h-0.5;
+  @apply after:w-full;
-    @apply md: h-full;
+  @apply after:md: w-0.5;
-    @apply w-full;
+  @apply after:content-DEFAULT;
-    @apply md: w-0.5;
+  @apply focus: after: bg-divider;
-    content: "";
-  }
-
-  &:focus::after {
-    @apply 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>

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>

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"];
     }
   }
 

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

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;
-
+      @apply focus: after: hidden;
-      &:focus::after {
-        @apply hidden;
-      }
 
       &.active {
         @apply text-accent;
+        @apply after:hidden;
 
         .tab-info {
           @apply text-secondary;
           @apply border-dividerDark;
         }
-
-        &::after {
-          @apply hidden;
-        }
       }
     }
   }

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;
-
+  @apply after:absolute;
-  &::after {
+  @apply after:inset-x-0;
-    @apply absolute;
+  @apply after:bottom-0;
-    @apply inset-x-0;
+  @apply after:bg-dividerLight;
-    @apply bottom-0;
+  @apply after:z-10;
-    @apply bg-dividerLight;
+  @apply after:h-0.25;
-    @apply z-10;
+  @apply after:content-DEFAULT;
-    @apply h-0.25;
-    content: "";
-  }
 
   .tab {
     @apply relative;
@@ -226,44 +223,20 @@ const addTab = () => {
     @apply hover:bg-primaryDark;
     @apply hover:text-secondary;
     @apply focus-visible:text-secondaryDark;
-
+    @apply before:absolute;
-    &::before {
+    @apply before:left-0;
-      @apply absolute;
+    @apply before:right-0;
-      @apply left-0;
+    @apply before:top-0;
-      @apply right-0;
+    @apply before:bg-transparent;
-      @apply top-0;
+    @apply before:z-2;
-      @apply bg-transparent;
+    @apply before:h-0.5;
-      @apply z-2;
+    @apply before:content-DEFAULT;
-      @apply h-0.5;
+    @apply focus: before: bg-divider;
-      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;
-    }
 
     &.active {
       @apply text-secondaryDark;
       @apply bg-primary;
-
+      @apply before:bg-accent;
-      &::before {
-        @apply bg-accent;
-      }
-
-      // &::after {
-      //   @apply bg-transparent;
-      // }
     }
 
     .close {

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>