refactor(ui): sort windicss classes

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
-        inset-0
-        z-50
-        w-full
-        h-full
+        bg-primaryLight
         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>