feat: refactor buttons

components/teams/Add.vue

@@ -2,9 +2,8 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_team") }}</h3>
-      <button class="icon button" @click="hideModal">
-        <i class="material-icons">close</i>
-      </button>
+      <ButtonSecondary @click.native="hideModal" />
+      <i class="material-icons">close</i>
     </template>
     <template #body>
       <ul>
@@ -27,12 +26,8 @@
     <template #footer>
       <span></span>
       <span>
-        <button class="icon button" @click="hideModal">
-          {{ $t("cancel") }}
-        </button>
-        <button class="icon button primary" @click="addNewTeam">
-          {{ $t("save") }}
-        </button>
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
       </span>
     </template>
   </SmartModal>

components/teams/Edit.vue

@@ -2,9 +2,8 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_team") }}</h3>
-      <button class="icon button" @click="hideModal">
-        <i class="material-icons">close</i>
-      </button>
+      <ButtonSecondary @click.native="hideModal" />
+      <i class="material-icons">close</i>
     </template>
     <template #body>
       <ul>
@@ -57,7 +56,7 @@
         </li>
         <li>
           <span class="select-wrapper">
-            <tippy trigger="click" theme="popover" arrow>
+            <tippy tabindex="-1" trigger="click" theme="popover" arrow>
               <template #trigger>
                 <input
                   class="input"
@@ -72,40 +71,29 @@
                 />
               </template>
               <div>
-                <button class="icon button" @click="updateRole(index, 'OWNER')">
-                  OWNER
-                </button>
+                <ButtonSecondary @click.native="updateRole(index, 'OWNER')" />
+                OWNER
               </div>
               <div>
-                <button
-                  class="icon button"
-                  @click="updateRole(index, 'EDITOR')"
-                >
-                  EDITOR
-                </button>
+                <ButtonSecondary @click.native="updateRole(index, 'EDITOR')" />
+                EDITOR
               </div>
               <div>
-                <button
-                  class="icon button"
-                  @click="updateRole(index, 'VIEWER')"
-                >
-                  VIEWER
-                </button>
+                <ButtonSecondary @click.native="updateRole(index, 'VIEWER')" />
+                VIEWER
               </div>
             </tippy>
           </span>
         </li>
         <div>
           <li>
-            <button
+            <ButtonSecondary
               id="member"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
-              class="icon button"
-              @click="removeExistingTeamMember(member.user.uid)"
-            >
-              <i class="material-icons">delete</i>
-            </button>
+              @click.native="removeExistingTeamMember(member.user.uid)"
+            />
+            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
@@ -132,7 +120,7 @@
         </li>
         <li>
           <span class="select-wrapper">
-            <tippy trigger="click" theme="popover" arrow>
+            <tippy tabindex="-1" trigger="click" theme="popover" arrow>
               <template #trigger>
                 <input
                   class="input"
@@ -147,55 +135,45 @@
                 />
               </template>
               <div>
-                <button class="icon button" @click="member.value = 'OWNER'">
-                  OWNER
-                </button>
+                <ButtonSecondary @click.native="member.value = 'OWNER'" />
+                OWNER
               </div>
               <div>
-                <button class="icon button" @click="member.value = 'EDITOR'">
-                  EDITOR
-                </button>
+                <ButtonSecondary @click.native="member.value = 'EDITOR'" />
+                EDITOR
               </div>
               <div>
-                <button class="icon button" @click="member.value = 'VIEWER'">
-                  VIEWER
-                </button>
+                <ButtonSecondary @click.native="member.value = 'VIEWER'" />
+                VIEWER
               </div>
             </tippy>
           </span>
         </li>
         <div>
           <li>
-            <button
+            <ButtonSecondary
               id="member"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
-              class="icon button"
-              @click="removeTeamMember(index)"
-            >
-              <i class="material-icons">delete</i>
-            </button>
+              @click.native="removeTeamMember(index)"
+            />
+            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
       <ul>
         <li>
-          <button class="icon button" @click="addTeamMember">
-            <i class="material-icons">add</i>
-            <span>{{ $t("add_new") }}</span>
-          </button>
+          <ButtonSecondary @click.native="addTeamMember" />
+          <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="saveTeam">
-          {{ $t("save") }}
-        </button>
+        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
       </span>
     </template>
   </SmartModal>

components/teams/Team.vue

@@ -1,57 +1,46 @@
 <template>
   <div class="row-wrapper">
     <div>
-      <button
+      <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         title="team.myRole === 'OWNER' ? $t('edit') : ''"
-        class="icon button"
-        @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
-      >
-        <i class="material-icons">group</i>
-        <span>{{ team.name }}</span>
-      </button>
+        @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
+      />
+      <i class="material-icons">group</i>
+      <span>{{ team.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 v-if="team.myRole === 'OWNER'">
-        <button class="icon button" @click="$emit('edit-team')">
-          <i class="material-icons">create</i>
-          <span>{{ $t("edit") }}</span>
-        </button>
+        <ButtonSecondary @click.native="$emit('edit-team')" />
+        <i class="material-icons">create</i>
+        <span>{{ $t("edit") }}</span>
       </div>
       <div v-if="team.myRole === 'OWNER'">
-        <button class="icon button" @click="deleteTeam">
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
-        </button>
+        <ButtonSecondary @click.native="deleteTeam" />
+        <i class="material-icons">delete</i>
+        <span>{{ $t("delete") }}</span>
       </div>
       <div>
-        <button
-          class="icon button"
+        <ButtonSecondary
           :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-          @click="exitTeam"
-        >
-          <i class="material-icons">remove</i>
-          <div
-            v-tippy="{ theme: 'tooltip' }"
-            title="{
+          @click.native="exitTeam"
+        />
+        <i class="material-icons">remove</i>
+        <div
+          v-tippy="{ theme: 'tooltip' }"
+          title="{
                 content:
                   team.myRole === 'OWNER' && team.ownersCount == 1
                     ? $t('disable_exit')
                     : '',
               }"
-          >
-            <span>{{ $t("exit") }}</span>
-          </div>
-        </button>
+        >
+          <span>{{ $t("exit") }}</span>
+        </div>
       </div>
     </tippy>
   </div>

components/teams/index.vue

@@ -21,10 +21,11 @@
     />
     <div class="row-wrapper">
       <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>
     <p v-if="$apollo.queries.myTeams.loading" class="info">
@@ -33,7 +34,7 @@
     <p v-if="myTeams.length === 0" class="info">
       <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
     </p>
-    <div v-else class="virtual-list">
+    <div v-else class="overflow-auto">
       <ul class="flex-col">
         <li v-for="(team, index) in myTeams" :key="`team-${index}`">
           <TeamsTeam
@@ -127,13 +128,3 @@ export default {
   },
 }
 </script>
-
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 241px);
-}
-
-ul {
-  @apply flex flex-col;
-}
-</style>