From 80956fbd27170b0c004884db429b0926489495f6 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 31 Dec 2021 18:39:31 +0530
Subject: [PATCH] refactor: minor ui improvements

---
 .../hoppscotch-app/assets/scss/styles.scss    |  4 +-
 .../components/app/Announcement.vue           | 22 ++++----
 .../hoppscotch-app/components/app/Footer.vue  |  4 +-
 .../hoppscotch-app/components/app/Fuse.vue    |  4 +-
 .../hoppscotch-app/components/app/Header.vue  | 12 ++---
 .../components/app/Interceptor.vue            |  4 +-
 .../components/app/PowerSearch.vue            |  6 +--
 .../components/app/PowerSearchEntry.vue       |  6 +--
 .../hoppscotch-app/components/app/Share.vue   | 10 ++--
 .../components/app/Shortcuts.vue              | 20 +++----
 .../components/app/ShortcutsEntry.vue         |  2 +-
 .../hoppscotch-app/components/app/Sidenav.vue |  5 +-
 .../components/app/SlideOver.vue              |  6 +--
 .../components/button/Primary.vue             |  2 +-
 .../components/button/Secondary.vue           |  2 +-
 .../components/history/graphql/Card.vue       |  4 +-
 .../components/history/index.vue              | 52 ++++++++++++++-----
 .../components/history/rest/Card.vue          |  4 +-
 .../components/http/Request.vue               | 10 ++--
 .../components/smart/EnvInput.vue             |  1 -
 .../components/smart/Intersection.vue         |  1 +
 .../hoppscotch-app/components/smart/Item.vue  |  7 +--
 22 files changed, 103 insertions(+), 85 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 54a433491..4b632c84f 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -147,7 +147,7 @@ a {
   @apply shadow;
   @apply leading-body;
 
-  font-size: 88%;
+  font-size: 86%;
 
   kbd {
     @apply hidden;
@@ -232,7 +232,6 @@ button {
 }
 
 .floating-input ~ label {
-  @apply font-medium;
   @apply py-0.5;
   @apply px-2;
   @apply m-2;
@@ -451,7 +450,6 @@ pre.ace_editor {
 .shortcut-key {
   @apply inline-flex;
   @apply font-sans;
-  @apply font-medium;
   @apply text-tiny;
   @apply bg-divider;
   @apply rounded;
diff --git a/packages/hoppscotch-app/components/app/Announcement.vue b/packages/hoppscotch-app/components/app/Announcement.vue
index fab647c15..5ca43aeb2 100644
--- a/packages/hoppscotch-app/components/app/Announcement.vue
+++ b/packages/hoppscotch-app/components/app/Announcement.vue
@@ -1,16 +1,14 @@
 <template>
-  <div class="bg-error flex justify-between">
-    <span
-      class="flex py-2 px-4 transition justify-center text-tiny group relative items-center"
-    >
-      <i class="mr-2 material-icons">info_outline</i>
-      <span class="text-secondaryDark">
-        <span class="md:hidden">
-          {{ t("helpers.offline_short") }}
-        </span>
-        <span class="hidden md:inline">
-          {{ t("helpers.offline") }}
-        </span>
+  <div
+    class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
+  >
+    <i class="mr-2 material-icons">info_outline</i>
+    <span class="text-secondaryDark">
+      <span class="md:hidden">
+        {{ t("helpers.offline_short") }}
+      </span>
+      <span class="hidden md:inline">
+        {{ t("helpers.offline") }}
       </span>
     </span>
   </div>
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 2262a6a9b..2f0330b6b 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -143,7 +143,7 @@
               blank
               @click.native="options.tippy().hide()"
             />
-            <div class="flex opacity-50 py-2 px-4">
+            <div class="flex px-4 py-2 opacity-50">
               {{ `${t("app.name")} ${t("app.version")}` }}
             </div>
           </div>
@@ -170,7 +170,7 @@
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
         <span
-          class="transform transition"
+          class="transition transform"
           :class="{
             'rotate-180': SIDEBAR_ON_LEFT,
           }"
diff --git a/packages/hoppscotch-app/components/app/Fuse.vue b/packages/hoppscotch-app/components/app/Fuse.vue
index cb0e8088f..424b49683 100644
--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -11,9 +11,9 @@
     />
     <div
       v-if="searchResults.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
       <span class="my-2 text-center">
         {{ t("state.nothing_found") }} "{{ search }}"
       </span>
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 022917625..57e903346 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <header
-      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
     >
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
           label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
         />
         <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
       </div>
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
@@ -47,7 +47,7 @@
           :label="t('header.login')"
           @click.native="showLogin = true"
         />
-        <div v-else class="space-x-2 inline-flex items-center">
+        <div v-else class="inline-flex items-center space-x-2">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"
@@ -85,8 +85,8 @@
                   svg="user"
                 />
               </template>
-              <div class="flex text-tiny px-2 flex-col">
-                <span class="inline-flex truncate font-semibold">
+              <div class="flex flex-col px-2 text-tiny">
+                <span class="inline-flex font-semibold truncate">
                   {{ currentUser.displayName }}
                 </span>
                 <span class="inline-flex truncate text-secondaryLight">
diff --git a/packages/hoppscotch-app/components/app/Interceptor.vue b/packages/hoppscotch-app/components/app/Interceptor.vue
index f9979204c..6a993a37b 100644
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/components/app/Interceptor.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col space-y-4 p-4">
+  <div class="flex flex-col p-4 space-y-4">
     <div class="flex flex-col">
-      <h2 class="inline-flex font-semibold text-secondaryDark pb-1">
+      <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
         {{ t("settings.interceptor") }}
       </h2>
       <p class="inline-flex text-tiny">
diff --git a/packages/hoppscotch-app/components/app/PowerSearch.vue b/packages/hoppscotch-app/components/app/PowerSearch.vue
index e3aa8524e..b9ae1ca81 100644
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -15,7 +15,7 @@
           autocomplete="off"
           name="command"
           :placeholder="`${t('app.type_a_command_search')}`"
-          class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
+          class="flex flex-shrink-0 p-6 text-base bg-transparent text-secondaryDark"
         />
         <div
           class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar <sm:hidden"
@@ -47,14 +47,14 @@
       />
       <div
         v-else
-        class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar"
+        class="flex flex-col flex-1 space-y-4 overflow-auto divide-y divide-dividerLight hide-scrollbar"
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
           class="flex flex-col"
         >
-          <h5 class="my-2 text-secondaryLight py-2 px-6">
+          <h5 class="px-6 py-2 my-2 text-secondaryLight">
             {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry
diff --git a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
index c510e39d7..2859ee22b 100644
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -1,18 +1,18 @@
 <template>
   <button
-    class="cursor-pointer flex flex-1 py-3 px-6 transition items-center 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)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="mr-4 opacity-50 transition svg-icons"
+      class="mr-4 transition opacity-50 svg-icons"
       :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />
     <span
-      class="flex font-medium flex-1 mr-4 transition"
+      class="flex flex-1 mr-4 transition"
       :class="{ 'text-secondaryDark': active }"
     >
       {{ t(shortcut.label) }}
diff --git a/packages/hoppscotch-app/components/app/Share.vue b/packages/hoppscotch-app/components/app/Share.vue
index c6fa1a91e..23ec0bb9e 100644
--- a/packages/hoppscotch-app/components/app/Share.vue
+++ b/packages/hoppscotch-app/components/app/Share.vue
@@ -5,11 +5,11 @@
     @close="hideModal"
   >
     <template #body>
-      <p class="text-secondaryLight mb-8 px-2">
+      <p class="px-2 mb-8 text-secondaryLight">
         {{ t("app.invite_description") }}
       </p>
-      <div class="flex flex-col space-y-2 px-2">
-        <div class="grid gap-4 grid-cols-3">
+      <div class="flex flex-col px-2 space-y-2">
+        <div class="grid grid-cols-3 gap-4">
           <a
             v-for="(platform, index) in platforms"
             :key="`platform-${index}`"
@@ -17,13 +17,13 @@
             target="_blank"
             class="share-link"
           >
-            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <SmartIcon :name="platform.icon" class="w-6 h-6" />
             <span class="mt-3">
               {{ platform.name }}
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
+            <SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
             <span class="mt-3">
               {{ t("app.copy") }}
             </span>
diff --git a/packages/hoppscotch-app/components/app/Shortcuts.vue b/packages/hoppscotch-app/components/app/Shortcuts.vue
index 973ad29ee..143d78021 100644
--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -1,28 +1,28 @@
 <template>
   <AppSlideOver :show="show" @close="close()">
     <template #content>
-      <div class="bg-primary flex flex-col top-0 z-10 sticky">
+      <div class="sticky top-0 z-10 flex flex-col bg-primary">
         <div
-          class="border-b border-dividerLight flex p-2 items-center justify-between"
+          class="flex items-center justify-between p-2 border-b border-dividerLight"
         >
           <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
           <ButtonSecondary svg="x" @click.native="close()" />
         </div>
-        <div class="border-b border-dividerLight flex flex-col py-4 px-6">
+        <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
           <input
             v-model="filterText"
             type="search"
             autocomplete="off"
-            class="bg-primaryLight border border-dividerLight rounded flex py-2 px-4 focus-visible:border-divider"
+            class="flex px-4 py-2 border rounded bg-primaryLight border-dividerLight focus-visible:border-divider"
             :placeholder="`${t('action.search')}`"
           />
         </div>
       </div>
-      <div v-if="filterText" class="divide-dividerLight divide-y flex flex-col">
+      <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
         <div
           v-for="(map, mapIndex) in searchResults"
           :key="`map-${mapIndex}`"
-          class="space-y-4 py-4 px-6"
+          class="px-6 py-4 space-y-4"
         >
           <h1 class="font-semibold text-secondaryDark">
             {{ t(map.item.section) }}
@@ -35,19 +35,19 @@
         </div>
         <div
           v-if="searchResults.length === 0"
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
         >
-          <i class="opacity-75 pb-2 material-icons">manage_search</i>
+          <i class="pb-2 opacity-75 material-icons">manage_search</i>
           <span class="my-2 text-center">
             {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
         </div>
       </div>
-      <div v-else class="divide-dividerLight divide-y flex flex-col">
+      <div v-else class="flex flex-col divide-y divide-dividerLight">
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
-          class="space-y-4 py-4 px-6"
+          class="px-6 py-4 space-y-4"
         >
           <h1 class="font-semibold text-secondaryDark">
             {{ t(map.section) }}
diff --git a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue b/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
index 28c9942b3..6d25c1d3a 100644
--- a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
+++ b/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex py-1 items-center">
+  <div class="flex items-center py-1">
     <span class="flex flex-1 mr-4">
       {{ t(shortcut.label) }}
     </span>
diff --git a/packages/hoppscotch-app/components/app/Sidenav.vue b/packages/hoppscotch-app/components/app/Sidenav.vue
index a520dafe5..48c4bb92e 100644
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none">
+  <aside class="flex justify-between h-full md:flex-col">
+    <nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"
@@ -100,7 +100,6 @@ const primaryNavigation = [
 
   span {
     @apply mt-2;
-    @apply font-medium;
     @apply text-tiny;
   }
 
diff --git a/packages/hoppscotch-app/components/app/SlideOver.vue b/packages/hoppscotch-app/components/app/SlideOver.vue
index 9855f9302..975359f91 100644
--- a/packages/hoppscotch-app/components/app/SlideOver.vue
+++ b/packages/hoppscotch-app/components/app/SlideOver.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <transition v-if="show" name="fade" appear>
-      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
+      <div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
         <div
-          class="bg-primaryLight opacity-90 inset-0 absolute"
+          class="absolute inset-0 bg-primaryLight opacity-90"
           tabindex="0"
           @click="close()"
         ></div>
       </div>
     </transition>
     <aside
-      class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto hide-scrollbar"
+      class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform bg-primary w-96 hide-scrollbar"
       :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
     >
       <slot name="content"></slot>
diff --git a/packages/hoppscotch-app/components/button/Primary.vue b/packages/hoppscotch-app/components/button/Primary.vue
index a6049367c..5dd5fdff4 100644
--- a/packages/hoppscotch-app/components/button/Primary.vue
+++ b/packages/hoppscotch-app/components/button/Primary.vue
@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-bold py-2 transition inline-flex items-center justify-center focus:outline-none focus-visible:bg-accentDark"
+    class="inline-flex items-center justify-center py-2 font-bold transition focus:outline-none focus-visible:bg-accentDark"
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
diff --git a/packages/hoppscotch-app/components/button/Secondary.vue b/packages/hoppscotch-app/components/button/Secondary.vue
index 7d8218028..7f838ab49 100644
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -3,7 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap focus:outline-none"
+    class="inline-flex items-center justify-center py-2 font-semibold transition whitespace-nowrap focus:outline-none"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
diff --git a/packages/hoppscotch-app/components/history/graphql/Card.vue b/packages/hoppscotch-app/components/history/graphql/Card.vue
index 64e590a51..b03b2d706 100644
--- a/packages/hoppscotch-app/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-app/components/history/graphql/Card.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col group">
     <div class="flex items-center">
       <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 pl-4 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
         data-testid="restore_history_entry"
         @click="useEntry"
       >
@@ -46,7 +46,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer font-mono text-secondaryLight px-4 truncate whitespace-pre"
+        class="px-4 font-mono truncate whitespace-pre cursor-pointer text-secondaryLight"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span
diff --git a/packages/hoppscotch-app/components/history/index.vue b/packages/hoppscotch-app/components/history/index.vue
index 5d80e03cf..86f411abc 100644
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky">
+    <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
       <input
         v-model="filterText"
         type="search"
         autocomplete="off"
-        class="bg-transparent flex w-full p-4 py-2"
+        class="flex w-full p-4 py-2 bg-transparent"
         :placeholder="`${t('action.search')}`"
       />
       <div class="flex">
@@ -27,19 +27,32 @@
       </div>
     </div>
     <div class="flex flex-col">
-      <div
+      <details
         v-for="(filteredHistoryGroup, filteredHistoryGroupIndex) in groupByDate(
           filteredHistory,
           'updatedOn'
         )"
         :key="`filteredHistoryGroup-${filteredHistoryGroupIndex}`"
         class="flex flex-col"
+        open
       >
-        <span
-          class="ml-4 capitalize-first px-3 align-start my-2 py-1 text-secondaryLight bg-primaryLight truncate rounded-l-full flex-inline text-tiny"
+        <summary
+          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer text-secondaryLight text-tiny group"
         >
-          {{ filteredHistoryGroupIndex }}
-        </span>
+          <span
+            class="px-4 py-2 truncate transition group-hover:text-secondary capitalize-first"
+          >
+            {{ filteredHistoryGroupIndex }}
+          </span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            svg="trash"
+            color="red"
+            :title="$t('action.remove')"
+            class="hidden group-hover:inline-flex"
+            @click.native="deleteBattleHistoryEntry(filteredHistoryGroup)"
+          />
+        </summary>
         <div
           v-for="(entry, index) in filteredHistoryGroup"
           :key="`entry-${index}`"
@@ -54,28 +67,28 @@
             @use-entry="useHistory(entry)"
           />
         </div>
-      </div>
+      </details>
     </div>
     <div
       v-if="!(filteredHistory.length !== 0 || history.length === 0)"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
       <span class="my-2 text-center">
         {{ t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>
     <div
       v-if="history.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
         :src="`/images/states/${$colorMode.value}/history.svg`"
         loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
         :alt="`${t('empty.history')}`"
       />
-      <span class="text-center mb-4">
+      <span class="mb-4 text-center">
         {{ t("empty.history") }}
       </span>
     </div>
@@ -161,6 +174,19 @@ const useHistory = (entry: any) => {
   if (props.page === "rest") setRESTRequest(entry.request)
 }
 
+const deleteBattleHistoryEntry = (entries: number[]) => {
+  if (props.page === "rest") {
+    entries.forEach((entry: any) => {
+      deleteRESTHistoryEntry(entry)
+    })
+  } else {
+    entries.forEach((entry: any) => {
+      deleteGraphqlHistoryEntry(entry)
+    })
+  }
+  toast.success(`${t("state.deleted")}`)
+}
+
 const deleteHistory = (entry: any) => {
   if (props.page === "rest") deleteRESTHistoryEntry(entry)
   else deleteGraphqlHistoryEntry(entry)
diff --git a/packages/hoppscotch-app/components/history/rest/Card.vue b/packages/hoppscotch-app/components/history/rest/Card.vue
index 4cdb6df67..045439b11 100644
--- a/packages/hoppscotch-app/components/history/rest/Card.vue
+++ b/packages/hoppscotch-app/components/history/rest/Card.vue
@@ -2,7 +2,7 @@
   <div class="flex items-stretch group">
     <span
       v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-      class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+      class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="`${duration}`"
@@ -11,7 +11,7 @@
       {{ entry.request.method }}
     </span>
     <span
-      class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+      class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
       data-testid="restore_history_entry"
       @click="$emit('use-entry')"
     >
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index cee567127..f14e5ed6c 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="bg-primary flex space-x-2 p-4 top-0 z-10 sticky overflow-x-auto hide-scrollbar"
+    class="sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
   >
     <div class="flex flex-1">
-      <div class="flex relative">
+      <div class="relative flex">
         <label for="method">
           <tippy
             ref="methodOptions"
@@ -16,7 +16,7 @@
               <span class="select-wrapper">
                 <input
                   id="method"
-                  class="bg-primaryLight border border-divider rounded-l cursor-pointer flex font-semibold text-secondaryDark py-2 px-4 w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
+                  class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark"
                   :value="newMethod"
                   :readonly="!isCustomMethod"
                   :placeholder="`${t('request.method')}`"
@@ -59,7 +59,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-r-none flex-1 min-w-20"
+        class="flex-1 rounded-r-none min-w-20"
         :label="`${!loading ? t('action.send') : t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
@@ -124,7 +124,7 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded rounded-r-none ml-2"
+        class="ml-2 rounded rounded-r-none"
         :label="
           windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
             ? `${t('request.save')}`
diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue
index 063fd7f60..a922c6ba6 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -484,7 +484,6 @@ export default defineComponent({
 [contenteditable] {
   @apply select-text;
   @apply text-secondaryDark;
-  @apply font-medium;
 
   &:empty {
     @apply leading-loose;
diff --git a/packages/hoppscotch-app/components/smart/Intersection.vue b/packages/hoppscotch-app/components/smart/Intersection.vue
index a7a4e3ad3..a532e70bb 100644
--- a/packages/hoppscotch-app/components/smart/Intersection.vue
+++ b/packages/hoppscotch-app/components/smart/Intersection.vue
@@ -3,6 +3,7 @@
     <slot></slot>
   </div>
 </template>
+
 <script lang="ts">
 /*
   Implements a wrapper listening to viewport intersections via
diff --git a/packages/hoppscotch-app/components/smart/Item.vue b/packages/hoppscotch-app/components/smart/Item.vue
index c1dfd612e..c018b212f 100644
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -50,10 +50,7 @@
       <div class="font-semibold truncate">
         {{ label }}
       </div>
-      <p
-        v-if="description"
-        class="font-medium my-2 text-left text-secondaryLight"
-      >
+      <p v-if="description" class="my-2 text-left text-secondaryLight">
         {{ description }}
       </p>
     </div>
@@ -64,7 +61,7 @@
     >
       {{ infoIcon }}
     </i>
-    <div v-if="shortcut.length" class="ml-2 <sm:hidden">
+    <div v-if="shortcut.length" class="ml-2 <sm:hidden font-medium">
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"