refactor(ui): sort windicss classes

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">
-    <div class="inline-flex space-x-2 items-center font-bold flex-shrink-0">
+  <header class="flex flex-1 p-2 items-center justify-between">
+    <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 }}