chore: lint

2022-01-31 19:44:40 +05:30
parent 92d8cc7fee
commit 98b01b016d
127 changed files with 1318 additions and 481 deletions
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -1,17 +1,17 @@
 <template>
  <div>
    <header
-      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
    >
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
        <ButtonSecondary
          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
-          label="HOPPSCOTCH"
+          :label="t('app.name')"
          to="/"
        />
        <AppGitHubStarButton class="mt-1.5 transition <sm:hidden" />
      </div>
-      <div class="space-x-2 inline-flex items-center">
+      <div class="inline-flex items-center space-x-2">
        <ButtonSecondary
          id="installPWA"
          v-tippy="{ theme: 'tooltip' }"
@@ -47,7 +47,7 @@
          :label="t('header.login')"
          @click.native="showLogin = true"
        />
-        <div v-else class="space-x-2 inline-flex items-center">
+        <div v-else class="inline-flex items-center space-x-2">
          <ButtonPrimary
            v-tippy="{ theme: 'tooltip' }"
            :title="t('team.invite_tooltip')"
@@ -87,11 +87,11 @@
                  svg="user"
                />
              </template>
-              <div class="flex flex-col text-tiny px-2">
-                <span class="font-semibold inline-flex truncate">
+              <div class="flex flex-col px-2 text-tiny">
+                <span class="inline-flex font-semibold truncate">
                  {{ currentUser.displayName }}
                </span>
-                <span class="text-secondaryLight inline-flex truncate">
+                <span class="inline-flex truncate text-secondaryLight">
                  {{ currentUser.email }}
                </span>
              </div>
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -6,7 +6,7 @@
    @close="$emit('hide-modal')"
  >
    <template #body>
-      <div class="flex transition flex-col border-b border-dividerLight">
+      <div class="flex flex-col border-b transition border-dividerLight">
        <input
          id="command"
          v-model="search"
@@ -47,7 +47,7 @@
      />
      <div
        v-else
-        class="flex flex-col flex-1 space-y-4 overflow-auto divide-y divide-dividerLight hide-scrollbar"
+        class="flex flex-col flex-1 overflow-auto space-y-4 divide-y divide-dividerLight hide-scrollbar"
      >
        <div
          v-for="(map, mapIndex) in mappings"
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -1,13 +1,13 @@
 <template>
  <button
-    class="flex items-center flex-1 px-6 py-3 font-medium transition cursor-pointer search-entry focus:outline-none"
+    class="flex items-center flex-1 px-6 py-3 font-medium cursor-pointer transition search-entry focus:outline-none"
    :class="{ active: active }"
    tabindex="-1"
    @click="$emit('action', shortcut.action)"
    @keydown.enter="$emit('action', shortcut.action)"
  >
    <SmartIcon
-      class="mr-4 transition opacity-50 svg-icons"
+      class="mr-4 opacity-50 transition svg-icons"
      :class="{ 'opacity-100 text-secondaryDark': active }"
      :name="shortcut.icon"
    />
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -18,7 +18,7 @@
              type="text"
              autocomplete="off"
              autofocus
-              class="bg-transparent border-t border-dividerLight cursor-pointer flex font-semibold w-full py-2 px-4 appearance-none hover:bg-primaryDark"
+              class="flex w-full px-4 py-2 font-semibold bg-transparent border-t appearance-none cursor-pointer border-dividerLight hover:bg-primaryDark"
              @change="updateSelectedTeam(myTeams[$event.target.value])"
            >
              <option
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -16,7 +16,7 @@
    </template>
    <template #body>
      <div v-if="importerType !== null" class="flex flex-col">
-        <div class="flex pb-6 flex-col px-2">
+        <div class="flex flex-col px-2 pb-6">
          <div
            v-for="(step, index) in importerSteps"
            :key="`step-${index}`"
@@ -25,7 +25,7 @@
            <div v-if="step.name === 'FILE_IMPORT'" class="space-y-4">
              <p class="flex items-center">
                <span
-                  class="inline-flex border-4 border-primary items-center justify-center flex-shrink-0 mr-4 rounded-full text-dividerDark"
+                  class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
                  :class="{
                    '!text-green-500': hasFile,
                  }"
