refactor(ui): sort windicss classes

assets/scss/styles.scss

@@ -110,13 +110,24 @@ a {
 
 .tippy-popper {
   .tooltip-theme {
-    @apply bg-secondary;
+    @apply bg-tooltip;
     @apply text-primaryLight;
     @apply text-xs;
     @apply font-semibold;
+    @apply py-1;
     @apply px-2;
-    @apply px-4;
     @apply shadow;
+
+    kbd {
+      @apply first:ml-2;
+      @apply last:-mr-1;
+      @apply font-sans;
+      @apply bg-secondaryDark;
+      @apply text-primaryDark;
+      @apply rounded;
+      @apply px-1;
+      @apply ml-1;
+    }
   }
 
   .popover-theme {
@@ -124,6 +135,7 @@ a {
     @apply text-secondary;
     @apply p-2;
     @apply shadow-lg;
+    @apply focus:outline-none;
   }
 
   &[x-placement^="top"] .tippy-tooltip .tippy-arrow {

assets/scss/themes.scss

@@ -53,7 +53,7 @@
   // Error color
   --error-color: theme("colors.true-gray.700");
   // Tooltip color
-  --tooltip-color: theme("colors.true-gray.50");
+  --tooltip-color: theme("colors.true-gray.700");
   // Editor theme
   --editor-theme: "textmate";
 }

components/app/Announcement.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex bg-primary border-b justify-between border-dividerLight">
+  <div class="bg-primary border-b border-dividerLight flex justify-between">
     <span class="flex">
       <SmartLink
         to="https://forms.gle/8yFiEynXB7h477Ns6"
         blank
         class="
-          relative
           flex
+          py-3
+          px-4
+          transition
+          relative
           items-center
           justify-center
-          px-4
-          py-3
-          transition
           group
         "
       >
-        <i class="material-icons mr-4">science</i>
+        <i class="mr-4 material-icons">science</i>
         <span class="text-secondaryDark text-xs">
           <span class="md:hidden"> Beta Layout </span>
           <span class="hidden md:inline">
@@ -24,17 +24,16 @@
         </span>
         <span
           class="
+            border-l border-divider
             flex
+            font-semibold
+            text-accent text-xs
+            ml-4
+            pl-4
+            transition
             items-center
             justify-center
-            pl-4
-            ml-4
-            font-semibold
-            transition
-            border-l
             group-hover:text-accentDark
-            border-divider
-            text-accent text-xs
           "
         >
           <span class="md:hidden"> Give Feedback </span>
@@ -43,7 +42,7 @@
       </SmartLink>
       <SmartLink
         to="https://hoppscotch.io"
-        class="flex items-center justify-center transition group"
+        class="flex transition items-center justify-center group"
       >
         <span class="text-secondaryDark text-xs">
           Switch back to the Hoppscotch website

components/app/Extensions.vue

@@ -7,7 +7,7 @@
       </div>
     </template>
     <template #body>
-      <div class="flex flex-col px-2 space-y-2">
+      <div class="flex flex-col space-y-2 px-2">
         <SmartItem
           to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
           blank
@@ -25,7 +25,7 @@
       </div>
     </template>
     <template #footer>
-      <div class="px-2 text-secondaryLight text-xs">
+      <div class="text-secondaryLight text-xs px-2">
         {{ $t("extensions_info1") }}
       </div>
     </template>

components/app/Header.vue

@@ -1,9 +1,9 @@
 <template>
-  <header class="flex items-center justify-between p-2 flex-1">
+  <header class="flex flex-1 p-2 items-center justify-between">
-    <div class="inline-flex space-x-2 items-center font-bold flex-shrink-0">
+    <div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
       <AppLogo class="h-6 mx-4" /> Hoppscotch
     </div>
-    <div class="inline-flex space-x-2 items-center flex-shrink-0">
+    <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="mt-1 mr-2" />
       <TabPrimary
         id="installPWA"
@@ -74,7 +74,10 @@
           <template #trigger>
             <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
+              :title="
+                $t('more') +
+                `<kbd class='shortcut'>${getSpecialKey()}</kbd><kbd class='shortcut'>M</kbd>`
+              "
               icon="drag_indicator"
             />
           </template>
@@ -119,7 +122,7 @@
 import intializePwa from "~/helpers/pwa"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 export default {
   data() {
@@ -176,6 +179,7 @@ export default {
         // fallback
       }
     },
+    getSpecialKey: getPlatformSpecialKey,
   },
 }
 </script>

components/app/Logo.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="logo fill-current"
+    class="fill-current logo"
     xmlns="http://www.w3.org/2000/svg"
     width="20"
     height="20"

components/app/Shortcuts.vue

@@ -17,13 +17,13 @@
             v-for="(key, keyIndex) in shortcut.keys"
             :key="`shortcut-${index}-key-${keyIndex}`"
             class="
-              py-2
-              px-4
-              m-1
-              text-xs
               border border-divider
               rounded-lg
               font-bold
+              m-1
+              text-xs
+              py-2
+              px-4
             "
           >
             {{ key }}

components/button/Primary.vue

@@ -4,19 +4,19 @@
     :exact="exact"
     :blank="blank"
     class="
+      font-semibold
+      py-2
+      transition
       inline-flex
       items-center
       justify-center
-      py-2
-      font-semibold
-      transition
       focus:outline-none
     "
     :class="[
       color
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
         : `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
-      label ? 'px-4' : 'px-2',
+      label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
@@ -26,6 +26,10 @@
         'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':
           gradient,
       },
+      {
+        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+          outline,
+      },
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
@@ -49,9 +53,15 @@
         class="svg-icons"
       />
       {{ label }}
-      <span v-if="shortkey" class="px-1 ml-2 rounded bg-accentLight">{{
+      <div v-if="shortcuts.length" class="ml-2">
-        shortkey
+        <kbd
-      }}</span>
+          v-for="(key, index) in shortcuts"
+          :key="`key-${index}`"
+          class="bg-accentLight rounded ml-1 px-1 inline-flex"
+        >
+          {{ key }}
+        </kbd>
+      </div>
     </span>
     <SmartSpinner v-else />
   </SmartLink>
@@ -116,9 +126,13 @@ export default {
       type: Boolean,
       default: false,
     },
-    shortkey: {
+    outline: {
-      type: String,
+      type: Boolean,
-      default: "",
+      default: false,
+    },
+    shortcuts: {
+      type: Array,
+      default: () => [],
     },
   },
 }

components/button/Secondary.vue

@@ -4,19 +4,19 @@
     :exact="exact"
     :blank="blank"
     class="
+      font-semibold
+      py-2
+      transition
       inline-flex
       items-center
       justify-center
-      py-2
-      font-semibold
-      transition
       focus:outline-none
     "
     :class="[
       color
         ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
         : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
-      label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
+      label ? 'px-3' : 'px-2',
       rounded ? 'rounded-full' : 'rounded-lg',
       { 'opacity-50 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
@@ -41,6 +41,22 @@
       class="svg-icons"
     />
     {{ label }}
+    <div v-if="shortcuts.length" class="ml-2">
+      <kbd
+        v-for="(key, index) in shortcuts"
+        :key="`key-${index}`"
+        class="
+          bg-dividerLight
+          rounded
+          text-secondaryLight
+          ml-1
+          px-1
+          inline-flex
+        "
+      >
+        {{ key }}
+      </kbd>
+    </div>
   </SmartLink>
 </template>
 
@@ -91,6 +107,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    shortcuts: {
+      type: Array,
+      default: () => [],
+    },
   },
 }
 </script>

components/collections/Add.vue

@@ -5,8 +5,8 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelAdd" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelAdd" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/AddFolder.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelAddFolder"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/ChooseType.vue

@@ -18,15 +18,15 @@
               type="text"
               autofocus
               class="
-                flex
-                w-full
-                px-4
-                text-xs
-                py-3
-                focus:outline-none
-                border-b border-dividerLight
-                font-medium
                 bg-primaryLight
+                border-b border-dividerLight
+                flex
+                font-medium
+                text-xs
+                w-full
+                py-3
+                px-4
+                focus:outline-none
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

components/collections/Edit.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelEdit" class="px-4 font-semibold pb-4 text-xs">{{
+        <label for="selectLabelEdit" class="font-semibold text-xs px-4 pb-4">{{
           $t("label")
         }}</label>
         <input

components/collections/EditFolder.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelEditFolder"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
           >{{ $t("label") }}</label
         >
         <input

components/collections/EditRequest.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelEditReq" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelEditReq" class="font-semibold text-xs px-4 pb-4">
-          {{ $t("label") }}</label
+          {{ $t("label") }}
-        >
+        </label>
         <input
           id="selectLabelEditReq"
           v-model="requestUpdateData.name"

components/collections/ImportExport.vue

@@ -116,7 +116,7 @@
       </div>
       <div
         v-if="mode == 'import_from_my_collections'"
-        class="flex px-2 flex-col"
+        class="flex flex-col px-2"
       >
         <div class="select-wrapper">
           <select

components/collections/SaveRequest.vue

@@ -5,8 +5,8 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelSaveReq" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelSaveReq" class="font-semibold text-xs px-4 pb-4">
           {{ $t("token_req_name") }}</label
         >
         <input
@@ -16,7 +16,7 @@
           type="text"
           @keyup.enter="saveRequestAs"
         />
-        <label class="px-4 pt-4 font-semibold pb-4 text-xs">
+        <label class="font-semibold text-xs px-4 pt-4 pb-4">
           Select Location
         </label>
         <CollectionsGraphql

components/collections/graphql/Add.vue

@@ -5,8 +5,8 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/AddFolder.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelGqlAddFolder"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/graphql/Collection.vue

@@ -11,13 +11,13 @@
     >
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -27,15 +27,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -99,7 +100,7 @@
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="folder"
@@ -116,7 +117,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -134,17 +135,16 @@
           collection.folders.length === 0 && collection.requests.length === 0
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>

components/collections/graphql/Edit.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/EditFolder.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelGqlEditFolder"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/graphql/EditRequest.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelGqlEditReq"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/graphql/Folder.vue

@@ -11,13 +11,13 @@
     >
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -27,15 +27,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -95,7 +96,7 @@
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="subFolder"
@@ -112,7 +113,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -133,17 +134,16 @@
           folder.requests.length === 0
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>

components/collections/graphql/Request.vue

@@ -10,15 +10,15 @@
     >
       <span
         class="
-          font-mono font-bold
+          cursor-pointer
           flex
-          justify-center
+          font-mono font-bold
-          items-center
+          mx-2
           text-xs
           w-12
-          mx-2
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="!doc ? selectRequest() : {}"
       >
@@ -28,15 +28,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="!doc ? selectRequest() : {}"
       >

components/collections/graphql/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded-lg border-2 border-divider': savingMode }"
   >
     <div
-      class="flex flex-col sticky top-10 z-10"
+      class="flex flex-col top-10 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -13,17 +13,18 @@
         type="search"
         :placeholder="$t('search')"
         class="
-          px-4
-          py-3
-          text-xs
-          border-b border-dividerLight
-          flex flex-1
-          font-medium
           bg-primaryLight
+          border-b border-dividerLight
+          flex
+          font-medium
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
       />
-      <div class="border-b flex justify-between flex-1 border-dividerLight">
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
           :label="$t('new')"
@@ -59,18 +60,18 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
+      <i class="opacity-50 pb-2 material-icons">create_new_folder</i>
       <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <i class="opacity-50 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>

components/collections/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded-lg border-2 border-divider': saveRequest }"
   >
     <div
-      class="flex flex-col sticky z-10 top-0 bg-primary"
+      class="bg-primary flex flex-col top-0 z-10 sticky"
       :class="{ '!top-10': !saveRequest && !doc }"
     >
       <input
@@ -13,13 +13,14 @@
         type="search"
         :placeholder="$t('search')"
         class="
-          px-4
-          py-3
-          text-xs
-          border-b border-dividerLight
-          flex flex-1
-          font-medium
           bg-primaryLight
+          border-b border-dividerLight
+          flex
+          font-medium
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
       />
@@ -30,7 +31,7 @@
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
-      <div class="border-b flex justify-between flex-1 border-dividerLight">
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           v-if="
             collectionsType.type == 'team-collections' &&
@@ -94,18 +95,18 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
+      <i class="opacity-50 pb-2 material-icons">create_new_folder</i>
       <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <i class="opacity-50 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>

components/collections/my/Collection.vue

@@ -11,13 +11,13 @@
     >
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -27,15 +27,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -115,7 +116,7 @@
       <CollectionsMyFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -134,7 +135,7 @@
       <CollectionsMyRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -156,17 +157,16 @@
           (collection.requests == undefined || collection.requests.length === 0)
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>

components/collections/my/Folder.vue

@@ -11,13 +11,13 @@
     >
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -27,15 +27,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -100,7 +101,7 @@
       <CollectionsMyFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -119,7 +120,7 @@
       <CollectionsMyRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :request="request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -142,17 +143,16 @@
           folder.requests.length === 0
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>

components/collections/my/Request.vue

@@ -10,15 +10,15 @@
     >
       <span
         class="
-          font-mono font-bold
+          cursor-pointer
           flex
-          justify-center
+          font-mono font-bold
-          items-center
+          mx-2
           text-xs
           w-12
-          mx-2
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
@@ -36,15 +36,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="!doc ? selectRequest() : {}"
       >

components/collections/teams/Collection.vue

@@ -3,13 +3,13 @@
     <div class="flex items-center group">
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -19,15 +19,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -112,7 +113,7 @@
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
         :key="`folder-${folder}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -132,7 +133,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -153,17 +154,16 @@
           (collection.requests == undefined || collection.requests.length === 0)
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>

components/collections/teams/Folder.vue

@@ -3,13 +3,13 @@
     <div class="flex items-center group">
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -19,15 +19,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -97,7 +98,7 @@
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="`subFolder-${subFolderIndex}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -117,7 +118,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -137,17 +138,16 @@
           (folder.requests == undefined || folder.requests.length === 0)
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>

components/collections/teams/Request.vue

@@ -3,15 +3,15 @@
     <div class="flex items-center group">
       <span
         class="
-          font-mono font-bold
+          cursor-pointer
           flex
-          justify-center
+          font-mono font-bold
-          items-center
+          mx-2
           text-xs
           w-12
-          mx-2
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
@@ -29,15 +29,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="!doc ? selectRequest() : {}"
       >

components/environments/Add.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelEnvAdd" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelEnvAdd" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/environments/Edit.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelEnvEdit" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input
@@ -19,10 +19,10 @@
           :placeholder="editingEnvironment.name"
           @keyup.enter="saveEnvironment"
         />
-        <div class="flex justify-between items-center flex-1">
+        <div class="flex flex-1 justify-between items-center">
           <label
             for="variableList"
-            class="px-4 pt-4 font-semibold pb-4 text-xs"
+            class="font-semibold text-xs px-4 pt-4 pb-4"
           >
             {{ $t("env_variable_list") }}
           </label>
@@ -41,27 +41,26 @@
             />
           </div>
         </div>
-        <div class="border-2 border-divider">
+        <div class="border-divider border-2">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
             class="
+              divide-x divide-dashed divide-divider
+              border-b border-divider
               flex
-              border-b
-              divide-x
-              border-divider
-              divide-dashed divide-divider
             "
           >
             <input
               v-model="variable.key"
               class="
-                px-4
-                py-3
-                text-xs
-                flex flex-1
-                font-semibold
                 bg-primaryLight
+                flex
+                font-semibold
+                flex-1
+                text-xs
+                py-3
+                px-4
                 focus:outline-none
               "
               :placeholder="$t('variable_count', { count: index + 1 })"
@@ -70,12 +69,13 @@
             <input
               v-model="variable.value"
               class="
-                px-4
-                py-3
-                text-xs
-                flex flex-1
-                font-semibold
                 bg-primaryLight
+                flex
+                font-semibold
+                flex-1
+                text-xs
+                py-3
+                px-4
                 focus:outline-none
               "
               :placeholder="$t('value_count', { count: index + 1 })"

components/environments/Environment.vue

@@ -2,13 +2,13 @@
   <div class="flex items-center group">
     <span
       class="
+        cursor-pointer
         flex
-        justify-center
-        items-center
         text-xs
         w-10
+        justify-center
+        items-center
         truncate
-        cursor-pointer
       "
       @click="$emit('edit-environment')"
     >
@@ -16,15 +16,16 @@
     </span>
     <span
       class="
-        py-3
         cursor-pointer
-        pr-2
+        flex
-        flex flex-1
-        min-w-0
-        text-xs
-        group-hover:text-secondaryDark
-        transition
         font-semibold
+        flex-1
+        text-xs
+        min-w-0
+        py-3
+        pr-2
+        transition
+        group-hover:text-secondaryDark
       "
       @click="$emit('edit-environment')"
     >

components/environments/index.vue

@@ -1,20 +1,20 @@
 <template>
   <AppSection label="environments">
-    <div class="flex flex-col sticky z-10 top-10 bg-primary">
+    <div class="bg-primary flex flex-col top-10 z-10 sticky">
       <div class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"
           :disabled="environments.length == 0"
           class="
-            flex
-            w-full
-            px-4
-            text-xs
-            py-3
-            focus:outline-none
-            border-b border-dividerLight
-            font-medium
             bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-medium
+            text-xs
+            w-full
+            py-3
+            px-4
+            focus:outline-none
           "
         >
           <option :value="-1">No environment</option>
@@ -30,7 +30,7 @@
           </option>
         </select>
       </div>
-      <div class="border-b flex justify-between flex-1 border-dividerLight">
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
           :label="$t('new')"
@@ -60,9 +60,9 @@
     />
     <div
       v-if="environments.length === 0"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">library_add</i>
+      <i class="opacity-50 pb-2 material-icons">library_add</i>
       <span class="text-xs text-center">
         {{ $t("create_new_environment") }}
       </span>

components/firebase/Login.vue

@@ -28,13 +28,13 @@
       </div>
       <div v-if="mode === 'email'" class="flex flex-col space-y-2">
         <div class="flex items-center">
-          <label for="email" class="flex items-center px-4">
+          <label for="email" class="flex px-4 items-center">
-            <i class="material-icons opacity-75">mail</i>
+            <i class="opacity-75 material-icons">mail</i>
           </label>
           <input
             id="email"
             v-model="form.email"
-            class="flex flex-1 rounded px-4 py-2 outline-none"
+            class="rounded flex outline-none flex-1 py-2 px-4"
             type="email"
             name="email"
             placeholder="enter your email"
@@ -61,8 +61,8 @@
         />
       </div>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
-        <div class="flex justify-center max-w-md items-center flex-col">
+        <div class="flex flex-col max-w-md justify-center items-center">
-          <i class="material-icons text-accent text-4xl"> verified </i>
+          <i class="text-accent text-4xl material-icons"> verified </i>
           <h3 class="font-bold my-2 text-center text-lg">
             {{ $t("we_sent_magic_link") }}
           </h3>
@@ -88,7 +88,7 @@
       </p>
       <p
         v-if="mode === 'email-sent'"
-        class="flex flex-1 justify-between text-secondaryLight text-xs"
+        class="flex flex-1 text-secondaryLight text-xs justify-between"
       >
         <SmartAnchor
           class="link"

components/graphql/Field.vue

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

components/graphql/Type.vue

@@ -11,7 +11,7 @@
     </div>
     <div
       v-if="gqlType.description"
-      class="py-2 text-xs text-secondaryLight type-desc"
+      class="text-xs text-secondaryLight py-2 type-desc"
     >
       {{ gqlType.description }}
     </div>
@@ -24,7 +24,7 @@
         <GraphqlTypeLink
           :gql-type="gqlInterface"
           :jump-type-callback="jumpTypeCallback"
-          class="pl-4 border-l-2 border-divider"
+          class="border-divider border-l-2 pl-4"
         />
       </div>
     </div>
@@ -35,7 +35,7 @@
         :key="`child-${index}`"
         :gql-type="child"
         :jump-type-callback="jumpTypeCallback"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
       />
     </div>
     <div v-if="gqlType.getFields">
@@ -43,7 +43,7 @@
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
         :gql-field="field"
         :is-highlighted="isFieldHighlighted({ field })"
         :jump-type-callback="jumpTypeCallback"
@@ -54,7 +54,7 @@
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"
-        class="pl-4 border-l-2 border-divider"
+        class="border-divider border-l-2 pl-4"
         v-text="value.name"
       ></div>
     </div>

components/history/graphql/Card.vue

@@ -3,16 +3,17 @@
     <div class="flex items-center">
       <span
         class="
-          py-3
           cursor-pointer
+          flex
+          font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
           pr-2
           pl-4
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
           transition
-          font-semibold
+          group-hover:text-secondaryDark
         "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
@@ -52,12 +53,11 @@
         v-for="(line, index) in query"
         :key="`line-${index}`"
         class="
-          text-xs
           cursor-pointer
-          truncate
-          px-4
           font-mono
-          text-secondaryLight
+          text-xs text-secondaryLight
+          px-4
+          truncate
         "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"

components/history/index.vue

@@ -2,24 +2,25 @@
   <AppSection label="history">
     <div
       class="
-        flex
-        sticky
-        z-10
         bg-primaryLight
-        top-10
         border-b border-dividerLight
+        flex
+        top-10
+        z-10
+        sticky
       "
     >
       <input
         v-model="filterText"
         type="search"
         class="
-          px-4
-          py-3
-          text-xs
-          flex flex-1
-          font-medium
           bg-primaryLight
+          flex
+          font-medium
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
         :placeholder="$t('search')"
@@ -56,18 +57,18 @@
     </div>
     <div
       v-if="!(filteredHistory.length !== 0 || history.length === 0)"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <i class="opacity-50 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>
     <div
       v-if="history.length === 0"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">schedule</i>
+      <i class="opacity-50 pb-2 material-icons">schedule</i>
       <span class="text-xs text-center">
         {{ $t("history_empty") }}
       </span>

components/history/rest/Card.vue

@@ -2,15 +2,15 @@
   <div class="flex items-center group">
     <span
       class="
-        font-mono font-bold
+        cursor-pointer
         flex
-        justify-center
+        font-mono font-bold
-        items-center
+        mx-2
         text-xs
         w-12
-        mx-2
+        justify-center
+        items-center
         truncate
-        cursor-pointer
       "
       :class="entryStatus.className"
       data-testid="restore_history_entry"
@@ -21,15 +21,16 @@
     </span>
     <span
       class="
-        py-3
         cursor-pointer
-        pr-2
+        flex
-        flex flex-1
-        min-w-0
-        text-xs
-        group-hover:text-secondaryDark
-        transition
         font-semibold
+        flex-1
+        text-xs
+        min-w-0
+        py-3
+        pr-2
+        transition
+        group-hover:text-secondaryDark
       "
       data-testid="restore_history_entry"
       :title="duration"

components/http/BodyParameters.vue

@@ -2,15 +2,15 @@
   <AppSection label="bodyParameters">
     <div
       class="
-        sticky
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
         top-110px
         z-10
-        bg-primary
+        sticky
-        flex flex-1
         items-center
         justify-between
-        pl-4
-        border-b border-dividerLight
       "
     >
       <label for="reqParamList" class="font-semibold text-xs">
@@ -27,22 +27,21 @@
       v-for="(param, index) in bodyParams"
       :key="`param-${index}`"
       class="
+        divide-x divide-dashed divide-divider
+        border-b border-dashed border-divider
         flex
-        border-b border-dashed
-        divide-x
-        border-divider
-        divide-dashed divide-divider
       "
       :class="{ 'border-t': index == 0 }"
     >
       <input
         class="
-          px-4
-          py-3
-          text-xs
-          flex flex-1
-          font-semibold
           bg-primaryLight
+          flex
+          font-semibold
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
         :placeholder="$t('parameter_count', { count: index + 1 })"
@@ -55,12 +54,13 @@
       <input
         v-if="!requestBodyParamIsFile(index)"
         class="
-          px-4
-          py-3
-          text-xs
-          flex flex-1
-          font-semibold
           bg-primaryLight
+          flex
+          font-semibold
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
         :placeholder="$t('value_count', { count: index + 1 })"

components/http/CodegenModal.vue

@@ -5,8 +5,8 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="requestType" class="px-4 font-semibold pb-4 text-xs">
+        <label for="requestType" class="font-semibold text-xs px-4 pb-4">
           {{ $t("choose_language") }}
         </label>
         <div class="flex flex-1">
@@ -22,17 +22,17 @@
               <template #trigger>
                 <span
                   class="
-                    flex
-                    w-full
-                    px-4
-                    text-xs
-                    py-3
-                    rounded-lg
-                    font-semibold
-                    focus:outline-none
-                    border-b border-dividerLight
                     bg-primaryLight
+                    border-b border-dividerLight
+                    rounded-lg
                     cursor-pointer
+                    flex
+                    font-semibold
+                    text-xs
+                    w-full
+                    py-3
+                    px-4
+                    focus:outline-none
                   "
                 >
                   {{ codegens.find((x) => x.id === requestType).name }}
@@ -50,10 +50,10 @@
             </tippy>
           </span>
         </div>
-        <div class="flex justify-between flex-1">
+        <div class="flex flex-1 justify-between">
           <label
             for="generatedCode"
-            class="px-4 pt-4 font-semibold pb-4 text-xs"
+            class="font-semibold text-xs px-4 pt-4 pb-4"
           >
             {{ $t("generated_code") }}
           </label>

components/http/Headers.vue

@@ -2,15 +2,15 @@
   <AppSection label="headers">
     <div
       class="
-        sticky
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
         top-110px
         z-10
-        bg-primary
+        sticky
-        flex flex-1
         items-center
         justify-between
-        pl-4
-        border-b border-dividerLight
       "
     >
       <label for="headerList" class="font-semibold text-xs">
@@ -35,11 +35,9 @@
       v-for="(header, index) in headers$"
       :key="`header-${index}`"
       class="
+        divide-x divide-dashed divide-divider
+        border-b border-dashed border-divider
         flex
-        border-b border-dashed
-        divide-x
-        border-divider
-        divide-dashed divide-divider
       "
       :class="{ 'border-t': index == 0 }"
     >
@@ -59,12 +57,13 @@
       />
       <input
         class="
-          px-4
-          py-3
-          text-xs
-          flex flex-1
-          font-semibold
           bg-primaryLight
+          flex
+          font-semibold
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
         :placeholder="$t('value_count', { count: index + 1 })"

components/http/Parameters.vue

@@ -2,15 +2,15 @@
   <AppSection label="parameters">
     <div
       class="
-        sticky
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
         top-110px
         z-10
-        bg-primary
+        sticky
-        flex flex-1
         items-center
         justify-between
-        pl-4
-        border-b border-dividerLight
       "
     >
       <label for="paramList" class="font-semibold text-xs">
@@ -35,22 +35,21 @@
       v-for="(param, index) in params$"
       :key="`param-${index}`"
       class="
+        divide-x divide-dashed divide-divider
+        border-b border-dashed border-divider
         flex
-        border-b border-dashed
-        divide-x
-        border-divider
-        divide-dashed divide-divider
       "
       :class="{ 'border-t': index == 0 }"
     >
       <input
         class="
-          px-4
-          py-3
-          text-xs
-          flex flex-1
-          font-semibold
           bg-primaryLight
+          flex
+          font-semibold
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
         :placeholder="$t('parameter_count', { count: index + 1 })"
@@ -67,12 +66,13 @@
       />
       <input
         class="
-          px-4
-          py-3
-          text-xs
-          flex flex-1
-          font-semibold
           bg-primaryLight
+          flex
+          font-semibold
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
         :placeholder="$t('value_count', { count: index + 1 })"

components/http/RawBody.vue

@@ -2,15 +2,15 @@
   <div>
     <div
       class="
-        sticky
+        bg-primary
+        border-b border-dividerLight
+        flex flex-1
+        pl-4
         top-110px
         z-10
-        bg-primary
+        sticky
-        flex flex-1
         items-center
         justify-between
-        pl-4
-        border-b border-dividerLight
       "
     >
       <label for="rawBody" class="font-semibold text-xs">

components/http/Request.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky top-0 z-10 bg-primary flex p-4">
+  <div class="bg-primary flex p-4 top-0 z-10 sticky">
     <div class="relative inline-flex">
       <span class="select-wrapper">
         <tippy
@@ -14,23 +14,23 @@
             <input
               id="method"
               class="
-                flex
-                rounded-l-lg
                 bg-primaryLight
-                font-mono
-                w-32
-                px-4
-                py-2
-                truncate
-                text-secondaryDark
-                font-semibold
                 border border-divider
-                transition
+                rounded-l-lg
-                focus:outline-none focus:border-accent
                 cursor-pointer
+                flex
+                font-mono
+                text-secondaryDark
+                py-2
+                px-4
+                transition
+                w-32
+                truncate
+                focus:outline-none focus:border-accent
               "
               :value="newMethod$"
               autofocus
+              readonly
             />
           </template>
           <SmartItem
@@ -51,15 +51,15 @@
         id="url"
         v-model="newEndpoint$"
         class="
-          w-full
-          font-mono font-semibold
-          truncate
-          text-secondaryDark
-          px-4
-          py-2
-          border border-divider
           bg-primaryLight
+          border border-divider
+          font-mono
+          text-secondaryDark
+          w-full
+          py-2
+          px-4
           transition
+          truncate
           focus:outline-none focus:border-accent
         "
         name="url"
@@ -71,46 +71,14 @@
       <!-- <SmartUrlField v-else v-model="uri" /> -->
     </div>
     <div class="flex">
-      <span
+      <ButtonPrimary
         id="send"
-        class="
+        class="rounded-none font-bold"
-          px-4
+        :label="!loading ? $t('send') : $('cancel')"
-          py-2
+        :shortcuts="[getSpecialKey(), 'G']"
-          border border-accent
+        @click.native="!loading ? newSendRequest() : cancelRequest()"
-          font-mono
+      />
-          flex
+      <span class="inline-flex">
-          items-center
-          truncate
-          font-semibold
-          bg-accent
-          text-white
-          cursor-pointer
-          dark:text-accentDark
-        "
-        @click="newSendRequest"
-      >
-        {{ $t("send") }}
-      </span>
-      <!-- <span
-        v-else
-        id="cancel"
-        class="
-          px-4
-          py-2
-          border border-accent
-          font-mono
-          flex
-          items-center
-          truncate
-          font-semibold
-          bg-accent
-          text-white
-          cursor-pointer
-        "
-        @click="cancelRequest"
-      >
-        {{ $t("cancel") }}
-      </span> -->
         <tippy
           ref="sendOptions"
           interactive
@@ -120,25 +88,7 @@
           arrow
         >
           <template #trigger>
-          <span
+            <ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
-            class="
-              px-1
-              py-2
-              border border-accent
-              font-mono
-              flex
-              items-center
-              justify-center
-              truncate
-              font-semibold
-              bg-accent
-              text-white
-              rounded-r-lg
-              dark:text-accentDark
-            "
-          >
-            <i class="material-icons">keyboard_arrow_down</i>
-          </span>
           </template>
           <SmartItem
             :label="$t('import_curl')"
@@ -166,25 +116,15 @@
             "
           />
         </tippy>
-      <span
-        class="
-          ml-4
-          px-4
-          py-2
-          border border-divider
-          font-mono
-          flex
-          items-center
-          justify-center
-          truncate
-          font-semibold
-          rounded-l-lg
-          cursor-pointer
-        "
-        @click="newSendRequest"
-      >
-        Save
       </span>
+      <ButtonSecondary
+        class="rounded-r-none ml-2"
+        :label="$t('save')"
+        :shortcuts="[getSpecialKey(), 'S']"
+        outline
+        @click.native="newSendRequest"
+      />
+      <span class="inline-flex">
         <tippy
           ref="saveOptions"
           interactive
@@ -194,22 +134,11 @@
           arrow
         >
           <template #trigger>
-          <span
+            <ButtonSecondary
-            class="
+              icon="keyboard_arrow_down"
-              px-1
+              outline
-              py-2
+              class="rounded-l-none"
-              border border-divider
+            />
-              font-mono
-              flex
-              items-center
-              justify-center
-              truncate
-              font-semibold
-              rounded-r-lg
-            "
-          >
-            <i class="material-icons">keyboard_arrow_down</i>
-          </span>
           </template>
           <SmartItem :description="$t('token_req_name')" />
           <input
@@ -217,7 +146,7 @@
             v-model="name"
             name="request-name"
             type="text"
-          class="input text-sm"
+            class="text-sm input"
           />
           <SmartItem
             ref="copyRequest"
@@ -238,6 +167,7 @@
             "
           />
         </tippy>
+      </span>
     </div>
   </div>
 </template>
@@ -254,6 +184,7 @@ import {
 import { createRESTNetworkRequestStream } from "~/helpers/network"
 import { currentEnvironment$ } from "~/newstore/environments"
 import { getEffectiveRESTRequestStream } from "~/helpers/utils/EffectiveURL"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 export default {
   data() {
@@ -277,6 +208,7 @@ export default {
       showCodegenModal: false,
       navigatorShare: navigator.share,
       effectiveStream$: null,
+      loading: false,
     }
   },
   subscriptions() {
@@ -294,12 +226,13 @@ export default {
       setRESTEndpoint(newVal)
     },
   },
-  mounted() {},
   methods: {
+    getSpecialKey: getPlatformSpecialKey,
     updateMethod(method) {
       updateRESTMethod(method)
     },
     newSendRequest() {
+      this.loading = true
       this.$subscribeTo(
         createRESTNetworkRequestStream(
           this.effectiveStream$,
@@ -308,6 +241,7 @@ export default {
         (responseState) => {
           console.log(responseState)
           updateRESTResponse(responseState)
+          this.loading = false
         }
       )
     },

components/http/ResponseMeta.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="flex sticky top-0 z-10 bg-primary items-center p-4">
+  <div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
     <div
       v-if="response == null"
       class="
-        flex flex-1
+        flex flex-col flex-1
-        items-center
         text-secondaryLight
-        flex-col
         p-4
+        items-center
         justify-center
       "
     >
-      <i class="material-icons opacity-50 pb-2">send</i>
+      <i class="opacity-50 pb-2 material-icons">send</i>
       <span class="text-xs text-center">
         {{ $t("waiting_send_req") }}
       </span>

components/landing/CTA.vue

@@ -1,21 +1,20 @@
 <template>
-  <div class="flex p-4 bg-primaryLight rounded">
+  <div class="bg-primaryLight rounded flex p-4">
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       <div
         v-for="(cta, index) in ctas"
         :key="`cta-${index}`"
-        class="inline-flex flex-col p-8"
+        class="flex-col p-8 inline-flex"
       >
-        <i class="text-3xl material-icons text-accent">{{ cta.icon }}</i>
+        <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
         <div class="flex-grow">
           <h2
             class="
-              mt-4
-              mb-2
-              text-lg
               font-semibold
+              mt-4
+              text-lg text-secondaryDark
+              mb-2
               transition
-              text-secondaryDark
             "
           >
             {{ cta.title }}

components/landing/Features.vue

@@ -1,26 +1,25 @@
 <template>
   <div class="flex flex-col p-4">
     <div class="flex flex-col items-center">
-      <p class="my-4 font-semibold tracking-widest text-center text-accent">
+      <p class="font-semibold my-4 text-center text-accent tracking-widest">
         FEATURES
       </p>
     </div>
-    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       <div
         v-for="(feature, index) in features"
         :key="`feature-${index}`"
-        class="inline-flex flex-col p-8"
+        class="flex-col p-8 inline-flex"
       >
-        <i class="text-4xl material-icons text-accent">{{ feature.icon }}</i>
+        <i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
         <div class="flex-grow">
           <h2
             class="
-              mt-4
-              mb-2
-              text-lg
               font-semibold
+              mt-4
+              text-lg text-secondaryDark
+              mb-2
               transition
-              text-secondaryDark
             "
           >
             {{ feature.title }}

components/landing/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer class="flex flex-col p-4">
-    <nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
+    <nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
       <div class="flex flex-col space-y-2">
         <span>
           <AppLogo class="h-8" />
@@ -22,7 +22,7 @@
         <SmartColorModePicker />
       </div>
       <div class="flex flex-col space-y-2">
-        <h4 class="my-2 font-semibold">Solutions</h4>
+        <h4 class="font-semibold my-2">Solutions</h4>
         <ul class="space-y-2">
           <li
             v-for="(item, index) in navigation.solutions"
@@ -37,7 +37,7 @@
         </ul>
       </div>
       <div class="flex flex-col space-y-2">
-        <h4 class="my-2 font-semibold">Platform</h4>
+        <h4 class="font-semibold my-2">Platform</h4>
         <ul class="space-y-2">
           <li
             v-for="(item, index) in navigation.platform"
@@ -52,7 +52,7 @@
         </ul>
       </div>
       <div class="flex flex-col space-y-2">
-        <h4 class="my-2 font-semibold">Company</h4>
+        <h4 class="font-semibold my-2">Company</h4>
         <ul class="space-y-2">
           <li
             v-for="(item, index) in navigation.company"

components/landing/Hero.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="flex p-4 relative">
-    <div class="relative my-16 z-10 max-w-3xl">
+    <div class="my-16 max-w-3xl z-10 relative">
       <h2
         class="
+          font-semibold
+          text-accent
           leading-none
           tracking-tighter
-          font-semibold
+          text-4xl
-          text-accent text-4xl
           md:text-5xl
           lg:text-6xl
         "
@@ -15,23 +16,21 @@
       </h2>
       <h3
         class="
-          text-3xl
+          font-mono font-semibold
           my-4
-          font-mono
+          text-secondaryDark text-3xl
-          text-secondaryDark
           md:text-4xl
           lg:text-4xl
-          font-semibold
         "
       >
         API Development Ecosystem
       </h3>
-      <p class="text-lg my-4 text-secondaryLight max-w-4/5">
+      <p class="my-4 text-lg text-secondaryLight max-w-4/5">
         Millions of developers and companies build, ship, and maintain their
         APIs on Hoppscotch — the largest and most advanced development platform
         in the world.
       </p>
-      <div class="my-8 flex items-center">
+      <div class="flex my-8 items-center">
         <ButtonPrimary
           label="Dashboard"
           icon="chevron_right"
@@ -45,7 +44,7 @@
       </div>
     </div>
     <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
-      <LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:h-full" />
+      <LandingGlobe class="h-64 w-full lg:h-full sm:h-72 md:h-96" />
     </div>
   </div>
 </template>

components/landing/Stats.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex p-4 font-mono space-x-16">
+  <div class="flex font-mono space-x-16 p-4">
     <div v-for="(stat, index) in stats" :key="`stat-${index}`">
-      <span class="text-xl font-bold">
+      <span class="font-bold text-xl">
         {{ stat.count }}<span class="text-secondaryLight">+</span>
       </span>
       <br />

components/landing/Users.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col p-4 mx-4 bg-primaryLight rounded">
+  <div class="bg-primaryLight rounded flex flex-col mx-4 p-4">
     <div class="flex flex-col items-center">
-      <p class="my-4 font-semibold tracking-widest text-center">
+      <p class="font-semibold my-4 text-center tracking-widest">
         EMPOWERING DEVELOPERS FROM
       </p>
     </div>
-    <div class="grid grid-cols-3 gap-4 md:grid-cols-4 lg:grid-cols-6">
+    <div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
       <div
         v-for="(user, index) in users"
         :key="`user-${index}`"
-        class="inline-flex flex-col items-center justify-center px-4"
+        class="flex-col px-4 inline-flex items-center justify-center"
       >
         <img
           :src="`/images/users/${user.image}`"
           alt="Profile picture"
           loading="lazy"
-          class="inline-flex flex-col object-contain object-center h-24 w-24"
+          class="flex-col object-contain object-center h-24 w-24 inline-flex"
         />
       </div>
     </div>

components/lenses/HeadersRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-2 font-mono">
+  <div class="font-mono p-2">
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
@@ -7,13 +7,13 @@
     >
       <span
         class="
-          p-2
           flex
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          text-xs
+          min-w-0
+          p-2
+          transition
+          group-hover:text-secondaryDark
         "
       >
         <span class="truncate">
@@ -22,12 +22,12 @@
       </span>
       <span
         class="
-          font-mono font-bold
           flex
+          font-mono font-bold
+          mx-2
+          text-xs
           justify-center
           items-center
-          text-xs
-          mx-2
           truncate
         "
       >
@@ -35,13 +35,14 @@
       </span>
       <span
         class="
-          p-2
+          flex
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          p-2
+          transition
+          group-hover:text-secondaryDark
         "
       >
         <span class="truncate">

components/lenses/renderers/HTMLLensRenderer.vue

@@ -2,17 +2,17 @@
   <div>
     <div
       class="
+        bg-primary
+        border-b border-dividerLight
         flex flex-1
-        sticky
         top-23
         z-10
-        bg-primary
+        sticky
         items-center
         justify-between
-        border-b border-dividerLight
       "
     >
-      <label for="body" class="px-4 font-semibold text-xs">
+      <label for="body" class="font-semibold text-xs px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/lenses/renderers/ImageLensRenderer.vue

@@ -2,17 +2,17 @@
   <div>
     <div
       class="
+        bg-primary
+        border-b border-dividerLight
         flex flex-1
-        sticky
         top-23
         z-10
-        bg-primary
+        sticky
         items-center
         justify-between
-        border-b border-dividerLight
       "
     >
-      <label for="body" class="px-4 font-semibold text-xs">
+      <label for="body" class="font-semibold text-xs px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/lenses/renderers/JSONLensRenderer.vue

@@ -2,17 +2,17 @@
   <div>
     <div
       class="
+        bg-primary
+        border-b border-dividerLight
         flex flex-1
-        sticky
         top-23
         z-10
-        bg-primary
+        sticky
         items-center
         justify-between
-        border-b border-dividerLight
       "
     >
-      <label for="body" class="px-4 font-semibold text-xs">
+      <label for="body" class="font-semibold text-xs px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/lenses/renderers/RawLensRenderer.vue

@@ -2,17 +2,17 @@
   <div>
     <div
       class="
+        bg-primary
+        border-b border-dividerLight
         flex flex-1
-        sticky
         top-23
         z-10
-        bg-primary
+        sticky
         items-center
         justify-between
-        border-b border-dividerLight
       "
     >
-      <label for="body" class="px-4 font-semibold text-xs">
+      <label for="body" class="font-semibold text-xs px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/lenses/renderers/XMLLensRenderer.vue

@@ -2,17 +2,17 @@
   <div>
     <div
       class="
+        bg-primary
+        border-b border-dividerLight
         flex flex-1
-        sticky
         top-23
         z-10
-        bg-primary
+        sticky
         items-center
         justify-between
-        border-b border-dividerLight
       "
     >
-      <label for="body" class="px-4 font-semibold text-xs">
+      <label for="body" class="font-semibold text-xs px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/profile/Picture.vue

@@ -1,21 +1,20 @@
 <template>
-  <div class="relative flex items-center justify-center h-5 w-5 cursor-pointer">
+  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
     <img
       class="
-        absolute
+        bg-primaryDark bg-primaryLight
-        object-cover object-center
-        transition
         rounded-full
-        bg-primaryDark
+        object-cover object-center
         h-5
+        transition
         w-5
-        bg-primaryLight
+        absolute
       "
       :src="url"
       :alt="alt"
       loading="lazy"
     />
-    <div class="absolute inset-0 rounded-lg shadow-inner"></div>
+    <div class="rounded-lg shadow-inner inset-0 absolute"></div>
   </div>
 </template>
 

components/realtime/Mqtt.vue

@@ -23,8 +23,8 @@
                       id="connect"
                       :disabled="!validUrl"
                       class="
-                        button
                         rounded-b-lg
+                        button
                         md:rounded-bl-none md:rounded-br-lg
                       "
                       :icon="!connectionState ? 'sync' : 'sync_disabled'"
@@ -70,7 +70,7 @@
                 v-model="msg"
                 type="text"
                 spellcheck="false"
-                class="input border-dashed md:border-l border-divider"
+                class="border-dashed border-divider input md:border-l"
               />
             </li>
             <div>
@@ -105,8 +105,8 @@
                   name="get"
                   :disabled="!cansubscribe"
                   class="
-                    button
                     rounded-b-lg
+                    button
                     md:rounded-bl-none md:rounded-br-lg
                   "
                   :icon="subscriptionState ? 'sync_disabled' : 'sync'"

components/realtime/Socketio.vue

@@ -37,8 +37,8 @@
                       :disabled="!urlValid"
                       name="connect"
                       class="
-                        button
                         rounded-b-lg
+                        button
                         md:rounded-bl-none md:rounded-br-lg
                       "
                       :icon="!connectionState ? 'sync' : 'sync_disabled'"
@@ -91,12 +91,9 @@
             :key="`input-${index}`"
             :class="{ 'border-t': index == 0 }"
             class="
-              border-b border-dashed
+              divide-y divide-dashed divide-divider
-              divide-y
+              border-b border-dashed border-divider
-              md:divide-x
+              md:divide-x md:divide-y-0
-              border-divider
-              divide-dashed divide-divider
-              md:divide-y-0
             "
           >
             <li>

components/realtime/Sse.vue

@@ -23,8 +23,8 @@
                   :disabled="!serverValid"
                   name="start"
                   class="
-                    button
                     rounded-b-lg
+                    button
                     md:rounded-bl-none md:rounded-br-lg
                   "
                   :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"

components/realtime/Websocket.vue

@@ -48,12 +48,9 @@
                 :key="`protocol-${index}`"
                 :class="{ 'border-t': index == 0 }"
                 class="
-                  border-b border-dashed
+                  divide-y divide-dashed divide-divider
-                  divide-y
+                  border-b border-dashed border-divider
-                  md:divide-x
+                  md:divide-x md:divide-y-0
-                  border-divider
-                  divide-dashed divide-divider
-                  md:divide-y-0
                 "
               >
                 <li>
@@ -150,8 +147,8 @@
                   name="send"
                   :disabled="!connectionState"
                   class="
-                    button
                     rounded-b-lg
+                    button
                     md:rounded-bl-none md:rounded-br-lg
                   "
                   icon="send"

components/smart/AceEditor.vue

@@ -4,16 +4,17 @@
     <div
       v-if="lang == 'json'"
       class="
-        sticky
-        bottom-0
-        z-10
-        flex flex-nowrap flex-1
-        overflow-auto
-        font-mono
-        shadow-lg
-        px-4
         bg-primaryLight
         border-t border-divider
+        flex flex-nowrap
+        font-mono
+        flex-1
+        shadow-lg
+        px-4
+        bottom-0
+        z-10
+        sticky
+        overflow-auto
         hide-scrollbar
       "
     >
@@ -21,20 +22,19 @@
         v-for="(p, index) in currentPath"
         :key="`p-${index}`"
         class="
-          inline-flex
-          items-center
-          flex-grow-0 flex-shrink-0
-          text-secondaryLight
-          hover:text-secondary
           cursor-pointer
           font-semibold
-          text-xs
+          flex-grow-0 flex-shrink-0
+          text-secondaryLight text-xs
+          inline-flex
+          items-center
+          hover:text-secondary
         "
       >
         <span @click="onBlockClick(index)">
           {{ p }}
         </span>
-        <i v-if="index + 1 !== currentPath.length" class="material-icons mx-2">
+        <i v-if="index + 1 !== currentPath.length" class="mx-2 material-icons">
           chevron_right
         </i>
         <tippy

components/smart/AutoComplete.vue

@@ -4,12 +4,13 @@
       ref="acInput"
       v-model="text"
       class="
-        px-4
-        py-3
-        text-xs
-        flex flex-1
-        font-semibold
         bg-primaryLight
+        flex
+        font-semibold
+        flex-1
+        text-xs
+        py-3
+        px-4
         focus:outline-none
       "
       type="text"

components/smart/ConfirmModal.vue

@@ -7,7 +7,7 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label class="font-semibold text-xs">
           {{ title }}
         </label>

components/smart/Item.vue

@@ -4,13 +4,13 @@
     :exact="exact"
     :blank="blank"
     class="
-      inline-flex
-      px-4
-      py-2
-      text-xs
-      font-semibold
-      transition
       rounded-lg
+      font-semibold
+      text-xs
+      py-2
+      px-4
+      transition
+      inline-flex
       items-center
       focus:bg-primaryDark focus:text-secondaryDark
       hover:bg-primaryDark hover:text-secondaryDark
@@ -49,7 +49,7 @@
         {{ description }}
       </p>
     </div>
-    <i v-if="infoIcon" class="ml-4 text-accent material-icons">
+    <i v-if="infoIcon" class="text-accent ml-4 material-icons">
       {{ infoIcon }}
     </i>
   </SmartLink>

components/smart/Modal.vue

@@ -3,16 +3,16 @@
     <div
       ref="modal"
       class="
-        fixed
+        bg-primaryLight
-        inset-0
-        z-50
-        w-full
-        h-full
         flex
+        h-full
+        w-full
+        inset-0
+        transition
+        z-50
+        fixed
         items-center
         justify-center
-        transition
-        bg-primaryLight
       "
       @touchstart="onBackdropMouseDown"
       @touchend="onBackdropMouseUp"
@@ -21,27 +21,28 @@
     >
       <div
         class="
-          modal-container
-          relative
-          flex flex-1 flex-col
-          m-2
-          p-4
-          transition
           bg-primary
           rounded-lg
-          shadow-xl
+          flex flex-col
           max-w-md max-h-lg
+          flex-1
+          m-2
+          shadow-xl
+          p-4
+          transition
+          modal-container
+          relative
         "
       >
         <div class="flex pl-2 items-center justify-between">
           <slot name="header"></slot>
         </div>
-        <div class="my-4 overflow-auto flex flex-col">
+        <div class="flex flex-col my-4 overflow-auto">
           <slot name="body"></slot>
         </div>
         <div
           v-if="hasFooterSlot"
-          class="p-2 flex flex-1 items-center justify-between"
+          class="flex flex-1 p-2 items-center justify-between"
         >
           <slot name="footer"></slot>
         </div>

components/smart/Spinner.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="animate-spin w-5 h-5"
+    class="h-5 animate-spin w-5"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"

components/smart/Toggle.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="inline-flex cursor-pointer flex-nowrap" @click="$emit('change')">
+  <div class="cursor-pointer flex-nowrap inline-flex" @click="$emit('change')">
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
     <label
-      class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
+      class="cursor-pointer font-semibold text-xs pl-0 align-middle truncate"
     >
       <slot></slot>
     </label>

components/tab/Primary.vue

@@ -4,14 +4,14 @@
     :exact="exact"
     :blank="blank"
     class="
+      rounded-lg
+      font-semibold
+      py-2
+      px-4
+      transition
       inline-flex
       items-center
-      px-4
-      py-2
-      font-semibold
       truncate
-      transition
-      rounded-lg
       focus:outline-none
     "
     :class="[

components/tab/Secondary.vue

@@ -4,18 +4,19 @@
     :exact="exact"
     :blank="blank"
     class="
-      inline-flex
+      font-semibold
-      items-center
       flex-1
       py-2
-      font-semibold
-      transition
       transform
+      transition
+      inline-flex
+      items-center
+      focus:outline-none
       hover:translate-x-2
-      focus:translate-x-2 focus:outline-none
+      focus:translate-x-2
     "
     :class="[
-      label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
+      label ? 'px-3' : 'px-2',
       active
         ? color
           ? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`

components/teams/Add.vue

@@ -5,8 +5,8 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
-        <label for="selectLabelTeamAdd" class="px-4 font-semibold pb-4 text-xs">
+        <label for="selectLabelTeamAdd" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/teams/Edit.vue

@@ -5,10 +5,10 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelTeamEdit"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>
@@ -20,19 +20,16 @@
           :placeholder="editingTeam.name"
           @keyup.enter="saveTeam"
         />
-        <label for="memberList" class="px-4 pt-4 font-semibold pb-4 text-xs">
+        <label for="memberList" class="font-semibold text-xs px-4 pt-4 pb-4">
           {{ $t("team_member_list") }}
         </label>
         <ul
           v-for="(member, index) in members"
           :key="`member-${index}`"
           class="
-            border-b border-dashed
+            divide-y divide-dashed divide-divider
-            divide-y
+            border-b border-dashed border-divider
-            md:divide-x
+            md:divide-x md:divide-y-0
-            border-divider
-            divide-dashed divide-divider
-            md:divide-y-0
           "
           :class="{ 'border-t': index == 0 }"
         >
@@ -108,12 +105,9 @@
           v-for="(member, index) in newMembers"
           :key="`member-${index}`"
           class="
-            border-b border-dashed
+            divide-y divide-dashed divide-divider
-            divide-y
+            border-b border-dashed border-divider
-            md:divide-x
+            md:divide-x md:divide-y-0
-            border-divider
-            divide-dashed divide-divider
-            md:divide-y-0
           "
         >
           <li>

layouts/error.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="page page-error">
-    <h1 class="mb-4 font-mono heading text-4xl">{{ statusCode }}</h1>
+    <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
-    <h3 class="mb-4 heading font-mono text-xs">{{ message }}</h3>
+    <h3 class="font-mono text-xs mb-4 heading">{{ message }}</h3>
-    <p class="mt-4 border-t border-tooltip">
+    <p class="border-t border-divider mt-4">
       <ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
       <ButtonSecondary
         icon="refresh"

middleware/README.md

@@ -1,7 +1,8 @@
 # MIDDLEWARE
-<br/>
+
-parsedefaulturl.js - parse default url for appropriate path  
+**This directory is not required, you can delete it if you don't want to use it.**
-<br/>
+
-<br/>
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
 
 More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

middleware/parsedefaulturl.js

@@ -1,5 +0,0 @@
-export default function ({ route, redirect }) {
-  if (route.fullPath !== "/") {
-    return redirect("/")
-  }
-}

pages/graphql.vue

@@ -262,7 +262,7 @@
               <input
                 v-else
                 ref="status"
-                class="input rounded-b-lg missing-data-response"
+                class="rounded-b-lg input missing-data-response"
                 :value="$t('waiting_receive_schema')"
                 name="status"
                 readonly
@@ -312,7 +312,7 @@
                 <input
                   v-else
                   ref="status"
-                  class="input rounded-b-lg missing-data-response"
+                  class="rounded-b-lg input missing-data-response"
                   :value="$t('waiting_receive_response')"
                   name="status"
                   readonly
@@ -333,18 +333,19 @@
           <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
-                <div class="flex flex-col sticky z-10 bg-primaryLight top-10">
+                <div class="bg-primaryLight flex flex-col top-10 z-10 sticky">
                   <input
                     v-model="graphqlFieldsFilterText"
                     type="text"
                     :placeholder="$t('search')"
                     class="
-                      px-4
-                      py-3
-                      text-xs
-                      flex flex-1
-                      font-medium
                       bg-primaryLight
+                      flex
+                      font-medium
+                      flex-1
+                      text-xs
+                      py-3
+                      px-4
                       focus:outline-none
                     "
                   />
@@ -429,15 +430,14 @@
                     graphqlTypes.length === 0
                   "
                   class="
-                    flex
+                    flex flex-col
-                    items-center
                     text-secondaryLight
-                    flex-col
                     p-4
+                    items-center
                     justify-center
                   "
                 >
-                  <i class="material-icons opacity-50 pb-2">description</i>
+                  <i class="opacity-50 pb-2 material-icons">description</i>
                   <span class="text-xs text-center">
                     {{ $t("send_request_first") }}
                   </span>

pages/index.vue

@@ -17,7 +17,7 @@
               </SmartTab>
 
               <SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
-                <div class="flex flex-1 items-center justify-between py-2">
+                <div class="flex flex-1 py-2 items-center justify-between">
                   <tippy
                     interactive
                     ref="contentTypeOptions"
@@ -31,19 +31,7 @@
                         <span class="select-wrapper">
                           <input
                             id="contentType"
-                            class="
+                            class="bg-primary rounded-lg flex font-semibold font-mono text-xs w-full py-2 px-4 transition truncate focus:outline-none"
-                              flex
-                              w-full
-                              px-4
-                              py-2
-                              bg-primary
-                              truncate
-                              rounded-lg
-                              font-semibold font-mono
-                              text-xs
-                              transition
-                              focus:outline-none
-                            "
                             v-model="contentType"
                             readonly
                           />
@@ -321,17 +309,7 @@
               >
                 <AppSection v-if="showPreRequestScript" label="preRequest">
                   <div
-                    class="
+                    class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-110px z-10 sticky items-center justify-between"
-                      sticky
-                      top-110px
-                      z-10
-                      bg-primary
-                      flex flex-1
-                      items-center
-                      justify-between
-                      pl-4
-                      border-b border-dividerLight
-                    "
                   >
                     <label class="font-semibold text-xs">
                       {{ $t("javascript_code") }}
@@ -362,17 +340,7 @@
               <SmartTab :id="'tests'" :label="$t('tests')">
                 <AppSection v-if="testsEnabled" label="postRequestTests">
                   <div
-                    class="
+                    class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-110px z-10 sticky items-center justify-between"
-                      sticky
-                      top-110px
-                      z-10
-                      bg-primary
-                      flex flex-1
-                      items-center
-                      justify-between
-                      pl-4
-                      border-b border-dividerLight
-                    "
                   >
                     <label class="font-semibold text-xs">
                       {{ $t("javascript_code") }}
@@ -398,7 +366,7 @@
                     completeMode="test"
                   />
                   <div v-if="testReports.length !== 0">
-                    <div class="flex flex-1 items-center justify-between pl-4">
+                    <div class="flex flex-1 pl-4 items-center justify-between">
                       <label class="font-semibold text-xs">
                         Test Reports
                       </label>
@@ -422,13 +390,13 @@
                       </div>
                       <p
                         v-else-if="testReport.result"
-                        class="flex flex-1 font-mono text-xs info"
+                        class="flex font-mono flex-1 text-xs info"
                       >
                         <span
                           :class="testReport.styles.class"
                           class="flex items-center"
                         >
-                          <i class="material-icons text-sm">
+                          <i class="text-sm material-icons">
                             {{ testReport.styles.icon }}
                           </i>
                           <span>&nbsp;{{ testReport.result }}</span>

pages/settings.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="space-y-8">
       <div class="md:grid md:grid-cols-3 md:gap-4">
-        <div class="md:col-span-1 p-8">
+        <div class="p-8 md:col-span-1">
           <h3 class="heading">
             {{ $t("account") }}
           </h3>
@@ -10,7 +10,7 @@
             Customize your account settings.
           </p>
         </div>
-        <div class="md:col-span-2 border border-divider p-8 rounded-lg">
+        <div class="border border-divider rounded-lg p-8 md:col-span-2">
           <div v-if="currentUser === null">
             <ButtonPrimary label="Log in" @click.native="showLogin = true" />
             <div class="mt-4 text-xs text-secondaryLight">
@@ -20,13 +20,13 @@
           <div v-else class="space-y-8">
             <fieldset>
               <legend class="font-bold text-secondaryDark">User</legend>
-              <div class="mt-4 space-y-4">
+              <div class="space-y-4 mt-4">
                 <div class="flex items-start">
                   <div class="flex items-center">
                     <img
                       v-if="currentUser.photoURL"
                       :src="currentUser.photoURL"
-                      class="w-5 h-5 rounded-full"
+                      class="rounded-full h-5 w-5"
                     />
                     <i v-else class="material-icons">account_circle</i>
                   </div>
@@ -59,7 +59,7 @@
               <div class="mt-1 text-xs text-secondaryLight">
                 These settings are synced to cloud.
               </div>
-              <div class="mt-4 space-y-4">
+              <div class="space-y-4 mt-4">
                 <div class="flex items-center">
                   <SmartToggle
                     :on="SYNC_COLLECTIONS"
@@ -95,7 +95,7 @@
       </div>
 
       <div class="md:grid md:grid-cols-3 md:gap-4">
-        <div class="md:col-span-1 p-8">
+        <div class="p-8 md:col-span-1">
           <h3 class="heading">
             {{ $t("theme") }}
           </h3>
@@ -104,7 +104,7 @@
           </p>
         </div>
         <div
-          class="md:col-span-2 border border-divider p-8 rounded-lg space-y-8"
+          class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
         >
           <fieldset>
             <legend class="font-bold text-secondaryDark">
@@ -150,7 +150,7 @@
                 {{ $t("contact_us") }} </SmartLink
               >.
             </div>
-            <div class="mt-4 space-y-4">
+            <div class="space-y-4 mt-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="SCROLL_INTO_ENABLED"
@@ -179,7 +179,7 @@
       </div>
 
       <div class="md:grid md:grid-cols-3 md:gap-4">
-        <div class="md:col-span-1 p-8">
+        <div class="p-8 md:col-span-1">
           <h3 class="heading">
             {{ $t("interceptor") }}
           </h3>
@@ -188,7 +188,7 @@
           </p>
         </div>
         <div
-          class="md:col-span-2 border border-divider p-8 rounded-lg space-y-8"
+          class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
         >
           <fieldset>
             <legend class="font-bold text-secondaryDark">
@@ -207,7 +207,7 @@
                 {{ $t("extension_ver_not_reported") }}
               </span>
             </div>
-            <div class="mt-4 space-y-4">
+            <div class="space-y-4 mt-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="EXTENSIONS_ENABLED"
@@ -232,7 +232,7 @@
                 {{ $t("proxy_privacy_policy") }} </SmartLink
               >.
             </div>
-            <div class="mt-4 space-y-4">
+            <div class="space-y-4 mt-4">
               <div class="flex items-center">
                 <SmartToggle
                   :on="PROXY_ENABLED"
@@ -241,13 +241,12 @@
                 <label
                   for="url"
                   class="
+                    bg-primaryLight
+                    border border-divider
                     rounded-l
                     ml-2
-                    border
-                    px-2
                     py-1
-                    bg-primaryLight
+                    px-2
-                    border-divider
                   "
                   >{{ $t("url") }}</label
                 >
@@ -255,15 +254,14 @@
                   id="url"
                   v-model="PROXY_URL"
                   class="
-                    flex-1
+                    border border-divider
-                    block
-                    w-full
                     rounded-r
-                    border
+                    flex-1
-                    px-2
-                    py-1
                     mr-2
-                    border-divider
+                    w-full
+                    py-1
+                    px-2
+                    block
                   "
                   type="url"
                   :disabled="!PROXY_ENABLED"