refactor: lint + minor ui fixes

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

@@ -1,16 +1,7 @@
 <template>
   <div class="bg-error flex justify-between">
     <span
-      class="
-        group
-        relative
-        flex
-        items-center
-        justify-center
-        px-4
-        py-2
-        transition
-      "
+      class="group relative flex items-center justify-center px-4 py-2 transition"
     >
       <i class="material-icons mr-2">info_outline</i>
       <span class="text-secondaryDark">

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

@@ -53,12 +53,7 @@
             :title="t('team.invite_tooltip')"
             :label="t('team.invite')"
             svg="user-plus"
-            class="
-              !bg-green-500
-              !text-green-500
-              !bg-opacity-15
-              !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400
-            "
+            class="!bg-green-500 !text-green-500 !bg-opacity-15 !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400"
             @click.native="showTeamsModal = true"
           />
           <span class="px-2">

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

@@ -14,16 +14,7 @@
         autocomplete="off"
         name="command"
         :placeholder="`${t('app.type_a_command_search')}`"
-        class="
-          flex
-          border-dividerLight
-          text-secondaryDark
-          flex-shrink-0
-          p-6
-          text-base
-          bg-transparent
-          border-b
-        "
+        class="border-dividerLight text-secondaryDark flex flex-shrink-0 p-6 text-base bg-transparent border-b"
       />
       <AppFuse
         v-if="search && show"
@@ -33,22 +24,14 @@
       />
       <div
         v-else
-        class="
-          flex flex-col
-          divide-dividerLight
-          hide-scrollbar
-          flex-1
-          space-y-4
-          overflow-auto
-          divide-y
-        "
+        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 space-y-4 overflow-auto divide-y"
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
           class="flex flex-col"
         >
-          <h5 class="px-6 py-2 my-2 text-secondaryLight">
+          <h5 class="text-secondaryLight px-6 py-2 my-2">
             {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry

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

@@ -1,23 +1,13 @@
 <template>
   <button
-    class="
-      search-entry
-      focus:outline-none
-      flex
-      items-center
-      flex-1
-      px-6
-      py-2
-      transition
-      cursor-pointer
-    "
+    class="search-entry focus:outline-none flex items-center flex-1 px-6 py-2 transition cursor-pointer"
     :class="{ active: active }"
     tabindex="-1"
     @click="$emit('action', shortcut.action)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="mr-4 opacity-50 svg-icons transition"
+      class="svg-icons mr-4 transition opacity-50"
       :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />

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

@@ -2,62 +2,34 @@
   <AppSlideOver :show="show" @close="close()">
     <template #content>
       <div
-        class="
-          bg-primary
-          border-dividerLight
-          sticky
-          top-0
-          z-10
-          flex
-          items-center
-          justify-between
-          p-2
-          border-b
-        "
+        class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between p-2 border-b"
       >
-        <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
+        <h3 class="heading ml-4">{{ t("app.shortcuts") }}</h3>
         <div class="flex">
           <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
       </div>
-      <div class="border-b bg-primary border-dividerLight">
+      <div class="bg-primary border-dividerLight border-b">
         <div class="flex flex-col mx-6 my-4">
           <input
             v-model="filterText"
             type="search"
             autocomplete="off"
-            class="
-              bg-primaryLight
-              border-dividerLight
-              focus-visible:border-divider
-              flex
-              w-full
-              px-4
-              py-2
-              border
-              rounded
-            "
+            class="bg-primaryLight border-dividerLight focus-visible:border-divider flex w-full px-4 py-2 border rounded"
             :placeholder="`${t('action.search')}`"
           />
         </div>
       </div>
       <div
         v-if="filterText"
-        class="
-          flex flex-col
-          divide-dividerLight
-          hide-scrollbar
-          flex-1
-          overflow-auto
-          divide-y
-        "
+        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
       >
         <div
           v-for="(map, mapIndex) in searchResults"
           :key="`map-${mapIndex}`"
           class="px-6 py-4 space-y-4"
         >
-          <h1 class="font-semibold text-secondaryDark">
+          <h1 class="text-secondaryDark font-semibold">
             {{ t(map.item.section) }}
           </h1>
           <AppShortcutsEntry
@@ -68,16 +40,9 @@
         </div>
         <div
           v-if="searchResults.length === 0"
-          class="
-            flex
-            text-secondaryLight
-            flex-col
-            items-center
-            justify-center
-            p-4
-          "
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
-          <i class="pb-2 opacity-75 material-icons">manage_search</i>
+          <i class="material-icons pb-2 opacity-75">manage_search</i>
           <span class="text-center">
             {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
@@ -85,21 +50,14 @@
       </div>
       <div
         v-else
-        class="
-          flex flex-col
-          divide-dividerLight
-          hide-scrollbar
-          flex-1
-          overflow-auto
-          divide-y
-        "
+        class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
       >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"
           class="px-6 py-4 space-y-4"
         >
-          <h1 class="font-semibold text-secondaryDark">
+          <h1 class="text-secondaryDark font-semibold">
             {{ t(map.section) }}
           </h1>
           <AppShortcutsEntry

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

@@ -3,30 +3,14 @@
     <transition v-if="show" name="fade" appear>
       <div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
         <div
-          class="absolute inset-0 bg-primaryLight opacity-90"
+          class="bg-primaryLight opacity-90 absolute inset-0"
           tabindex="0"
           @click="close()"
         ></div>
       </div>
     </transition>
     <aside
-      class="
-        flex
-        bg-primary
-        w-96
-        fixed
-        top-0
-        right-0
-        z-30
-        flex-col
-        h-full
-        max-w-full
-        overflow-auto
-        transition
-        duration-300
-        ease-in-out
-        transform
-      "
+      class="bg-primary w-96 fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform"
       :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
     >
       <slot name="content"></slot>