fix: button icons

components/collections/graphql/Collection.vue

@@ -9,58 +9,60 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <ButtonSecondary @click.native="toggleShowChildren" />
+      <ButtonSecondary
+        :label="collection.name"
+        @click.native="toggleShowChildren"
+      />
       <i v-show="!showChildren && !isFiltered" class="material-icons"
         >arrow_right</i
       >
       <i v-show="showChildren || isFiltered" class="material-icons"
         >arrow_drop_down</i
       >
-
       <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
         >check_circle</i
       >
-
       <i v-else class="material-icons">folder</i>
-      <span>{{ collection.name }}</span>
-
       <div>
         <ButtonSecondary
           v-if="doc"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import')"
+          icon="topic"
           @click.native="$emit('select-collection')"
         />
-        <i class="material-icons">topic</i>
-
         <tippy tabindex="-1" trigger="click" theme="popover" arrow>
           <template #trigger>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              icon="more_vert"
             />
-            <i class="material-icons">more_vert</i>
           </template>
           <div>
             <ButtonSecondary
+              icon="create_new_folder"
+              :label="$t('new_folder')"
               @click.native="
                 $emit('add-folder', {
                   path: `${collectionIndex}`,
                 })
               "
             />
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("new_folder") }}</span>
           </div>
           <div>
-            <ButtonSecondary @click.native="$emit('edit-collection')" />
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
+            <ButtonSecondary
+              icon="create"
+              label="$t('edit')"
+              @click.native="$emit('edit-collection')"
+            />
           </div>
           <div>
-            <ButtonSecondary @click.native="confirmRemove = true" />
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
+            <ButtonSecondary
+              icon="delete"
+              :label="$t('delete')"
+              @click.native="confirmRemove = true"
+            />
           </div>
         </tippy>
       </div>
@@ -116,7 +118,7 @@
           "
           class="flex ml-8 border-l border-divider"
         >
-          <p class="info">
+          <p>
             <i class="material-icons">not_interested</i>
             {{ $t("collection_empty") }}
           </p>

components/collections/graphql/Folder.vue

@@ -20,33 +20,37 @@
         <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
           >check_circle</i
         >
-
         <i v-else class="material-icons">folder_open</i>
         <span>{{ folder.name }}</span>
       </div>
       <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
         </template>
         <div>
           <ButtonSecondary
+            icon="create_new_folder"
+            :label="$t('new_folder')"
             @click.native="$emit('add-folder', { folder, path: folderPath })"
           />
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("new_folder") }}</span>
         </div>
         <div>
           <ButtonSecondary
+            icon="edit"
+            :labeel="$t('edit')"
             @click.native="$emit('edit-folder', { folder, folderPath })"
           />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
         </div>
         <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
         </div>
       </tippy>
     </div>
@@ -103,7 +107,7 @@
         "
       >
         <li class="flex ml-8 border-l border-divider">
-          <p class="info">
+          <p>
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
           </p>

components/collections/graphql/ImportExport.vue

@@ -8,8 +8,8 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              icon="more_vert"
             />
-            <i class="material-icons">more_vert</i>
           </template>
           <div>
             <ButtonSecondary
@@ -36,10 +36,10 @@
                   ? true
                   : false
               "
+              icon="assignment_turned_in"
+              :label="$t('create_secret_gist')"
               @click.native="createCollectionGist"
             />
-            <i class="material-icons">assignment_turned_in</i>
-            <span>{{ $t("create_secret_gist") }}</span>
           </div>
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
@@ -50,10 +50,10 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('replace_current')"
+          icon="folder_special"
+          :label="$t('replace_json')"
           @click.native="openDialogChooseFileToReplaceWith"
         />
-        <i class="material-icons">folder_special</i>
-        <span>{{ $t("replace_json") }}</span>
         <input
           ref="inputChooseFileToReplaceWith"
           class="input"
@@ -65,10 +65,10 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
+          icon="create_new_folder"
+          :label="$t('import_json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
-        <i class="material-icons">create_new_folder</i>
-        <span>{{ $t("import_json") }}</span>
         <input
           ref="inputChooseFileToImportFrom"
           class="input"
