refactor: lint + minor ui fixes

packages/hoppscotch-app/assets/scss/styles.scss

@@ -37,7 +37,8 @@
 }
 
 ::selection {
-  @apply bg-divider;
+  @apply bg-accentDark;
+  @apply text-accentContrast;
 }
 
 input::placeholder,

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>

packages/hoppscotch-app/components/button/Primary.vue

@@ -3,16 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="
-      focus:outline-none
-      focus-visible:bg-accentDark
-      inline-flex
-      items-center
-      justify-center
-      py-2
-      font-bold
-      transition
-    "
+    class="focus:outline-none focus-visible:bg-accentDark inline-flex items-center justify-center py-2 font-bold transition"
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
@@ -38,7 +29,7 @@
   >
     <span
       v-if="!loading"
-      class="inline-flex items-center justify-center whitespace-nowrap"
+      class="whitespace-nowrap inline-flex items-center justify-center"
       :class="{ 'flex-row-reverse': reverse }"
     >
       <i
@@ -65,7 +56,7 @@
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="inline-flex px-1 ml-1 rounded bg-accentLight"
+          class="bg-accentLight inline-flex px-1 ml-1 rounded"
         >
           {{ key }}
         </kbd>

packages/hoppscotch-app/components/button/Secondary.vue

@@ -3,18 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="
-      whitespace-nowrap
-      hover:bg-primaryDark
-      focus:outline-none
-      focus-visible:bg-primaryDark
-      inline-flex
-      items-center
-      justify-center
-      py-2
-      font-semibold
-      transition
-    "
+    class="whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark inline-flex items-center justify-center py-2 font-semibold transition"
     :class="[
       color
         ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
@@ -28,7 +17,7 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
-      { '!bg-primaryDark': filled },
+      { '!bg-primaryLight !hover:bg-primaryDark': filled },
     ]"
     :disabled="disabled"
   >
@@ -56,14 +45,7 @@
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
-        class="
-          bg-dividerLight
-          text-secondaryLight
-          inline-flex
-          px-1
-          ml-1
-          rounded
-        "
+        class="bg-dividerLight text-secondaryLight inline-flex px-1 ml-1 rounded"
       >
         {{ key }}
       </kbd>

packages/hoppscotch-app/components/collections/ChooseType.vue

@@ -18,19 +18,7 @@
               type="text"
               autocomplete="off"
               autofocus
-              class="
-                border-dividerLight
-                hover:bg-primaryDark
-                flex
-                w-full
-                px-4
-                py-2
-                font-semibold
-                bg-transparent
-                border-t
-                appearance-none
-                cursor-pointer
-              "
+              class="border-dividerLight hover:bg-primaryDark flex w-full px-4 py-2 font-semibold bg-transparent border-t appearance-none cursor-pointer"
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
               <option

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -20,16 +20,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -39,7 +30,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               path: `${collectionIndex}`,
@@ -100,16 +91,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -150,27 +132,12 @@
           v-if="
             collection.folders.length === 0 && collection.requests.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -20,16 +20,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -41,7 +32,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -96,16 +87,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -149,27 +131,12 @@
             folder.requests &&
             folder.requests.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -9,15 +9,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
-          flex
-          items-center
-          justify-center
-          w-16
-          px-2
-          truncate
-          cursor-pointer
-        "
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <SmartIcon
@@ -27,16 +19,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -47,7 +30,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -4,17 +4,7 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="
-        flex
-        divide-dividerLight
-        border-dividerLight
-        sticky
-        top-0
-        z-10
-        flex-col
-        border-b
-        divide-y
-      "
+      class="divide-dividerLight border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -72,7 +62,7 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
@@ -91,9 +81,9 @@
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      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>

packages/hoppscotch-app/components/collections/index.vue

@@ -4,19 +4,7 @@
     :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="
-        flex
-        divide-dividerLight
-        bg-primary
-        border-dividerLight
-        sticky
-        top-0
-        z-10
-        flex-col
-        border-b
-        divide-y
-        rounded-t
-      "
+      class="divide-dividerLight bg-primary border-dividerLight sticky top-0 z-10 flex flex-col border-b divide-y rounded-t"
     >
       <div v-if="!saveRequest" class="search-wrappe">
         <input
@@ -110,7 +98,7 @@
     </div>
     <div
       v-if="filteredCollections.length === 0 && filterText.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/pack.svg`"
