chore: minor ui improvements

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;
-
-  &::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>

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>