fix: button icons

components/history/graphql/Card.vue

@@ -10,7 +10,7 @@
           :value="entry.url"
           :placeholder="$t('empty_req_name')"
           class="input cursor-pointer text-sm bg-transparent"
-          @click.native="$emit('use-entry')"
+          @click="$emit('use-entry')"
         />
       </li>
       <ButtonSecondary
@@ -20,50 +20,44 @@
         }"
         data-testid="star_button"
         :class="{ stared: entry.star }"
+        :icon="entry.star ? 'star' : 'star_border'"
         @click.native="$emit('toggle-star')"
       />
-      <i class="material-icons">
-        {{ entry.star ? "star" : "star_border" }}
-      </i>
-
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         title="{
           content: expand ? $t('hide_more') : $t('show_more'),
         }"
         data-testid="query_expand"
+        :icon="expand ? 'unfold_less' : 'unfold_more'"
         @click.native="expand = !expand"
       />
-      <i class="material-icons">
-        {{ expand ? "unfold_less" : "unfold_more" }}
-      </i>
-
       <tippy tabindex="-1" trigger="click" theme="popover" arrow>
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('options')"
             data-testid="options"
+            icon="more_vert"
           />
-          <i class="material-icons">more_vert</i>
         </template>
         <div>
           <ButtonSecondary
             data-testid="restore_history_entry"
             :aria-label="$t('restore')"
+            icon="restore"
+            :label="$t('restore')"
             @click.native="$emit('use-entry')"
           />
-          <i class="material-icons">restore</i>
-          <span>{{ $t("restore") }}</span>
         </div>
         <div>
           <ButtonSecondary
             data-testid="delete_history_entry"
             :aria-label="$t('delete')"
+            icon="delete"
+            :label="$t('delete')"
             @click.native="$emit('delete-entry')"
           />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
         </div>
       </tippy>
     </div>

components/history/index.vue

@@ -33,13 +33,10 @@
         />
       </ul>
     </div>
-    <p
-      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
-      class="info"
-    >
+    <p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
       {{ $t("nothing_found") }} "{{ filterText }}"
     </p>
-    <p v-if="history.length === 0" class="info">
+    <p v-if="history.length === 0">
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
@@ -47,21 +44,19 @@
         <ButtonSecondary
           data-testid="clear_history"
           :disabled="history.length === 0"
+          icon="clear_all"
+          :label="$t('clear_all')"
           @click.native="enableHistoryClearing"
         />
-        <i class="material-icons">clear_all</i>
-        <span>{{ $t("clear_all") }}</span>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           title="{ content: !showMore ? $t('show_more') : $t('hide_more') }"
+          icon="!showMore ? 'unfold_more' : 'unfold_less'"
           @click.native="toggleCollapse()"
         />
-        <i class="material-icons">
-          {{ !showMore ? "unfold_more" : "unfold_less" }}
-        </i>
       </div>
       <div v-else class="row-wrapper">
-        <p class="info">
+        <p>
           <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </p>
         <div>
@@ -69,17 +64,16 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('yes')"
             data-testid="confirm_clear_history"
+            icon="done"
             @click.native="clearHistory"
           />
-          <i class="material-icons">done</i>
-
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('no')"
             data-testid="reject_clear_history"
+            icon="close"
             @click.native="disableHistoryClearing"
           />
-          <i class="material-icons">close</i>
         </div>
       </div>
     </div>

components/history/rest/Card.vue

@@ -5,7 +5,7 @@
         class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
         :class="entryStatus.className"
         :style="{ '--status-code': entry.status }"
-        @click.native="$emit('use-entry')"
+        @click="$emit('use-entry')"
       >
         {{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
       </span>
@@ -17,7 +17,7 @@
           :value="entry.name"
           :placeholder="$t('empty_req_name')"
           class="input cursor-pointer text-sm bg-transparent"
-          @click.native="$emit('use-entry')"
+          @click="$emit('use-entry')"
         />
       </li>
       <span>
@@ -28,11 +28,9 @@
           }"
           data-testid="star_button"
           :class="{ stared: entry.star }"
+          :icon="entry.star ? 'star' : 'star_border'"
           @click.native="$emit('toggle-star')"
         />
-        <i class="material-icons">
-          {{ entry.star ? "star" : "star_border" }}
-        </i>
       </span>
       <!-- <li>
             <ButtonSecondary
@@ -53,26 +51,26 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('options')"
+            icon="more_vert"
           />
-          <i class="material-icons">more_vert</i>
         </template>
         <div>
           <ButtonSecondary
             data-testid="restore_history_entry"
             :aria-label="$t('edit')"
+            icon="restore"
+            :label="$t('restore')"
             @click.native="$emit('use-entry')"
           />
-          <i class="material-icons">restore</i>
-          <span>{{ $t("restore") }}</span>
         </div>
         <div>
           <ButtonSecondary
             data-testid="delete_history_entry"
             :aria-label="$t('delete')"
+            icon="delete"
+            :label="$t('delete')"
             @click.native="$emit('delete-entry')"
           />
-          <i class="material-icons">delete</i>
-          <span>{{ $t("delete") }}</span>
         </div>
       </tippy>
     </div>