feat: remove tailwindcss + introduce windicss

components/environments/Add.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_environment") }}</h3>
+        <h3 class="heading">{{ $t("new_environment") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -15,6 +15,7 @@
       <input
         id="selectLabel"
         v-model="name"
+        class="input"
         type="text"
         :placeholder="$t('my_new_environment')"
         @keyup.enter="addNewEnvironment"
@@ -24,10 +25,10 @@
       <div class="row-wrapper">
         <span></span>
         <span>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             {{ $t("cancel") }}
           </button>
-          <button class="icon primary" @click="addNewEnvironment">
+          <button class="icon button primary" @click="addNewEnvironment">
             {{ $t("save") }}
           </button>
         </span>

components/environments/Edit.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_environment") }}</h3>
+        <h3 class="heading">{{ $t("edit_environment") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -15,6 +15,7 @@
       <input
         id="selectLabel"
         v-model="name"
+        class="input"
         type="text"
         :placeholder="editingEnvironment.name"
         @keyup.enter="saveEnvironment"
@@ -24,7 +25,7 @@
         <div>
           <button
             v-tooltip.bottom="$t('clear')"
-            class="icon"
+            class="icon button"
             @click="clearContent($event)"
           >
             <i class="material-icons">clear_all</i>
@@ -47,6 +48,7 @@
         <li>
           <input
             v-model="variable.key"
+            class="input"
             :placeholder="$t('variable_count', { count: index + 1 })"
             :name="'param' + index"
           />
@@ -54,6 +56,7 @@
         <li>
           <input
             v-model="variable.value"
+            class="input"
             :placeholder="$t('value_count', { count: index + 1 })"
             :name="'value' + index"
           />
@@ -63,7 +66,7 @@
             <button
               id="variable"
               v-tooltip.bottom="$t('delete')"
-              class="icon"
+              class="icon button"
               @click="removeEnvironmentVariable(index)"
             >
               <i class="material-icons">delete</i>
@@ -73,7 +76,7 @@
       </ul>
       <ul>
         <li>
-          <button class="icon" @click="addEnvironmentVariable">
+          <button class="icon button" @click="addEnvironmentVariable">
             <i class="material-icons">add</i>
             <span>{{ $t("add_new") }}</span>
           </button>
@@ -84,10 +87,10 @@
       <div class="row-wrapper">
         <span></span>
         <span>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             {{ $t("cancel") }}
           </button>
-          <button class="icon primary" @click="saveEnvironment">
+          <button class="icon button primary" @click="saveEnvironment">
             {{ $t("save") }}
           </button>
         </span>

components/environments/Environment.vue

@@ -2,20 +2,20 @@
   <div>
     <div class="row-wrapper">
       <div>
-        <button class="icon" @click="$emit('edit-environment')">
+        <button class="icon button" @click="$emit('edit-environment')">
           <i class="material-icons">layers</i>
           <span>{{ environment.name }}</span>
         </button>
       </div>
       <v-popover>
-        <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="$emit('edit-environment')"
             >
               <i class="material-icons">create</i>
@@ -23,7 +23,11 @@
             </button>
           </div>
           <div>
-            <button v-close-popover class="icon" @click="confirmRemove = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="confirmRemove = true"
+            >
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>

components/environments/ImportExport.vue

@@ -2,19 +2,22 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">
+        <h3 class="heading">
           {{ $t("import_export") }} {{ $t("environments") }}
         </h3>
         <div>
           <v-popover>
-            <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="readEnvironmentGist"
                 >
                   <i class="material-icons">assignment_returned</i>
@@ -39,7 +42,7 @@
                       ? true
                       : false
                   "
-                  class="icon"
+                  class="icon button"
                   @click="createEnvironmentGist"
                 >
                   <i class="material-icons">assignment_turned_in</i>
@@ -48,7 +51,7 @@
               </div>
             </template>
           </v-popover>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -58,13 +61,14 @@
       <div 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"
@@ -73,13 +77,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"
@@ -88,7 +93,7 @@
         </button>
         <button
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="exportJSON"
         >
           <i class="material-icons">drive_file_move</i>

components/environments/index.vue

@@ -5,7 +5,7 @@
         <select
           v-model="selectedEnvironmentIndex"
           :disabled="environments.length == 0"
-          class="rounded-t-lg"
+          class="select rounded-t-lg"
         >
           <option :value="-1">No environment</option>
           <option v-if="environments.length === 0" value="0">
@@ -37,13 +37,13 @@
     />
     <div class="border-b row-wrapper border-divider">
       <div>
-        <button class="icon" @click="displayModalAdd(true)">
+        <button class="icon button" @click="displayModalAdd(true)">
           <i class="material-icons">add</i>
           <span>{{ $t("new") }}</span>
         </button>
       </div>
       <div>
-        <button class="icon" @click="displayModalImportExport(true)">
+        <button class="icon button" @click="displayModalImportExport(true)">
           {{ $t("import_export") }}
         </button>
       </div>