@@ -42,7 +42,7 @@
                  ref="inputChooseFileToImportFrom"
                  name="inputChooseFileToImportFrom"
                  type="file"
-                  class="transition cursor-pointer file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+                  class="cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
                  :accept="step.metadata.acceptedFileTypes"
                  @change="onFileChange"
                />
@@ -51,7 +51,7 @@
            <div v-else-if="step.name === 'URL_IMPORT'" class="space-y-4">
              <p class="flex items-center">
                <span
-                  class="inline-flex border-4 border-primary items-center justify-center flex-shrink-0 mr-4 rounded-full text-dividerDark"
+                  class="inline-flex items-center justify-center flex-shrink-0 mr-4 border-4 rounded-full border-primary text-dividerDark"
                  :class="{
                    '!text-green-500': hasGist,
                  }"
--- a/packages/hoppscotch-app/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/components/collections/SaveRequest.vue
@@ -6,7 +6,7 @@
  >
    <template #body>
      <div class="flex flex-col px-2">
-        <div class="flex relative">
+        <div class="relative flex">
          <input
            id="selectLabelSaveReq"
            v-model="requestName"
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -151,12 +151,12 @@
          v-if="
            collection.folders.length === 0 && collection.requests.length === 0
          "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
            :alt="`${$t('empty.collection')}`"
          />
          <span class="text-center">
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -148,12 +148,12 @@
            folder.requests &&
            folder.requests.length === 0
          "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
            :alt="`${$t('empty.folder')}`"
          />
          <span class="text-center">
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -57,7 +57,7 @@
      </span>
    </template>
    <template #body>
-      <div class="flex flex-col space-y-2 px-2">
+      <div class="flex flex-col px-2 space-y-2">
        <SmartItem
          svg="folder-plus"
          :label="t('import.from_json')"
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -10,7 +10,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
        @click="!doc ? selectRequest() : {}"
      >
        <SmartIcon
@@ -20,7 +20,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="!doc ? selectRequest() : {}"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="{ 'rounded border border-divider': savingMode }">
    <div
-      class="divide-dividerLight divide-y border-b border-dividerLight flex flex-col top-0 z-10 sticky"
+      class="sticky top-0 z-10 flex flex-col border-b divide-dividerLight divide-y border-dividerLight"
      :class="{ 'bg-primary': !savingMode }"
    >
      <input
@@ -10,9 +10,9 @@
        type="search"
        autocomplete="off"
        :placeholder="$t('action.search')"
-        class="bg-transparent flex py-2 px-4"
+        class="flex px-4 py-2 bg-transparent"
      />
-      <div class="flex flex-1 justify-between">
+      <div class="flex justify-between flex-1">
        <ButtonSecondary
          svg="plus"
          :label="$t('action.new')"
@@ -59,15 +59,15 @@
    </div>
    <div
      v-if="collections.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
    >
      <img
        :src="`/images/states/${$colorMode.value}/pack.svg`"
        loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
        :alt="$t('empty.collections')"
      />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
        {{ $t("empty.collections") }}
      </span>
      <ButtonSecondary
@@ -78,9 +78,9 @@
    </div>
    <div
      v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
    >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
      <span class="my-2 text-center">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="{ 'rounded border border-divider': saveRequest }">
    <div
-      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
+      class="sticky z-10 flex flex-col border-b rounded-t divide-dividerLight divide-y bg-primary border-dividerLight"
      :style="saveRequest ? 'top: calc(-1 * var(--font-size-body))' : 'top: 0'"
    >
      <div v-if="!saveRequest" class="flex flex-col">
@@ -10,7 +10,7 @@
          type="search"
          autocomplete="off"
          :placeholder="$t('action.search')"
-          class="bg-transparent py-2 pr-2 pl-4"
+          class="py-2 pl-4 pr-2 bg-transparent"
        />
      </div>
      <CollectionsChooseType
@@ -20,7 +20,7 @@
        @update-collection-type="updateCollectionType"
        @update-selected-team="updateSelectedTeam"
      />
-      <div class="flex flex-1 justify-between">
+      <div class="flex justify-between flex-1">
        <ButtonSecondary
          v-if="
            collectionsType.type == 'team-collections' &&
