refactor: minor ui improvements

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

@@ -14,7 +14,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
         {{ t("state.nothing_found") }} "{{ search }}"
       </span>
     </div>

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

@@ -14,8 +14,29 @@
         autocomplete="off"
         name="command"
         :placeholder="`${t('app.type_a_command_search')}`"
-        class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
+        class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
       />
+      <div
+        class="flex pb-4 px-4 border-b text-tiny border-dividerLight justify-between text-secondaryLight whitespace-nowrap overflow-auto flex-shrink-0 hide-scrollbar"
+      >
+        <div class="flex items-center">
+          <kbd class="shortcut-key">↑</kbd>
+          <kbd class="shortcut-key">↓</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_navigate") }}
+          </span>
+          <kbd class="shortcut-key">↩</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_select") }}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <kbd class="shortcut-key">ESC</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_close") }}
+          </span>
+        </div>
+      </div>
       <AppFuse
         v-if="search && show"
         :input="fuse"

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

@@ -43,7 +43,7 @@
           class="flex flex-col text-secondaryLight p-4 items-center justify-center"
         >
           <i class="opacity-75 pb-2 material-icons">manage_search</i>
-          <span class="text-center">
+          <span class="text-center my-2">
             {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
         </div>

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

@@ -103,9 +103,8 @@ const primaryNavigation = [
 
   span {
     @apply mt-2;
-    @apply font-font-medium;
-
-    font-size: calc(var(--body-font-size) - 0.062rem);
+    @apply font-medium;
+    @apply text-tiny;
   }
 
   &.exact-active-link {