feat: remove tailwindcss + introduce windicss

.stylelintrc.js

@@ -8,7 +8,6 @@ module.exports = {
       {
         ignoreAtRules: [
           "extends",
-          "tailwind",
           "apply",
           "variants",
           "responsive",

README.md

@@ -436,7 +436,7 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 ## **Built with**
 
 - [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
-- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Tailwind CSS](https://tailwindcss.com)
+- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Windi CSS](https://windicss.org)
 - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [TypeScript](https://www.typescriptlang.org)
 - [Vue](https://vuejs.org)

assets/css/tailwind.css

@@ -1,6 +0,0 @@
-/* purgecss start ignore */
-@tailwind base;
-@tailwind components;
-
-/* purgecss end ignore */
-@tailwind utilities;

assets/scss/styles.scss

@@ -1,5 +1,3 @@
-$responsiveWidth: 767px;
-
 *,
 *::before,
 *::after {
@@ -46,7 +44,6 @@ html {
 body {
   @apply bg-primary;
   @apply text-secondary;
-  @apply text-base;
   @apply font-medium;
   @apply select-none;
   @apply transition-colors;
@@ -140,17 +137,14 @@ main {
   @apply px-4;
 }
 
-h1,
-h2,
-h3,
-h4 {
+.heading {
   @apply flex;
   @apply items-center;
   @apply m-0;
   @apply font-bold;
 }
 
-h3.title {
+h3.heading {
   @apply m-2;
 }
 
@@ -327,7 +321,7 @@ hr {
   }
 }
 
-button {
+.button {
   @apply inline-flex;
   @apply items-center;
   @apply justify-center;
@@ -339,7 +333,6 @@ button {
   @apply ease-in-out;
   @apply duration-150;
   @apply fill-current;
-  @apply cursor-pointer;
   @apply outline-none;
   @apply border-none;
 
@@ -438,12 +431,12 @@ input[type="radio"],
 
 .drop-down-input,
 .url-field,
+.input,
+.select,
+.textarea,
 kbd,
-select,
-input,
-textarea,
-pre,
-code {
+code,
+pre {
   @apply flex;
   @apply p-4;
   @apply bg-primaryDark;
@@ -734,7 +727,7 @@ section {
   width: var(--width);
 }
 
-@media (max-width: $responsiveWidth) {
+@media (max-width: 767px) {
   .content,
   .columns {
     @apply flex-col;

components/app/Contributors.vue

@@ -9,12 +9,12 @@
     <div class="px-2 row-wrapper">
       <span>
         <a
-          v-tooltip.right="$t('recurring')"
+          v-tooltip.right="$t('one_time_recurring')"
           href="https://github.com/sponsors/hoppscotch"
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +41,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">donut_large</i>
             <span>{{ $t("open_collective") }}</span>
           </button>
@@ -56,7 +56,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">local_parking</i>
             <span>{{ $t("patreon") }}</span>
           </button>
@@ -71,7 +71,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">payment</i>
             <span>{{ $t("paypal") }}</span>
           </button>
@@ -80,7 +80,7 @@
     </div>
     <hr />
     <div class="p-2">
-      <h3 class="title">Financial Contributors</h3>
+      <h3 class="heading">Financial Contributors</h3>
       <div class="contributors">
         <a
           href="https://oss.capital/?ref=hoppscotch"

components/app/Extensions.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("extensions") }}</h3>
+        <h3 class="heading">{{ $t("extensions") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -20,7 +20,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <svg
               class="material-icons"
               xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@
             <span
               v-if="hasFirefoxExtInstalled"
               v-tooltip="$t('installed')"
-              class="icon"
+              class="icon button"
             >
               <i class="material-icons">done</i>
             </span>
@@ -48,7 +48,7 @@
           target="_blank"
           rel="noopener"
         >
-          <button class="icon">
+          <button class="icon button">
             <svg
               class="material-icons"
               xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +63,7 @@
             <span
               v-if="hasChromeExtInstalled"
               v-tooltip="$t('installed')"
-              class="icon"
+              class="icon button"
             >
               <i class="material-icons">done</i>
             </span>

components/app/Footer.vue

@@ -49,18 +49,18 @@
       </span>
       <span class="flex font-mono" style="align-items: start">
         <a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
-          <button v-tooltip="$t('contact_us')" class="icon">
+          <button v-tooltip="$t('contact_us')" class="icon button">
             <i class="material-icons">email</i>
           </button>
         </a>
         <v-popover>
-          <button v-tooltip="$t('choose_language')" class="icon">
+          <button v-tooltip="$t('choose_language')" class="icon button">
             <i class="material-icons">translate</i>
           </button>
           <template slot="popover">
             <div v-for="locale in availableLocales" :key="locale.code">
               <nuxt-link :to="switchLocalePath(locale.code)">
-                <button v-close-popover class="icon">
+                <button v-close-popover class="icon button">
                   {{ locale.name }}
                 </button>
               </nuxt-link>

components/app/Header.vue

@@ -3,7 +3,7 @@
     <div class="row-wrapper">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo">Hoppscotch</h1>
+          <h1 class="heading logo">Hoppscotch</h1>
         </nuxt-link>
         <iframe
           src="https://ghbtns.com/github-btn.html?user=hoppscotch&repo=hoppscotch&type=star&count=true"
@@ -22,7 +22,6 @@
           target="_blank"
           rel="noopener"
           class="
-            inline-flex
             items-center
             px-4
             py-2
@@ -44,7 +43,7 @@
         <button
           id="installPWA"
           v-tooltip="$t('install_pwa')"
-          class="icon"
+          class="icon button"
           @click.prevent="showInstallPrompt()"
         >
           <i class="material-icons">offline_bolt</i>
@@ -55,7 +54,7 @@
           aria-label="GitHub"
           rel="noopener"
         >
-          <button v-tooltip="'GitHub'" class="icon" aria-label="GitHub">
+          <button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -69,7 +68,7 @@
           </button>
         </a>
         <v-popover v-if="currentUser === null">
-          <button v-tooltip="$t('login_with')" class="icon">
+          <button v-tooltip="$t('login_with')" class="icon button">
             <i class="material-icons">login</i>
           </button>
           <template slot="popover">
@@ -84,7 +83,7 @@
               '<br>' +
               (currentUser.email || '<label><i>Email not found</i></label>')
             "
-            class="icon"
+            class="icon button"
             aria-label="Account"
           >
             <img
@@ -98,7 +97,7 @@
           <template slot="popover">
             <div>
               <nuxt-link v-close-popover :to="localePath('settings')">
-                <button class="icon">
+                <button class="icon button">
                   <i class="material-icons">settings</i>
                   <span>
                     {{ $t("settings") }}
@@ -112,25 +111,37 @@
           </template>
         </v-popover>
         <v-popover>
-          <button v-tooltip="$t('more')" class="icon">
+          <button v-tooltip="$t('more')" class="icon button">
             <i class="material-icons">drag_indicator</i>
           </button>
           <template slot="popover">
-            <button v-close-popover class="icon" @click="showExtensions = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="showExtensions = true"
+            >
               <i class="material-icons">extension</i>
               <span>{{ $t("extensions") }}</span>
             </button>
-            <button v-close-popover class="icon" @click="showShortcuts = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="showShortcuts = true"
+            >
               <i class="material-icons">keyboard</i>
               <span>{{ $t("shortcuts") }}</span>
             </button>
-            <button v-close-popover class="icon" @click="showSupport = true">
+            <button
+              v-close-popover
+              class="icon button"
+              @click="showSupport = true"
+            >
               <i class="material-icons">favorite</i>
               <span>{{ $t("support_us") }}</span>
             </button>
             <button
               v-close-popover
-              class="icon"
+              class="icon button"
               onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
@@ -144,7 +155,7 @@
               v-if="navigatorShare"
               v-close-popover
               v-tooltip="$t('more')"
-              class="icon"
+              class="icon button"
               @click="nativeShare"
             >
               <i class="material-icons">share</i>

components/app/Shortcuts.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("shortcuts") }}</h3>
+        <h3 class="heading">{{ $t("shortcuts") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>

components/app/Sidenav.vue

@@ -188,8 +188,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-$responsiveWidth: 767px;
-
 .nav-first {
   @apply h-screen;
   @apply p-2;
@@ -298,7 +296,7 @@ nav.secondary-nav {
   }
 }
 
-@media (max-width: $responsiveWidth) {
+@media (max-width: 767px) {
   .nav-first {
     @apply fixed;
     @apply z-10;

components/app/Support.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("support_us") }}</h3>
+        <h3 class="heading">{{ $t("support_us") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>

components/collections/Add.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_collection") }}</h3>
+        <h3 class="heading">{{ $t("new_collection") }}</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_collection')"
         @keyup.enter="addNewCollection"
@@ -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="addNewCollection">
+          <button class="icon button primary" @click="addNewCollection">
             {{ $t("save") }}
           </button>
         </span>

components/collections/AddFolder.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_folder") }}</h3>
+        <h3 class="heading">{{ $t("new_folder") }}</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_folder')"
         @keyup.enter="addFolder"
@@ -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="addFolder">
+          <button class="icon button primary" @click="addFolder">
             {{ $t("save") }}
           </button>
         </span>

components/collections/ChooseType.vue

@@ -22,7 +22,7 @@
                 <select
                   id="team"
                   type="text"
-                  class="team"
+                  class="team select"
                   autofocus
                   @change="updateSelectedTeam(myTeams[$event.target.value])"
                 >

components/collections/Edit.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_collection") }}</h3>
+        <h3 class="heading">{{ $t("edit_collection") }}</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="placeholderCollName"
         @keyup.enter="saveCollection"
@@ -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="saveCollection">
+          <button class="icon button primary" @click="saveCollection">
             {{ $t("save") }}
           </button>
         </span>

components/collections/EditFolder.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_folder") }}</h3>
+        <h3 class="heading">{{ $t("edit_folder") }}</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"
         @keyup.enter="editFolder"
       />
@@ -23,10 +24,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="editFolder">
+          <button class="icon button primary" @click="editFolder">
             {{ $t("save") }}
           </button>
         </span>

components/collections/EditRequest.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_request") }}</h3>
+        <h3 class="heading">{{ $t("edit_request") }}</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="requestUpdateData.name"
+        class="input"
         type="text"
         :placeholder="placeholderReqName"
         @keyup.enter="saveRequest"
@@ -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="saveRequest">
+          <button class="icon button primary" @click="saveRequest">
             {{ $t("save") }}
           </button>
         </span>

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) => {

components/collections/SaveRequest.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("save_request_as") }}</h3>
+        <h3 class="heading">{{ $t("save_request_as") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -15,11 +15,12 @@
       <input
         id="selectLabel"
         v-model="requestData.name"
+        class="input"
         type="text"
         @keyup.enter="saveRequestAs"
       />
       <label for="selectLabel">Select location</label>
-      <!-- <input readonly :value="path" /> -->
+      <!-- <input class="input" readonly :value="path" /> -->
 
       <CollectionsGraphql
         v-if="mode === 'graphql'"
@@ -43,10 +44,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="saveRequestAs">
+          <button class="icon button primary" @click="saveRequestAs">
             {{ $t("save") }}
           </button>
         </span>

components/collections/graphql/Add.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_collection") }}</h3>
+        <h3 class="heading">{{ $t("new_collection") }}</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_collection')"
         @keyup.enter="addNewCollection"
@@ -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="addNewCollection">
+          <button class="icon button primary" @click="addNewCollection">
             {{ $t("save") }}
           </button>
         </span>

components/collections/graphql/AddFolder.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_folder") }}</h3>
+        <h3 class="heading">{{ $t("new_folder") }}</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_folder')"
         @keyup.enter="addFolder"
@@ -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="addFolder">
+          <button class="icon button primary" @click="addFolder">
             {{ $t("save") }}
           </button>
         </span>

components/collections/graphql/Collection.vue

@@ -12,7 +12,7 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <button class="icon" @click="toggleShowChildren">
+      <button class="icon button" @click="toggleShowChildren">
         <i v-show="!showChildren && !isFiltered" class="material-icons"
           >arrow_right</i
         >
@@ -31,20 +31,23 @@
         <button
           v-if="doc"
           v-tooltip.left="$t('import')"
-          class="icon"
+          class="icon button"
           @click="$emit('select-collection')"
         >
           <i class="material-icons">topic</i>
         </button>
         <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('add-folder', {
                     path: `${collectionIndex}`,
@@ -58,7 +61,7 @@
             <div>
               <button
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="$emit('edit-collection')"
               >
                 <i class="material-icons">create</i>
@@ -68,7 +71,7 @@
             <div>
               <button
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="confirmRemove = true"
               >
                 <i class="material-icons">delete</i>

components/collections/graphql/Edit.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_collection") }}</h3>
+        <h3 class="heading">{{ $t("edit_collection") }}</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="editingCollection.name"
         @keyup.enter="saveCollection"
@@ -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="saveCollection">
+          <button class="icon button primary" @click="saveCollection">
             {{ $t("save") }}
           </button>
         </span>

components/collections/graphql/EditFolder.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_folder") }}</h3>
+        <h3 class="heading">{{ $t("edit_folder") }}</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="folder.name"
         @keyup.enter="editFolder"
@@ -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="editFolder">
+          <button class="icon button primary" @click="editFolder">
             {{ $t("save") }}
           </button>
         </span>

components/collections/graphql/EditRequest.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_request") }}</h3>
+        <h3 class="heading">{{ $t("edit_request") }}</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="requestUpdateData.name"
+        class="input"
         type="text"
         :placeholder="request.name"
         @keyup.enter="saveRequest"
@@ -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="saveRequest">
+          <button class="icon button primary" @click="saveRequest">
             {{ $t("save") }}
           </button>
         </span>

components/collections/graphql/Folder.vue

@@ -13,7 +13,7 @@
       @dragend="dragging = false"
     >
       <div>
-        <button class="icon" @click="toggleShowChildren">
+        <button class="icon button" @click="toggleShowChildren">
           <i v-show="!showChildren && !isFiltered" class="material-icons"
             >arrow_right</i
           >
@@ -29,14 +29,14 @@
         </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('add-folder', { folder, path: folderPath })"
             >
               <i class="material-icons">create_new_folder</i>
@@ -46,7 +46,7 @@
           <div>
             <button
               v-close-popover
-              class="icon"
+              class="icon button"
               @click="$emit('edit-folder', { folder, folderPath })"
             >
               <i class="material-icons">edit</i>
@@ -54,7 +54,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/collections/graphql/ImportExport.vue

@@ -2,17 +2,22 @@
   <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>
           <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="readCollectionGist"
                 >
                   <i class="material-icons">assignment_returned</i>
@@ -37,7 +42,7 @@
                       ? true
                       : false
                   "
-                  class="icon"
+                  class="icon button"
                   @click="createCollectionGist"
                 >
                   <i class="material-icons">assignment_turned_in</i>
@@ -46,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>
@@ -56,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"
@@ -71,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"
@@ -86,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/collections/graphql/Request.vue

@@ -14,7 +14,7 @@
       <div>
         <button
           v-tooltip="!doc ? $t('use_request') : ''"
-          class="icon"
+          class="icon button"
           @click="!doc ? selectRequest() : {}"
         >
           <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
@@ -26,14 +26,14 @@
         </button>
       </div>
       <v-popover>
-        <button v-tooltip="$t('more')" class="tooltip-target icon">
+        <button v-tooltip="$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-request', {
                   request,
@@ -47,7 +47,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/collections/graphql/index.vue

@@ -7,7 +7,7 @@
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="rounded-t-lg"
+        class="input rounded-t-lg"
       />
     </div>
     <CollectionsGraphqlAdd
@@ -46,13 +46,13 @@
       @hide-modal="displayModalImportExport(false)"
     />
     <div class="border-b row-wrapper border-divider">
-      <button class="icon" @click="displayModalAdd(true)">
+      <button class="icon button" @click="displayModalAdd(true)">
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
       <button
         v-if="showCollActions"
-        class="icon"
+        class="icon button"
         @click="displayModalImportExport(true)"
       >
         {{ $t("import_export") }}

components/collections/index.vue

@@ -7,7 +7,7 @@
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="rounded-t-lg"
+        class="input rounded-t-lg"
       />
     </div>
     <CollectionsChooseType
@@ -59,7 +59,7 @@
           (collectionsType.selectedTeam == undefined ||
             collectionsType.selectedTeam.myRole == 'VIEWER')
         "
-        class="icon"
+        class="icon button"
         disabled
         @click="displayModalAdd(true)"
       >
@@ -68,7 +68,7 @@
           <span>{{ $t("new") }}</span>
         </div>
       </button>
-      <button v-else class="icon" @click="displayModalAdd(true)">
+      <button v-else class="icon button" @click="displayModalAdd(true)">
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
@@ -78,7 +78,7 @@
           collectionsType.type == 'team-collections' &&
           collectionsType.selectedTeam == undefined
         "
-        class="icon"
+        class="icon button"
         @click="displayModalImportExport(true)"
       >
         {{ $t("import_export") }}

components/collections/my/Collection.vue

@@ -12,7 +12,7 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <button class="icon" @click="toggleShowChildren">
+      <button class="icon button" @click="toggleShowChildren">
         <i v-show="!showChildren && !isFiltered" class="material-icons"
           >arrow_right</i
         >
@@ -31,7 +31,7 @@
         <button
           v-if="doc && !selected"
           v-tooltip.left="$t('import')"
-          class="icon"
+          class="icon button"
           @click="$emit('select-collection')"
         >
           <i class="material-icons">check_box_outline_blank</i>
@@ -39,20 +39,23 @@
         <button
           v-if="doc && selected"
           v-tooltip.left="$t('delete')"
-          class="icon"
+          class="icon button"
           @click="$emit('unselect-collection')"
         >
           <i class="material-icons">check_box</i>
         </button>
         <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('add-folder', {
                     folder: collection,
@@ -67,7 +70,7 @@
             <div>
               <button
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="$emit('edit-collection')"
               >
                 <i class="material-icons">create</i>
@@ -77,7 +80,7 @@
             <div>
               <button
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="confirmRemove = true"
               >
                 <i class="material-icons">delete</i>

components/collections/my/Folder.vue

@@ -13,7 +13,7 @@
       @dragend="dragging = false"
     >
       <div>
-        <button class="icon" @click="toggleShowChildren">
+        <button class="icon button" @click="toggleShowChildren">
           <i v-show="!showChildren && !isFiltered" class="material-icons"
             >arrow_right</i
           >
@@ -28,14 +28,14 @@
         </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('add-folder', { folder, path: folderPath })"
             >
               <i class="material-icons">create_new_folder</i>
@@ -45,7 +45,7 @@
           <div>
             <button
               v-close-popover
-              class="icon"
+              class="icon button"
               @click="
                 $emit('edit-folder', {
                   folder,
@@ -60,7 +60,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/collections/my/Request.vue

@@ -14,7 +14,7 @@
       <div>
         <button
           v-tooltip="!doc ? $t('use_request') : ''"
-          class="icon"
+          class="icon button"
           @click="!doc ? selectRequest() : {}"
         >
           <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
@@ -28,14 +28,14 @@
         </button>
       </div>
       <v-popover>
-        <button v-tooltip="$t('more')" class="tooltip-target icon">
+        <button v-tooltip="$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-request', {
                   collectionIndex,
@@ -52,7 +52,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/collections/teams/Collection.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="transition duration-150 ease-in-out row-wrapper">
-      <button class="icon" @click="toggleShowChildren">
+      <button class="icon button" @click="toggleShowChildren">
         <i v-show="!showChildren && !isFiltered" class="material-icons"
           >arrow_right</i
         >
@@ -20,7 +20,7 @@
         <button
           v-if="doc && !selected"
           v-tooltip.left="$t('import')"
-          class="icon"
+          class="icon button"
           @click="$emit('select-collection')"
         >
           <i class="material-icons">check_box_outline_blank</i>
@@ -28,7 +28,7 @@
         <button
           v-if="doc && selected"
           v-tooltip.left="$t('delete')"
-          class="icon"
+          class="icon button"
           @click="$emit('unselect-collection')"
         >
           <i class="material-icons">check_box</i>
@@ -37,7 +37,7 @@
           <button
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tooltip.left="$t('more')"
-            class="tooltip-target icon"
+            class="tooltip-target icon button"
           >
             <i class="material-icons">more_vert</i>
           </button>
@@ -46,7 +46,7 @@
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="
                   $emit('add-folder', {
                     folder: collection,
@@ -62,7 +62,7 @@
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="$emit('edit-collection')"
               >
                 <i class="material-icons">create</i>
@@ -73,7 +73,7 @@
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="confirmRemove = true"
               >
                 <i class="material-icons">delete</i>

components/collections/teams/Folder.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="transition duration-150 ease-in-out row-wrapper">
       <div>
-        <button class="icon" @click="toggleShowChildren">
+        <button class="icon button" @click="toggleShowChildren">
           <i v-show="!showChildren && !isFiltered" class="material-icons"
             >arrow_right</i
           >
@@ -22,7 +22,7 @@
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tooltip.left="$t('more')"
-          class="tooltip-target icon"
+          class="tooltip-target icon button"
         >
           <i class="material-icons">more_vert</i>
         </button>
@@ -31,7 +31,7 @@
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               v-close-popover
-              class="icon"
+              class="icon button"
               @click="$emit('add-folder', { folder, path: folderPath })"
             >
               <i class="material-icons">create_new_folder</i>
@@ -42,7 +42,7 @@
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               v-close-popover
-              class="icon"
+              class="icon button"
               @click="
                 $emit('edit-folder', {
                   folder,
@@ -60,7 +60,7 @@
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               v-close-popover
-              class="icon"
+              class="icon button"
               @click="confirmRemove = true"
             >
               <i class="material-icons">delete</i>

components/collections/teams/Request.vue

@@ -4,7 +4,7 @@
       <div>
         <button
           v-tooltip="!doc ? $t('use_request') : ''"
-          class="icon"
+          class="icon button"
           @click="!doc ? selectRequest() : {}"
         >
           <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
@@ -21,7 +21,7 @@
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tooltip="$t('more')"
-          class="tooltip-target icon"
+          class="tooltip-target icon button"
         >
           <i class="material-icons">more_vert</i>
         </button>
@@ -29,7 +29,7 @@
           <div>
             <button
               v-close-popover
-              class="icon"
+              class="icon button"
               @click="
                 $emit('edit-request', {
                   collectionIndex,
@@ -45,7 +45,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/docs/Collection.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="collection">
-    <h2>
+    <h2 class="heading">
       <i class="material-icons">folder</i>
       {{ collection.name || $t("none") }}
     </h2>

components/docs/Folder.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <h3>
+    <h3 class="heading">
       <i class="material-icons">folder_open</i>
       {{ folder.name || $t("none") }}
     </h3>

components/docs/Request.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="request">
-    <h4>
+    <h4 class="heading">
       <i class="material-icons">insert_drive_file</i>
       {{ request.name || $t("none") }}
     </h4>
@@ -45,7 +45,7 @@
         <code>{{ request.bearerToken || $t("none") }}</code>
       </span>
     </p>
-    <h4 v-if="request.headers">{{ $t("headers") }}</h4>
+    <h4 v-if="request.headers" class="heading">{{ $t("headers") }}</h4>
     <span v-if="request.headers">
       <p v-for="header in request.headers" :key="header.key" class="doc-desc">
         <span>
@@ -54,7 +54,7 @@
         </span>
       </p>
     </span>
-    <h4 v-if="request.params">{{ $t("parameters") }}</h4>
+    <h4 v-if="request.params" class="heading">{{ $t("parameters") }}</h4>
     <span v-if="request.params">
       <p
         v-for="parameter in request.params"
@@ -67,7 +67,7 @@
         </span>
       </p>
     </span>
-    <h4 v-if="request.bodyParams">{{ $t("payload") }}</h4>
+    <h4 v-if="request.bodyParams" class="heading">{{ $t("payload") }}</h4>
     <span v-if="request.bodyParams">
       <p
         v-for="payload in request.bodyParams"

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>

components/firebase/Email.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("login_with") }} {{ $t("email") }}</h3>
+        <h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</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="email"
         v-model="form.email"
+        class="input"
         type="email"
         name="email"
         placeholder="you@mail.com"
@@ -43,12 +44,12 @@
       <div class="row-wrapper">
         <span></span>
         <span>
-          <button v-if="signingInWithEmail" class="icon" type="button">
+          <button v-if="signingInWithEmail" class="icon button" type="button">
             {{ $t("loading") }}
           </button>
           <button
             v-else
-            class="rounded-md"
+            class="rounded-md button"
             :disabled="
               form.email.length !== 0
                 ? emailRegex.test(form.email)

components/firebase/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <button v-close-popover class="icon" @click="signInWithGoogle">
+      <button v-close-popover class="icon button" @click="signInWithGoogle">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -16,7 +16,7 @@
       </button>
     </div>
     <div>
-      <button v-close-popover class="icon" @click="signInWithGithub">
+      <button v-close-popover class="icon button" @click="signInWithGithub">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -31,7 +31,7 @@
       </button>
     </div>
     <div>
-      <button v-close-popover class="icon" @click="$emit('show-email')">
+      <button v-close-popover class="icon button" @click="$emit('show-email')">
         <i class="material-icons">mail</i>
         <span>{{ $t("email") }}</span>
       </button>

components/firebase/Logout.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button v-close-popover class="icon" @click="logout">
+    <button v-close-popover class="icon button" @click="logout">
       <i class="material-icons">exit_to_app</i>
       <span>{{ $t("logout") }}</span>
     </button>

components/history/graphql/Card.vue

@@ -9,7 +9,7 @@
           readonly
           :value="entry.url"
           :placeholder="$t('empty_req_name')"
-          class="cursor-pointer text-sm bg-transparent"
+          class="input cursor-pointer text-sm bg-transparent"
           @click="$emit('use-entry')"
         />
       </li>
@@ -18,7 +18,7 @@
           content: !entry.star ? $t('add_star') : $t('remove_star'),
         }"
         data-testid="star_button"
-        class="icon"
+        class="icon button"
         :class="{ stared: entry.star }"
         @click="$emit('toggle-star')"
       >
@@ -31,7 +31,7 @@
           content: expand ? $t('hide_more') : $t('show_more'),
         }"
         data-testid="query_expand"
-        class="icon"
+        class="icon button"
         @click="expand = !expand"
       >
         <i class="material-icons">
@@ -42,7 +42,7 @@
         <button
           v-tooltip="$t('options')"
           data-testid="options"
-          class="tooltip-target icon"
+          class="tooltip-target icon button"
         >
           <i class="material-icons">more_vert</i>
         </button>
@@ -51,7 +51,7 @@
             <button
               v-close-popover
               data-testid="restore_history_entry"
-              class="icon"
+              class="icon button"
               :aria-label="$t('restore')"
               @click="$emit('use-entry')"
             >
@@ -63,7 +63,7 @@
             <button
               v-close-popover
               data-testid="delete_history_entry"
-              class="icon"
+              class="icon button"
               :aria-label="$t('delete')"
               @click="$emit('delete-entry')"
             >
@@ -83,7 +83,7 @@
           type="text"
           readonly
           :value="`${line}`"
-          class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
+          class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
         />
       </li>
     </div>
@@ -96,7 +96,7 @@
             type="text"
             readonly
             :value="entry.time"
-            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
+            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <li>
@@ -106,11 +106,11 @@
             readonly
             :value="`Duration: ${entry.duration}ms`"
             :placeholder="$t('no_duration')"
-            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
+            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <!-- <li>
-          <input
+          <input class="input"
             :aria-label="$t('prerequest_script')"
             type="text"
             readonly

components/history/index.vue

@@ -6,7 +6,7 @@
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="rounded-t-lg"
+        class="input rounded-t-lg"
       />
     </div>
     <div
@@ -46,7 +46,7 @@
       <div v-if="!isClearingHistory" class="row-wrapper">
         <button
           data-testid="clear_history"
-          class="icon"
+          class="icon button"
           :disabled="history.length === 0"
           @click="enableHistoryClearing"
         >
@@ -55,7 +55,7 @@
         </button>
         <button
           v-tooltip="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
-          class="icon"
+          class="icon button"
           @click="toggleCollapse()"
         >
           <i class="material-icons">
@@ -71,7 +71,7 @@
           <button
             v-tooltip="$t('yes')"
             data-testid="confirm_clear_history"
-            class="icon"
+            class="icon button"
             @click="clearHistory"
           >
             <i class="material-icons">done</i>
@@ -79,7 +79,7 @@
           <button
             v-tooltip="$t('no')"
             data-testid="reject_clear_history"
-            class="icon"
+            class="icon button"
             @click="disableHistoryClearing"
           >
             <i class="material-icons">close</i>

components/history/rest/Card.vue

@@ -16,7 +16,7 @@
           readonly
           :value="entry.name"
           :placeholder="$t('empty_req_name')"
-          class="cursor-pointer text-sm bg-transparent"
+          class="input cursor-pointer text-sm bg-transparent"
           @click="$emit('use-entry')"
         />
       </li>
@@ -26,7 +26,7 @@
             content: !entry.star ? $t('add_star') : $t('remove_star'),
           }"
           data-testid="star_button"
-          class="icon"
+          class="icon button"
           :class="{ stared: entry.star }"
           @click="$emit('toggle-star')"
         >
@@ -37,7 +37,7 @@
       </span>
       <!-- <li>
             <button
-              class="icon"
+              class="icon button"
               v-tooltip="{
                 content: !entry.usesScripts
                   ? 'No pre-request script'
@@ -50,7 +50,7 @@
             </button>
           </li> -->
       <v-popover>
-        <button v-tooltip="$t('options')" class="tooltip-target icon">
+        <button v-tooltip="$t('options')" class="tooltip-target icon button">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
@@ -58,7 +58,7 @@
             <button
               v-close-popover
               data-testid="restore_history_entry"
-              class="icon"
+              class="icon button"
               :aria-label="$t('edit')"
               @click="$emit('use-entry')"
             >
@@ -70,7 +70,7 @@
             <button
               v-close-popover
               data-testid="delete_history_entry"
-              class="icon"
+              class="icon button"
               :aria-label="$t('delete')"
               @click="$emit('delete-entry')"
             >
@@ -89,7 +89,7 @@
           readonly
           :value="`${entry.url}${entry.path}`"
           :placeholder="$t('no_url')"
-          class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
+          class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
         />
       </li>
     </div>
@@ -102,7 +102,7 @@
             type="text"
             readonly
             :value="entry.time"
-            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
+            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <li>
@@ -112,11 +112,11 @@
             readonly
             :value="`Duration: ${entry.duration}ms`"
             :placeholder="$t('no_duration')"
-            class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
+            class="input pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
           />
         </li>
         <!-- <li>
-          <input
+          <input class="input"
             :aria-label="$t('prerequest_script')"
             type="text"
             readonly

components/http/BodyParameters.vue

@@ -7,7 +7,7 @@
           <div>
             <button
               v-tooltip.bottom="$t('clear')"
-              class="icon"
+              class="icon button"
               @click="clearContent('bodyParams', $event)"
             >
               <i class="material-icons">clear_all</i>
@@ -31,6 +31,7 @@
     >
       <li>
         <input
+          class="input"
           :placeholder="`key ${index + 1}`"
           :name="`bparam ${index}`"
           :value="param.key"
@@ -42,6 +43,7 @@
       <li>
         <input
           v-if="!requestBodyParamIsFile(index)"
+          class="input"
           :placeholder="`value ${index + 1}`"
           :value="param.value"
           @change="
@@ -73,7 +75,7 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
-            class="icon"
+            class="icon button"
             @click="toggleActive(index, param)"
           >
             <i class="material-icons">
@@ -92,7 +94,7 @@
         <li>
           <label for="attachment" class="p-0">
             <button
-              class="w-full icon"
+              class="w-full button icon"
               @click="$refs.attachment[index].click()"
             >
               <i class="material-icons">attach_file</i>
@@ -100,6 +102,7 @@
           </label>
           <input
             ref="attachment"
+            class="input"
             name="attachment"
             type="file"
             multiple
@@ -111,7 +114,7 @@
         <li>
           <button
             v-tooltip.bottom="$t('delete')"
-            class="icon"
+            class="icon button"
             @click="removeRequestBodyParam(index)"
           >
             <i class="material-icons">delete</i>
@@ -121,7 +124,11 @@
     </ul>
     <ul>
       <li>
-        <button class="icon" name="addrequest" @click="addRequestBodyParam">
+        <button
+          class="icon button"
+          name="addrequest"
+          @click="addRequestBodyParam"
+        >
           <i class="material-icons">add</i>
           <span>{{ $t("add_new") }}</span>
         </button>

components/http/CodegenModal.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("generate_code") }}</h3>
+        <h3 class="heading">{{ $t("generate_code") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -22,7 +22,7 @@
             id="requestType"
             v-model="requestType"
             :placeholder="$t('choose_language')"
-            class="cursor-pointer"
+            class="input cursor-pointer"
             readonly
             autofocus
           />
@@ -30,7 +30,7 @@
             <div v-for="gen in codegens" :key="gen.id">
               <button
                 v-close-popover
-                class="icon"
+                class="icon button"
                 @click="requestType = gen.id"
               >
                 {{ gen.name }}
@@ -45,7 +45,7 @@
           <button
             ref="copyRequestCode"
             v-tooltip="$t('copy_code')"
-            class="icon"
+            class="icon button"
             @click="copyRequestCode"
           >
             <i class="material-icons">content_copy</i>

components/http/Headers.vue

@@ -7,7 +7,7 @@
           <div>
             <button
               v-tooltip.bottom="$t('clear')"
-              class="icon"
+              class="icon button"
               @click="clearContent('headers', $event)"
             >
               <i class="material-icons">clear_all</i>
@@ -47,6 +47,7 @@
       </li>
       <li>
         <input
+          class="input"
           :placeholder="$t('value_count', { count: index + 1 })"
           :name="'value' + index"
           :value="header.value"
@@ -69,7 +70,7 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
-            class="icon"
+            class="icon button"
             @click="
               $store.commit('setActiveHeader', {
                 index,
@@ -93,7 +94,7 @@
         <li>
           <button
             v-tooltip.bottom="$t('delete')"
-            class="icon"
+            class="icon button"
             @click="removeRequestHeader(index)"
           >
             <i class="material-icons">delete</i>
@@ -103,7 +104,7 @@
     </ul>
     <ul>
       <li>
-        <button class="icon" @click="addRequestHeader">
+        <button class="icon button" @click="addRequestHeader">
           <i class="material-icons">add</i>
           <span>{{ $t("add_new") }}</span>
         </button>

components/http/ImportCurl.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("import_curl") }}</h3>
+        <h3 class="heading">{{ $t("import_curl") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -13,6 +13,7 @@
     <div slot="body" class="flex flex-col">
       <textarea
         id="import-curl"
+        class="textarea"
         autofocus
         rows="8"
         :placeholder="$t('enter_curl')"
@@ -22,10 +23,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="handleImport">
+          <button class="icon button primary" @click="handleImport">
             {{ $t("import") }}
           </button>
         </span>

components/http/Parameters.vue

@@ -7,7 +7,7 @@
           <div>
             <button
               v-tooltip.bottom="$t('clear')"
-              class="icon"
+              class="icon button"
               @click="clearContent('parameters', $event)"
             >
               <i class="material-icons">clear_all</i>
@@ -31,6 +31,7 @@
     >
       <li>
         <input
+          class="input"
           :placeholder="$t('parameter_count', { count: index + 1 })"
           :name="'param' + index"
           :value="param.key"
@@ -45,6 +46,7 @@
       </li>
       <li>
         <input
+          class="input"
           :placeholder="$t('value_count', { count: index + 1 })"
           :name="'value' + index"
           :value="param.value"
@@ -59,6 +61,7 @@
       <li>
         <span class="select-wrapper">
           <select
+            class="select"
             :name="'type' + index"
             @change="
               $store.commit('setTypeParams', {
@@ -86,7 +89,7 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
-            class="icon"
+            class="icon button"
             @click="
               $store.commit('setActiveParams', {
                 index,
@@ -110,7 +113,7 @@
         <li>
           <button
             v-tooltip.bottom="$t('delete')"
-            class="icon"
+            class="icon button"
             @click="removeRequestParam(index)"
           >
             <i class="material-icons">delete</i>
@@ -120,7 +123,7 @@
     </ul>
     <ul>
       <li>
-        <button class="icon" @click="addRequestParam">
+        <button class="icon button" @click="addRequestParam">
           <i class="material-icons">add</i>
           <span>{{ $t("add_new") }}</span>
         </button>

components/http/RawBody.vue

@@ -9,7 +9,7 @@
               v-if="rawInput && contentType.endsWith('json')"
               ref="prettifyRequest"
               v-tooltip="$t('prettify_body')"
-              class="icon"
+              class="icon button"
               @click="prettifyRequestBody"
             >
               <i class="material-icons">photo_filter</i>
@@ -17,7 +17,7 @@
             <label for="payload" class="p-0">
               <button
                 v-tooltip="$t('import_json')"
-                class="icon"
+                class="icon button"
                 @click="$refs.payload.click()"
               >
                 <i class="material-icons">post_add</i>
@@ -25,13 +25,14 @@
             </label>
             <input
               ref="payload"
+              class="input"
               name="payload"
               type="file"
               @change="uploadPayload"
             />
             <button
               v-tooltip.bottom="$t('clear')"
-              class="icon"
+              class="icon button"
               @click="clearContent('rawParams', $event)"
             >
               <i class="material-icons">clear_all</i>

components/http/TokenList.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("manage_token") }}</h3>
+        <h3 class="heading">{{ $t("manage_token") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -16,7 +16,7 @@
         <div v-if="tokens.length != 0">
           <button
             v-tooltip.bottom="$t('clear')"
-            class="icon"
+            class="icon button"
             @click="clearContent('tokens', $event)"
           >
             <i class="material-icons">clear_all</i>
@@ -26,6 +26,7 @@
       <ul v-for="(token, index) in tokens" :key="index">
         <li>
           <input
+            class="input"
             :placeholder="`name ${index + 1}`"
             :value="token.name"
             @change="
@@ -37,13 +38,13 @@
           />
         </li>
         <li>
-          <input :value="token.value" readonly />
+          <input class="input" :value="token.value" readonly />
         </li>
         <div class="row-wrapper">
           <li>
             <button
               v-tooltip.bottom="$t('use_token')"
-              class="icon"
+              class="icon button"
               @click="useOAuthToken(token.value)"
             >
               <i class="material-icons">input</i>
@@ -52,7 +53,7 @@
           <li>
             <button
               v-tooltip.bottom="$t('delete')"
-              class="icon"
+              class="icon button"
               @click="removeOAuthToken(index)"
             >
               <i class="material-icons">delete</i>

components/lenses/HeadersRenderer.vue

@@ -4,7 +4,7 @@
       <input
         :value="`${key} → ${value}`"
         :name="key"
-        class="bg-transparent"
+        class="input bg-transparent"
         readonly
       />
     </p>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -11,7 +11,7 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
-          class="icon"
+          class="icon button"
           @click="ToggleExpandResponse"
         >
           <i class="material-icons">
@@ -23,7 +23,7 @@
           v-tooltip="{
             content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
           }"
-          class="icon"
+          class="icon button"
           @click.prevent="togglePreview"
         >
           <i class="material-icons">
@@ -34,7 +34,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="downloadResponse"
         >
           <i class="material-icons">save_alt</i>
@@ -43,7 +43,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tooltip="$t('copy_response')"
-          class="icon"
+          class="icon button"
           @click="copyResponse"
         >
           <i class="material-icons">content_copy</i>

components/lenses/renderers/ImageLensRenderer.vue

@@ -7,7 +7,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="downloadResponse"
         >
           <i class="material-icons">save_alt</i>

components/lenses/renderers/JSONLensRenderer.vue

@@ -11,7 +11,7 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
-          class="icon"
+          class="icon button"
           @click="ToggleExpandResponse"
         >
           <i class="material-icons">
@@ -22,7 +22,7 @@
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="downloadResponse"
         >
           <i class="material-icons">save_alt</i>
@@ -31,7 +31,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tooltip="$t('copy_response')"
-          class="icon"
+          class="icon button"
           @click="copyResponse"
         >
           <i class="material-icons">content_copy</i>

components/lenses/renderers/RawLensRenderer.vue

@@ -11,7 +11,7 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
-          class="icon"
+          class="icon button"
           @click="ToggleExpandResponse"
         >
           <i class="material-icons">
@@ -22,7 +22,7 @@
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="downloadResponse"
         >
           <i class="material-icons">save_alt</i>
@@ -31,7 +31,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tooltip="$t('copy_response')"
-          class="icon"
+          class="icon button"
           @click="copyResponse"
         >
           <i class="material-icons">content_copy</i>

components/lenses/renderers/XMLLensRenderer.vue

@@ -11,7 +11,7 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
-          class="icon"
+          class="icon button"
           @click="ToggleExpandResponse"
         >
           <i class="material-icons">
@@ -22,7 +22,7 @@
           v-if="response.body"
           ref="downloadResponse"
           v-tooltip="$t('download_file')"
-          class="icon"
+          class="icon button"
           @click="downloadResponse"
         >
           <i class="material-icons">save_alt</i>
@@ -31,7 +31,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tooltip="$t('copy_response')"
-          class="icon"
+          class="icon button"
           @click="copyResponse"
         >
           <i class="material-icons">content_copy</i>

components/realtime/Mqtt.vue

@@ -9,7 +9,7 @@
             v-model="url"
             type="url"
             spellcheck="false"
-            class="md:rounded-bl-lg"
+            class="input md:rounded-bl-lg"
             :placeholder="$t('url')"
           />
         </li>
@@ -19,7 +19,7 @@
             <button
               id="connect"
               :disabled="!validUrl"
-              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
               @click="toggleConnection"
             >
               {{ connectionState ? $t("disconnect") : $t("connect") }}
@@ -46,6 +46,7 @@
           <input
             id="pub_topic"
             v-model="pub_topic"
+            class="input"
             type="text"
             spellcheck="false"
           />
@@ -57,7 +58,7 @@
             v-model="msg"
             type="text"
             spellcheck="false"
-            class="border-dashed md:border-l border-divider"
+            class="input border-dashed md:border-l border-divider"
           />
         </li>
         <div>
@@ -65,6 +66,7 @@
             <label for="publish" class="hide-on-small-screen">&nbsp;</label>
             <button
               id="publish"
+              class="button"
               name="get"
               :disabled="!canpublish"
               @click="publish"
@@ -85,7 +87,7 @@
             v-model="sub_topic"
             type="text"
             spellcheck="false"
-            class="md:rounded-bl-lg"
+            class="input md:rounded-bl-lg"
           />
         </li>
         <div>
@@ -95,7 +97,7 @@
               id="subscribe"
               name="get"
               :disabled="!cansubscribe"
-              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
               @click="toggleSubscription"
             >
               {{

components/realtime/Socketio.vue

@@ -10,7 +10,7 @@
             type="url"
             spellcheck="false"
             :class="{ error: !urlValid }"
-            class="md:rounded-bl-lg"
+            class="input md:rounded-bl-lg"
             :placeholder="$t('url')"
             @keyup.enter="urlValid ? toggleConnection() : null"
           />
@@ -18,7 +18,12 @@
         <div>
           <li>
             <label for="socketio-path">{{ $t("path") }}</label>
-            <input id="socketio-path" v-model="path" spellcheck="false" />
+            <input
+              id="socketio-path"
+              v-model="path"
+              class="input"
+              spellcheck="false"
+            />
           </li>
         </div>
         <div>
@@ -28,7 +33,7 @@
               id="connect"
               :disabled="!urlValid"
               name="connect"
-              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
               @click="toggleConnection"
             >
               {{ !connectionState ? $t("connect") : $t("disconnect") }}
@@ -55,6 +60,7 @@
           <input
             id="event_name"
             v-model="communication.eventName"
+            class="input"
             name="event_name"
             type="text"
             :readonly="!connectionState"
@@ -84,6 +90,7 @@
         <li>
           <input
             v-model="communication.inputs[index]"
+            class="input"
             name="message"
             type="text"
             :readonly="!connectionState"
@@ -94,7 +101,7 @@
           <li>
             <button
               v-tooltip.bottom="$t('delete')"
-              class="icon"
+              class="icon button"
               @click="removeCommunicationInput({ index })"
             >
               <i class="material-icons">delete</i>
@@ -105,6 +112,7 @@
           <li>
             <button
               id="send"
+              class="button"
               name="send"
               :disabled="!connectionState"
               @click="sendMessage"
@@ -119,7 +127,7 @@
       </ul>
       <ul>
         <li>
-          <button class="icon" @click="addCommunicationInput">
+          <button class="icon button" @click="addCommunicationInput">
             <i class="material-icons">add</i>
             <span>{{ $t("add_new") }}</span>
           </button>

components/realtime/Sse.vue

@@ -9,7 +9,7 @@
             v-model="server"
             type="url"
             :class="{ error: !serverValid }"
-            class="md:rounded-bl-lg"
+            class="input md:rounded-bl-lg"
             :placeholder="$t('url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
           />
@@ -21,7 +21,7 @@
               id="start"
               :disabled="!serverValid"
               name="start"
-              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
               @click="toggleSSEConnection"
             >
               {{ !connectionSSEState ? $t("start") : $t("stop") }}

components/realtime/Websocket.vue

@@ -7,6 +7,7 @@
           <input
             id="websocket-url"
             v-model="url"
+            class="input"
             type="url"
             spellcheck="false"
             :class="{ error: !urlValid }"
@@ -20,6 +21,7 @@
             <button
               id="connect"
               :disabled="!urlValid"
+              class="button"
               name="connect"
               @click="toggleConnection"
             >
@@ -56,6 +58,7 @@
         <li>
           <input
             v-model="protocol.value"
+            class="input"
             :placeholder="$t('protocol_count', { count: index + 1 })"
             name="message"
             type="text"
@@ -71,7 +74,7 @@
                     : $t('turn_on')
                   : $t('turn_off'),
               }"
-              class="icon"
+              class="icon button"
               @click="
                 protocol.active = protocol.hasOwnProperty('active')
                   ? !protocol.active
@@ -94,7 +97,7 @@
           <li>
             <button
               v-tooltip.bottom="$t('delete')"
-              class="icon"
+              class="icon button"
               @click="deleteProtocol({ index })"
             >
               <i class="material-icons">delete</i>
@@ -104,7 +107,7 @@
       </ul>
       <ul>
         <li>
-          <button class="icon" @click="addProtocol">
+          <button class="icon button" @click="addProtocol">
             <i class="material-icons">add</i>
             <span>{{ $t("add_new") }}</span>
           </button>
@@ -127,7 +130,7 @@
             name="message"
             type="text"
             :readonly="!connectionState"
-            class="md:rounded-bl-lg"
+            class="input md:rounded-bl-lg"
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
             @keyup.down="connectionState ? walkHistory('down') : null"
@@ -140,7 +143,7 @@
               id="send"
               name="send"
               :disabled="!connectionState"
-              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
               @click="sendMessage"
             >
               {{ $t("send") }}

components/smart/AutoComplete.vue

@@ -3,6 +3,7 @@
     <input
       ref="acInput"
       v-model="text"
+      class="input"
       type="text"
       :placeholder="placeholder"
       :spellcheck="spellcheck"

components/smart/ColorModePicker.vue

@@ -29,7 +29,6 @@
           bg-transparent
           rounded-full
           cursor-pointer
-          border-collapseer-2
           text-secondaryLight
           hover:text-secondary
         "

components/smart/ConfirmModal.vue

@@ -2,9 +2,9 @@
   <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
-        <h3 class="title">{{ $t("confirm") }}</h3>
+        <h3 class="heading">{{ $t("confirm") }}</h3>
         <div>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             <i class="material-icons">close</i>
           </button>
         </div>
@@ -17,10 +17,10 @@
       <div class="row-wrapper">
         <span></span>
         <span>
-          <button class="icon" @click="hideModal">
+          <button class="icon button" @click="hideModal">
             {{ no }}
           </button>
-          <button class="icon primary" @click="resolve">
+          <button class="icon button primary" @click="resolve">
             {{ yes }}
           </button>
         </span>

components/teams/Add.vue

@@ -4,9 +4,9 @@
       <ul>
         <li>
           <div class="row-wrapper">
-            <h3 class="title">{{ $t("new_team") }}</h3>
+            <h3 class="heading">{{ $t("new_team") }}</h3>
             <div>
-              <button class="icon" @click="hideModal">
+              <button class="icon button" @click="hideModal">
                 <i class="material-icons">close</i>
               </button>
             </div>
@@ -19,6 +19,7 @@
         <li>
           <input
             v-model="name"
+            class="input"
             type="text"
             :placeholder="$t('my_new_team')"
             @keyup.enter="addNewTeam"
@@ -30,10 +31,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="addNewTeam">
+          <button class="icon button primary" @click="addNewTeam">
             {{ $t("save") }}
           </button>
         </span>

components/teams/Edit.vue

@@ -4,9 +4,9 @@
       <ul>
         <li>
           <div class="row-wrapper">
-            <h3 class="title">{{ $t("edit_team") }}</h3>
+            <h3 class="heading">{{ $t("edit_team") }}</h3>
             <div>
-              <button class="icon" @click="hideModal">
+              <button class="icon button" @click="hideModal">
                 <i class="material-icons">close</i>
               </button>
             </div>
@@ -19,6 +19,7 @@
         <li>
           <input
             v-model="name"
+            class="input"
             type="text"
             :placeholder="editingTeam.name"
             @keyup.enter="saveTeam"
@@ -48,6 +49,7 @@
       >
         <li>
           <input
+            class="input"
             :placeholder="$t('email')"
             :name="'param' + index"
             :value="member.user.email"
@@ -58,6 +60,7 @@
           <span class="select-wrapper">
             <v-popover>
               <input
+                class="input"
                 :placeholder="$t('permissions')"
                 :name="'value' + index"
                 :value="
@@ -71,7 +74,7 @@
                 <div>
                   <button
                     v-close-popover
-                    class="icon"
+                    class="icon button"
                     @click="updateRole(index, 'OWNER')"
                   >
                     OWNER
@@ -80,7 +83,7 @@
                 <div>
                   <button
                     v-close-popover
-                    class="icon"
+                    class="icon button"
                     @click="updateRole(index, 'EDITOR')"
                   >
                     EDITOR
@@ -89,7 +92,7 @@
                 <div>
                   <button
                     v-close-popover
-                    class="icon"
+                    class="icon button"
                     @click="updateRole(index, 'VIEWER')"
                   >
                     VIEWER
@@ -104,7 +107,7 @@
             <button
               id="member"
               v-tooltip.bottom="$t('delete')"
-              class="icon"
+              class="icon button"
               @click="removeExistingTeamMember(member.user.uid)"
             >
               <i class="material-icons">delete</i>
@@ -127,6 +130,7 @@
         <li>
           <input
             v-model="member.key"
+            class="input"
             :placeholder="$t('email')"
             :name="'param' + index"
             autofocus
@@ -136,6 +140,7 @@
           <span class="select-wrapper">
             <v-popover>
               <input
+                class="input"
                 :placeholder="$t('permissions')"
                 :name="'value' + index"
                 :value="
@@ -149,7 +154,7 @@
                 <div>
                   <button
                     v-close-popover
-                    class="icon"
+                    class="icon button"
                     @click="member.value = 'OWNER'"
                   >
                     OWNER
@@ -158,7 +163,7 @@
                 <div>
                   <button
                     v-close-popover
-                    class="icon"
+                    class="icon button"
                     @click="member.value = 'EDITOR'"
                   >
                     EDITOR
@@ -167,7 +172,7 @@
                 <div>
                   <button
                     v-close-popover
-                    class="icon"
+                    class="icon button"
                     @click="member.value = 'VIEWER'"
                   >
                     VIEWER
@@ -182,7 +187,7 @@
             <button
               id="member"
               v-tooltip.bottom="$t('delete')"
-              class="icon"
+              class="icon button"
               @click="removeTeamMember(index)"
             >
               <i class="material-icons">delete</i>
@@ -192,7 +197,7 @@
       </ul>
       <ul>
         <li>
-          <button class="icon" @click="addTeamMember">
+          <button class="icon button" @click="addTeamMember">
             <i class="material-icons">add</i>
             <span>{{ $t("add_new") }}</span>
           </button>
@@ -203,10 +208,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="saveTeam">
+          <button class="icon button primary" @click="saveTeam">
             {{ $t("save") }}
           </button>
         </span>

components/teams/Team.vue

@@ -3,7 +3,7 @@
     <div>
       <button
         v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
-        class="icon"
+        class="icon button"
         @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
       >
         <i class="material-icons">group</i>
@@ -11,18 +11,22 @@
       </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 v-if="team.myRole === 'OWNER'">
-          <button v-close-popover class="icon" @click="$emit('edit-team')">
+          <button
+            v-close-popover
+            class="icon button"
+            @click="$emit('edit-team')"
+          >
             <i class="material-icons">create</i>
             <span>{{ $t("edit") }}</span>
           </button>
         </div>
         <div v-if="team.myRole === 'OWNER'">
-          <button v-close-popover class="icon" @click="deleteTeam">
+          <button v-close-popover class="icon button" @click="deleteTeam">
             <i class="material-icons">delete</i>
             <span>{{ $t("delete") }}</span>
           </button>
@@ -30,7 +34,7 @@
         <div>
           <button
             v-close-popover
-            class="icon"
+            class="icon button"
             :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
             @click="exitTeam"
           >

components/teams/index.vue

@@ -21,7 +21,7 @@
     />
     <div class="row-wrapper">
       <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>

layouts/error.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="page page-error">
-    <h1 class="mb-4 font-mono text-4xl">{{ statusCode }}</h1>
-    <h3 class="mb-4 font-mono text-xs">{{ message }}</h3>
+    <h1 class="mb-4 font-mono heading text-4xl">{{ statusCode }}</h1>
+    <h3 class="mb-4 heading font-mono text-xs">{{ message }}</h3>
     <p class="mt-4 border-t border-tooltip">
       <nuxt-link to="/">
-        <button class="icon">
+        <button class="icon button">
           <i class="material-icons">home</i>
           <span>
             {{ $t("go_home") }}
           </span>
         </button>
       </nuxt-link>
-      <button class="icon" @click="reloadApplication">
+      <button class="icon button" @click="reloadApplication">
         <i class="material-icons">refresh</i>
         <span>
           {{ $t("reload") }}

nuxt.config.js

@@ -115,8 +115,8 @@ export default {
     "@nuxtjs/google-analytics",
     // https://github.com/nuxt-community/gtm-module
     "@nuxtjs/gtm",
-    // https://github.com/nuxt-community/nuxt-tailwindcss
-    "@nuxtjs/tailwindcss",
+    // https://github.com/windicss/windicss
+    "nuxt-windicss",
     // https://github.com/nuxt-community/color-mode-module
     "@nuxtjs/color-mode",
     // https: //github.com/nuxt-community/google-fonts-module
@@ -218,11 +218,6 @@ export default {
     },
   },
 
-  // TailwindCSS module configuration (https://github.com/nuxt-community/tailwindcss-module)
-  tailwindcss: {
-    viewer: false,
-  },
-
   // i18n module configuration (https://github.com/nuxt-community/i18n-module)
   i18n: {
     locales: [

package.json

@@ -30,7 +30,7 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/toast": "^3.3.1",
     "ace-builds": "^1.4.12",
-    "acorn": "^8.4.0",
+    "acorn": "^8.4.1",
     "acorn-walk": "^8.1.0",
     "esprima": "^4.0.1",
     "firebase": "^8.6.8",
@@ -40,7 +40,7 @@
     "mustache": "^4.2.0",
     "node-interval-tree": "^1.3.3",
     "nuxt": "^2.15.7",
-    "nuxt-i18n": "^6.27.1",
+    "nuxt-i18n": "^6.27.2",
     "paho-mqtt": "^1.1.0",
     "rxjs": "^7.1.0",
     "socket.io-client": "^4.1.2",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
     "@nuxt/types": "^2.15.7",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.0.10",
@@ -67,22 +67,21 @@
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/stylelint-module": "^4.0.0",
-    "@nuxtjs/tailwindcss": "^4.1.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@types/lodash": "^4.14.170",
     "@vue/test-utils": "^1.2.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.0.2",
+    "babel-jest": "^27.0.5",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-nuxt": ">=2.0.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.11.1",
+    "eslint-plugin-vue": "^7.12.1",
     "husky": "^6.0.0",
-    "jest": "^27.0.4",
+    "jest": "^27.0.5",
     "jest-serializer-vue": "^2.0.2",
     "lint-staged": "^11.0.0",
-    "postcss": "^8.3.5",
+    "nuxt-windicss": "^1.1.1",
     "prettier": "^2.3.1",
     "pretty-quick": "^3.1.1",
     "raw-loader": "^4.0.2",

pages/doc.vue

@@ -12,7 +12,7 @@
               <label for="collectionUpload">
                 <button
                   v-tooltip="'JSON'"
-                  class="icon"
+                  class="icon button"
                   @click="$refs.collectionUpload.click()"
                 >
                   <i class="material-icons">folder</i>
@@ -21,6 +21,7 @@
               </label>
               <input
                 ref="collectionUpload"
+                class="input"
                 name="collectionUpload"
                 type="file"
                 @change="uploadCollection"
@@ -28,7 +29,7 @@
               <div>
                 <button
                   v-tooltip.bottom="$t('clear')"
-                  class="icon"
+                  class="icon button"
                   @click="collectionJSON = '[]'"
                 >
                   <i class="material-icons">clear_all</i>
@@ -48,7 +49,7 @@
                 useWorker: false,
               }"
             />
-            <button class="icon" @click="getDoc">
+            <button class="icon button" @click="getDoc">
               <i class="material-icons">topic</i>
               <span>{{ $t("generate_docs") }}</span>
             </button>
@@ -79,7 +80,7 @@
                       ? true
                       : false
                   "
-                  class="icon"
+                  class="icon button"
                   @click="createDocsGist"
                 >
                   <i class="material-icons">assignment</i>

pages/graphql.vue

@@ -11,7 +11,7 @@
                 v-model="url"
                 type="url"
                 spellcheck="false"
-                class="md:rounded-bl-lg"
+                class="input md:rounded-bl-lg"
                 :placeholder="$t('url')"
                 @keyup.enter="onPollSchemaClick()"
               />
@@ -22,7 +22,11 @@
                 <button
                   id="get"
                   name="get"
-                  class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                  class="
+                    button
+                    rounded-b-lg
+                    md:rounded-bl-none md:rounded-br-lg
+                  "
                   @click="onPollSchemaClick"
                 >
                   {{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
@@ -47,7 +51,7 @@
                   <div>
                     <button
                       v-tooltip.bottom="$t('clear')"
-                      class="icon"
+                      class="icon button"
                       @click="headers = []"
                     >
                       <i class="material-icons">clear_all</i>
@@ -83,6 +87,7 @@
               </li>
               <li>
                 <input
+                  class="input"
                   :placeholder="$t('value_count', { count: index + 1 })"
                   :name="`value ${index}`"
                   :value="header.value"
@@ -105,7 +110,7 @@
                           : $t('turn_on')
                         : $t('turn_off'),
                     }"
-                    class="icon"
+                    class="icon button"
                     @click="
                       $store.commit('setActiveGQLHeader', {
                         index,
@@ -131,7 +136,7 @@
                 <li>
                   <button
                     v-tooltip.bottom="$t('delete')"
-                    class="icon"
+                    class="icon button"
                     @click="removeRequestHeader(index)"
                   >
                     <i class="material-icons">delete</i>
@@ -141,7 +146,7 @@
             </ul>
             <ul>
               <li>
-                <button class="icon" @click="addRequestHeader">
+                <button class="icon button" @click="addRequestHeader">
                   <i class="material-icons">add</i>
                   <span>{{ $t("add_new") }}</span>
                 </button>
@@ -161,7 +166,7 @@
                     ? $t('expand_response')
                     : $t('collapse_response'),
                 }"
-                class="icon"
+                class="icon button"
                 @click="ToggleExpandResponse"
               >
                 <i class="material-icons">
@@ -171,7 +176,7 @@
               <button
                 ref="downloadSchema"
                 v-tooltip="$t('download_file')"
-                class="icon"
+                class="icon button"
                 @click="downloadSchema"
               >
                 <i class="material-icons">save_alt</i>
@@ -179,7 +184,7 @@
               <button
                 ref="copySchemaCode"
                 v-tooltip="$t('copy_schema')"
-                class="icon"
+                class="icon button"
                 @click="copySchema"
               >
                 <i class="material-icons">content_copy</i>
@@ -204,7 +209,7 @@
           <input
             v-else
             ref="status"
-            class="rounded-b-lg missing-data-response"
+            class="input rounded-b-lg missing-data-response"
             :value="$t('waiting_receive_schema')"
             name="status"
             readonly
@@ -220,6 +225,7 @@
                 v-tooltip.bottom="
                   `${$t('run_query')} (${getSpecialKey()}-Enter)`
                 "
+                class="button"
                 @click="runQuery()"
               >
                 <i class="material-icons">play_arrow</i>
@@ -227,14 +233,14 @@
               <button
                 ref="copyQueryButton"
                 v-tooltip="$t('copy_query')"
-                class="icon"
+                class="icon button"
                 @click="copyQuery"
               >
                 <i class="material-icons">content_copy</i>
               </button>
               <button
                 v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
-                class="icon"
+                class="icon button"
                 @click="doPrettifyQuery"
               >
                 <i class="material-icons">photo_filter</i>
@@ -242,7 +248,7 @@
               <button
                 ref="saveRequest"
                 v-tooltip.bottom="$t('save_to_collections')"
-                class="icon"
+                class="icon button"
                 @click="saveRequest"
               >
                 <i class="material-icons">create_new_folder</i>
@@ -295,7 +301,7 @@
                   v-if="response"
                   ref="downloadResponse"
                   v-tooltip="$t('download_file')"
-                  class="icon"
+                  class="icon button"
                   @click="downloadResponse"
                 >
                   <i class="material-icons">save_alt</i>
@@ -304,7 +310,7 @@
                   v-if="response"
                   ref="copyResponseButton"
                   v-tooltip="$t('copy_response')"
-                  class="icon"
+                  class="icon button"
                   @click="copyResponse"
                 >
                   <i class="material-icons">content_copy</i>
@@ -330,7 +336,7 @@
             <input
               v-else
               ref="status"
-              class="rounded-b-lg missing-data-response"
+              class="input rounded-b-lg missing-data-response"
               :value="$t('waiting_receive_response')"
               name="status"
               readonly
@@ -353,7 +359,7 @@
                     v-model="graphqlFieldsFilterText"
                     type="text"
                     :placeholder="$t('search')"
-                    class="rounded-t-lg"
+                    class="input rounded-t-lg"
                   />
                   <SmartTabs ref="gqlTabs" styles="m-4">
                     <div class="gqlTabs">

pages/index.vue

@@ -11,7 +11,7 @@
                 <v-popover>
                   <input
                     id="method"
-                    class="drop-down-input"
+                    class="input drop-down-input"
                     v-model="method"
                     :readonly="!customMethod"
                     autofocus
@@ -22,7 +22,7 @@
                       :key="`method-${index}`"
                     >
                       <button
-                        class="icon"
+                        class="icon button"
                         @click="
                           customMethod =
                             methodMenuItem == 'CUSTOM' ? true : false
@@ -42,7 +42,7 @@
               <input
                 v-if="!EXPERIMENTAL_URL_BAR_ENABLED"
                 :class="{ error: !isValidURL }"
-                class="border-dashed md:border-l border-divider"
+                class="input border-dashed md:border-l border-divider"
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="url"
                 name="url"
@@ -61,6 +61,7 @@
                 :disabled="!isValidURL"
                 @click="sendRequest"
                 id="send"
+                class="button"
                 ref="sendButton"
               >
                 {{ $t("send") }}
@@ -68,7 +69,13 @@
                   <i class="material-icons">send</i>
                 </span>
               </button>
-              <button v-else @click="cancelRequest" id="send" ref="sendButton">
+              <button
+                v-else
+                @click="cancelRequest"
+                id="send"
+                class="button"
+                ref="sendButton"
+              >
                 {{ $t("cancel") }}
                 <span>
                   <i class="material-icons">clear</i>
@@ -78,15 +85,15 @@
           </ul>
           <ul>
             <li>
-              <label for="request-name" class="text-sm">{{
-                $t("token_req_name")
-              }}</label>
+              <label for="request-name" class="text-sm">
+                {{ $t("token_req_name") }}
+              </label>
               <input
                 id="request-name"
                 name="request-name"
                 type="text"
                 v-model="name"
-                class="text-sm"
+                class="input text-sm"
               />
             </li>
           </ul>
@@ -103,7 +110,7 @@
                   <v-popover>
                     <input
                       id="contentType"
-                      class="drop-down-input"
+                      class="input drop-down-input"
                       v-model="contentType"
                       readonly
                     />
@@ -115,7 +122,7 @@
                         :key="`content-type-${index}`"
                       >
                         <button
-                          class="icon"
+                          class="icon button"
                           @click="contentType = contentTypeMenuItem"
                           v-close-popover
                         >
@@ -169,14 +176,14 @@
           <div class="row-wrapper">
             <span>
               <button
-                class="icon"
+                class="icon button"
                 @click="showCurlImportModal = !showCurlImportModal"
                 v-tooltip.bottom="$t('import_curl')"
               >
                 <i class="material-icons">import_export</i>
               </button>
               <button
-                class="icon"
+                class="icon button"
                 @click="showCodegenModal = !showCodegenModal"
                 :disabled="!isValidURL"
                 v-tooltip.bottom="$t('show_code')"
@@ -186,7 +193,7 @@
             </span>
             <span>
               <button
-                class="icon"
+                class="icon button"
                 @click="copyRequest"
                 ref="copyRequest"
                 :disabled="!isValidURL"
@@ -196,7 +203,7 @@
                 <i v-else class="material-icons">content_copy</i>
               </button>
               <button
-                class="icon"
+                class="icon button"
                 @click="saveRequest"
                 ref="saveRequest"
                 :disabled="!isValidURL"
@@ -205,7 +212,7 @@
                 <i class="material-icons">create_new_folder</i>
               </button>
               <button
-                class="icon"
+                class="icon button"
                 @click="clearContent('', $event)"
                 v-tooltip.bottom="$t('clear_all')"
                 ref="clearAll"
@@ -260,7 +267,7 @@
                       <label for="auth">{{ $t("authentication") }}</label>
                       <div>
                         <button
-                          class="icon"
+                          class="icon button"
                           @click="clearContent('auth', $event)"
                           v-tooltip.bottom="$t('clear')"
                         >
@@ -269,7 +276,7 @@
                       </div>
                     </div>
                     <span class="select-wrapper">
-                      <select id="auth" v-model="auth">
+                      <select class="select" id="auth" v-model="auth">
                         <option>None</option>
                         <option>Basic Auth</option>
                         <option>Bearer Token</option>
@@ -281,6 +288,7 @@
                 <ul v-if="auth === 'Basic Auth'">
                   <li>
                     <input
+                      class="input"
                       placeholder="User"
                       name="http_basic_user"
                       v-model="httpUser"
@@ -288,6 +296,7 @@
                   </li>
                   <li>
                     <input
+                      class="input"
                       placeholder="Password"
                       name="http_basic_passwd"
                       :type="passwordFieldType"
@@ -297,7 +306,7 @@
                   <div>
                     <li>
                       <button
-                        class="icon"
+                        class="icon button"
                         ref="switchVisibility"
                         @click="switchVisibility"
                       >
@@ -319,13 +328,14 @@
                   <li>
                     <div class="row-wrapper">
                       <input
+                        class="input"
                         placeholder="Token"
                         name="bearer_token"
                         v-model="bearerToken"
                       />
                       <button
                         v-if="auth === 'OAuth 2.0'"
-                        class="icon"
+                        class="icon button"
                         @click="showTokenListModal = !showTokenListModal"
                         v-tooltip.bottom="$t('use_token')"
                       >
@@ -333,7 +343,7 @@
                       </button>
                       <button
                         v-if="auth === 'OAuth 2.0'"
-                        class="icon"
+                        class="icon button"
                         @click="showTokenRequest = !showTokenRequest"
                         v-tooltip.bottom="$t('get_token')"
                       >
@@ -359,21 +369,21 @@
                       <label for="token-name">{{ $t("token_name") }}</label>
                       <div>
                         <button
-                          class="icon"
+                          class="icon button"
                           @click="showTokenRequestList = true"
                           v-tooltip.bottom="$t('manage_token_req')"
                         >
                           <i class="material-icons">library_add</i>
                         </button>
                         <button
-                          class="icon"
+                          class="icon button"
                           @click="clearContent('access_token', $event)"
                           v-tooltip.bottom="$t('clear')"
                         >
                           <i class="material-icons">clear_all</i>
                         </button>
                         <button
-                          class="icon"
+                          class="icon button"
                           @click="showTokenRequest = false"
                           v-tooltip.bottom="$t('close')"
                         >
@@ -382,6 +392,7 @@
                       </div>
                     </div>
                     <input
+                      class="input"
                       id="token-name"
                       :placeholder="$t('optional')"
                       name="token_name"
@@ -396,6 +407,7 @@
                       {{ $t("oidc_discovery_url") }}
                     </label>
                     <input
+                      class="input"
                       :disabled="
                         this.authUrl !== '' || this.accessTokenUrl !== ''
                       "
@@ -411,6 +423,7 @@
                   <li>
                     <label for="auth-url">{{ $t("auth_url") }}</label>
                     <input
+                      class="input"
                       :disabled="this.oidcDiscoveryUrl !== ''"
                       id="auth-url"
                       name="auth_url"
@@ -426,6 +439,7 @@
                       {{ $t("access_token_url") }}
                     </label>
                     <input
+                      class="input"
                       :disabled="this.oidcDiscoveryUrl !== ''"
                       id="access-token-url"
                       name="access_token_url"
@@ -439,6 +453,7 @@
                   <li>
                     <label for="client-id">{{ $t("client_id") }}</label>
                     <input
+                      class="input"
                       id="client-id"
                       name="client_id"
                       type="text"
@@ -451,6 +466,7 @@
                   <li>
                     <label for="scope">{{ $t("scope") }}</label>
                     <input
+                      class="input"
                       id="scope"
                       name="scope"
                       type="text"
@@ -461,7 +477,10 @@
                 </ul>
                 <ul>
                   <li>
-                    <button class="icon" @click="handleAccessTokenRequest">
+                    <button
+                      class="icon button"
+                      @click="handleAccessTokenRequest"
+                    >
                       <i class="material-icons">vpn_key</i>
                       <span>{{ $t("request_token") }}</span>
                     </button>
@@ -485,7 +504,7 @@
                           target="_blank"
                           rel="noopener"
                         >
-                          <button class="icon" v-tooltip="$t('wiki')">
+                          <button class="icon button" v-tooltip="$t('wiki')">
                             <i class="material-icons">help_outline</i>
                           </button>
                         </a>
@@ -521,7 +540,7 @@
                           target="_blank"
                           rel="noopener"
                         >
-                          <button class="icon" v-tooltip="$t('wiki')">
+                          <button class="icon button" v-tooltip="$t('wiki')">
                             <i class="material-icons">help_outline</i>
                           </button>
                         </a>
@@ -545,7 +564,7 @@
                         <label>Test Reports</label>
                         <div>
                           <button
-                            class="icon"
+                            class="icon button"
                             @click="clearContent('tests', $event)"
                             v-tooltip.bottom="$t('clear')"
                           >
@@ -559,7 +578,7 @@
                       >
                         <div v-if="testReport.startBlock" class="info">
                           <hr />
-                          <h4>{{ testReport.startBlock }}</h4>
+                          <h4 class="heading">{{ testReport.startBlock }}</h4>
                         </div>
                         <p
                           v-else-if="testReport.result"
@@ -663,9 +682,9 @@
     >
       <div slot="header">
         <div class="row-wrapper">
-          <h3 class="title">{{ $t("manage_token_req") }}</h3>
+          <h3 class="heading">{{ $t("manage_token_req") }}</h3>
           <div>
-            <button class="icon" @click="showTokenRequestList = false">
+            <button class="icon button" @click="showTokenRequestList = false">
               <i class="material-icons">close</i>
             </button>
           </div>
@@ -677,7 +696,7 @@
           <div>
             <button
               :disabled="this.tokenReqs.length === 0"
-              class="icon"
+              class="icon button"
               @click="showTokenRequestList = false"
               v-tooltip.bottom="$t('use_token_req')"
             >
@@ -685,7 +704,7 @@
             </button>
             <button
               :disabled="this.tokenReqs.length === 0"
-              class="icon"
+              class="icon button"
               @click="removeOAuthTokenReq"
               v-tooltip.bottom="$t('delete')"
             >
@@ -698,6 +717,7 @@
             <span class="select-wrapper">
               <select
                 id="token-req-list"
+                class="select"
                 v-model="tokenReqSelect"
                 :disabled="this.tokenReqs.length === 0"
                 @change="tokenReqChange($event)"
@@ -714,12 +734,13 @@
           </li>
         </ul>
         <label for="token-req-name">{{ $t("token_req_name") }}</label>
-        <input v-model="tokenReqName" />
+        <input class="input" v-model="tokenReqName" />
         <label for="token-req-details">
           {{ $t("token_req_details") }}
         </label>
         <textarea
           id="token-req-details"
+          class="textarea"
           readonly
           rows="7"
           v-model="tokenReqDetails"
@@ -729,7 +750,7 @@
         <div class="row-wrapper">
           <span></span>
           <span>
-            <button class="icon primary" @click="addOAuthTokenReq">
+            <button class="icon button primary" @click="addOAuthTokenReq">
               {{ $t("save_token_req") }}
             </button>
           </span>

pages/settings.vue

@@ -8,7 +8,7 @@
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
         <div v-if="currentUser">
-          <button class="icon">
+          <button class="icon button">
             <img
               v-if="currentUser.photoURL"
               :src="currentUser.photoURL"
@@ -20,7 +20,7 @@
             </span>
           </button>
           <br />
-          <button class="icon">
+          <button class="icon button">
             <i class="material-icons">email</i>
             <span>
               {{ currentUser.email || $t("nothing_found") }}
@@ -124,7 +124,7 @@
             target="_blank"
             rel="noopener"
           >
-            <button v-tooltip="$t('wiki')" class="icon">
+            <button v-tooltip="$t('wiki')" class="icon button">
               <i class="material-icons">help_outline</i>
             </button>
           </a>
@@ -133,7 +133,7 @@
           <label for="url">{{ $t("url") }}</label>
           <button
             v-tooltip.bottom="$t('reset_default')"
-            class="icon"
+            class="icon button"
             @click="resetProxy"
           >
             <i class="material-icons">clear_all</i>
@@ -142,6 +142,7 @@
         <input
           id="url"
           v-model="PROXY_URL"
+          class="input"
           type="url"
           :disabled="!PROXY_ENABLED"
           :placeholder="$t('url')"
@@ -167,11 +168,11 @@
 			<ul>
 				<li>
 					<label for="url">URL</label>
-					<input id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
+					<input class="input" id="url" type="url" v-model="settings.PROXY_URL" :disabled="!settings.PROXY_ENABLED">
 				</li>
 				<li>
 					<label for="key">Key</label>
-					<input id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
+					<input class="input" id="key" type="password" v-model="settings.PROXY_KEY" :disabled="!settings.PROXY_ENABLED" @change="applySetting('PROXY_KEY', $event)">
 				</li>
 			</ul>
       -->

tailwind.config.js

@@ -1,60 +0,0 @@
-/*
- ** TailwindCSS Configuration File
- **
- ** Docs: https://tailwindcss.com/docs/configuration
- ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
- */
-
-import colors from "tailwindcss/colors"
-
-export default {
-  dark: "class",
-  mode: "jit",
-  corePlugins: {
-    float: false,
-    clear: false,
-    transitionDelay: false,
-    skew: false,
-  },
-  theme: {
-    container: {
-      center: true,
-    },
-    extend: {
-      colors: {
-        primary: "var(--primary-color)",
-        primaryLight: "var(--primary-light-color)",
-        primaryDark: "var(--primary-dark-color)",
-        secondary: "var(--secondary-color)",
-        secondaryLight: "var(--secondary-light-color)",
-        accent: "var(--accent-color)",
-        divider: "var(--divider-color)",
-        error: "var(--error-color)",
-        tooltip: "var(--tooltip-color)",
-        blue: colors.blue,
-        green: colors.green,
-        teal: colors.teal,
-        indigo: colors.indigo,
-        purple: colors.purple,
-        orange: colors.orange,
-        pink: colors.pink,
-        red: colors.red,
-        yellow: colors.yellow,
-      },
-    },
-    fontFamily: {
-      sans: "var(--font-sans)",
-      mono: "var(--font-mono)",
-      icon: "var(--font-icon)",
-    },
-  },
-  variants: {},
-  plugins: [],
-  purge: [
-    "components/**/*.vue",
-    "layouts/**/*.vue",
-    "pages/**/*.vue",
-    "plugins/**/*.js",
-    "nuxt.config.js",
-  ],
-}

windi.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from "windicss/helpers"
+
+export default defineConfig({
+  dark: "class",
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {
+      colors: {
+        primary: "var(--primary-color)",
+        primaryLight: "var(--primary-light-color)",
+        primaryDark: "var(--primary-dark-color)",
+        secondary: "var(--secondary-color)",
+        secondaryLight: "var(--secondary-light-color)",
+        accent: "var(--accent-color)",
+        divider: "var(--divider-color)",
+        error: "var(--error-color)",
+        tooltip: "var(--tooltip-color)",
+      },
+    },
+    fontFamily: {
+      sans: "var(--font-sans)",
+      mono: "var(--font-mono)",
+      icon: "var(--font-icon)",
+    },
+  },
+})