refactor(ui): sort classes

README.md

@@ -105,7 +105,7 @@
 
 - Choose theme: System (default), Light, Dark and Black
 - Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
-- Toggle auto-scroll to response
+- Distraction free Zen mode
 
 <p>
   <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/banner_light.png" alt="Screenshot" width="100%"></a>

components/app/Shortcuts.vue

@@ -15,7 +15,7 @@
         "
       >
         <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
-        <div>
+        <div class="flex">
           <ButtonSecondary to="/settings" icon="tune" />
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
@@ -24,7 +24,7 @@
         <input
           v-model="filterText"
           type="search"
-          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 focus:outline-none truncate"
+          class="bg-primaryLight border-b border-dividerLight flex font-semibold font-mono w-full py-2 pr-2 pl-8 truncate focus:outline-none"
           :placeholder="$t('search')"
         />
       </div> -->

components/app/SlideOver.vue

@@ -3,7 +3,7 @@
     <transition v-if="show" name="fade" appear>
       <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
         <div
-          class="bg-primaryDark opacity-75 inset-0 absolute"
+          class="bg-primaryDark opacity-90 inset-0 absolute"
           tabindex="0"
           @click="close()"
         ></div>

components/collections/AddFolder.vue

@@ -1,10 +1,8 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/Edit.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("collection.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/EditFolder.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
       <h3 class="heading">{{ $t("folder.edit") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/EditRequest.vue

@@ -2,9 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_request") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <div class="flex flex-col px-2">

components/collections/graphql/AddFolder.vue

@@ -1,10 +1,8 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
-      <h3 class="heading">{{ $t("new_folder") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
+      <h3 class="heading">{{ $t("folder.new") }}</h3>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <div class="flex flex-col px-2">