@@ -143,9 +131,9 @@
     </div>
     <div
       v-if="filterText.length !== 0 && filteredCollections.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      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>

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -20,16 +20,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.name }} </span>
@@ -56,7 +47,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -119,16 +110,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -176,27 +158,12 @@
             (collection.requests == undefined ||
               collection.requests.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -20,16 +20,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -41,7 +32,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -101,16 +92,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -158,27 +140,12 @@
             folder.requests &&
             folder.requests.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="group flex items-center"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -9,15 +9,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
-          flex
-          items-center
-          justify-center
-          w-16
-          px-2
-          truncate
-          cursor-pointer
-        "
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
@@ -32,17 +24,7 @@
         </span>
       </span>
       <span
-        class="
-          group-hover:text-secondaryDark
-          flex
-          items-center
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -62,7 +44,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div class="group flex items-center">
       <span
         class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
@@ -12,16 +12,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate"> {{ collection.title }} </span>
@@ -48,7 +39,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -115,16 +106,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -170,27 +152,12 @@
             (collection.requests == undefined ||
               collection.requests.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.collection')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div class="group flex items-center">
       <span
         class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
@@ -12,16 +12,7 @@
         />
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="toggleShowChildren()"
       >
         <span class="truncate">
@@ -34,7 +25,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
           :title="$t('folder.new')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
         <span>
@@ -98,16 +89,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="
-          flex
-          w-1
-          transform
-          transition
-          cursor-nsResize
-          ml-5.5
-          bg-dividerLight
-          hover:scale-x-125 hover:bg-dividerDark
-        "
+        class="flex w-1 transform transition cursor-nsResize ml-5.5 bg-dividerLight hover:scale-x-125 hover:bg-dividerDark"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
@@ -151,27 +133,12 @@
             (folder.children == undefined || folder.children.length === 0) &&
             (folder.requests == undefined || folder.requests.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              mb-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
             :alt="$t('empty.folder')"
           />
           <span class="text-center">

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -1,16 +1,8 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div class="group flex items-center">
       <span
-        class="
-          flex
-          items-center
-          justify-center
-          w-16
-          px-2
-          truncate
-          cursor-pointer
-        "
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
       >
@@ -25,17 +17,7 @@
         </span>
       </span>
       <span
-        class="
-          group-hover:text-secondaryDark
-          flex
-          items-center
-          flex-1
-          min-w-0
-          py-2
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex items-center flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
         @click="!doc ? selectRequest() : {}"
       >
         <span class="truncate"> {{ request.name }} </span>
@@ -54,7 +36,7 @@
           v-tippy="{ theme: 'tooltip' }"
           svg="rotate-ccw"
           :title="$t('action.restore')"
-          class="hidden group-hover:inline-flex"
+          class="group-hover:inline-flex hidden"
           @click.native="!doc ? selectRequest() : {}"
         />
         <span>

packages/hoppscotch-app/components/environments/Edit.vue

@@ -43,11 +43,11 @@
             />
           </div>
         </div>
-        <div class="border rounded divide-dividerLight border-divider divide-y">
+        <div class="divide-dividerLight border-divider border divide-y rounded">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
-            class="flex divide-dividerLight divide-x"
+            class="divide-dividerLight flex divide-x"
           >
             <input
               v-model="variable.key"
@@ -74,27 +74,12 @@
           </div>
           <div
             v-if="vars.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"
           >
             <img
               :src="`/images/states/${$colorMode.value}/blockchain.svg`"
               loading="lazy"
-              class="
-                object-contain
-                inline-flex
-                flex-col
-                object-center
-                w-16
-                h-16
-                my-4
-              "
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="$t('empty.environments')"
             />
             <span class="pb-4 text-center">

packages/hoppscotch-app/components/environments/Environment.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center group">
+  <div class="group flex items-center">
     <span
       class="flex items-center justify-center px-4 cursor-pointer"
       @click="$emit('edit-environment')"
@@ -7,16 +7,7 @@
       <SmartIcon class="svg-icons" name="layers" />
     </span>
     <span
-      class="
-        flex
-        group-hover:text-secondaryDark
-        flex-1
-        min-w-0
-        py-2
-        pr-2
-        transition
-        cursor-pointer
-      "
+      class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
       @click="$emit('edit-environment')"
     >
       <span class="truncate">

packages/hoppscotch-app/components/environments/index.vue

@@ -1,18 +1,12 @@
 <template>
   <AppSection :label="`${$t('environment.title')}`">
-    <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
+    <div class="bg-primary sticky top-0 z-10 flex flex-col rounded-t">
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
           <span
             v-tippy="{ theme: 'tooltip' }"
             :title="`${$t('environment.select')}`"
-            class="
-              border-dividerLight
-              select-wrapper
-              flex-1
-              bg-transparent
-              border-b
-            "
+            class="border-dividerLight select-wrapper flex-1 bg-transparent border-b"
           >
             <ButtonSecondary
               v-if="selectedEnvironmentIndex !== -1"
@@ -51,7 +45,7 @@
           "
         />
       </tippy>
-      <div class="flex justify-between flex-1 border-b border-dividerLight">
+      <div class="border-dividerLight flex justify-between flex-1 border-b">
         <ButtonSecondary
           svg="plus"
           :label="`${$t('action.new')}`"
@@ -92,7 +86,7 @@
       <EnvironmentsEnvironment
         environment-index="Global"
         :environment="globalEnvironment"
-        class="border-b border-dashed border-dividerLight"
+        class="border-dividerLight border-b border-dashed"
         @edit-environment="editEnvironment('Global')"
       />
       <EnvironmentsEnvironment
@@ -105,7 +99,7 @@
     </div>
     <div
       v-if="environments.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"

packages/hoppscotch-app/components/graphql/Field.vue

@@ -21,28 +21,19 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="py-2 text-secondaryLight field-desc"
+      class="text-secondaryLight field-desc py-2"
     >
       {{ gqlField.description }}
     </div>
     <div
       v-if="gqlField.isDeprecated"
-      class="
-        field-deprecated
-        inline-block
-        px-2
-        py-1
-        my-1
-        text-black
-        bg-yellow-200
-        rounded
-      "
+      class="field-deprecated inline-block px-2 py-1 my-1 text-black bg-yellow-200 rounded"
     >
       {{ $t("state.deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
       <h5 class="my-2">Arguments:</h5>
-      <div class="pl-4 border-l-2 border-divider">
+      <div class="border-divider pl-4 border-l-2">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
           <span>
             {{ field.name }}:
@@ -53,7 +44,7 @@
           </span>
           <div
             v-if="field.description"
-            class="py-2 text-secondaryLight field-desc"
+            class="text-secondaryLight field-desc py-2"
           >
             {{ field.description }}
           </div>

packages/hoppscotch-app/components/graphql/Request.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky top-0 z-10 flex p-4 bg-primary">
+  <div class="bg-primary sticky top-0 z-10 flex p-4">
     <div class="inline-flex flex-1 space-x-2">
       <input
         id="url"
@@ -7,18 +7,7 @@
         type="url"
         autocomplete="off"
         spellcheck="false"
-        class="
-          bg-primaryLight
-          border-divider
-          text-secondaryDark
-          hover:border-dividerDark
-          focus-visible:bg-transparent focus-visible:border-dividerDark
-          w-full
-          px-4
-          py-2
-          border
-          rounded
-        "
+        class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
         :placeholder="`${t('request.url')}`"
         :disabled="connected"
         @keyup.enter="onConnectClick"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -19,22 +19,9 @@
       <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
-            class="
-              bg-primary
-              border-dividerLight
-              top-upperSecondaryStickyFold
-              gqlRunQuery
-              sticky
-              z-10
-              flex
-              items-center
-              justify-between
-              flex-1
-              pl-4
-              border-b
-            "
+            class="bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="text-secondaryLight font-semibold">
               {{ t("request.query") }}
             </label>
             <div class="flex">
@@ -66,21 +53,9 @@
       <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
         <AppSection label="variables">
           <div
-            class="
-              bg-primary
-              border-dividerLight
-              top-upperSecondaryStickyFold
-              sticky
-              z-10
-              flex
-              items-center
-              justify-between
-              flex-1
-              pl-4
-              border-b
-            "
+            class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="text-secondaryLight font-semibold">
               {{ t("request.variables") }}
             </label>
             <div class="flex">
@@ -106,21 +81,9 @@
       <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
         <AppSection label="headers">
           <div
-            class="
-              bg-primary
-              border-dividerLight
-              top-upperSecondaryStickyFold
-              sticky
-              z-10
-              flex
-              items-center
-              justify-between
-              flex-1
-              pl-4
-              border-b
-            "
+            class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="text-secondaryLight font-semibold">
               {{ t("tab.headers") }}
             </label>
             <div class="flex">
@@ -158,13 +121,7 @@
             <div
               v-for="(header, index) in headers"
               :key="`header-${String(index)}`"
-              class="
-                divide-dividerLight
-                border-dividerLight
-                flex
-                border-b
-                divide-x
-              "
+              class="divide-dividerLight border-dividerLight flex border-b divide-x"
             >
               <SmartAutoComplete
                 :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -242,27 +199,12 @@
             </div>
             <div
               v-if="headers.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"
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
-                class="
-                  object-contain
-                  inline-flex
-                  flex-col
-                  object-center
-                  w-16
-                  h-16
-                  my-4
-                "
+                class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
                 :alt="`${t('empty.headers')}`"
               />
               <span class="pb-4 text-center">

packages/hoppscotch-app/components/graphql/Response.vue

@@ -9,21 +9,9 @@
     </div>
     <div v-else-if="responseString">
       <div
-        class="
-          bg-primary
-          border-dividerLight
-          sticky
-          top-0
-          z-10
-          flex
-          items-center
-          justify-between
-          flex-1
-          pl-4
-          border-b
-        "
+        class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ t("response.title") }}
         </label>
         <div class="flex">
@@ -54,18 +42,10 @@
     </div>
     <div
       v-else
-      class="
-        flex
-        text-secondaryLight
-        flex-col
-        items-center
-        justify-center
-        flex-1
-        p-4
-      "
+      class="text-secondaryLight flex flex-col items-center justify-center flex-1 p-4"
     >
       <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end text-right space-y-4">
+        <div class="flex flex-col items-end space-y-4 text-right">
           <span class="flex items-center flex-1">
             {{ t("shortcut.general.command_menu") }}
           </span>

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -34,27 +34,12 @@
             subscriptionFields.length === 0 &&
             graphqlTypes.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"
         >
           <img
             :src="`/images/states/${$colorMode.value}/add_comment.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              my-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
             :alt="`${t('empty.documentation')}`"
           />
           <span class="mb-4 text-center">
@@ -62,7 +47,7 @@
           </span>
         </div>
         <div v-else>
-          <div class="sticky top-0 z-10 flex bg-primary">
+          <div class="bg-primary sticky top-0 z-10 flex">
             <input
               v-model="graphqlFieldsFilterText"
               type="search"
@@ -155,21 +140,9 @@
       <AppSection ref="schema" label="schema">
         <div
           v-if="schemaString"
-          class="
-            bg-primary
-            border-dividerLight
-            sticky
-            top-0
-            z-10
-            flex
-            items-center
-            justify-between
-            flex-1
-            pl-4
-            border-b
-          "
+          class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
         >
-          <label class="font-semibold text-secondaryLight">
+          <label class="text-secondaryLight font-semibold">
             {{ t("graphql.schema") }}
           </label>
           <div class="flex">
@@ -206,27 +179,12 @@
         <div v-if="schemaString" ref="schemaEditor"></div>
         <div
           v-else
-          class="
-            flex
-            text-secondaryLight
-            flex-col
-            items-center
-            justify-center
-            p-4
-          "
+          class="text-secondaryLight flex flex-col items-center justify-center p-4"
         >
           <img
             :src="`/images/states/${$colorMode.value}/blockchain.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-16
-              h-16
-              my-4
-            "
+            class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
             :alt="`${t('empty.schema')}`"
           />
           <span class="mb-4 text-center">

packages/hoppscotch-app/components/history/graphql/Card.vue

@@ -1,18 +1,8 @@
 <template>
-  <div class="flex flex-col group">
+  <div class="group flex flex-col">
     <div class="flex items-center">
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          py-2
-          pl-4
-          pr-2
-          transition
-          cursor-pointer
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer"
         data-testid="restore_history_entry"
         @click="useEntry"
       >
@@ -25,7 +15,7 @@
         svg="trash"
         color="red"
         :title="$t('action.remove')"
-        class="hidden group-hover:inline-flex"
+        class="group-hover:inline-flex hidden"
         data-testid="delete_history_entry"
         @click.native="$emit('delete-entry')"
       />
@@ -33,7 +23,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="expand ? $t('hide.more') : $t('show.more')"
         :svg="expand ? 'minimize-2' : 'maximize-2'"
-        class="hidden group-hover:inline-flex"
+        class="group-hover:inline-flex hidden"
         @click.native="expand = !expand"
       />
       <ButtonSecondary
@@ -50,7 +40,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="px-4 truncate whitespace-pre cursor-pointer text-secondaryLight"
+        class="text-secondaryLight px-4 truncate whitespace-pre cursor-pointer"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span

packages/hoppscotch-app/components/history/rest/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center group">
+  <div class="group flex items-center">
     <span
       class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
       :class="entryStatus.className"
@@ -10,16 +10,7 @@
       {{ entry.request.method }}
     </span>
     <span
-      class="
-        flex
-        group-hover:text-secondaryDark
-        flex-1
-        min-w-0
-        py-2
-        pr-2
-        transition
-        cursor-pointer
-      "
+      class="group-hover:text-secondaryDark flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer"
       data-testid="restore_history_entry"
       :title="`${duration}`"
       @click="$emit('use-entry')"
@@ -33,7 +24,7 @@
       svg="trash"
       color="red"
       :title="$t('action.remove')"
-      class="hidden group-hover:inline-flex"
+      class="group-hover:inline-flex hidden"
       data-testid="delete_history_entry"
       @click.native="$emit('delete-entry')"
     />

packages/hoppscotch-app/components/http/Authorization.vue

@@ -1,22 +1,10 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ $t("authorization.type") }}
         </label>
         <tippy
@@ -95,7 +83,7 @@
     </div>
     <div
       v-if="authType === 'none'"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/login.svg`"
@@ -116,16 +104,16 @@
         class="mb-4"
       />
     </div>
-    <div v-if="authType === 'basic'" class="flex border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div class="flex border-b border-dividerLight">
+    <div v-if="authType === 'basic'" class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="basicUsername"
             :placeholder="$t('authorization.username')"
             styles="bg-transparent flex flex-1 py-1 px-4"
           />
         </div>
-        <div class="flex border-b border-dividerLight">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="basicPassword"
             :placeholder="$t('authorization.password')"
@@ -134,20 +122,10 @@
         </div>
       </div>
       <div
-        class="
-          bg-primary
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          z-9
-          sticky
-          h-full
-          p-4
-          overflow-auto
-        "
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="p-2">
-          <div class="pb-2 text-secondaryLight">
+          <div class="text-secondaryLight pb-2">
             {{ $t("helpers.authorization") }}
           </div>
           <SmartAnchor
@@ -159,9 +137,9 @@
         </div>
       </div>
     </div>
-    <div v-if="authType === 'bearer'" class="flex border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div class="flex border-b border-dividerLight">
+    <div v-if="authType === 'bearer'" class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="bearerToken"
             placeholder="Token"
@@ -170,20 +148,10 @@
         </div>
       </div>
       <div
-        class="
-          bg-primary
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          z-9
-          sticky
-          h-full
-          p-4
-          overflow-auto
-        "
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="p-2">
-          <div class="pb-2 text-secondaryLight">
+          <div class="text-secondaryLight pb-2">
             {{ $t("helpers.authorization") }}
           </div>
           <SmartAnchor
@@ -197,10 +165,10 @@
     </div>
     <div
       v-if="authType === 'oauth-2'"
-      class="flex border-b border-dividerLight"
+      class="border-dividerLight flex border-b"
     >
-      <div class="w-2/3 border-r border-dividerLight">
-        <div class="flex border-b border-dividerLight">
+      <div class="border-dividerLight w-2/3 border-r">
+        <div class="border-dividerLight flex border-b">
           <SmartEnvInput
             v-model="oauth2Token"
             placeholder="Token"
@@ -210,20 +178,10 @@
         <HttpOAuth2Authorization />
       </div>
       <div
-        class="
-          bg-primary
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          z-9
-          sticky
-          h-full
-          p-4
-          overflow-auto
-        "
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
         <div class="p-2">
-          <div class="pb-2 text-secondaryLight">
+          <div class="text-secondaryLight pb-2">
             {{ $t("helpers.authorization") }}
           </div>
           <SmartAnchor

packages/hoppscotch-app/components/http/Body.vue

@@ -1,22 +1,10 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ $t("request.content_type") }}
         </label>
         <tippy
@@ -65,7 +53,7 @@
     <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
     <div
       v-if="contentType == null"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -1,21 +1,9 @@
 <template>
   <AppSection label="bodyParameters">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperTertiaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ $t("request.body") }}
       </label>
       <div class="flex">
@@ -43,7 +31,7 @@
     <div
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
-      class="flex border-b divide-dividerLight border-dividerLight divide-x"
+      class="divide-dividerLight border-dividerLight flex border-b divide-x"
     >
       <SmartEnvInput
         v-model="param.key"
@@ -153,7 +141,7 @@
     </div>
     <div
       v-if="bodyParams.length === 0"
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"

packages/hoppscotch-app/components/http/Headers.vue

@@ -1,21 +1,9 @@
 <template>
   <AppSection label="headers">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
@@ -53,7 +41,7 @@
       <div
         v-for="(header, index) in headers$"
         :key="`header-${index}`"
-        class="flex border-b divide-dividerLight border-dividerLight divide-x"
+        class="divide-dividerLight border-dividerLight flex border-b divide-x"
       >
         <SmartAutoComplete
           :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -137,27 +125,12 @@
       </div>
       <div
         v-if="headers$.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"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_category.svg`"
           loading="lazy"
-          class="
-            object-contain
-            inline-flex
-            flex-col
-            object-center
-            w-16
-            h-16
-            my-4
-          "
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.headers')}`"
         />
         <span class="pb-4 text-center">

packages/hoppscotch-app/components/http/Parameters.vue

@@ -1,21 +1,9 @@
 <template>
   <AppSection label="parameters">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.parameter_list") }}
       </label>
       <div class="flex">
@@ -53,7 +41,7 @@
       <div
         v-for="(param, index) in params$"
         :key="`param-${index}`"
-        class="flex border-b divide-dividerLight border-dividerLight divide-x"
+        class="divide-dividerLight border-dividerLight flex border-b divide-x"
       >
         <SmartEnvInput
           v-model="param.key"
@@ -130,27 +118,12 @@
       </div>
       <div
         v-if="params$.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"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_files.svg`"
           loading="lazy"
-          class="
-            object-contain
-            inline-flex
-            flex-col
-            object-center
-            w-16
-            h-16
-            my-4
-          "
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="`${t('empty.parameters')}`"
         />
         <span class="pb-4 text-center">

packages/hoppscotch-app/components/http/PreRequestScript.vue

@@ -1,21 +1,9 @@
 <template>
   <AppSection id="script" :label="`${t('preRequest.script')}`">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
@@ -41,24 +29,14 @@
         />
       </div>
     </div>
-    <div class="flex border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
+    <div class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
         <div ref="preRrequestEditor"></div>
       </div>
       <div
-        class="
-          bg-primary
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          z-9
-          sticky
-          h-full
-          p-4
-          overflow-auto
-        "
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
-        <div class="pb-2 text-secondaryLight">
+        <div class="text-secondaryLight pb-2">
           {{ t("helpers.pre_request_script") }}
         </div>
         <SmartAnchor
@@ -66,7 +44,7 @@
           to="https://docs.hoppscotch.io/features/pre-request-script"
           blank
         />
-        <h4 class="pt-6 font-bold text-secondaryLight">
+        <h4 class="text-secondaryLight pt-6 font-bold">
           {{ t("preRequest.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">

packages/hoppscotch-app/components/http/RawBody.vue

@@ -1,21 +1,9 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperTertiaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperTertiaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.raw_body") }}
       </label>
       <div class="flex">

packages/hoppscotch-app/components/http/Request.vue

@@ -1,16 +1,6 @@
 <template>
   <div
-    class="
-      bg-primary
-      hide-scrollbar
-      sticky
-      top-0
-      z-10
-      flex
-      p-4
-      space-x-2
-      overflow-x-auto
-    "
+    class="bg-primary hide-scrollbar sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto"
   >
     <div class="flex flex-1">
       <div class="relative flex">
@@ -26,22 +16,7 @@
               <span class="select-wrapper">
                 <input
                   id="method"
-                  class="
-                    bg-primaryLight
-                    border-divider
-                    text-secondaryDark
-                    w-26
-                    hover:border-dividerDark
-                    focus-visible:bg-transparent
-                    focus-visible:border-dividerDark
-                    flex
-                    px-4
-                    py-2
-                    font-semibold
-                    border
-                    rounded-l
-                    cursor-pointer
-                  "
+                  class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
                   :value="newMethod"
                   :readonly="!isCustomMethod"
                   :placeholder="`${t('request.method')}`"
@@ -83,7 +58,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="flex-1 rounded-r-none min-w-20"
+        class="min-w-20 flex-1 rounded-r-none"
         :label="`${!loading ? t('action.send') : t('action.cancel')}`"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
@@ -164,7 +139,7 @@
             name="request-name"
             type="text"
             autocomplete="off"
-            class="mb-2 input"
+            class="input mb-2"
             @keyup.enter="saveOptions.tippy().hide()"
           />
           <SmartItem

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -1,31 +1,13 @@
 <template>
   <div
-    class="
-      bg-primary
-      hide-scrollbar
-      whitespace-nowrap
-      sticky
-      top-0
-      z-10
-      flex
-      items-center
-      p-4
-      overflow-auto
-    "
+    class="bg-primary hide-scrollbar whitespace-nowrap sticky top-0 z-10 flex items-center p-4 overflow-auto"
   >
     <div
       v-if="response == null"
-      class="
-        flex
-        text-secondaryLight
-        flex-col
-        items-center
-        justify-center
-        flex-1
-      "
+      class="text-secondaryLight flex flex-col items-center justify-center flex-1"
     >
       <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end text-right space-y-4">
+        <div class="flex flex-col items-end space-y-4 text-right">
           <span class="flex items-center flex-1">
             {{ t("shortcut.request.send_request") }}
           </span>
@@ -80,21 +62,13 @@
         <img
           :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
           loading="lazy"
-          class="
-            object-contain
-            inline-flex
-            flex-col
-            object-center
-            w-32
-            h-32
-            my-4
-          "
+          class="inline-flex flex-col object-contain object-center w-32 h-32 my-4"
           :alt="`${t('error.network_fail')}`"
         />
         <span class="mb-2 font-semibold text-center">
           {{ t("error.network_fail") }}
         </span>
-        <span class="max-w-sm mb-4 text-center text-secondaryLight">
+        <span class="text-secondaryLight max-w-sm mb-4 text-center">
           {{ t("helpers.network_fail") }}
         </span>
         <AppInterceptor />
@@ -102,7 +76,7 @@
       <div
         v-if="response.type === 'success' || 'fail'"
         :class="statusCategory.className"
-        class="font-semibold space-x-4"
+        class="space-x-4 font-semibold"
       >
         <span v-if="response.statusCode">
           <span class="text-secondary"> {{ t("response.status") }}: </span>

packages/hoppscotch-app/components/http/TestResult.vue

@@ -7,21 +7,9 @@
       "
     >
       <div
-        class="
-          bg-primary
-          border-dividerLight
-          top-lowerSecondaryStickyFold
-          sticky
-          z-10
-          flex
-          items-center
-          justify-between
-          flex-1
-          pl-4
-          border-b
-        "
+        class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="text-secondaryLight font-semibold">
           {{ t("test.report") }}
         </label>
         <ButtonSecondary
@@ -31,7 +19,7 @@
           @click.native="clearContent()"
         />
       </div>
-      <div class="border-b divide-dividerLight border-dividerLight divide-y-4">
+      <div class="divide-dividerLight border-dividerLight border-b divide-y-4">
         <div v-if="testResults.tests" class="divide-dividerLight divide-y-4">
           <HttpTestResultEntry
             v-for="(result, index) in testResults.tests"
@@ -53,7 +41,7 @@
             class="flex items-center px-4 py-2"
           >
             <i
-              class="mr-4 material-icons"
+              class="material-icons mr-4"
               :class="
                 result.status === 'pass' ? 'text-green-500' : 'text-red-500'
               "
@@ -76,7 +64,7 @@
     </div>
     <div
       v-else
-      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
       <img
         :src="`/images/states/${$colorMode.value}/validation.svg`"

packages/hoppscotch-app/components/http/Tests.vue

@@ -1,21 +1,9 @@
 <template>
   <AppSection id="script" :label="`${t('test.script')}`">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-upperSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-upperSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("test.javascript_code") }}
       </label>
       <div class="flex">
@@ -41,24 +29,14 @@
         />
       </div>
     </div>
-    <div class="flex border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
+    <div class="border-dividerLight flex border-b">
+      <div class="border-dividerLight w-2/3 border-r">
         <div ref="testScriptEditor"></div>
       </div>
       <div
-        class="
-          bg-primary
-          top-upperTertiaryStickyFold
-          min-w-46
-          max-w-1/3
-          z-9
-          sticky
-          h-full
-          p-4
-          overflow-auto
-        "
+        class="bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9 sticky h-full p-4 overflow-auto"
       >
-        <div class="pb-2 text-secondaryLight">
+        <div class="text-secondaryLight pb-2">
           {{ t("helpers.post_request_tests") }}
         </div>
         <SmartAnchor
@@ -66,7 +44,7 @@
           to="https://docs.hoppscotch.io/features/tests"
           blank
         />
-        <h4 class="pt-6 font-bold text-secondaryLight">
+        <h4 class="text-secondaryLight pt-6 font-bold">
           {{ t("test.snippets") }}
         </h4>
         <div class="flex flex-col pt-4">

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -1,21 +1,9 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-lowerSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
@@ -32,40 +20,17 @@
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
-      class="
-        divide-dividerLight
-        border-dividerLight
-        group
-        flex
-        border-b
-        divide-x
-      "
+      class="divide-dividerLight border-dividerLight group flex border-b divide-x"
     >
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          px-4
-          py-2
-          transition
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
       >
         <span class="truncate rounded-sm select-all">
           {{ header.key }}
         </span>
       </span>
       <span
-        class="
-          flex
-          group-hover:text-secondaryDark
-          flex-1
-          min-w-0
-          px-4
-          py-2
-          transition
-        "
+        class="group-hover:text-secondaryDark flex flex-1 min-w-0 px-4 py-2 transition"
       >
         <span class="truncate rounded-sm select-all">
           {{ header.value }}

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,21 +1,9 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-lowerSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("response.body") }}
       </label>
       <div class="flex">

packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue

@@ -1,21 +1,9 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-lowerSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ $t("response.body") }}
       </label>
       <div class="flex">
@@ -30,7 +18,7 @@
       </div>
     </div>
     <img
-      class="flex flex-1 max-w-full border-b border-dividerLight"
+      class="border-dividerLight flex flex-1 max-w-full border-b"
       :src="imageSource"
       loading="lazy"
       :alt="imageSource"

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -1,21 +1,9 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-lowerSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">{{
+      <label class="text-secondaryLight font-semibold">{{
         t("response.body")
       }}</label>
       <div class="flex">
@@ -48,20 +36,7 @@
     <div ref="jsonResponse"></div>
     <div
       v-if="outlinePath"
-      class="
-        flex
-        bg-primaryLight
-        border-dividerLight
-        flex-nowrap
-        hide-scrollbar
-        sticky
-        bottom-0
-        z-10
-        flex-1
-        px-2
-        overflow-auto
-        border-t
-      "
+      class="bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t"
     >
       <div
         v-for="(item, index) in outlinePath"
@@ -140,7 +115,7 @@
         </tippy>
         <i
           v-if="index + 1 !== outlinePath.length"
-          class="opacity-50 text-secondaryLight material-icons"
+          class="text-secondaryLight material-icons opacity-50"
           >chevron_right</i
         >
       </div>

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -1,21 +1,9 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-lowerSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("response.body") }}
       </label>
       <div class="flex">

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -1,21 +1,9 @@
 <template>
   <div>
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        top-lowerSecondaryStickyFold
-        sticky
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight top-lowerSecondaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="text-secondaryLight font-semibold">
         {{ t("response.body") }}
       </label>
       <div class="flex">

packages/hoppscotch-app/components/profile/Picture.vue

@@ -1,16 +1,7 @@
 <template>
   <div class="relative flex items-center justify-center w-5 h-5 cursor-pointer">
     <img
-      class="
-        object-cover
-        bg-primaryDark
-        absolute
-        object-center
-        w-5
-        h-5
-        transition
-        rounded-full
-      "
+      class="bg-primaryDark absolute object-cover object-center w-5 h-5 transition rounded-full"
       :src="url"
       :alt="alt"
       loading="lazy"
@@ -18,16 +9,7 @@
     <div class="absolute inset-0 rounded-full shadow-inner"></div>
     <span
       v-if="indicator"
-      class="
-        border-primary
-        rounded-full
-        border-2
-        h-2.5
-        -top-0.5
-        -right-0.5
-        w-2.5
-        absolute
-      "
+      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
       :class="indicatorStyles"
     ></span>
   </div>

packages/hoppscotch-app/components/realtime/Log.vue

@@ -1,21 +1,9 @@
 <template>
   <div class="flex flex-col">
     <div
-      class="
-        bg-primary
-        border-dividerLight
-        sticky
-        top-0
-        z-10
-        flex
-        items-center
-        justify-between
-        flex-1
-        pl-4
-        border-b
-      "
+      class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b"
     >
-      <label for="log" class="py-2 font-semibold text-secondaryLight">
+      <label for="log" class="text-secondaryLight py-2 font-semibold">
         {{ title }}
       </label>
     </div>

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -9,10 +9,13 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="request">
             <div
-              class="sticky top-0 z-10 flex flex-col p-4 bg-primary space-y-4"
+              class="bg-primary sticky top-0 z-10 flex flex-col p-4 space-y-4"
             >
               <div class="inline-flex flex-1 space-x-2">
                 <input
@@ -21,19 +24,7 @@
                   type="url"
                   autocomplete="off"
                   spellcheck="false"
-                  class="
-                    bg-primaryLight
-                    border-divider
-                    text-secondaryDark
-                    hover:border-dividerDark
-                    focus-visible:bg-transparent
-                    focus-visible:border-dividerDark
-                    w-full
-                    px-4
-                    py-2
-                    border
-                    rounded
-                  "
+                  class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
                   :placeholder="$t('mqtt.url')"
                   :disabled="connectionState"
                   @keyup.enter="validUrl ? toggleConnection() : null"
@@ -72,7 +63,10 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="response">
             <RealtimeLog :title="$t('mqtt.log')" :log="log" />
           </AppSection>
@@ -87,7 +81,7 @@
     >
       <AppSection label="messages">
         <div class="flex inline-flex flex-col flex-1 p-4">
-          <label for="pub_topic" class="font-semibold text-secondaryLight">
+          <label for="pub_topic" class="text-secondaryLight font-semibold">
             {{ $t("mqtt.topic") }}
           </label>
         </div>
@@ -103,7 +97,7 @@
           />
         </div>
         <div class="flex items-center justify-between flex-1 p-4">
-          <label for="mqtt-message" class="font-semibold text-secondaryLight">
+          <label for="mqtt-message" class="text-secondaryLight font-semibold">
             {{ $t("mqtt.communication") }}
           </label>
         </div>
@@ -126,18 +120,9 @@
           />
         </div>
         <div
-          class="
-            flex-col
-            border-dividerLight
-            flex
-            inline-flex
-            flex-1
-            p-4
-            mt-4
-            border-t
-          "
+          class="border-dividerLight flex inline-flex flex-col flex-1 p-4 mt-4 border-t"
         >
-          <label for="sub_topic" class="font-semibold text-secondaryLight">
+          <label for="sub_topic" class="text-secondaryLight font-semibold">
             {{ $t("mqtt.topic") }}
           </label>
         </div>

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -9,9 +9,12 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="request">
-            <div class="sticky top-0 z-10 flex p-4 bg-primary">
+            <div class="bg-primary sticky top-0 z-10 flex p-4">
               <div class="inline-flex flex-1 space-x-2">
                 <div class="flex flex-1">
                   <label for="client-version">
@@ -28,22 +31,7 @@
                             id="client-version"
                             v-tippy="{ theme: 'tooltip' }"
                             title="socket.io-client version"
-                            class="
-                              bg-primaryLight
-                              border-divider
-                              text-secondaryDark
-                              w-26
-                              hover:border-dividerDark
-                              focus-visible:bg-transparent
-                              focus-visible:border-dividerDark
-                              flex
-                              px-4
-                              py-2
-                              font-semibold
-                              border
-                              rounded-l
-                              cursor-pointer
-                            "
+                            class="bg-primaryLight border-divider text-secondaryDark w-26 hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex px-4 py-2 font-semibold border rounded-l cursor-pointer"
                             :value="`Client ${clientVersion}`"
                             readonly
                             :disabled="connectionState"
@@ -65,20 +53,7 @@
                     autocomplete="off"
                     spellcheck="false"
                     :class="{ error: !urlValid }"
-                    class="
-                      flex
-                      bg-primaryLight
-                      border-divider
-                      text-secondaryDark
-                      hover:border-dividerDark
-                      focus-visible:bg-transparent
-                      focus-visible:border-dividerDark
-                      flex-1
-                      w-full
-                      px-4
-                      py-2
-                      border
-                    "
+                    class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border"
                     :placeholder="$t('socketio.url')"
                     :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -86,21 +61,7 @@
                   <input
                     id="socketio-path"
                     v-model="path"
-                    class="
-                      flex
-                      bg-primaryLight
-                      border-divider
-                      text-secondaryDark
-                      hover:border-dividerDark
-                      focus-visible:bg-transparent
-                      focus-visible:border-dividerDark
-                      flex-1
-                      w-full
-                      px-4
-                      py-2
-                      border
-                      rounded-r
-                    "
+                    class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
                     spellcheck="false"
                     :disabled="connectionState"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -123,7 +84,10 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="response">
             <RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
           </AppSection>
@@ -138,7 +102,7 @@
     >
       <AppSection label="messages">
         <div class="flex inline-flex flex-col flex-1 p-4">
-          <label for="events" class="font-semibold text-secondaryLight">
+          <label for="events" class="text-secondaryLight font-semibold">
             {{ $t("socketio.events") }}
           </label>
         </div>
@@ -155,7 +119,7 @@
           />
         </div>
         <div class="flex items-center justify-between flex-1 p-4">
-          <label class="font-semibold text-secondaryLight">
+          <label class="text-secondaryLight font-semibold">
             {{ $t("socketio.communication") }}
           </label>
           <div class="flex">

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -1,7 +1,7 @@
 <template>
   <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-    <Pane class="hide-scrollbar !overflow-auto">
-      <div class="sticky top-0 z-10 flex p-4 bg-primary">
+    <Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
+      <div class="bg-primary sticky top-0 z-10 flex p-4">
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
             <input
@@ -10,57 +10,21 @@
               type="url"
               autocomplete="off"
               :class="{ error: !serverValid }"
-              class="
-                flex
-                bg-primaryLight
-                border-divider
-                text-secondaryDark
-                hover:border-dividerDark
-                focus-visible:bg-transparent focus-visible:border-dividerDark
-                flex-1
-                w-full
-                px-4
-                py-2
-                border
-                rounded-l
-              "
+              class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-l"
               :placeholder="$t('sse.url')"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
             />
             <label
               for="event-type"
-              class="
-                border-t
-                bg-primaryLight
-                border-divider
-                text-secondaryLight
-                px-4
-                py-2
-                font-semibold
-                truncate
-                border-b
-              "
+              class="bg-primaryLight border-divider text-secondaryLight px-4 py-2 font-semibold truncate border-t border-b"
             >
               {{ $t("sse.event_type") }}
             </label>
             <input
               id="event-type"
               v-model="eventType"
-              class="
-                flex
-                bg-primaryLight
-                border-divider
-                text-secondaryDark
-                hover:border-dividerDark
-                focus-visible:bg-transparent focus-visible:border-dividerDark
-                flex-1
-                w-full
-                px-4
-                py-2
-                border
-                rounded-r
-              "
+              class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark flex flex-1 w-full px-4 py-2 border rounded-r"
               spellcheck="false"
               :disabled="connectionSSEState"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -80,7 +44,7 @@
         </div>
       </div>
     </Pane>
-    <Pane class="hide-scrollbar !overflow-auto">
+    <Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
       <AppSection label="response">
         <ul>
           <li>

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -9,26 +9,17 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="request">
-            <div class="sticky top-0 z-10 flex p-4 bg-primary">
+            <div class="bg-primary sticky top-0 z-10 flex p-4">
               <div class="inline-flex flex-1 space-x-2">
                 <input
                   id="websocket-url"
                   v-model="url"
-                  class="
-                    bg-primaryLight
-                    border-divider
-                    text-secondaryDark
-                    hover:border-dividerDark
-                    focus-visible:bg-transparent
-                    focus-visible:border-dividerDark
-                    w-full
-                    px-4
-                    py-2
-                    border
-                    rounded
-                  "
+                  class="bg-primaryLight border-divider text-secondaryDark hover:border-dividerDark focus-visible:bg-transparent focus-visible:border-dividerDark w-full px-4 py-2 border rounded"
                   type="url"
                   autocomplete="off"
                   spellcheck="false"
@@ -53,21 +44,9 @@
               </div>
             </div>
             <div
-              class="
-                bg-primary
-                border-dividerLight
-                top-upperPrimaryStickyFold
-                sticky
-                z-10
-                flex
-                items-center
-                justify-between
-                flex-1
-                pl-4
-                border-b
-              "
+              class="bg-primary border-dividerLight top-upperPrimaryStickyFold sticky z-10 flex items-center justify-between flex-1 pl-4 border-b"
             >
-              <label class="font-semibold text-secondaryLight">
+              <label class="text-secondaryLight font-semibold">
                 {{ $t("websocket.protocols") }}
               </label>
               <div class="flex">
@@ -88,13 +67,7 @@
             <div
               v-for="(protocol, index) of protocols"
               :key="`protocol-${index}`"
-              class="
-                divide-dividerLight
-                border-dividerLight
-                flex
-                border-b
-                divide-x
-              "
+              class="divide-dividerLight border-dividerLight flex border-b divide-x"
             >
               <input
                 v-model="protocol.value"
@@ -141,27 +114,12 @@
             </div>
             <div
               v-if="protocols.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"
             >
               <img
                 :src="`/images/states/${$colorMode.value}/add_category.svg`"
                 loading="lazy"
-                class="
-                  object-contain
-                  inline-flex
-                  flex-col
-                  object-center
-                  w-16
-                  h-16
-                  my-4
-                "
+                class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
                 :alt="$t('empty.protocols')"
               />
               <span class="mb-4 text-center">
@@ -170,7 +128,10 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="response">
             <RealtimeLog
               :title="$t('websocket.log')"
@@ -190,7 +151,7 @@
         <div class="flex inline-flex flex-col flex-1 p-4">
           <label
             for="websocket-message"
-            class="font-semibold text-secondaryLight"
+            class="text-secondaryLight font-semibold"
           >
             {{ $t("websocket.communication") }}
           </label>

packages/hoppscotch-app/components/smart/Checkbox.vue

@@ -1,15 +1,6 @@
 <template>
   <div
-    class="
-      flex-nowrap
-      group
-      hover:text-secondaryDark
-      inline-flex
-      items-center
-      justify-center
-      transition
-      cursor-pointer
-    "
+    class="flex-nowrap group hover:text-secondaryDark inline-flex items-center justify-center transition cursor-pointer"
     @click="$emit('change')"
   >
     <input

packages/hoppscotch-app/components/smart/Item.vue

@@ -3,18 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="
-      hover:bg-primaryDark hover:text-secondaryDark
-      focus:outline-none
-      focus-visible:bg-primaryDark focus-visible:text-secondaryDark
-      inline-flex
-      items-center
-      flex-shrink-0
-      px-4
-      py-2
-      transition
-      rounded
-    "
+    class="hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded"
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
@@ -53,7 +42,7 @@
         class="svg-icons"
       />
     </span>
-    <SmartSpinner v-else class="mr-4 text-secondaryDark" />
+    <SmartSpinner v-else class="text-secondaryDark mr-4" />
     <div
       class="inline-flex items-start flex-1 truncate"
       :class="{ 'flex-col': description }"
@@ -63,14 +52,14 @@
       </div>
       <p
         v-if="description"
-        class="my-2 font-medium text-left text-secondaryLight"
+        class="text-secondaryLight my-2 font-medium text-left"
       >
         {{ description }}
       </p>
     </div>
     <i
       v-if="infoIcon"
-      class="items-center self-center ml-6 material-icons"
+      class="material-icons items-center self-center ml-6"
       :class="{ 'text-accent': activeInfoIcon }"
     >
       {{ infoIcon }}

packages/hoppscotch-app/components/smart/Modal.vue

@@ -2,14 +2,14 @@
   <transition name="fade" appear @leave="onTransitionLeaveStart">
     <div
       ref="modal"
-      class="fixed inset-0 z-10 z-50 overflow-y-auto hide-scrollbar transition"
+      class="hide-scrollbar fixed inset-0 z-10 z-50 overflow-y-auto transition"
     >
       <div
-        class="flex items-end justify-center min-h-screen text-center sm:block"
+        class="sm:block flex items-end justify-center min-h-screen text-center"
       >
         <transition name="fade" appear>
           <div
-            class="fixed inset-0 bg-primaryLight opacity-90 transition"
+            class="bg-primaryLight opacity-90 fixed inset-0 transition"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -18,7 +18,7 @@
         </transition>
         <span
           v-if="placement === 'center'"
-          class="hidden sm:h-screen sm:inline-block sm:align-middle"
+          class="sm:h-screen sm:inline-block sm:align-middle hidden"
           aria-hidden="true"
           >&#8203;</span
         >
@@ -32,18 +32,7 @@
           leave-to-class="scale-95 translate-y-4"
         >
           <div
-            class="
-              bg-primary
-              sm:align-middle sm:rounded-xl
-              inline-block
-              w-full
-              overflow-hidden
-              text-left
-              align-bottom
-              transition-all
-              transform
-              shadow-lg
-            "
+            class="bg-primary sm:align-middle sm:rounded-xl inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg"
             :class="[
               { 'mt-24 md:mb-8': placement === 'top' },
               { 'p-4': !fullWidth },
@@ -66,7 +55,7 @@
               </span>
             </div>
             <div
-              class="flex flex-col overflow-y-auto max-h-md hide-scrollbar"
+              class="max-h-md hide-scrollbar flex flex-col overflow-y-auto"
               :class="{ 'py-2': !fullWidth }"
             >
               <slot name="body"></slot>

packages/hoppscotch-app/components/tab/Primary.vue

@@ -3,16 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="
-      focus:outline-none
-      inline-flex
-      items-center
-      px-4
-      py-2
-      truncate
-      transition
-      rounded
-    "
+    class="focus:outline-none inline-flex items-center px-4 py-2 truncate transition rounded"
     :class="[
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`

packages/hoppscotch-app/components/tab/Secondary.vue

@@ -3,19 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="
-      hover:translate-x-2
-      focus:outline-none
-      focus-visible:translate-x-2
-      inline-flex
-      items-center
-      flex-1
-      py-2
-      font-semibold
-      truncate
-      transition
-      transform
-    "
+    class="hover:translate-x-2 focus:outline-none focus-visible:translate-x-2 inline-flex items-center flex-1 py-2 font-semibold truncate transition transform"
     :class="[
       label ? 'px-3' : 'px-2',
       active

packages/hoppscotch-app/components/teams/Edit.vue

@@ -47,31 +47,16 @@
             E.isRight(teamDetails.data) &&
             teamDetails.data.right.team.teamMembers
           "
-          class="border rounded divide-dividerLight border-divider divide-y"
+          class="divide-dividerLight border-divider border divide-y rounded"
         >
           <div
             v-if="teamDetails.data.right.team.teamMembers === 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"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
-              class="
-                object-contain
-                inline-flex
-                flex-col
-                object-center
-                w-16
-                h-16
-                my-4
-              "
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
               :alt="`${t('empty.members')}`"
             />
             <span class="pb-4 text-center">
@@ -91,7 +76,7 @@
             <div
               v-for="(member, index) in membersList"
               :key="`member-${index}`"
-              class="flex divide-dividerLight divide-x"
+              class="divide-dividerLight flex divide-x"
             >
               <input
                 class="flex flex-1 px-4 py-2 bg-transparent"
@@ -111,13 +96,7 @@
                   <template #trigger>
                     <span class="select-wrapper">
                       <input
-                        class="
-                          flex flex-1
-                          px-4
-                          py-2
-                          bg-transparent
-                          cursor-pointer
-                        "
+                        class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                         :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"
                         :value="
@@ -175,7 +154,7 @@
           v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
           class="flex flex-col items-center"
         >
-          <i class="mb-4 material-icons">help_outline</i>
+          <i class="material-icons mb-4">help_outline</i>
           {{ t("error.something_went_wrong") }}
         </div>
       </div>

packages/hoppscotch-app/components/teams/Invite.vue

@@ -3,7 +3,7 @@
     <template #body>
       <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
         <div class="flex flex-col items-center justify-center max-w-md">
-          <SmartIcon class="w-6 h-6 text-accent" name="users" />
+          <SmartIcon class="text-accent w-6 h-6" name="users" />
           <h3 class="my-2 text-lg text-center">
             {{ t("team.we_sent_invite_link") }}
           </h3>
@@ -12,16 +12,7 @@
           </p>
         </div>
         <div
-          class="
-            flex
-            border-dividerLight
-            flex-col
-            p-4
-            mt-8
-            space-y-6
-            border
-            rounded
-          "
+          class="border-dividerLight flex flex-col p-4 mt-8 space-y-6 border rounded"
         >
           <div
             v-for="(invitee, index) in sendInvitesResult"
@@ -29,7 +20,7 @@
           >
             <p class="flex items-center">
               <i
-                class="mr-4 material-icons"
+                class="material-icons mr-4"
                 :class="
                   invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
                 "
@@ -60,7 +51,7 @@
             {{ t("team.pending_invites") }}
           </label>
         </div>
-        <div class="border rounded divide-dividerLight border-divider divide-y">
+        <div class="divide-dividerLight border-divider border divide-y rounded">
           <div
             v-if="pendingInvites.loading"
             class="flex items-center justify-center p-4"
@@ -75,32 +66,18 @@
                 v-for="(invitee, index) in pendingInvites.data.right.team
                   .teamInvitations"
                 :key="`invitee-${index}`"
-                class="flex divide-dividerLight divide-x"
+                class="divide-dividerLight flex divide-x"
               >
                 <input
                   v-if="invitee"
-                  class="
-                    flex
-                    text-secondaryLight
-                    flex-1
-                    px-4
-                    py-2
-                    bg-transparent
-                  "
+                  class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent"
                   :placeholder="`${t('team.email')}`"
                   :name="'param' + index"
                   :value="invitee.inviteeEmail"
                   readonly
                 />
                 <input
-                  class="
-                    flex
-                    text-secondaryLight
-                    flex-1
-                    px-4
-                    py-2
-                    bg-transparent
-                  "
+                  class="text-secondaryLight flex flex-1 px-4 py-2 bg-transparent"
                   :placeholder="`${t('team.permissions')}`"
                   :name="'value' + index"
                   :value="
@@ -126,14 +103,7 @@
                 E.isRight(pendingInvites.data) &&
                 pendingInvites.data.right.team.teamInvitations.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"
             >
               <span class="text-center">
                 {{ t("empty.pending_invites") }}
@@ -143,7 +113,7 @@
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
             >
-              <i class="mb-4 material-icons">help_outline</i>
+              <i class="material-icons mb-4">help_outline</i>
               {{ t("error.something_went_wrong") }}
             </div>
           </div>
@@ -161,11 +131,11 @@
             />
           </div>
         </div>
-        <div class="border rounded divide-dividerLight border-divider divide-y">
+        <div class="divide-dividerLight border-divider border divide-y rounded">
           <div
             v-for="(invitee, index) in newInvites"
             :key="`new-invitee-${index}`"
-            class="flex divide-dividerLight divide-x"
+            class="divide-dividerLight flex divide-x"
           >
             <input
               v-model="invitee.key"
@@ -185,13 +155,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="
-                        flex flex-1
-                        px-4
-                        py-2
-                        bg-transparent
-                        cursor-pointer
-                      "
+                      class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
                       :placeholder="`${t('team.permissions')}`"
                       :name="'value' + index"
                       :value="
@@ -245,27 +209,12 @@
           </div>
           <div
             v-if="newInvites.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"
           >
             <img
               :src="`/images/states/${$colorMode.value}/add_group.svg`"
               loading="lazy"
-              class="
-                object-contain
-                inline-flex
-                flex-col
-                object-center
-                w-16
-                h-16
-                mb-4
-              "
+              class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
               :alt="`${t('empty.invites')}`"
             />
             <span class="pb-4 text-center">
@@ -280,34 +229,12 @@
         </div>
         <div
           v-if="newInvites.length"
-          class="
-            flex
-            border-dividerLight
-            flex-col
-            items-start
-            px-4
-            py-4
-            mt-4
-            border
-            rounded
-          "
+          class="border-dividerLight flex flex-col items-start px-4 py-4 mt-4 border rounded"
         >
           <span
-            class="
-              bg-primaryDark
-              border-divider
-              flex
-              items-center
-              justify-center
-              px-2
-              py-1
-              mb-4
-              font-semibold
-              border
-              rounded-full
-            "
+            class="bg-primaryDark border-divider flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full"
           >
-            <i class="mr-2 text-secondaryLight material-icons">help_outline</i>
+            <i class="text-secondaryLight material-icons mr-2">help_outline</i>
             {{ t("profile.roles") }}
           </span>
           <p>
@@ -318,14 +245,7 @@
           <ul class="mt-4 space-y-4">
             <li class="flex">
               <span
-                class="
-                  text-secondaryDark
-                  max-w-16
-                  w-1/4
-                  font-semibold
-                  uppercase
-                  truncate
-                "
+                class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
               >
                 {{ t("profile.owner") }}
               </span>
@@ -335,14 +255,7 @@
             </li>
             <li class="flex">
               <span
-                class="
-                  text-secondaryDark
-                  max-w-16
-                  w-1/4
-                  font-semibold
-                  uppercase
-                  truncate
-                "
+                class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
               >
                 {{ t("profile.editor") }}
               </span>
@@ -352,14 +265,7 @@
             </li>
             <li class="flex">
               <span
-                class="
-                  text-secondaryDark
-                  max-w-16
-                  w-1/4
-                  font-semibold
-                  uppercase
-                  truncate
-                "
+                class="text-secondaryDark max-w-16 w-1/4 font-semibold uppercase truncate"
               >
                 {{ t("profile.viewer") }}
               </span>
@@ -374,7 +280,7 @@
     <template #footer>
       <p
         v-if="sendInvitesResult.length"
-        class="flex justify-between flex-1 text-secondaryLight"
+        class="text-secondaryLight flex justify-between flex-1"
       >
         <SmartAnchor
           class="link"

packages/hoppscotch-app/components/teams/index.vue

@@ -19,27 +19,12 @@
           E.isRight(myTeams.data) &&
           myTeams.data.right.myTeams.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"
       >
         <img
           :src="`/images/states/${$colorMode.value}/add_group.svg`"
           loading="lazy"
-          class="
-            object-contain
-            inline-flex
-            flex-col
-            object-center
-            w-16
-            h-16
-            mb-8
-          "
+          class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
           :alt="`${t('empty.teams')}`"
         />
         <span class="mb-4 text-center">
@@ -72,7 +57,7 @@
         v-if="!myTeams.loading && E.isLeft(myTeams.data)"
         class="flex flex-col items-center"
       >
-        <i class="mb-4 material-icons">help_outline</i>
+        <i class="material-icons mb-4">help_outline</i>
         {{ t("error.something_went_wrong") }}
       </div>
     </div>

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -37,7 +37,8 @@ export const baseTheme = EditorView.theme({
     borderColor: "var(--secondary-color)",
   },
   ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": {
-    backgroundColor: "var(--divider-color)",
+    backgroundColor: "var(--accent-color)",
+    color: "var(--accent-contrast-color)",
   },
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",

packages/hoppscotch-app/pages/documentation.vue

@@ -9,37 +9,23 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="import">
             <div class="flex items-start justify-between p-4">
               <label>
                 {{ $t("documentation.generate_message") }}
               </label>
               <span
-                class="
-                  bg-accentDark
-                  text-accentContrast
-                  inline-flex
-                  px-2
-                  py-1
-                  rounded
-                "
+                class="bg-accentDark text-accentContrast inline-flex px-2 py-1 rounded"
               >
                 BETA
               </span>
             </div>
             <div
-              class="
-                bg-primary
-                border-dividerLight
-                sticky
-                top-0
-                z-10
-                flex
-                items-start
-                justify-between
-                border-b
-              "
+              class="bg-primary border-dividerLight sticky top-0 z-10 flex items-start justify-between border-b"
             >
               <label for="collectionUpload">
                 <ButtonSecondary
@@ -68,24 +54,12 @@
             <textarea-autosize
               id="import-curl"
               v-model="collectionJSON"
-              class="p-4 font-mono bg-primary"
+              class="bg-primary p-4 font-mono"
               autofocus
               rows="8"
             />
             <div
-              class="
-                border-t
-                bg-primary
-                border-dividerLight
-                sticky
-                bottom-0
-                z-10
-                flex
-                items-start
-                justify-between
-                p-4
-                border-b
-              "
+              class="bg-primary border-dividerLight sticky bottom-0 z-10 flex items-start justify-between p-4 border-t border-b"
             >
               <ButtonPrimary
                 :label="$t('documentation.generate')"
@@ -94,38 +68,24 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <AppSection label="documentation">
             <div class="flex flex-col">
               <div
                 v-if="items.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">topic</i>
+                <i class="material-icons pb-2 opacity-75">topic</i>
                 <span class="text-center">
                   {{ $t("helpers.generate_documentation_first") }}
                 </span>
               </div>
               <div
                 v-else
-                class="
-                  flex
-                  bg-primary
-                  border-dividerLight
-                  sticky
-                  top-0
-                  z-10
-                  flex-1
-                  p-4
-                  border-b
-                "
+                class="bg-primary border-dividerLight sticky top-0 z-10 flex flex-1 p-4 border-b"
               >
                 <span
                   v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-app/pages/graphql.vue

@@ -9,11 +9,17 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <GraphqlResponse :conn="gqlConn" />
         </Pane>
       </Splitpanes>

packages/hoppscotch-app/pages/index.vue

@@ -9,7 +9,10 @@
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-        <Pane class="hide-scrollbar !overflow-auto">
+        <Pane
+          :size="COLUMN_LAYOUT ? 45 : 50"
+          class="hide-scrollbar !overflow-auto"
+        >
           <HttpRequest />
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
             <SmartTab
@@ -52,7 +55,10 @@
             </SmartTab>
           </SmartTabs>
         </Pane>
-        <Pane class="hide-scrollbar !overflow-auto flex flex-col">
+        <Pane
+          :size="COLUMN_LAYOUT ? 65 : 50"
+          class="hide-scrollbar !overflow-auto flex flex-col"
+        >
           <HttpResponse ref="response" />
         </Pane>
       </Splitpanes>

packages/hoppscotch-app/pages/join-team.vue

@@ -4,8 +4,8 @@
       v-if="invalidLink"
       class="flex flex-col items-center justify-center flex-1"
     >
-      <i class="pb-2 opacity-75 material-icons">error_outline</i>
-      <h1 class="text-center heading">
+      <i class="material-icons pb-2 opacity-75">error_outline</i>
+      <h1 class="heading text-center">
         {{ $t("team.invalid_invite_link") }}
       </h1>
       <p class="mt-2 text-center">
@@ -42,21 +42,12 @@
           v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)"
           class="flex flex-col items-center p-4"
         >
-          <i class="mb-4 material-icons">error_outline</i>
+          <i class="material-icons mb-4">error_outline</i>
           <p>
             {{ getErrorMessage(inviteDetails.data.left) }}
           </p>
           <p
-            class="
-              flex
-              border-dividerLight
-              flex-col
-              items-center
-              p-4
-              mt-8
-              border
-              rounded
-            "
+            class="border-dividerLight flex flex-col items-center p-4 mt-8 border rounded"
           >
             <span class="mb-4">
               {{ $t("team.logout_and_try_again") }}
@@ -84,7 +75,7 @@
               })
             }}
           </h1>
