refactor: lint + minor ui fixes

packages/hoppscotch-app/components/smart/Checkbox.vue

@@ -1,15 +1,6 @@
 <template>
   <div
-    class="
-      flex-nowrap
-      group
-      hover:text-secondaryDark
-      inline-flex
-      items-center
-      justify-center
-      transition
-      cursor-pointer
-    "
+    class="flex-nowrap group hover:text-secondaryDark inline-flex items-center justify-center transition cursor-pointer"
     @click="$emit('change')"
   >
     <input

packages/hoppscotch-app/components/smart/Item.vue

@@ -3,18 +3,7 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="
-      hover:bg-primaryDark hover:text-secondaryDark
-      focus:outline-none
-      focus-visible:bg-primaryDark focus-visible:text-secondaryDark
-      inline-flex
-      items-center
-      flex-shrink-0
-      px-4
-      py-2
-      transition
-      rounded
-    "
+    class="hover:bg-primaryDark hover:text-secondaryDark focus:outline-none focus-visible:bg-primaryDark focus-visible:text-secondaryDark inline-flex items-center flex-shrink-0 px-4 py-2 transition rounded"
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
@@ -53,7 +42,7 @@
         class="svg-icons"
       />
     </span>
-    <SmartSpinner v-else class="mr-4 text-secondaryDark" />
+    <SmartSpinner v-else class="text-secondaryDark mr-4" />
     <div
       class="inline-flex items-start flex-1 truncate"
       :class="{ 'flex-col': description }"
@@ -63,14 +52,14 @@
       </div>
       <p
         v-if="description"
-        class="my-2 font-medium text-left text-secondaryLight"
+        class="text-secondaryLight my-2 font-medium text-left"
       >
         {{ description }}
       </p>
     </div>
     <i
       v-if="infoIcon"
-      class="items-center self-center ml-6 material-icons"
+      class="material-icons items-center self-center ml-6"
       :class="{ 'text-accent': activeInfoIcon }"
     >
       {{ infoIcon }}

packages/hoppscotch-app/components/smart/Modal.vue

@@ -2,14 +2,14 @@
   <transition name="fade" appear @leave="onTransitionLeaveStart">
     <div
       ref="modal"
-      class="fixed inset-0 z-10 z-50 overflow-y-auto hide-scrollbar transition"
+      class="hide-scrollbar fixed inset-0 z-10 z-50 overflow-y-auto transition"
     >
       <div
-        class="flex items-end justify-center min-h-screen text-center sm:block"
+        class="sm:block flex items-end justify-center min-h-screen text-center"
       >
         <transition name="fade" appear>
           <div
-            class="fixed inset-0 bg-primaryLight opacity-90 transition"
+            class="bg-primaryLight opacity-90 fixed inset-0 transition"
             @touchstart="!dialog ? close() : null"
             @touchend="!dialog ? close() : null"
             @mouseup="!dialog ? close() : null"
@@ -18,7 +18,7 @@
         </transition>
         <span
           v-if="placement === 'center'"
-          class="hidden sm:h-screen sm:inline-block sm:align-middle"
+          class="sm:h-screen sm:inline-block sm:align-middle hidden"
           aria-hidden="true"
           >&#8203;</span
         >
@@ -32,18 +32,7 @@
           leave-to-class="scale-95 translate-y-4"
         >
           <div
-            class="
-              bg-primary
-              sm:align-middle sm:rounded-xl
-              inline-block
-              w-full
-              overflow-hidden
-              text-left
-              align-bottom
-              transition-all
-              transform
-              shadow-lg
-            "
+            class="bg-primary sm:align-middle sm:rounded-xl inline-block w-full overflow-hidden text-left align-bottom transition-all transform shadow-lg"
             :class="[
               { 'mt-24 md:mb-8': placement === 'top' },
               { 'p-4': !fullWidth },
@@ -66,7 +55,7 @@
               </span>
             </div>
             <div
-              class="flex flex-col overflow-y-auto max-h-md hide-scrollbar"
+              class="max-h-md hide-scrollbar flex flex-col overflow-y-auto"
               :class="{ 'py-2': !fullWidth }"
             >
               <slot name="body"></slot>