From fde5b0717d8b95396206fa5fc7f7069cd2ad8279 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 5 Jul 2021 12:56:00 +0000
Subject: [PATCH] fix: button icons

---
 assets/scss/styles.scss                       | 189 ++----------------
 components/app/Header.vue                     |  63 ------
 components/collections/graphql/Collection.vue |  36 ++--
 components/collections/graphql/Folder.vue     |  26 ++-
 .../collections/graphql/ImportExport.vue      |  20 +-
 components/collections/graphql/Request.vue    |  12 +-
 components/collections/graphql/index.vue      |  15 +-
 components/collections/index.vue              |   9 +-
 components/collections/my/Collection.vue      |  38 ++--
 components/collections/my/Folder.vue          |  31 +--
 components/collections/my/Request.vue         |  19 +-
 components/collections/teams/Collection.vue   |  30 ++-
 components/collections/teams/Folder.vue       |  24 +--
 components/collections/teams/Request.vue      |  17 +-
 components/environments/Edit.vue              |  10 +-
 components/environments/Environment.vue       |  31 ++-
 components/environments/ImportExport.vue      |  28 +--
 components/environments/index.vue             |   2 +-
 components/graphql/TypeLink.vue               |   2 +-
 components/history/graphql/Card.vue           |  22 +-
 components/history/index.vue                  |  22 +-
 components/history/rest/Card.vue              |  18 +-
 components/http/BodyParameters.vue            |  28 ++-
 components/http/CodegenModal.vue              |   2 +-
 components/http/Headers.vue                   |  28 +--
 components/http/Parameters.vue                |  28 +--
 components/http/RawBody.vue                   |   7 +-
 components/http/TokenList.vue                 |   2 +-
 components/landing/Globe.vue                  |   1 -
 .../lenses/renderers/HTMLLensRenderer.vue     |  12 +-
 .../lenses/renderers/ImageLensRenderer.vue    |   2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   8 +-
 .../lenses/renderers/RawLensRenderer.vue      |   8 +-
 .../lenses/renderers/XMLLensRenderer.vue      |   8 +-
 components/realtime/Mqtt.vue                  |  33 ++-
 components/realtime/Socketio.vue              |  26 +--
 components/realtime/Sse.vue                   |  10 +-
 components/realtime/Websocket.vue             |  27 +--
 components/smart/AceEditor.vue                |   4 +-
 components/smart/AutoComplete.vue             |   4 +-
 components/smart/HideMenu.vue                 |  48 -----
 components/teams/Add.vue                      |   3 +-
 components/teams/Edit.vue                     |  16 +-
 components/teams/Team.vue                     |  29 ++-
 components/teams/index.vue                    |   4 +-
 layouts/default.vue                           |  55 +++--
 pages/api.vue                                 |  82 +++-----
 pages/doc.vue                                 |   8 +-
 pages/enter.vue                               |   4 +-
 pages/graphql.vue                             |  66 ++----
 pages/profile.vue                             |   3 +
 pages/settings.vue                            |   2 +-
 52 files changed, 463 insertions(+), 759 deletions(-)
 delete mode 100644 components/smart/HideMenu.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 0be486f31..dc4860fcd 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -101,14 +101,6 @@ a {
   }
 }
 