@@ -96,15 +96,15 @@
    </div>
    <div
      v-if="filteredCollections.length === 0 && filterText.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
    >
      <img
        :src="`/images/states/${$colorMode.value}/pack.svg`"
        loading="lazy"
-        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+        class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
        :alt="$t('empty.collections')"
      />
-      <span class="text-center pb-4">
+      <span class="pb-4 text-center">
        {{ $t("empty.collections") }}
      </span>
      <ButtonSecondary
@@ -129,9 +129,9 @@
    </div>
    <div
      v-if="filterText.length !== 0 && filteredCollections.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
    >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <i class="pb-2 opacity-75 material-icons">manage_search</i>
      <span class="my-2 text-center">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -177,12 +177,12 @@
            (collection.requests == undefined ||
              collection.requests.length === 0)
          "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
            :alt="`${$t('empty.collection')}`"
          />
          <span class="text-center">
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -157,12 +157,12 @@
            folder.requests &&
            folder.requests.length === 0
          "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
            :alt="`${t('empty.folder')}`"
          />
          <span class="text-center">
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -10,7 +10,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
        :class="getRequestLabelColor(request.method)"
        @click="!doc ? selectRequest() : {}"
      >
@@ -25,7 +25,7 @@
        </span>
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
+        class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="!doc ? selectRequest() : {}"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -43,7 +43,7 @@
          :title="`${$t('collection.request_in_use')}`"
        >
          <span
-            class="absolute animate-ping inline-flex flex-shrink-0 h-full w-full rounded-full bg-green-500 opacity-75"
+            class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
          >
          </span>
          <span
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -179,12 +179,12 @@
            (collection.requests == undefined ||
              collection.requests.length === 0)
          "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
            :alt="`${t('empty.collection')}`"
          />
          <span class="text-center">
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -11,7 +11,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-4 items-center justify-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
        @click="toggleShowChildren()"
      >
        <SmartIcon
@@ -21,7 +21,7 @@
        />
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="toggleShowChildren()"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -158,12 +158,12 @@
            (folder.children == undefined || folder.children.length === 0) &&
            (folder.requests == undefined || folder.requests.length === 0)
          "
-          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+          class="flex flex-col items-center justify-center p-4 text-secondaryLight"
        >
          <img
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
-            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
+            class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
            :alt="`${$t('empty.folder')}`"
          />
          <span class="text-center">
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -10,7 +10,7 @@
      @contextmenu.prevent="options.tippy().show()"
    >
      <span
-        class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
+        class="flex items-center justify-center w-16 px-2 truncate cursor-pointer"
        :class="getRequestLabelColor(request.method)"
        @click="!doc ? selectRequest() : {}"
      >
@@ -25,7 +25,7 @@
        </span>
      </span>
      <span
-        class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
+        class="flex items-center flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        @click="!doc ? selectRequest() : {}"
      >
        <span class="truncate" :class="{ 'text-accent': isSelected }">
@@ -42,7 +42,7 @@
          :title="`${$t('collection.request_in_use')}`"
        >
          <span
-            class="absolute animate-ping inline-flex flex-shrink-0 h-full w-full rounded-full bg-green-500 opacity-75"
+            class="absolute inline-flex flex-shrink-0 w-full h-full bg-green-500 rounded-full opacity-75 animate-ping"
          >
          </span>
          <span
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -41,7 +41,7 @@
            />
          </div>
        </div>
-        <div class="border divide-y rounded divide-dividerLight border-divider">
+        <div class="border rounded divide-y divide-dividerLight border-divider">
          <div
            v-for="(variable, index) in vars"
            :key="`variable-${index}`"
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -10,7 +10,7 @@
      <SmartIcon class="svg-icons" name="layers" />
    </span>
    <span
-      class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
+      class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
      @click="$emit('edit-environment')"
    >
      <span class="truncate">
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -8,7 +8,7 @@
        :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
      >
        <div
-          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
        >
          <label class="font-semibold text-secondaryLight">
            {{ t("request.query") }}
@@ -71,7 +71,7 @@
        :indicator="variableString && variableString.length > 0 ? true : false"
      >
        <div
-          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
        >
          <label class="font-semibold text-secondaryLight">
            {{ t("request.variables") }}
@@ -114,7 +114,7 @@
        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
      >
        <div
