feat: remove tailwindcss + introduce windicss

components/collections/ImportExport.vue

@@ -2,12 +2,14 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
+        <h3 class="heading">
+          {{ $t("import_export") }} {{ $t("collections") }}
+        </h3>
         <div>
           <button
             v-if="mode != 'import_export'"
             v-tooltip.left="'Back'"
-            class="tooltip-target icon"
+            class="tooltip-target icon button"
             @click="mode = 'import_export'"
           >
             <i class="material-icons">arrow_back</i>
@@ -18,14 +20,17 @@
               collectionsType.type == 'my-collections'
             "
           >
-            <button v-tooltip.left="$t('more')" class="tooltip-target icon">
+            <button
+              v-tooltip.left="$t('more')"
+              class="tooltip-target icon button"
+            >
               <i class="material-icons">more_vert</i>
             </button>
             <template slot="popover">
               <div>
                 <button
                   v-close-popover
-                  class="icon"
+                  class="icon button"
                   @click="readCollectionGist"
                 >
                   <i class="material-icons">assignment_returned</i>
@@ -50,7 +55,7 @@
                       ? true
                       : false
                   "
-                  class="icon"
+                  class="icon button"
                   @click="createCollectionGist"
                 >
                   <i class="material-icons">assignment_turned_in</i>
@@ -59,7 +64,7 @@
               </div>
             </template>
           </v-popover>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -69,13 +74,14 @@
       <div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
         <button
           v-tooltip="$t('replace_current')"
-          class="icon"
+          class="icon button"
           @click="openDialogChooseFileToReplaceWith"
         >
           <i class="material-icons">folder_special</i>
           <span>{{ $t("replace_json") }}</span>
           <input
             ref="inputChooseFileToReplaceWith"
+            class="input"
             type="file"
             style="display: none"
             accept="application/json"
@@ -84,13 +90,14 @@
         </button>
         <button
           v-tooltip="$t('preserve_current')"
-          class="icon"
+          class="icon button"
           @click="openDialogChooseFileToImportFrom"
         >
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("import_json") }}</span>
           <input
             ref="inputChooseFileToImportFrom"
+            class="input"
             type="file"
             style="display: none"
             accept="application/json"
@@ -100,7 +107,7 @@
         <button
           v-if="collectionsType.type == 'team-collections'"
           v-tooltip="$t('preserve_current')"
-          class="icon"
+          class="icon button"
           @click="mode = 'import_from_my_collections'"
         >
           <i class="material-icons">folder_shared</i>
@@ -108,7 +115,7 @@
         </button>
         <button
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="exportJSON"
         >
           <i class="material-icons">drive_file_move</i>
@@ -121,6 +128,7 @@
         <span class="select-wrapper">
           <select
             type="text"
+            class="select"
             autofocus
             @change="
               ($event) => {