-button {
-  @apply font-medium;
-  @apply outline-none;
-  @apply focus-visible:ring;
-  @apply focus-visible:ring-inset;
-  @apply focus-visible:ring-accent;
-}
-
 .tippy-popper {
   .tooltip-theme {
     @apply bg-secondary;
@@ -179,32 +171,6 @@ pre.ace_editor {
   @apply resize-none;
 }
 
-.select-wrapper {
-  @apply relative;
-  @apply w-full;
-
-  pre,
-  input {
-    @apply cursor-pointer;
-  }
-
-  .trigger {
-    @apply w-full;
-  }
-
-  &::after {
-    @apply inline-block;
-    @apply absolute;
-    @apply pointer-events-none;
-    @apply font-icon;
-    @apply text-secondaryLight;
-
-    content: "\e313";
-    top: 16px;
-    right: 16px;
-  }
-}
-
 select {
   @apply cursor-pointer;
   @apply appearance-none;
@@ -216,10 +182,6 @@ select {
   }
 }
 
-option {
-  @apply bg-primary;
-}
-
 input[type="checkbox"] {
   @apply hidden;
 
@@ -258,25 +220,6 @@ input[type="checkbox"] {
   @apply text-secondaryLight;
   @apply fill-current;
   @apply cursor-not-allowed;
-
-  &.icon {
-    @apply text-error;
-    @apply fill-current;
-  }
-}
-
-.row-wrapper {
-  @apply flex flex-1 flex-row;
-  @apply items-center;
-  @apply justify-between;
-
-  span,
-  div {
-    @apply inline-flex;
-    @apply flex-nowrap;
-    @apply items-center;
-    @apply justify-center;
-  }
 }
 
 .info-response {
@@ -322,128 +265,30 @@ input[type="checkbox"] {
   }
 }
 
-#send {
-  @apply whitespace-nowrap;
-  @apply outline-none;
-  @apply border-none;
+.toasted-container {
+  margin-bottom: 68px;
 
-  &.show {
-    @apply flex;
-    @apply fixed;
-    @apply shadow-lg;
-    @apply rounded-lg;
+  .toasted {
+    justify-content: space-between !important;
 
-    bottom: 86px;
-    left: 50%;
-    z-index: 10001;
-    transform: translateX(-50%);
+    &.info {
+      background-color: var(--accent-color) !important;
+      color: var(--primary-color) !important;
+      font-weight: 700 !important;
+    }
+
+    &.bubble .action {
+      color: inherit !important;
+    }
+
+    .action {
+      margin-left: auto !important;
+    }
   }
 }
 
-section {
-  @apply flex;
-  @apply rounded-lg;
-  @apply w-full;
-}
-
-.toasted-container .toasted {
-  justify-content: space-between !important;
-}
-
-.toasted.info {
-  background-color: var(--accent-color) !important;
-  color: var(--primary-color) !important;
-  font-weight: 700 !important;
-}
-
-.toasted.bubble .action {
-  color: inherit !important;
-}
-
-.toasted .action {
-  margin-left: auto !important;
-}
-
-.page-columns {
-  @apply flex flex-1 flex-col;
-}
-
-.inner-left {
-  @apply flex;
-  @apply order-1;
-}
-
-.inner-right {
-  --width: 33%;
-  --ml: 1rem;
-  @apply flex;
-  @apply order-2;
-
-  margin-left: var(--ml);
-  width: var(--width);
-}
-
 @media (max-width: 767px) {
-  .content,
-  .columns {
-    @apply flex-col;
-  }
-
   main {
-    padding: 0 8px 68px;
     margin-bottom: env(safe-area-inset-bottom);
   }
-
-  ul,
-  ol {
-    @apply flex-col flex-nowrap;
-  }
-
-  ul li,
-  ol li {
-    @apply flex;
-  }
-
-  .hide-on-small-screen {
-    @apply !hidden;
-  }
-
-  .sticky-inner {
-    @apply relative;
-    @apply w-full;
-  }
-
-  .inner-left {
-    order: 0;
-  }
-
-  .inner-right {
-    --ml: 0;
-  }
-
-  .toasted-container {
-    margin-bottom: 68px;
-  }
-}
-
-.toasted-ad {
-  @apply bg-gray-50;
-  @apply text-gray-900 text-sm;
-  @apply font-bold;
-  @apply rounded-lg;
-  @apply shadow-lg;
-
-  padding: 16px !important;
-
-  .action {
-    @apply bg-gray-50;
-    @apply text-gray-900;
-    @apply rounded-lg;
-    @apply font-bold;
-
-    text-transform: none !important;
-    padding: 12px 16px !important;
-    margin: 0 !important;
-    margin-left: 8px !important;
-  }
 }
diff --git a/components/app/Header.vue b/components/app/Header.vue
index d2e313077..275969afe 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -139,69 +139,6 @@ export default {
         ],
       })
     }
-
-    // const showAd = localStorage.getItem("showAd") === "no"
-    // if (!showAd) {
-    //   setTimeout(() => {
-    //     this.$toast.clear()
-    //     this.$toast.show(
-    //       "<span><a href='https://fundoss.org/collective/hoppscotch' target='_blank' rel='noopener'>Sponsor us to support Hoppscotch open source project 💖</a><br><sub>Whoosh this away to dismiss.</sub></span>",
-    //       {
-    //         icon: "",
-    //         duration: 0,
-    //         theme: "toasted-ad",
-    //         action: [
-    //           {
-    //             text: "Donate",
-    //             icon: "chevron_right",
-    //             onClick: (_, toastObject) => {
-    //               localStorage.setItem("showAd", "no")
-    //               toastObject.goAway(0)
-    //               window.open("https://fundoss.org/collective/hoppscotch")
-    //             },
-    //           },
-    //         ],
-    //         onComplete() {
-    //           localStorage.setItem("showAd", "no")
-    //         },
-    //       }
-    //     )
-    //   }, 6000)
-    // }
-
-    // let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
-    // if (!showExtensionsToast) {
-    //   setTimeout(() => {
-    //     if (!hasExtensionInstalled()) {
-    //       this.$toast.show(this.$t("extensions_info2"), {
-    //         icon: "extension",
-    //         duration: 5000,
-    //         theme: "toasted-primary",
-    //         action: [
-    //           {
-    //             text: this.$t("yes"),
-    //             onClick: (_, toastObject) => {
-    //               this.showExtensions = true
-    //               localStorage.setItem("showExtensionsToast", "yes")
-    //               toastObject.goAway(0)
-    //             },
-    //           },
-    //           {
-    //             text: this.$t("no"),
-    //             onClick: (_, toastObject) => {
-    //               this.$store.commit("setMiscState", {
-    //                 value: false,
-    //                 attribute: "showExtensionsToast",
-    //               })
-    //               localStorage.setItem("showExtensionsToast", "no")
-    //               toastObject.goAway(0)
-    //             },
-    //           },
-    //         ],
-    //       })
-    //     }
-    //   }, 5000)
-    // }
   },
   methods: {
     nativeShare() {
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index b0d3a6db8..47ee4b5b8 100644
--- a/components/collections/graphql/Collection.vue
+++ b/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>
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index 9724ee456..4c2176eb2 100644
--- a/components/collections/graphql/Folder.vue
+++ b/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>
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 2e91b07ed..77c8bd1d3 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/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>
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index 6cfda47db..72d7922e7 100644
--- a/components/collections/graphql/Request.vue
+++ b/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>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index e2637c101..f52f19b45 100644
--- a/components/collections/graphql/index.vue
+++ b/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
       }}"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index a1fbed4e7..9c9471677 100644
--- a/components/collections/index.vue
+++ b/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>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 3efa9fd30..a1f72e01d 100644
--- a/components/collections/my/Collection.vue
+++ b/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>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index ba43e9868..0748ee708 100644
--- a/components/collections/my/Folder.vue
+++ b/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>
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index 9bb5e8acf..8ab4a1c52 100644
--- a/components/collections/my/Request.vue
+++ b/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>
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 0e60a4b3a..0b9286497 100644
--- a/components/collections/teams/Collection.vue
+++ b/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>
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 963924b6a..3d3d07036 100644
--- a/components/collections/teams/Folder.vue
+++ b/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>
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index 187b6c862..8da2a2fc3 100644
--- a/components/collections/teams/Request.vue
+++ b/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>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 71050469f..3782cfc71 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -62,17 +62,19 @@
               id="variable"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
+              icon="delete"
               @click.native="removeEnvironmentVariable(index)"
             />
-            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
       <ul>
         <li>
-          <ButtonSecondary @click.native="addEnvironmentVariable" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addEnvironmentVariable"
+          />
         </li>
       </ul>
     </template>
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index e65b92d95..7c1d88e68 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -2,24 +2,33 @@
   <div>
     <div class="row-wrapper">
       <div>
-        <ButtonSecondary @click.native="$emit('edit-environment')" />
-        <i class="material-icons">layers</i>
-        <span>{{ environment.name }}</span>
+        <ButtonSecondary
+          icon="layers"
+          :label="environment.name"
+          @click.native="$emit('edit-environment')"
+        />
       </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 @click.native="$emit('edit-environment')" />
-          <i class="material-icons">create</i>
-          <span>{{ $t("edit") }}</span>
+          <ButtonSecondary
+            icon="create"
+            :label="$t('edit')"
+            @click.native="$emit('edit-environment')"
+          />
         </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>
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index 4951d44d3..cdcbf5e0a 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -10,13 +10,15 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('more')"
+              icon="more_vert"
             />
-            <i class="material-icons">more_vert</i>
           </template>
           <div>