-          <p class="mt-2 text-secondaryLight">
+          <p class="text-secondaryLight mt-2">
             {{
               $t("team.invited_to_team", {
                 owner:
@@ -121,7 +112,7 @@
               })
             }}
           </h1>
-          <p class="mt-2 text-secondaryLight">
+          <p class="text-secondaryLight mt-2">
             {{
               $t("team.joined_team_description", {
                 team: inviteDetails.data.right.teamInvitation.team.name,

packages/hoppscotch-app/pages/profile.vue

@@ -9,18 +9,10 @@
           <img
             :src="`/images/states/${$colorMode.value}/login.svg`"
             loading="lazy"
-            class="
-              object-contain
-              inline-flex
-              flex-col
-              object-center
-              w-24
-              h-24
-              my-4
-            "
+            class="inline-flex flex-col object-contain object-center w-24 h-24 my-4"
             :alt="`${t('empty.parameters')}`"
           />
-          <p class="pb-4 text-center text-secondaryLight">
+          <p class="text-secondaryLight pb-4 text-center">
             {{ t("empty.profile") }}
           </p>
           <ButtonPrimary
@@ -31,15 +23,15 @@
         </div>
         <div v-else class="space-y-8">
           <div
-            class="h-24 rounded bg-primaryLight md:h-32 -mb-11"
+            class="bg-primaryLight md:h-32 -mb-11 h-24 rounded"
             style="background-image: url('/images/cover.svg')"
           ></div>
-          <div class="flex flex-col justify-between px-4 md:flex-row space-y-8">
+          <div class="md:flex-row flex flex-col justify-between px-4 space-y-8">
             <div class="flex items-end">
               <img
                 v-if="currentUser.photoURL"
                 :src="currentUser.photoURL"
-                class="w-16 h-16 rounded-lg ring-4 ring-primary"
+                class="ring-4 ring-primary w-16 h-16 rounded-lg"
                 :alt="currentUser.displayName"
               />
               <SmartIcon v-else name="user" class="svg-icons" />
@@ -47,12 +39,12 @@
                 <label class="heading">
                   {{ currentUser.displayName || t("state.nothing_found") }}
                 </label>
-                <p class="flex items-center text-secondaryLight">
+                <p class="text-secondaryLight flex items-center">
                   {{ currentUser.email }}
                   <SmartIcon
                     v-if="currentUser.emailVerified"
                     name="verified"
-                    class="ml-2 text-green-500 svg-icons"
+                    class="svg-icons ml-2 text-green-500"
                   />
                 </p>
               </div>
@@ -76,10 +68,10 @@
               :selected="true"
             >
               <section class="p-4">
-                <h4 class="font-semibold text-secondaryDark">
+                <h4 class="text-secondaryDark font-semibold">
                   {{ t("settings.profile") }}
                 </h4>
-                <div class="mt-1 text-secondaryLight">
+                <div class="text-secondaryLight mt-1">
                   {{ t("settings.profile_description") }}
                 </div>
                 <div class="py-4">
@@ -87,7 +79,7 @@
                     {{ t("settings.profile_name") }}
                   </label>
                   <form
-                    class="flex mt-2 md:max-w-sm"
+                    class="md:max-w-sm flex mt-2"
                     @submit.prevent="updateDisplayName"
                   >
                     <input
@@ -101,7 +93,7 @@
                     />
                     <ButtonPrimary
                       :label="t('action.save')"
-                      class="ml-2 min-w-16"
+                      class="min-w-16 ml-2"
                       type="submit"
                       :loading="updatingDisplayName"
                     />
@@ -109,10 +101,10 @@
                 </div>
               </section>
               <section class="p-4">
-                <h4 class="font-semibold text-secondaryDark">
+                <h4 class="text-secondaryDark font-semibold">
                   {{ t("settings.sync") }}
                 </h4>
-                <div class="mt-1 text-secondaryLight">
+                <div class="text-secondaryLight mt-1">
                   {{ t("settings.sync_description") }}
                 </div>
                 <div class="py-4 space-y-4">