refactor: sort windi class names

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

@@ -2,25 +2,31 @@
   <div class="bg-error flex justify-between">
     <span
       class="
-        flex
-        py-2
-        px-4
-        transition
+        group
         relative
+        flex
         items-center
         justify-center
-        group
+        px-4
+        py-2
+        transition
       "
     >
-      <i class="mr-2 material-icons">info_outline</i>
+      <i class="material-icons mr-2">info_outline</i>
       <span class="text-secondaryDark">
         <span class="md:hidden">
-          {{ $t("helpers.offline_short") }}
+          {{ t("helpers.offline_short") }}
         </span>
-        <span class="hidden md:inline">
-          {{ $t("helpers.offline") }}
+        <span class="md:inline hidden">
+          {{ t("helpers.offline") }}
         </span>
       </span>
     </span>
   </div>
 </template>
+
+<script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+</script>

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

@@ -107,7 +107,7 @@
                 @click.native="$refs.options.tippy().hide()"
               />
               <!-- <SmartItem :label="t('app.status')" /> -->
-              <div class="flex opacity-50 py-2 px-4">
+              <div class="flex px-4 py-2 opacity-50">
                 {{ `${t("app.name")} ${t("app.version")}` }}
               </div>
             </div>
@@ -135,7 +135,7 @@
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
         <span
-          class="transform transition"
+          class="transition transform"
           :class="{
             'rotate-180': SIDEBAR_ON_LEFT,
           }"

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

@@ -11,9 +11,9 @@
     />
     <div
       v-if="searchResults.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="text-secondaryLight flex flex-col items-center justify-center p-4"
     >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="material-icons pb-2 opacity-75">manage_search</i>
       <span class="text-center">
         {{ t("state.nothing_found") }} "{{ search }}"
       </span>

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

@@ -1,9 +1,9 @@
 <template>
   <div>
     <header
-      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
     >
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           class="tracking-wide !font-bold !text-secondaryDark"
           label="HOPPSCOTCH"
@@ -11,7 +11,7 @@
         />
         <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
       </div>
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
@@ -39,7 +39,7 @@
           svg="upload-cloud"
           :label="t('header.save_workspace')"
           filled
-          class="hidden md:flex"
+          class="md:flex hidden"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
@@ -47,7 +47,7 @@
           :label="t('header.login')"
           @click.native="showLogin = true"
         />
-        <div v-else class="space-x-2 inline-flex items-center">
+        <div v-else class="inline-flex items-center space-x-2">
           <ButtonPrimary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('team.invite_tooltip')"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex p-4 space-y-4 items-start flex-col">
+  <div class="flex flex-col items-start p-4 space-y-4">
     <SmartToggle
       :on="PROXY_ENABLED"
       @change="toggleSettingKey('PROXY_ENABLED')"

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

@@ -15,11 +15,14 @@
         name="command"
         :placeholder="`${t('app.type_a_command_search')}`"
         class="
-          bg-transparent
-          border-b border-dividerLight
-          flex flex-shrink-0
-          text-secondaryDark text-base
+          flex
+          border-dividerLight
+          text-secondaryDark
+          flex-shrink-0
           p-6
+          text-base
+          bg-transparent
+          border-b
         "
       />
       <AppFuse
@@ -31,12 +34,13 @@
       <div
         v-else
         class="
-          divide-y divide-dividerLight
           flex flex-col
-          space-y-4
-          flex-1
-          overflow-auto
+          divide-dividerLight
           hide-scrollbar
+          flex-1
+          space-y-4
+          overflow-auto
+          divide-y
         "
       >
         <div
@@ -44,7 +48,7 @@
           :key="`map-${mapIndex}`"
           class="flex flex-col"
         >
-          <h5 class="my-2 text-secondaryLight py-2 px-6">
+          <h5 class="px-6 py-2 my-2 text-secondaryLight">
             {{ t(map.section) }}
           </h5>
           <AppPowerSearchEntry

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
+  <section :id="label.toLowerCase()" class="relative flex flex-col flex-1">
     <slot></slot>
   </section>
 </template>

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

@@ -5,11 +5,11 @@
     @close="hideModal"
   >
     <template #body>
-      <p class="text-secondaryLight mb-8 px-2">
+      <p class="text-secondaryLight px-2 mb-8">
         {{ t("app.invite_description") }}
       </p>
-      <div class="flex flex-col space-y-2 px-2">
-        <div class="grid gap-4 grid-cols-3">
+      <div class="flex flex-col px-2 space-y-2">
+        <div class="grid grid-cols-3 gap-4">
           <a
             v-for="(platform, index) in platforms"
             :key="`platform-${index}`"
@@ -17,13 +17,13 @@
             target="_blank"
             class="share-link"
           >
-            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <SmartIcon :name="platform.icon" class="w-6 h-6" />
             <span class="mt-3">
               {{ platform.name }}
             </span>
           </a>
           <button class="share-link" @click="copyAppLink">
-            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
+            <SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
             <span class="mt-3">
               {{ t("app.copy") }}
             </span>

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

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

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

@@ -1,6 +1,6 @@
 <template>
-  <aside class="flex h-full justify-between md:flex-col">
-    <nav class="flex flex-nowrap md:flex-col flex-1 md:flex-none">
+  <aside class="md:flex-col flex justify-between h-full">
+    <nav class="flex-nowrap md:flex-col md:flex-none flex flex-1">
       <NuxtLink
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"

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

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