-            <ButtonSecondary @click.native="readEnvironmentGist" />
-            <i class="material-icons">assignment_returned</i>
-            <span>{{ $t("import_from_gist") }}</span>
+            <ButtonSecondary
+              icon="assignment_returned"
+              :label="$t('import_from_gist')"
+              @click.native="readEnvironmentGist"
+            />
           </div>
           <div
             v-tippy="{ theme: 'tooltip' }"
@@ -36,10 +38,10 @@
                   ? true
                   : false
               "
+              icon="assignment_turned_in"
+              :label="$t('create_secret_gist')"
               @click.native="createEnvironmentGist"
             />
-            <i class="material-icons">assignment_turned_in</i>
-            <span>{{ $t("create_secret_gist") }}</span>
           </div>
         </tippy>
         <ButtonSecondary icon="close" @click.native="hideModal" />
@@ -50,10 +52,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 +67,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 +82,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>
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 92bb36204..703b3daab 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -48,7 +48,7 @@
         {{ $t("import_export") }}
       </div>
     </div>
-    <p v-if="environments.length === 0" class="info">
+    <p v-if="environments.length === 0">
       <i class="material-icons">help_outline</i>
       {{ $t("create_new_environment") }}
     </p>
diff --git a/components/graphql/TypeLink.vue b/components/graphql/TypeLink.vue
index beae53afe..18b141b08 100644
--- a/components/graphql/TypeLink.vue
+++ b/components/graphql/TypeLink.vue
@@ -2,7 +2,7 @@
   <span
     :class="{ 'cursor-pointer': !isScalar }"
     class="font-mono text-sm text-accent"
-    @click.native="jumpToType"
+    @click="jumpToType"
   >
     {{ typeString }}
   </span>
diff --git a/components/history/graphql/Card.vue b/components/history/graphql/Card.vue
index 34f0d5516..a5223d8df 100644
--- a/components/history/graphql/Card.vue
+++ b/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>
diff --git a/components/history/index.vue b/components/history/index.vue
index 16a6e54f5..3123e3b06 100644
--- a/components/history/index.vue
+++ b/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>
diff --git a/components/history/rest/Card.vue b/components/history/rest/Card.vue
index ad5b46cf7..5d78174eb 100644
--- a/components/history/rest/Card.vue
+++ b/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>
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index bceea7802..0fbec0218 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -8,9 +8,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('bodyParams', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
       </li>
@@ -75,27 +75,25 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            :icon="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check_box'
+                  : 'check_box_outline_blank'
+                : 'check_box'
+            "
             @click.native="toggleActive(index, param)"
           />
-          <i class="material-icons">
-            {{
-              param.hasOwnProperty("active")
-                ? param.active
-                  ? "check_box"
-                  : "check_box_outline_blank"
-                : "check_box"
-            }}
-          </i>
         </li>
       </div>
       <div v-if="contentType === 'multipart/form-data'">
         <li>
           <label for="attachment" class="p-0">
             <ButtonSecondary
-              class="w-full button icon"
+              class="w-full"
+              icon="attach_file"
               @click.native="$refs.attachment[index].click()"
             />
-            <i class="material-icons">attach_file</i>
           </label>
           <input
             ref="attachment"
@@ -112,9 +110,9 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('delete')"
+            icon="delete"
             @click.native="removeRequestBodyParam(index)"
           />
-          <i class="material-icons">delete</i>
         </li>
       </div>
     </ul>
@@ -122,10 +120,10 @@
       <li>
         <ButtonSecondary
           name="addrequest"
+          icon="add"
+          :label="$t('add_new')"
           @click.native="addRequestBodyParam"
         />
-        <i class="material-icons">add</i>
-        <span>{{ $t("add_new") }}</span>
       </li>
     </ul>
   </div>
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 08f3bd494..b1062b220 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -37,9 +37,9 @@
             ref="copyRequestCode"
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('copy_code')"
+            :icon="copyIcon"
             @click.native="copyRequestCode"
           />
-          <i class="material-icons">{{ copyIcon }}</i>
         </div>
       </div>
       <SmartAceEditor
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 2038f90dd..84aca3342 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -8,9 +8,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('headers', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
       </li>
@@ -70,6 +70,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            :icon="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check_box'
+                  : 'check_box_outline_blank'
+                : 'check_box'
+            "
             @click.native="
               $store.commit('setActiveHeader', {
                 index,
@@ -77,15 +84,6 @@
               })
             "
           />
-          <i class="material-icons">
-            {{
-              header.hasOwnProperty("active")
-                ? header.active
-                  ? "check_box"
-                  : "check_box_outline_blank"
-                : "check_box"
-            }}
-          </i>
         </li>
       </div>
       <div>
@@ -93,17 +91,19 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('delete')"
+            icon="delete"
             @click.native="removeRequestHeader(index)"
           />
-          <i class="material-icons">delete</i>
         </li>
       </div>
     </ul>
     <ul>
       <li>
-        <ButtonSecondary @click.native="addRequestHeader" />
-        <i class="material-icons">add</i>
-        <span>{{ $t("add_new") }}</span>
+        <ButtonSecondary
+          icon="add"
+          :label="$t('add_new')"
+          @click.native="addRequestHeader"
+        />
       </li>
     </ul>
   </AppSection>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 0dae9b9ad..77d3a07d7 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -8,9 +8,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('parameters', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
       </li>
@@ -89,6 +89,13 @@
                   : $t('turn_on')
                 : $t('turn_off'),
             }"
+            :icon="
+              param.hasOwnProperty('active')
+                ? param.active
+                  ? 'check_box'
+                  : 'check_box_outline_blank'
+                : 'check_box'
+            "
             @click.native="
               $store.commit('setActiveParams', {
                 index,
@@ -96,15 +103,6 @@
               })
             "
           />
-          <i class="material-icons">
-            {{
-              param.hasOwnProperty("active")
-                ? param.active
-                  ? "check_box"
-                  : "check_box_outline_blank"
-                : "check_box"
-            }}
-          </i>
         </li>
       </div>
       <div>
@@ -112,17 +110,19 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('delete')"
+            icon="delete"
             @click.native="removeRequestParam(index)"
           />
-          <i class="material-icons">delete</i>
         </li>
       </div>
     </ul>
     <ul>
       <li>
-        <ButtonSecondary @click.native="addRequestParam" />
-        <i class="material-icons">add</i>
-        <span>{{ $t("add_new") }}</span>
+        <ButtonSecondary
+          icon="add"
+          :label="$t('add_new')"
+          @click.native="addRequestParam"
+        />
       </li>
     </ul>
   </AppSection>
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 1f4341945..f2868c2e7 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -10,17 +10,16 @@
               ref="prettifyRequest"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('prettify_body')"
+              :icon="prettifyIcon"
               @click.native="prettifyRequestBody"
             />
-            <i class="material-icons">{{ prettifyIcon }}</i>
-
             <label for="payload" class="p-0">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('import_json')"
+                icon="post_add"
                 @click.native="$refs.payload.click()"
               />
-              <i class="material-icons">post_add</i>
             </label>
             <input
               ref="payload"
@@ -32,9 +31,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('clear')"
+              icon="clear_all"
               @click.native="clearContent('rawParams', $event)"
             />
-            <i class="material-icons">clear_all</i>
           </div>
         </div>
         <div class="relative">
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index 99a94efce..9925b22fe 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -54,7 +54,7 @@
           </li>
         </div>
       </ul>
-      <p v-if="tokens.length === 0" class="info">
+      <p v-if="tokens.length === 0">
         {{ $t("empty") }}
       </p>
     </template>
diff --git a/components/landing/Globe.vue b/components/landing/Globe.vue
index c5f884c3f..cdf808ff0 100644
--- a/components/landing/Globe.vue
+++ b/components/landing/Globe.vue
@@ -139,7 +139,6 @@ export default {
         this.camera,
         this.renderer.domElement
       )
-      this.tbControls.rotateSpeed = 5
       this.tbControls.noZoom = true
       this.tbControls.noPan = true
     },
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 4deaeea4c..9796dbb3c 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -12,38 +12,34 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
           title="{
             content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
           }"