@@ -80,12 +80,10 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
+          icon="drive_file_move"
+          :label="$t('export_as_json')"
           @click.native="exportJSON"
         />
-        <i class="material-icons">drive_file_move</i>
-        <span>
-          {{ $t("export_as_json") }}
-        </span>
       </div>
     </template>
   </SmartModal>

components/collections/graphql/Request.vue

@@ -28,6 +28,8 @@
         </template>
         <div>
           <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
             @click.native="
               $emit('edit-request', {
                 request,
@@ -36,13 +38,13 @@
               })
             "
           />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
         </div>
         <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
         </div>
       </tippy>
     </div>

components/collections/graphql/index.vue

@@ -46,17 +46,18 @@
       @hide-modal="displayModalImportExport(false)"
     />
     <div class="border-b row-wrapper border-divider">
-      <ButtonSecondary @click.native="displayModalAdd(true)" />
-      <i class="material-icons">add</i>
-      <span>{{ $t("new") }}</span>
-
+      <ButtonSecondary
+        icon="new"
+        :label="$t('new')"
+        @click.native="displayModalAdd(true)"
+      />
       <ButtonSecondary
         v-if="showCollActions"
+        :label="$t('import_export')"
         @click.native="displayModalImportExport(true)"
       />
-      {{ $t("import_export") }}
     </div>
-    <p v-if="collections.length === 0" class="info">
+    <p v-if="collections.length === 0">
       <i class="material-icons">help_outline</i>
       {{ $t("create_new_collection") }}
     </p>
@@ -84,7 +85,7 @@
         </li>
       </ul>
     </div>
-    <p v-if="filterText && filteredCollections.length === 0" class="info">
+    <p v-if="filterText && filteredCollections.length === 0">
       <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
         filterText
       }}"

components/collections/index.vue

@@ -83,7 +83,7 @@
         @click.native="displayModalImportExport(true)"
       />
     </div>
-    <p v-if="collections.length === 0" class="info">
+    <p v-if="collections.length === 0">
       <i class="material-icons">help_outline</i>
       {{ $t("create_new_collection") }}
     </p>
@@ -123,10 +123,9 @@
         </li>
       </ul>
     </div>
-    <p v-if="filterText && filteredCollections.length === 0" class="info">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
-        filterText
-      }}"
+    <p v-if="filterText && filteredCollections.length === 0">
+      <i class="material-icons">not_interested</i>
+      {{ $t("nothing_found") }} "{{ filterText }}"
     </p>
   </AppSection>
 </template>

components/collections/my/Collection.vue

@@ -9,47 +9,47 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <ButtonSecondary @click.native="toggleShowChildren" />
+      <ButtonSecondary
+        :label="collection.name"
+        @click.native="toggleShowChildren"
+      />
       <i v-show="!showChildren && !isFiltered" class="material-icons"
         >arrow_right</i
       >
       <i v-show="showChildren || isFiltered" class="material-icons"
         >arrow_drop_down</i
       >
-
       <i v-if="isSelected" class="text-green-400 material-icons"
         >check_circle</i
       >
-
       <i v-else class="material-icons">folder</i>
-      <span>{{ collection.name }}</span>
-
       <div>
         <ButtonSecondary
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import')"
+          icon="check_box_outline_blank"
           @click.native="$emit('select-collection')"
         />
-        <i class="material-icons">check_box_outline_blank</i>
         <ButtonSecondary
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
+          icon="check_box"
           @click.native="$emit('unselect-collection')"
         />
-        <i class="material-icons">check_box</i>
-
         <tippy tabindex="-1" trigger="click" theme="popover" arrow>
           <template #trigger>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              icon="more_vert"
             />
-            <i class="material-icons">more_vert</i>
           </template>
           <div>
             <ButtonSecondary