-          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
+          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
        >
          <label class="font-semibold text-secondaryLight">
            {{ t("tab.headers") }}
@@ -154,7 +154,7 @@
          <div
            v-for="(header, index) in workingHeaders"
            :key="`header-${String(index)}`"
-            class="divide-x divide-dividerLight border-b border-dividerLight flex"
+            class="flex border-b divide-x divide-dividerLight border-dividerLight"
          >
            <SmartAutoComplete
              :placeholder="`${t('count.header', { count: index + 1 })}`"
@@ -180,7 +180,7 @@
              "
            />
            <input
-              class="bg-transparent flex flex-1 py-2 px-4"
+              class="flex flex-1 px-4 py-2 bg-transparent"
              :placeholder="`${t('count.value', { count: index + 1 })}`"
              :name="`value ${String(index)}`"
              :value="header.value"
@@ -232,15 +232,15 @@
          </div>
          <div
            v-if="workingHeaders.length === 0"
-            class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
          >
            <img
              :src="`/images/states/${$colorMode.value}/add_category.svg`"
              loading="lazy"
-              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
              :alt="`${t('empty.headers')}`"
            />
-            <span class="text-center pb-4">
+            <span class="pb-4 text-center">
              {{ t("empty.headers") }}
            </span>
            <ButtonSecondary
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -45,7 +45,7 @@
      class="flex flex-col items-center justify-center flex-1 p-4 text-secondaryLight"
    >
      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
+        <div class="flex flex-col items-end text-right space-y-4">
          <span class="flex items-center flex-1">
            {{ t("shortcut.general.command_menu") }}
          </span>
--- a/packages/hoppscotch-app/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-app/components/history/graphql/Card.vue
@@ -2,7 +2,7 @@
  <div class="flex flex-col group">
    <div class="flex items-center">
      <span
-        class="flex flex-1 min-w-0 py-2 pl-4 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
+        class="flex flex-1 min-w-0 py-2 pl-4 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
        data-testid="restore_history_entry"
        @click="useEntry"
      >
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -36,7 +36,7 @@
        open
      >
        <summary
-          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
        >
          <span
            class="px-4 py-2 truncate transition group-hover:text-secondary capitalize-first"
--- a/packages/hoppscotch-app/components/history/rest/Card.vue
+++ b/packages/hoppscotch-app/components/history/rest/Card.vue
@@ -11,7 +11,7 @@
      {{ entry.request.method }}
    </span>
    <span
-      class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
+      class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
      data-testid="restore_history_entry"
      @click="$emit('use-entry')"
    >
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -91,7 +91,7 @@
            :name="`attachment${index}`"
            type="file"
            multiple
-            class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+            class="p-1 cursor-pointer transition file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
            @change="setRequestAttachment(index, param, $event)"
          />
        </label>
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -55,7 +55,7 @@
        </div>
        <div
          v-if="errorState"
-          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
+          class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
        >
          {{ t("error.something_went_wrong") }}
        </div>
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -123,7 +123,7 @@
      </div>
      <div
        v-if="workingHeaders.length === 0"
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
      >
        <img
          :src="`/images/states/${$colorMode.value}/add_category.svg`"
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="sticky top-0 z-10 flex p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
+    class="sticky top-0 z-10 flex p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
  >
    <div class="flex flex-1">
      <div class="relative flex">
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -7,7 +7,7 @@
      class="flex flex-col items-center justify-center flex-1 text-secondaryLight"
    >
      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end space-y-4 text-right">
+        <div class="flex flex-col items-end text-right space-y-4">
          <span class="flex items-center flex-1">
            {{ t("shortcut.request.send_request") }}
          </span>
--- a/packages/hoppscotch-app/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
@@ -118,7 +118,7 @@
      </div>
      <div
        v-if="workingUrlEncodedParams.length === 0"
-        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
      >
        <img
          :src="`/images/states/${$colorMode.value}/add_category.svg`"
--- a/packages/hoppscotch-app/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/components/profile/Picture.vue
@@ -4,7 +4,7 @@
    class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
  >
    <img
-      class="absolute object-cover object-center w-5 h-5 transition rounded-full bg-primaryDark"
+      class="absolute object-cover object-center w-5 h-5 rounded-full transition bg-primaryDark"
      :src="url"
      :alt="alt"
      loading="lazy"