+          :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
           @click.native.prevent="togglePreview"
         />
-        <i class="material-icons">
-          {{ !previewEnabled ? "visibility" : "visibility_off" }}
-        </i>
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
+          :icon="downloadIcon"
           @click.native="downloadResponse"
         />
-        <i class="material-icons">{{ downloadIcon }}</i>
         <ButtonSecondary
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('copy_response')"
+          :icon="copyIcon"
           @click.native="copyResponse"
         />
-        <i class="material-icons">{{ copyIcon }}</i>
       </div>
     </div>
     <div id="response-details-wrapper">
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index dc2518a31..352578005 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -8,9 +8,9 @@
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
+          :icon="downloadIcon"
           @click.native="downloadResponse"
         />
-        <i class="material-icons">{{ downloadIcon }}</i>
       </div>
     </div>
     <div id="response-details-wrapper">
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index daac4ede4..517aa673d 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -12,27 +12,25 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
         <ButtonSecondary
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
+          :icon="downloadIcon"
           @click.native="downloadResponse"
         />
-        <i class="material-icons">{{ downloadIcon }}</i>
         <ButtonSecondary
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('copy_response')"
+          :icon="copyIcon"
           @click.native="copyResponse"
         />
-        <i class="material-icons">{{ copyIcon }}</i>
       </div>
     </div>
     <div id="response-details-wrapper">
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index fd5069106..2c50c068b 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -12,27 +12,25 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
         <ButtonSecondary
           v-if="response.body && canDownloadResponse"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
+          :icon="downloadIcon"
           @click.native="downloadResponse"
         />
-        <i class="material-icons">{{ downloadIcon }}</i>
         <ButtonSecondary
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('copy_response')"
+          :icon="copyIcon"
           @click.native="copyResponse"
         />
-        <i class="material-icons">{{ copyIcon }}</i>
       </div>
     </div>
     <div id="response-details-wrapper">
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 68816da07..de6bbd989 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -12,27 +12,25 @@
               ? $t('expand_response')
               : $t('collapse_response'),
           }"
+          :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
           @click.native="ToggleExpandResponse"
         />