+              icon="create_new_folder"
+              :label="$t('new_folder')"
               @click.native="
                 $emit('add-folder', {
                   folder: collection,
@@ -57,18 +57,20 @@
                 })
               "
             />
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("new_folder") }}</span>
           </div>
           <div>
-            <ButtonSecondary @click.native="$emit('edit-collection')" />
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
+            <ButtonSecondary
+              icon="create"
+              :label="$t('edit')"
+              @click.native="$emit('edit-collection')"
+            />
           </div>
           <div>
-            <ButtonSecondary @click.native="confirmRemove = true" />
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
+            <ButtonSecondary
+              icon="delete"
+              :label="$t('delete')"
+              @click.native="confirmRemove = true"
+            />
           </div>
         </tippy>
       </div>
@@ -131,7 +133,7 @@
           "
           class="flex ml-8 border-l border-divider"
         >
-          <p class="info">
+          <p>
             <i class="material-icons">not_interested</i>
             {{ $t("collection_empty") }}
           </p>

components/collections/my/Folder.vue

@@ -10,7 +10,10 @@
       @dragend="dragging = false"
     >
       <div>
-        <ButtonSecondary @click.native="toggleShowChildren" />
+        <ButtonSecondary
+          :label="folder.name ? folder.name : folder.title"
+          @click.native="toggleShowChildren"
+        />
         <i v-show="!showChildren && !isFiltered" class="material-icons"
           >arrow_right</i
         >
@@ -21,22 +24,26 @@
           >check_circle</i
         >
         <i v-else class="material-icons">folder_open</i>
-        <span>{{ folder.name ? folder.name : folder.title }}</span>
       </div>
       <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
         </template>
         <div>
           <ButtonSecondary
+            icon="create_new_folder"
+            :label="$t('new_folder')"
             @click.native="$emit('add-folder', { folder, path: folderPath })"
           />
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("new_folder") }}</span>
         </div>
         <div>
           <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
             @click.native="
               $emit('edit-folder', {
                 folder,
@@ -46,13 +53,13 @@
               })
             "
           />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
         </div>
         <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :labl="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
         </div>
       </tippy>
     </div>
@@ -113,7 +120,7 @@
         "
       >
         <li class="flex ml-8 border-l border-divider">
-          <p class="info">
+          <p>
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
           </p>

components/collections/my/Request.vue

@@ -23,11 +23,16 @@
       </div>
       <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
-          <ButtonSecondary v-tippy="{ theme: 'tooltip' }" :title="$t('more')" />
-          <i class="material-icons">more_vert</i>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('more')"
+            icon="more_vert"
+          />
         </template>
         <div>
           <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
             @click.native="
               $emit('edit-request', {
                 collectionIndex,
@@ -39,13 +44,13 @@
               })
             "
           />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
         </div>
         <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
         </div>
       </tippy>
     </div>

components/collections/teams/Collection.vue

@@ -1,49 +1,49 @@
 <template>
   <div>
     <div>
-      <ButtonSecondary @click.native="toggleShowChildren" />
+      <ButtonSecondary
+        :label="collection.title"
+        @click.native="toggleShowChildren"
+      />
       <i v-show="!showChildren && !isFiltered" class="material-icons"
         >arrow_right</i
       >
       <i v-show="showChildren || isFiltered" class="material-icons"
         >arrow_drop_down</i
       >
-
       <i v-if="isSelected" class="text-green-400 material-icons"
         >check_circle</i
       >
-
       <i v-else class="material-icons">folder</i>
-      <span>{{ collection.title }}</span>
-
       <div>
         <ButtonSecondary
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('import')"
+          icon="check_box_outline_blank"
           @click.native="$emit('select-collection')"
         />
-        <i class="material-icons">check_box_outline_blank</i>
         <ButtonSecondary
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('delete')"
+          icon="check_box"
           @click.native="$emit('unselect-collection')"
         />
-        <i class="material-icons">check_box</i>
-
         <tippy tabindex="-1" trigger="click" theme="popover" arrow>
           <template #trigger>
             <ButtonSecondary
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              icon="more_vert"
             />
