feat: refactor buttons

components/environments/Add.vue

@@ -3,9 +3,7 @@
     <template #header>
       <h3 class="heading">{{ $t("new_environment") }}</h3>
       <div>
-        <button class="icon button" @click="hideModal">
-          <i class="material-icons">close</i>
-        </button>
+        <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
     </template>
     <template #body>
@@ -22,12 +20,8 @@
     <template #footer>
       <span></span>
       <span>
-        <button class="icon button" @click="hideModal">
-          {{ $t("cancel") }}
-        </button>
-        <button class="icon button primary" @click="addNewEnvironment">
-          {{ $t("save") }}
-        </button>
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
       </span>
     </template>
   </SmartModal>

components/environments/Edit.vue

@@ -3,9 +3,7 @@
     <template #header>
       <h3 class="heading">{{ $t("edit_environment") }}</h3>
       <div>
-        <button class="icon button" @click="hideModal">
-          <i class="material-icons">close</i>
-        </button>
+        <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
     </template>
     <template #body>
@@ -21,14 +19,12 @@
       <div class="row-wrapper">
         <label for="variableList">{{ $t("env_variable_list") }}</label>
         <div>
-          <button
+          <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('clear')"
-            class="icon button"
-            @click="clearContent($event)"
-          >
-            <i class="material-icons">{{ clearIcon }}</i>
-          </button>
+            icon="clearIcon"
+            @click.native="clearContent($event)"
+          />
         </div>
       </div>
       <ul
@@ -62,36 +58,29 @@
         </li>
         <div>
           <li>
-            <button
+            <ButtonSecondary
               id="variable"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
-              class="icon button"
-              @click="removeEnvironmentVariable(index)"
-            >
-              <i class="material-icons">delete</i>
-            </button>
+              @click.native="removeEnvironmentVariable(index)"
+            />
+            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
       <ul>
         <li>
-          <button class="icon button" @click="addEnvironmentVariable">
-            <i class="material-icons">add</i>
-            <span>{{ $t("add_new") }}</span>
-          </button>
+          <ButtonSecondary @click.native="addEnvironmentVariable" />
+          <i class="material-icons">add</i>
+          <span>{{ $t("add_new") }}</span>
         </li>
       </ul>
     </template>
     <template #footer>
       <span></span>
       <span>
-        <button class="icon button" @click="hideModal">
-          {{ $t("cancel") }}
-        </button>
-        <button class="icon button primary" @click="saveEnvironment">
-          {{ $t("save") }}
-        </button>
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
       </span>
     </template>
   </SmartModal>

components/environments/Environment.vue

@@ -2,32 +2,24 @@
   <div>
     <div class="row-wrapper">
       <div>
-        <button class="icon button" @click="$emit('edit-environment')">
-          <i class="material-icons">layers</i>
-          <span>{{ environment.name }}</span>
-        </button>
+        <ButtonSecondary @click.native="$emit('edit-environment')" />
+        <i class="material-icons">layers</i>
+        <span>{{ environment.name }}</span>
       </div>
-      <tippy trigger="click" theme="popover" arrow>
+      <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <button
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
-            class="tooltip-target icon button"
-          >
-            <i class="material-icons">more_vert</i>
-          </button>
+          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
+          <i class="material-icons">more_vert</i>
         </template>
         <div>
-          <button class="icon button" @click="$emit('edit-environment')">
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
+          <ButtonSecondary @click.native="$emit('edit-environment')" />
+          <i class="material-icons">create</i>
+          <span>{{ $t("edit") }}</span>
         </div>
         <div>
-          <button class="icon button" @click="confirmRemove = true">
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
+          <ButtonSecondary @click.native="confirmRemove = true" />
+          <i class="material-icons">delete</i>
+          <span>{{ $t("delete") }}</span>
         </div>
       </tippy>
     </div>

components/environments/ImportExport.vue

@@ -5,21 +5,18 @@
         {{ $t("import_export") }} {{ $t("environments") }}
       </h3>
       <div>
-        <tippy trigger="click" theme="popover" arrow>
+        <tippy tabindex="-1" trigger="click" theme="popover" arrow>
           <template #trigger>
-            <button
+            <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
-              class="tooltip-target icon button"
-            >
-              <i class="material-icons">more_vert</i>
-            </button>
+            />
+            <i class="material-icons">more_vert</i>
           </template>
           <div>
-            <button class="icon button" @click="readEnvironmentGist">
-              <i class="material-icons">assignment_returned</i>
-              <span>{{ $t("import_from_gist") }}</span>
-            </button>
+            <ButtonSecondary @click.native="readEnvironmentGist" />
+            <i class="material-icons">assignment_returned</i>
+            <span>{{ $t("import_from_gist") }}</span>
           </div>
           <div
             v-tippy="{ theme: 'tooltip' }"
@@ -31,7 +28,7 @@
                   : null,
               }"
           >
-            <button
+            <ButtonSecondary
               :disabled="
                 !currentUser
                   ? true
@@ -39,66 +36,56 @@
                   ? true
                   : false
               "
-              class="icon button"
-              @click="createEnvironmentGist"
-            >
-              <i class="material-icons">assignment_turned_in</i>
-              <span>{{ $t("create_secret_gist") }}</span>
-            </button>
+              @click.native="createEnvironmentGist"
+            />
+            <i class="material-icons">assignment_turned_in</i>
+            <span>{{ $t("create_secret_gist") }}</span>
           </div>
         </tippy>
-        <button class="icon button" @click="hideModal">
-          <i class="material-icons">close</i>
-        </button>
+        <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
     </template>
     <template #body>
       <div class="flex flex-col items-start p-2">
-        <button
+        <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
-          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"
-            @change="replaceWithJSON"
-          />
-        </button>
-        <button
+          @click.native="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"
+          @change="replaceWithJSON"
+        />
+        <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
-          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"
-            @change="importFromJSON"
-          />
-        </button>
-        <button
+          @click.native="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"
+          @change="importFromJSON"
+        />
+        <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
-          class="icon button"
-          @click="exportJSON"
-        >
-          <i class="material-icons">drive_file_move</i>
-          <span>
-            {{ $t("export_as_json") }}
-          </span>
-        </button>
+          @click.native="exportJSON"
+        />
+        <i class="material-icons">drive_file_move</i>
+        <span>
+          {{ $t("export_as_json") }}
+        </span>
       </div>
     </template>
   </SmartModal>

components/environments/index.vue

@@ -1,6 +1,6 @@
 <template>
   <AppSection label="environments">
-    <div class="show-on-large-screen">
+    <div class="flex">
       <span class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"
@@ -37,22 +37,22 @@
     />
     <div class="border-b row-wrapper border-divider">
       <div>
-        <button class="icon button" @click="displayModalAdd(true)">
-          <i class="material-icons">add</i>
-          <span>{{ $t("new") }}</span>
-        </button>
+        <ButtonSecondary
+          icon="add"
+          :label="$t('new')"
+          @click.native="displayModalAdd(true)"
+        />
       </div>
       <div>
-        <button class="icon button" @click="displayModalImportExport(true)">
-          {{ $t("import_export") }}
-        </button>
+        <ButtonSecondary @click.native="displayModalImportExport(true)" />
+        {{ $t("import_export") }}
       </div>
     </div>
     <p v-if="environments.length === 0" class="info">
       <i class="material-icons">help_outline</i>
       {{ $t("create_new_environment") }}
     </p>
-    <div class="virtual-list">
+    <div class="overflow-auto">
       <ul class="flex-col">
         <li
           v-for="(environment, index) in environments"
@@ -122,9 +122,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-</style>