-        <i class="material-icons">
-          {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-        </i>
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
+          :icon="downloadIcon"
           @click.native="downloadResponse"
         />
-        <i class="material-icons">{{ downloadIcon }}</i>
         <ButtonSecondary
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('copy_response')"
+          :icon="copyIcon"
           @click.native="copyResponse"
         />
-        <i class="material-icons">{{ copyIcon }}</i>
       </div>
     </div>
     <div id="response-details-wrapper">
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 20ddf27bc..73a825d38 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -15,19 +15,15 @@
         </li>
         <div>
           <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="connect"
               :disabled="!validUrl"
               class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="!connectionState ? 'sync' : 'sync_disabled'"
+              :label="connectionState ? $t('disconnect') : $t('connect')"
+              reverse
               @click.native="toggleConnection"
             />
-            {{ connectionState ? $t("disconnect") : $t("connect") }}
-            <span>
-              <i class="material-icons">{{
-                !connectionState ? "sync" : "sync_disabled"
-              }}</i>
-            </span>
           </li>
         </div>
       </ul>
@@ -62,18 +58,15 @@
         </li>
         <div>
           <li>
-            <label for="publish" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="publish"
               class="button"
               name="get"
               :disabled="!canpublish"
+              icon="send"
+              :label="$t('mqtt_publish')"
               @click.native="publish"
             />
-            {{ $t("mqtt_publish") }}
-            <span>
-              <i class="material-icons">send</i>
-            </span>
           </li>
         </div>
       </ul>
@@ -90,22 +83,20 @@
         </li>
         <div>
           <li>
-            <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="subscribe"
               name="get"
               :disabled="!cansubscribe"
               class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="subscriptionState ? 'sync_disabled' : 'sync'"
+              :label="
+                subscriptionState
+                  ? $t('mqtt_unsubscribe')
+                  : $t('mqtt_subscribe')
+              "
+              reverse
               @click.native="toggleSubscription"
             />
-            {{
-              subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe")
-            }}
-            <span>
-              <i class="material-icons">{{
-                subscriptionState ? "sync_disabled" : "sync"
-              }}</i>
-            </span>
           </li>
         </div>
       </ul>
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 47282a821..ffa844aa2 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -28,20 +28,16 @@
         </div>
         <div>
           <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="connect"
               :disabled="!urlValid"
               name="connect"
               class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="!connectionState ? 'sync' : 'sync_disabled'"
+              :label="!connectionState ? $t('connect') : $t('disconnect')"
+              reverse
               @click.native="toggleConnection"
             />
-            {{ !connectionState ? $t("connect") : $t("disconnect") }}
-            <span>
-              <i class="material-icons">
-                {{ !connectionState ? "sync" : "sync_disabled" }}
-              </i>
-            </span>
           </li>
         </div>
       </ul>
@@ -101,9 +97,9 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
+              icon="delete"
               @click.native="removeCommunicationInput({ index })"
             />
-            <i class="material-icons">delete</i>
           </li>
         </div>
         <div v-if="index + 1 === communication.inputs.length">
@@ -113,20 +109,20 @@
               class="button"
               name="send"
               :disabled="!connectionState"
+              icon="send"
+              :label="$t('send')"
               @click.native="sendMessage"
             />
-            {{ $t("send") }}
-            <span>
-              <i class="material-icons">send</i>
-            </span>
           </li>
         </div>
       </ul>
       <ul>
         <li>
-          <ButtonSecondary @click.native="addCommunicationInput" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addCommunicationInput"
+          />
         </li>
       </ul>
     </AppSection>
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 552a09169..a0c80855a 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -16,20 +16,16 @@
         </li>
         <div>
           <li>
-            <label for="start" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="start"
               :disabled="!serverValid"
               name="start"
               class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              :icon="!connectionSSEState ? $t('start') : $t('stop')"
+              :label="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              reverse
               @click.native="toggleSSEConnection"
             />
-            {{ !connectionSSEState ? $t("start") : $t("stop") }}
-            <span>
-              <i class="material-icons">
-                {{ !connectionSSEState ? "sync" : "sync_disabled" }}
-              </i>
-            </span>
           </li>
         </div>
       </ul>
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index f912dc2ce..63bb86c78 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -17,20 +17,16 @@
         </li>
         <div>
           <li>
-            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="connect"
               :disabled="!urlValid"
               class="button"
               name="connect"
+              :icon="!connectionState ? 'sync' : 'sync_disabled'"
+              :label="!connectionState ? $t('connect') : $t('disconnect')"
+              reverse
               @click.native="toggleConnection"
             />
-            {{ !connectionState ? $t("connect") : $t("disconnect") }}
-            <span>
-              <i class="material-icons">
-                {{ !connectionState ? "sync" : "sync_disabled" }}
-              </i>
-            </span>
           </li>
         </div>
       </ul>
@@ -96,17 +92,19 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
+              icon="delete"
               @click.native="deleteProtocol({ index })"
             />
-            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
       <ul>
         <li>
-          <ButtonSecondary @click.native="addProtocol" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addProtocol"
+          />
         </li>
       </ul>
     </AppSection>
@@ -134,18 +132,15 @@
         </li>
         <div>
           <li>
-            <label for="send" class="hide-on-small-screen">&nbsp;</label>
             <ButtonSecondary
               id="send"
               name="send"
               :disabled="!connectionState"
               class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              icon="send"
+              :label="$t('send')"
               @click.native="sendMessage"
             />
-            {{ $t("send") }}
-            <span>
-              <i class="material-icons">send</i>
-            </span>
           </li>
         </div>
       </ul>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index f6c631242..7edb9d190 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -2,7 +2,7 @@
   <div class="show-if-initialized" :class="{ initialized }">
     <div v-if="lang == 'json'" class="outline">
       <div v-for="(p, index) in currPath" :key="index" class="block">
-        <div class="label" @click.native="onBlockClick(index)">
+        <div class="label" @click="onBlockClick(index)">
           {{ p }}
         </div>
         <i v-if="index + 1 !== currPath.length" class="material-icons"
@@ -18,7 +18,7 @@
             v-for="(sib, i) in currSib"
             :key="i"
             class="sib"
-            @click.native="goToSib(sib)"
+            @click="goToSib(sib)"
           >
             {{ sib.key ? sib.key.value : i }}
           </div>
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index b59685198..0f9238c5f 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -12,7 +12,7 @@
       :class="styles"
       @input="updateSuggestions"
       @keyup="updateSuggestions"
-      @click.native="updateSuggestions"
+      @click="updateSuggestions"
       @keydown="handleKeystroke"
     />
     <ul
@@ -24,7 +24,7 @@
         v-for="(suggestion, index) in suggestions"
         :key="index"
         :class="{ active: currentSuggestionIndex === index }"
-        @click.native.prevent="forceSuggestion(suggestion)"
+        @click.prevent="forceSuggestion(suggestion)"
       >
         {{ suggestion }}
       </li>
diff --git a/components/smart/HideMenu.vue b/components/smart/HideMenu.vue
deleted file mode 100644
index d09a063eb..000000000
--- a/components/smart/HideMenu.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div
-    v-tippy="{ theme: 'tooltip' }"
-    :title="$t(active ? 'hide_sidebar' : 'show_sidebar')"
-    class="
-      absolute
-      hidden
-      md:flex
-      items-center
-      justify-center
-      px-2
-      py-1
-      bg-divider
-      text-secondaryLight
-      hover:text-secondary
-      my-4
-      z-10
-      rounded-l
-      right-0
-      cursor-pointer
-    "
-    @click.native="$emit('toggle')"
-  >
-    <i
-      class="
-        transition
-        origin-center
-        transform
-        material-icons
-        pointer-events-none
-      "
-      :class="{ 'rotate-180': active }"
-    >
-      menu_open
-    </i>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    active: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index 4ec3cc4d9..1f643ea18 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -2,8 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("new_team") }}</h3>
-      <ButtonSecondary @click.native="hideModal" />
-      <i class="material-icons">close</i>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <ul>
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 507e3d3e0..3fe1dd71e 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -2,8 +2,7 @@
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
       <h3 class="heading">{{ $t("edit_team") }}</h3>
-      <ButtonSecondary @click.native="hideModal" />
-      <i class="material-icons">close</i>
+      <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
       <ul>
@@ -91,9 +90,9 @@
               id="member"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
+              icon="delete"
               @click.native="removeExistingTeamMember(member.user.uid)"
             />
-            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
@@ -155,17 +154,19 @@
               id="member"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
+              icon="delete"
               @click.native="removeTeamMember(index)"
             />
-            <i class="material-icons">delete</i>
           </li>
         </div>
       </ul>
       <ul>
         <li>
-          <ButtonSecondary @click.native="addTeamMember" />
-          <i class="material-icons">add</i>
-          <span>{{ $t("add_new") }}</span>
+          <ButtonSecondary
+            icon="add"
+            :label="$t('add_new')"
+            @click.native="addTeamMember"
+          />
         </li>
       </ul>
     </template>