-            <i class="material-icons">more_vert</i>
           </template>
           <div>
             <ButtonSecondary
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="create_new_folder"
+              :label="$t('new_folder')"
               @click.native="
                 $emit('add-folder', {
                   folder: collection,
@@ -51,24 +51,22 @@
                 })
               "
             />
-            <i class="material-icons">create_new_folder</i>
-            <span>{{ $t("new_folder") }}</span>
           </div>
           <div>
             <ButtonSecondary
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="create"
+              :label="$t('edit')"
               @click.native="$emit('edit-collection')"
             />
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
           </div>
           <div>
             <ButtonSecondary
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              icon="delete"
+              :label="$t('delete')"
               @click.native="confirmRemove = true"
             />
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
           </div>
         </tippy>
       </div>
@@ -131,7 +129,7 @@
           "
           class="flex ml-8 border-l border-divider"
         >
-          <p class="info">
+          <p>
             <i class="material-icons">not_interested</i>
             {{ $t("collection_empty") }}
           </p>

components/collections/teams/Folder.vue

@@ -2,20 +2,20 @@
   <div>
     <div>
       <div>
-        <ButtonSecondary @click.native="toggleShowChildren" />
+        <ButtonSecondary
+          :label="folder.name ? folder.name : folder.title"
+          @click.native="toggleShowChildren"
+        />
         <i v-show="!showChildren && !isFiltered" class="material-icons"
           >arrow_right</i
         >
         <i v-show="showChildren || isFiltered" class="material-icons"
           >arrow_drop_down</i
         >
-
         <i v-if="isSelected" class="text-green-400 material-icons"
           >check_circle</i
         >
-
         <i v-else class="material-icons">folder_open</i>
-        <span>{{ folder.name ? folder.name : folder.title }}</span>
       </div>
       <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
@@ -23,20 +23,22 @@
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
+            icon="more_vert"
           />
-          <i class="material-icons">more_vert</i>
         </template>
         <div>
           <ButtonSecondary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="create_new_folder"
+            :label="$t('new_folder')"
             @click.native="$emit('add-folder', { folder, path: folderPath })"
           />
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("new_folder") }}</span>
         </div>
         <div>
           <ButtonSecondary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="edit"
+            :label="$t('edit')"
             @click.native="
               $emit('edit-folder', {
                 folder,
@@ -46,16 +48,14 @@
               })
             "
           />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
         </div>
         <div>
           <ButtonSecondary
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+            icon="delete"
+            :label="$t('delete')"
             @click.native="confirmRemove = true"
           />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
         </div>
       </tippy>
     </div>
@@ -114,7 +114,7 @@
         "
       >
         <li class="flex ml-8 border-l border-divider">
-          <p class="info">
+          <p>
             <i class="material-icons">not_interested</i>
             {{ $t("folder_empty") }}
           </p>

components/collections/teams/Request.vue

@@ -5,16 +5,15 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="!doc ? $t('use_request') : ''"
+          :label="request.name"
           @click.native="!doc ? selectRequest() : {}"
         />
         <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
           >check_circle</i
         >
-
         <span v-else :class="getRequestLabelColor(request.method)">{{
           request.method
         }}</span>
-        <span>{{ request.name }}</span>
       </div>
       <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
@@ -22,11 +21,13 @@
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('more')"
+            icon="more_vert"
           />
-          <i class="material-icons">more_vert</i>
         </template>
         <div>
           <ButtonSecondary
+            icon="edit"
+            :label="$t('edit')"
             @click.native="
               $emit('edit-request', {
                 collectionIndex,
@@ -37,13 +38,13 @@
               })
             "
           />
-          <i class="material-icons">edit</i>
-          <span>{{ $t("edit") }}</span>
         </div>
         <div>
-          <ButtonSecondary @click.native="confirmRemove = true" />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
+          <ButtonSecondary
+            icon="delete"
+            :label="$t('delete')"
+            @click.native="confirmRemove = true"
+          />
         </div>
       </tippy>
     </div>