refactor(ui): better spacing and font-weight

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

@@ -1,5 +1,5 @@
 <template>
-  <div key="outputHash">
+  <div key="outputHash" class="flex flex-col">
     <AppPowerSearchEntry
       v-for="(shortcut, shortcutIndex) in searchResults"
       :key="`shortcut-${shortcutIndex}`"

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

@@ -39,7 +39,7 @@
           svg="upload-cloud"
           :label="$t('header.save_workspace')"
           filled
-          class="hidden !font-semibold md:flex"
+          class="hidden md:flex"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
@@ -56,8 +56,8 @@
             class="
               !bg-green-500
               !text-green-500
-              !bg-opacity-10
-              !hover:bg-opacity-10 !hover:text-green-400 !hover:bg-green-400
+              !bg-opacity-15
+              !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400
             "
             @click.native="showTeamsModal = true"
           />

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

@@ -39,7 +39,11 @@
           hide-scrollbar
         "
       >
-        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
+        <div
+          v-for="(map, mapIndex) in mappings"
+          :key="`map-${mapIndex}`"
+          class="flex flex-col"
+        >
           <h5 class="my-2 text-secondaryLight py-2 px-6">
             {{ $t(map.section) }}
           </h5>

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

@@ -1,29 +1,27 @@
 <template>
-  <div
+  <button
     class="
       cursor-pointer
-      flex
+      flex flex-1
       py-2
       px-6
       transition
       items-center
-      group
-      focus:outline-none
-      focus-visible:bg-primaryLight
       search-entry
+      focus:outline-none
     "
-    :class="{ active, 'focus-visible': active }"
+    :class="{ active: active }"
     tabindex="-1"
     @click="$emit('action', shortcut.action)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="mr-4 opacity-50 transition svg-icons group-focus:opacity-100"
+      class="mr-4 opacity-50 transition svg-icons"
       :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />
     <span
-      class="flex flex-1 mr-4 transition"
+      class="flex flex-1 mr-4 font-medium transition"
       :class="{ 'text-secondaryDark': active }"
     >
       {{ $t(shortcut.label) }}
@@ -35,7 +33,7 @@
     >
       {{ key }}
     </span>
-  </div>
+  </button>
 </template>
 
 <script setup lang="ts">
@@ -62,8 +60,13 @@ defineProps<{
     content: "";
   }
 
-  &.active::after {
-    @apply bg-accentLight;
+  &.active {
+    @apply outline-none;
+    @apply bg-primaryLight;
+
+    &::after {
+      @apply bg-accentLight;
+    }
   }
 }
 

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

@@ -108,6 +108,7 @@ export default defineComponent({
   @apply p-4;
   @apply items-center;
   @apply justify-center;
+  @apply font-semibold;
   @apply hover:(bg-primaryLight text-secondaryDark);
   @apply focus:outline-none;
   @apply focus-visible:border-divider;

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

@@ -23,7 +23,6 @@
         <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
-            v-focus
             type="search"
             autocomplete="off"
             class="