@@ -193,7 +194,6 @@ export default {
   data() {
     return {
       rename: null,
-      doneButton: '<i class="material-icons">done</i>',
       members: [],
       newMembers: [],
       membersAdapter: new TeamMemberAdapter(null),
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index c3f462fc0..d6bfe1ab6 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -4,32 +4,39 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         title="team.myRole === 'OWNER' ? $t('edit') : ''"
+        icon="group"
+        :label="team.name"
         @click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
       />
-      <i class="material-icons">group</i>
-      <span>{{ team.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 v-if="team.myRole === 'OWNER'">
-        <ButtonSecondary @click.native="$emit('edit-team')" />
-        <i class="material-icons">create</i>
-        <span>{{ $t("edit") }}</span>
+        <ButtonSecondary
+          icon="create"
+          :label="$t('edit')"
+          @click.native="$emit('edit-team')"
+        />
       </div>
       <div v-if="team.myRole === 'OWNER'">
-        <ButtonSecondary @click.native="deleteTeam" />
-        <i class="material-icons">delete</i>
-        <span>{{ $t("delete") }}</span>
+        <ButtonSecondary
+          icon="delete"
+          :label="$t('delete')"
+          @click.native="deleteTeam"
+        />
       </div>
       <div>
         <ButtonSecondary
           :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
+          icon="remove"
           @click.native="exitTeam"
         />
-        <i class="material-icons">remove</i>
         <div
           v-tippy="{ theme: 'tooltip' }"
           title="{
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 4adcd789c..3d759cf6e 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -32,10 +32,10 @@
         />
       </div>
     </div>
-    <p v-if="$apollo.queries.myTeams.loading" class="info">
+    <p v-if="$apollo.queries.myTeams.loading">
       {{ $t("loading") }}
     </p>
-    <p v-if="myTeams.length === 0" class="info">
+    <p v-if="myTeams.length === 0">
       <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
     </p>
     <div v-else class="overflow-auto">
diff --git a/layouts/default.vue b/layouts/default.vue
index e838c4d8a..e1e082d4e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,13 +16,13 @@
               :push-other-panes="false"
               class="hoppscotch-theme"
             >
-              <Pane v-if="!hideHeaderPane" style="height: auto">
+              <Pane v-if="!zenMode" style="height: auto">
                 <AppHeader />
               </Pane>
               <Pane class="flex-1">
                 <Splitpanes vertical class="hoppscotch-theme">
                   <Pane class="overflow-y-auto">
-                    <nuxt class="container" />
+                    <nuxt class="container" :hide-right-pane="hideRightPane" />
                   </Pane>
                 </Splitpanes>
               </Pane>
@@ -31,16 +31,39 @@
         </Splitpanes>
       </Pane>
       <Pane style="height: auto" class="bg-primaryDark">
-        <ButtonSecondary
-          class="button icon"
-          @click.native="hideNavigationPane = !hideNavigationPane"
-        />
-        <i class="material-icons">menu_open</i>
-        <ButtonSecondary
-          class="button icon"
-          @click.native="hideHeaderPane = !hideHeaderPane"
-        />
-        <i class="material-icons">menu_open</i>
+        <div class="flex justify-between">
+          <div>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="
+                hideNavigationPane ? $t('show_sidebar') : $t('hide_sidebar')
+              "
+              icon="menu_open"
+              :class="{ 'transform rotate-180': hideNavigationPane }"
+              @click.native="hideNavigationPane = !hideNavigationPane"
+            />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="
+                zenMode
+                  ? `${$t('turn_off')} Zen mode`
+                  : `${$t('turn_on')} Zen mode`
+              "
+              :icon="zenMode ? 'fullscreen_exit' : 'fullscreen'"
+              :class="{
+                'text-accent focus:text-accent hover:text-accent': zenMode,
+              }"
+              @click.native="zenMode = !zenMode"
+            />
+          </div>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
+            icon="menu_open"
+            :class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
+            @click.native="hideRightPane = !hideRightPane"
+          />
+        </div>
       </Pane>
     </Splitpanes>
   </div>
@@ -64,9 +87,15 @@ export default {
   data() {
     return {
       hideNavigationPane: false,
-      hideHeaderPane: false,
+      zenMode: false,
+      hideRightPane: false,
     }
   },
+  watch: {
+    zenMode(zenMode) {
+      this.hideNavigationPane = this.hideRightPane = zenMode
+    },
+  },
   beforeMount() {
     registerApolloAuthUpdate()
 
diff --git a/pages/api.vue b/pages/api.vue
index bd2ada21b..d2b2aca63 100644
--- a/pages/api.vue
+++ b/pages/api.vue
@@ -54,7 +54,6 @@
                   <SmartUrlField v-model="uri" v-else />
                 </li>
                 <li class="shrink">
-                  <label class="hide-on-small-screen" for="send">&nbsp;</label>
                   <ButtonSecondary
                     v-if="!runningRequest"
                     :disabled="!isValidURL"
@@ -71,11 +70,10 @@
                     id="send"
                     class="button"
                     ref="sendButton"
+                    icon="clear"
+                    :label="$t('cancel')"
+                    reverse
                   />
-                  {{ $t("cancel") }}
-                  <span>
-                    <i class="material-icons">clear</i>
-                  </span>
                 </li>
               </ul>
               <ul>
@@ -178,16 +176,15 @@
                     @click.native="showCurlImportModal = !showCurlImportModal"
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('import_curl')"
+                    icon="import_export"
                   />
-                  <i class="material-icons">import_export</i>
-
                   <ButtonSecondary
                     @click.native="showCodegenModal = !showCodegenModal"
                     :disabled="!isValidURL"
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('show_code')"
+                    icon="code"
                   />
-                  <i class="material-icons">code</i>
                 </span>
                 <span>
                   <ButtonSecondary
@@ -196,26 +193,23 @@
                     :disabled="!isValidURL"
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('copy_request_link')"
+                    :icon="navigatorShare ? 'share' : 'content_copy'"
                   />
-                  <i v-if="navigatorShare" class="material-icons">share</i>
-                  <i v-else class="material-icons">content_copy</i>
-
                   <ButtonSecondary
                     @click.native="saveRequest"
                     ref="saveRequest"
                     :disabled="!isValidURL"
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('save_to_collections')"
+                    icon="create_new_folder"
                   />
-                  <i class="material-icons">create_new_folder</i>
-
                   <ButtonSecondary
                     @click.native="clearContent('', $event)"
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('clear_all')"
                     ref="clearAll"
+                    icon="clear_all"
                   />
-                  <i class="material-icons">clear_all</i>
                 </span>
               </div>
             </AppSection>
@@ -270,8 +264,8 @@
                               @click.native="clearContent('auth', $event)"
                               v-tippy="{ theme: 'tooltip' }"
                               :title="$t('clear')"
+                              icon="clear_all"
                             />
-                            <i class="material-icons">clear_all</i>
                           </div>
                         </div>
                         <span class="select-wrapper">
@@ -307,17 +301,12 @@
                           <ButtonSecondary
                             ref="switchVisibility"
                             @click.native="switchVisibility"
+                            :icon="
+                              passwordFieldType === 'text'
+                                ? 'visibility'
+                                : 'visibility_off'
+                            "
                           />
-                          <i
-                            class="material-icons"
-                            v-if="passwordFieldType === 'text'"
-                            >visibility</i
-                          >
-                          <i
-                            class="material-icons"
-                            v-if="passwordFieldType !== 'text'"
-                            >visibility_off</i
-                          >
                         </li>
                       </div>
                     </ul>
@@ -337,16 +326,15 @@
                             "
                             v-tippy="{ theme: 'tooltip' }"
                             :title="$t('use_token')"
+                            icon="open_in_new"
                           />
-                          <i class="material-icons">open_in_new</i>
-
                           <ButtonSecondary
                             v-if="auth === 'OAuth 2.0'"
                             @click.native="showTokenRequest = !showTokenRequest"
                             v-tippy="{ theme: 'tooltip' }"
                             :title="$t('get_token')"
+                            icon="vpn_key"
                           />
-                          <i class="material-icons">vpn_key</i>
                         </div>
                       </li>
                     </ul>
@@ -373,24 +361,22 @@
                               @click.native="showTokenRequestList = true"
                               v-tippy="{ theme: 'tooltip' }"
                               :title="$t('manage_token_req')"
+                              icon="library_add"
                             />
-                            <i class="material-icons">library_add</i>
-
                             <ButtonSecondary
                               @click.native="
                                 clearContent('access_token', $event)
                               "
                               v-tippy="{ theme: 'tooltip' }"
                               :title="$t('clear')"
+                              icon="clear_all"
                             />
-                            <i class="material-icons">clear_all</i>
-
                             <ButtonSecondary
                               @click.native="showTokenRequest = false"
                               v-tippy="{ theme: 'tooltip' }"
                               :title="$t('close')"
+                              icon="close"
                             />
-                            <i class="material-icons">close</i>
                           </div>
                         </div>
                         <input
@@ -481,9 +467,9 @@
                       <li>
                         <ButtonSecondary
                           @click.native="handleAccessTokenRequest"
+                          icon="vpn_key"
+                          :label="$t('request_token')"
                         />
-                        <i class="material-icons">vpn_key</i>
-                        <span>{{ $t("request_token") }}</span>
                       </li>
                     </ul>
                   </AppSection>
@@ -563,15 +549,15 @@
                                 @click.native="clearContent('tests', $event)"
                                 v-tippy="{ theme: 'tooltip' }"
                                 :title="$t('clear')"
+                                icon="clear_all"
                               />
-                              <i class="material-icons">clear_all</i>
                             </div>
                           </div>
                           <div
                             v-for="(testReport, index) in testReports"
                             :key="index"
                           >
-                            <div v-if="testReport.startBlock" class="info">
+                            <div v-if="testReport.startBlock">
                               <hr />
                               <h4 class="heading">
                                 {{ testReport.startBlock }}
@@ -615,10 +601,7 @@
       </Pane>
       <Pane max-size="40" class="bg-pink-100">
         <TranslateSlideLeft>
-          <aside
-            v-if="activeSidebar"
-            class="sticky-inner inner-right lg:max-w-md"
-          >
+          <aside class="lg:max-w-md">
             <section>
               <SmartTabs>
                 <SmartTab
@@ -644,11 +627,6 @@
             </section>
           </aside>
         </TranslateSlideLeft>
-
-        <SmartHideMenu
-          :active="activeSidebar"
-          @toggle="activeSidebar = !activeSidebar"
-        />
       </Pane>
     </Splitpanes>
 
@@ -689,8 +667,10 @@
       <template #header>
         <h3 class="heading">{{ $t("manage_token_req") }}</h3>
         <div>
-          <ButtonSecondary @click.native="showTokenRequestList = false" />
-          <i class="material-icons">close</i>
+          <ButtonSecondary
+            @click.native="showTokenRequestList = false"
+            icon="close"
+          />
         </div>
       </template>
       <template #body>
@@ -702,16 +682,15 @@
               @click.native="showTokenRequestList = false"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('use_token_req')"
+              icon="input"
             />
-            <i class="material-icons">input</i>
-
             <ButtonSecondary
               :disabled="this.tokenReqs.length === 0"
               @click.native="removeOAuthTokenReq"
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('delete')"
+              icon="delete"
             />
-            <i class="material-icons">delete</i>
           </div>
         </div>
         <ul>
@@ -817,7 +796,6 @@ export default {
       showTokenRequestList: false,
       showSaveRequestModal: false,
       editRequest: {},
-      activeSidebar: true,
       customMethod: false,
       files: [],
       filenames: "",
diff --git a/pages/doc.vue b/pages/doc.vue
index f4f3bc8bd..00e60aaf9 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="page">
     <div class="content">
-      <div class="page-columns inner-left">
+      <div class="">
         <AppSection label="import">
           <div class="flex flex-col">
             <label>{{ $t("collection") }}</label>
-            <p class="info">
+            <p>
               {{ $t("generate_docs_message") }}
             </p>
             <div class="row-wrapper">
@@ -58,7 +58,7 @@
         <AppSection label="documentation">
           <div class="flex flex-col">
             <label>{{ $t("documentation") }}</label>
-            <p v-if="items.length === 0" class="info">
+            <p v-if="items.length === 0">
               {{ $t("generate_docs_first") }}
             </p>
             <div v-else class="row-wrapper">
@@ -98,7 +98,7 @@
         </AppSection>
       </div>
 
-      <aside class="sticky-inner inner-right lg:max-w-md">
+      <aside class="lg:max-w-md">
         <Collections
           :selected="selected"
           :doc="true"
diff --git a/pages/enter.vue b/pages/enter.vue
index 2c954d5eb..ca839571f 100644
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex container flex-col min-h-screen">
-    <span v-if="signingInWithEmail" class="info">{{ $t("loading") }}</span>
-    <span v-else class="info">{{ $t("waiting_for_connection") }}</span>
+    <span v-if="signingInWithEmail">{{ $t("loading") }}</span>
+    <span v-else>{{ $t("waiting_for_connection") }}</span>
     <pre v-if="error">{{ error }}</pre>
   </div>
 </template>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 6b7374b9a..4ae898a04 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <div class="content">
-      <div class="page-columns inner-left">
+      <div class="">
         <AppSection label="endpoint">
           <ul>
             <li>
@@ -18,23 +18,13 @@
             </li>
             <div>
               <li>
-                <label for="get" class="hide-on-small-screen">&nbsp;</label>
                 <ButtonSecondary
                   id="get"
                   name="get"
-                  class="
-                    button
-                    rounded-b-lg
-                    md:rounded-bl-none md:rounded-br-lg
-                  "
+                  :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
+                  :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
                   @click.native="onPollSchemaClick"
                 />
-                {{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
-                <span
-                  ><i class="material-icons">{{
-                    !isPollingSchema ? "sync" : "sync_disabled"
-                  }}</i></span
-                >
               </li>
             </div>
           </ul>
@@ -51,9 +41,9 @@
                     <ButtonSecondary
                       v-tippy="{ theme: 'tooltip' }"
                       :title="$t('clear')"
+                      icon="clear_all"
                       @click.native="headers = []"
                     />
-                    <i class="material-icons">clear_all</i>
                   </div>
                 </div>
               </li>
@@ -134,17 +124,19 @@
                   <ButtonSecondary
                     v-tippy="{ theme: 'tooltip' }"
                     :title="$t('delete')"
+                    icon="delete"
                     @click.native="removeRequestHeader(index)"
                   />
-                  <i class="material-icons">delete</i>
                 </li>
               </div>
             </ul>
             <ul>
               <li>
-                <ButtonSecondary @click.native="addRequestHeader" />
-                <i class="material-icons">add</i>
-                <span>{{ $t("add_new") }}</span>
+                <ButtonSecondary
+                  icon="add"
+                  :label="$t('add_new')"
+                  @click.native="addRequestHeader"
+                />
               </li>
             </ul>
           </div>
@@ -162,27 +154,23 @@
                     ? $t('expand_response')
                     : $t('collapse_response'),
                 }"
+                :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
                 @click.native="ToggleExpandResponse"
               />
-              <i class="material-icons">
-                {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-              </i>
-
               <ButtonSecondary
                 ref="downloadSchema"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('download_file')"
+                :icon="downloadSchemaIcon"
                 @click.native="downloadSchema"
               />
-              <i class="material-icons">{{ downloadSchemaIcon }}</i>
-
               <ButtonSecondary
                 ref="copySchemaCode"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('copy_schema')"
+                :icon="copySchemaIcon"
                 @click.native="copySchema"
               />
-              <i class="material-icons">{{ copySchemaIcon }}</i>
             </div>
           </div>
           <SmartAceEditor
@@ -221,32 +209,29 @@
                   `${$t('run_query')} (${getSpecialKey()}-Enter)`
                 "
                 class="button"
+                icon="play_arrow"
                 @click.native="runQuery()"
               />
-              <i class="material-icons">play_arrow</i>
-
               <ButtonSecondary
                 ref="copyQueryButton"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('copy_query')"
+                :icon="copyQueryIcon"
                 @click.native="copyQuery"
               />
-              <i class="material-icons">{{ copyQueryIcon }}</i>
-
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
+                :icon="prettifyIcon"
                 @click.native="doPrettifyQuery"
               />
-              <i class="material-icons">{{ prettifyIcon }}</i>
-
               <ButtonSecondary
                 ref="saveRequest"
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('save_to_collections')"
+                icon="create_new_folder"
                 @click.native="saveRequest"
               />
-              <i class="material-icons">create_new_folder</i>
             </div>
           </div>
           <GraphqlQueryEditor
@@ -296,18 +281,17 @@
                   ref="downloadResponse"
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('download_file')"
+                  :icon="downloadResponseIcon"
                   @click.native="downloadResponse"
                 />
-                <i class="material-icons">{{ downloadResponseIcon }}</i>
-
                 <ButtonSecondary
                   v-if="response"
                   ref="copyResponseButton"
                   v-tippy="{ theme: 'tooltip' }"
                   :title="$t('copy_response')"
+                  :icon="copyResponseIcon"
                   @click.native="copyResponse"
                 />
-                <i class="material-icons">{{ copyResponseIcon }}</i>
               </div>
             </div>
             <SmartAceEditor
@@ -340,10 +324,7 @@
       </div>
 
       <TranslateSlideLeft>
-        <aside
-          v-if="activeSidebar"
-          class="sticky-inner inner-right lg:max-w-md"
-        >
+        <aside class="lg:max-w-md">
           <SmartTabs>
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
@@ -438,7 +419,6 @@
                     subscriptionFields.length === 0 &&
                     graphqlTypes.length === 0
                   "
-                  class="info"
                 >
                   {{ $t("send_request_first") }}
                 </p>
@@ -459,11 +439,6 @@
           </SmartTabs>
         </aside>
       </TranslateSlideLeft>
-
-      <SmartHideMenu
-        :active="activeSidebar"
-        @toggle="activeSidebar = !activeSidebar"
-      />
     </div>
     <CollectionsSaveRequest
       mode="graphql"
@@ -507,7 +482,6 @@ export default {
       graphqlFieldsFilterText: undefined,
       isPollingSchema: false,
       timeoutSubscription: null,
-      activeSidebar: true,
       editRequest: {},
       showSaveRequestModal: false,
     }
diff --git a/pages/profile.vue b/pages/profile.vue
index 2fd1d7537..af39b8e11 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -8,6 +8,8 @@
     <div v-if="currentBackendUser && currentBackendUser.eaInvited">
       <Teams />
     </div>
+    {{ hideRightPane }}
+    <div v-if="!hideRightPane">hide this thingy</div>
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
@@ -17,6 +19,7 @@ import { currentUser$ } from "~/helpers/fb/auth"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 
 export default {
+  props: { hideRightPane: { type: Boolean, default: false } },
   data() {
     return {
       showLogin: false,
diff --git a/pages/settings.vue b/pages/settings.vue
index 8f479ce38..a97b56e47 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -26,7 +26,7 @@
                     <img
                       v-if="currentUser.photoURL"
                       :src="currentUser.photoURL"
-                      class="w-5 h-5 rounded-full material-icons"
+                      class="w-5 h-5 rounded-full"
                     />
                     <i v-else class="material-icons">account_circle</i>
                   </div>