--- a/packages/hoppscotch-app/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-app/components/smart/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
    @click="$emit('change')"
  >
    <input
--- a/packages/hoppscotch-app/components/smart/Expand.vue
+++ b/packages/hoppscotch-app/components/smart/Expand.vue
@@ -1,10 +1,10 @@
 <template>
  <div
-    class="relative flex flex-col space-y-2 overflow-hidden"
+    class="relative flex flex-col overflow-hidden space-y-2"
    :class="expand ? 'h-full' : 'max-h-32'"
  >
    <slot name="body"></slot>
-    <div class="flex sticky bottom-0 inset-x-0 items-center justify-center">
+    <div class="sticky inset-x-0 bottom-0 flex items-center justify-center">
      <ButtonSecondary
        :icon="expand ? 'expand_less' : 'expand_more'"
        :label="expand ? t('action.less') : t('action.more')"
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -3,7 +3,7 @@
    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
    :exact="exact"
    :blank="blank"
-    class="inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
+    class="inline-flex items-center flex-shrink-0 px-4 py-2 rounded transition hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark"
    :class="[
      { 'opacity-75 cursor-not-allowed': disabled },
      { 'pointer-events-none': loading },
--- a/packages/hoppscotch-app/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/components/smart/Modal.vue
@@ -32,7 +32,7 @@
          leave-to-class="scale-95 translate-y-4"
        >
          <div
-            class="inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg bg-primary sm:rounded-xl sm:align-middle"
+            class="inline-block w-full overflow-hidden text-left align-bottom shadow-lg transition-all transform bg-primary sm:rounded-xl sm:align-middle"
            :class="[
              { 'mt-24 md:mb-8': placement === 'top' },
              { 'p-4': !fullWidth },
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="flex items-center flex-1 transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
+    class="flex items-center flex-1 cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
    @click="$emit('change', value)"
  >
    <span class="inline-flex mr-4">
--- a/packages/hoppscotch-app/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/components/smart/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
    @click="$emit('change')"
  >
    <span ref="toggle" class="toggle" :class="{ on: on }">
--- a/packages/hoppscotch-app/components/tab/Primary.vue
+++ b/packages/hoppscotch-app/components/tab/Primary.vue
@@ -3,7 +3,7 @@
    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
    :exact="exact"
    :blank="blank"
-    class="inline-flex items-center px-4 py-2 truncate transition rounded focus:outline-none"
+    class="inline-flex items-center px-4 py-2 truncate rounded transition focus:outline-none"
    :class="[
      color
        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -47,7 +47,7 @@
            E.isRight(teamDetails.data) &&
            teamDetails.data.right.team.teamMembers
          "
-          class="border divide-y rounded divide-dividerLight border-divider"
+          class="border rounded divide-y divide-dividerLight border-divider"
        >
          <div
            v-if="teamDetails.data.right.team.teamMembers === 0"
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -12,7 +12,7 @@
          </p>
        </div>
        <div
-          class="flex flex-col p-4 mt-8 space-y-6 border rounded border-dividerLight"
+          class="flex flex-col p-4 mt-8 border rounded space-y-6 border-dividerLight"
        >
          <div
            v-for="(invitee, index) in sendInvitesResult"
@@ -51,7 +51,7 @@
            {{ t("team.pending_invites") }}
          </label>
        </div>
-        <div class="border divide-y rounded divide-dividerLight border-divider">
+        <div class="border rounded divide-y divide-dividerLight border-divider">
          <div
            v-if="pendingInvites.loading"
            class="flex items-center justify-center p-4"
@@ -127,7 +127,7 @@
            />
          </div>
        </div>
-        <div class="border divide-y rounded divide-dividerLight border-divider">
+        <div class="border rounded divide-y divide-dividerLight border-divider">
          <div
            v-for="(invitee, index) in newInvites"
            :key="`new-invitee-${index}`"
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -27,7 +27,7 @@
        >
          {{ team.name || t("state.nothing_found") }}
        </label>
-        <div class="flex mt-2 -space-x-1 overflow-hidden">
+        <div class="flex mt-2 overflow-hidden -space-x-1">
          <img
            v-for="(member, index) in team.teamMembers"
            :key="`member-${index}`"