From 773423069baf65104660fde7c3cb78cf4b95a690 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 11 Dec 2020 15:59:03 +0530
Subject: [PATCH] Refactor UI

---
 assets/scss/styles.scss                       |   5 +-
 components/collections/add-collection.vue     |  38 +-
 components/collections/add-folder.vue         |  38 +-
 components/collections/collection.vue         |   2 +-
 components/collections/edit-collection.vue    |  38 +-
 components/collections/edit-folder.vue        |  33 +-
 components/collections/edit-request.vue       |  20 +-
 .../collections/import-export-collections.vue | 185 +++++-----
 components/collections/index.vue              |   8 +-
 components/collections/save-request-as.vue    |  47 ++-
 components/environments/add-environment.vue   |  38 +-
 components/environments/edit-environment.vue  |  58 ++-
 .../import-export-environment.vue             | 185 +++++-----
 components/firebase/inputform.vue             |  61 ++--
 components/http/codegen-modal.vue             | 112 +++---
 components/http/import-curl.vue               |  26 +-
 components/http/notes.vue                     |  10 +-
 components/http/token-list.vue                |  48 ++-
 components/layout/history.vue                 |   8 +-
 components/layout/pw-header.vue               | 336 +++++-------------
 components/lenses/headers.vue                 |   8 +-
 .../lenses/renderers/HTMLLensRenderer.vue     | 140 ++++----
 .../lenses/renderers/ImageLensRenderer.vue    |  38 +-
 .../lenses/renderers/JSONLensRenderer.vue     | 110 +++---
 .../lenses/renderers/RawLensRenderer.vue      | 104 +++---
 .../lenses/renderers/XMLLensRenderer.vue      | 104 +++---
 components/others/extensions.vue              |  82 +++++
 components/others/shortcuts.vue               |  91 +++++
 components/others/support.vue                 |  31 ++
 pages/doc.vue                                 |   2 +-
 pages/index.vue                               |  82 ++---
 31 files changed, 1005 insertions(+), 1083 deletions(-)
 create mode 100644 components/others/extensions.vue
 create mode 100644 components/others/shortcuts.vue
 create mode 100644 components/others/support.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index c3ddab7fa..616235fb9 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -324,13 +324,12 @@ hr {
 }
 
 .info:not(.toasted) {
-  @apply m-2;
+  @apply m-4;
   @apply text-fgLightColor;
 
   .material-icons {
     @apply align-middle;
-    @apply ml-2;
-    @apply mr-4;
+    @apply mr-2;
   }
 }
 
diff --git a/components/collections/add-collection.vue b/components/collections/add-collection.vue
index 92a39147b..e037e04b5 100644
--- a/components/collections/add-collection.vue
+++ b/components/collections/add-collection.vue
@@ -1,30 +1,24 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("new_collection") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("new_collection") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="$t('my_new_collection')"
-            @keyup.enter="addNewCollection"
-          />
-        </li>
-      </ul>
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="$t('my_new_collection')"
+        @keyup.enter="addNewCollection"
+      />
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/collections/add-folder.vue b/components/collections/add-folder.vue
index 75c59c995..d639d04e2 100644
--- a/components/collections/add-folder.vue
+++ b/components/collections/add-folder.vue
@@ -1,30 +1,24 @@
 <template>
   <modal v-if="show" @close="show = false">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("new_folder") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("new_folder") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="$t('my_new_folder')"
-            @keyup.enter="addFolder"
-          />
-        </li>
-      </ul>
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="$t('my_new_folder')"
+        @keyup.enter="addFolder"
+      />
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 4eee6feaa..2a8440ab2 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -76,7 +76,7 @@
           />
         </li>
         <li v-if="collection.folders.length === 0 && collection.requests.length === 0">
-          <label>{{ $t("collection_empty") }}</label>
+          <p class="info">{{ $t("collection_empty") }}</p>
         </li>
       </ul>
       <ul class="flex-col">
diff --git a/components/collections/edit-collection.vue b/components/collections/edit-collection.vue
index 30e52d7a9..fc3b79cd1 100644
--- a/components/collections/edit-collection.vue
+++ b/components/collections/edit-collection.vue
@@ -1,30 +1,24 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("edit_collection") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_collection") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="editingCollection.name"
-            @keyup.enter="saveCollection"
-          />
-        </li>
-      </ul>
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="editingCollection.name"
+        @keyup.enter="saveCollection"
+      />
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/collections/edit-folder.vue b/components/collections/edit-folder.vue
index 053a8f7c6..866bdddd5 100644
--- a/components/collections/edit-folder.vue
+++ b/components/collections/edit-folder.vue
@@ -1,25 +1,24 @@
 <template>
   <modal v-if="show" @close="show = false">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("edit_folder") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_folder") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <input type="text" v-model="name" :placeholder="folder.name" @keyup.enter="editFolder" />
-        </li>
-      </ul>
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="folder.name"
+        @keyup.enter="editFolder"
+      />
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/collections/edit-request.vue b/components/collections/edit-request.vue
index a86cc8458..b96be5d6a 100644
--- a/components/collections/edit-request.vue
+++ b/components/collections/edit-request.vue
@@ -1,18 +1,14 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("edit_request") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_request") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
       <label for="selectLabel">{{ $t("label") }}</label>
diff --git a/components/collections/import-export-collections.vue b/components/collections/import-export-collections.vue
index 4eee1af0d..7d74bd207 100644
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -1,105 +1,103 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-            <div>
-              <v-popover>
-                <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-                  <i class="material-icons">more_vert</i>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
+        <div>
+          <v-popover>
+            <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <button class="icon" @click="readCollectionGist" v-close-popover>
+                  <i class="material-icons">assignment_returned</i>
+                  <span>{{ $t("import_from_gist") }}</span>
                 </button>
-                <template slot="popover">
-                  <div>
-                    <button class="icon" @click="readCollectionGist" v-close-popover>
-                      <i class="material-icons">code</i>
-                      <span>{{ $t("import_from_gist") }}</span>
-                    </button>
-                  </div>
-                  <div
-                    v-tooltip.bottom="{
-                      content: !fb.currentUser
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
-                        : fb.currentUser.provider !== 'github.com'
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
-                        : null,
-                    }"
-                  >
-                    <button
-                      :disabled="
-                        !fb.currentUser
-                          ? true
-                          : fb.currentUser.provider !== 'github.com'
-                          ? true
-                          : false
-                      "
-                      class="icon"
-                      @click="createCollectionGist"
-                      v-close-popover
-                    >
-                      <i class="material-icons">code</i>
-                      <span>{{ $t("create_secret_gist") }}</span>
-                    </button>
-                  </div>
-                </template>
-              </v-popover>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-          <div class="row-wrapper">
-            <span
-              v-tooltip="{
-                content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
-              }"
-            >
-              <button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
-                <i class="material-icons">folder_shared</i>
-                <span>{{ $t("import_from_sync") }}</span>
-              </button>
-            </span>
-            <button
-              class="icon"
-              @click="openDialogChooseFileToReplaceWith"
-              v-tooltip="$t('replace_current')"
-            >
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("replace_json") }}</span>
-              <input
-                type="file"
-                @change="replaceWithJSON"
-                style="display: none"
-                ref="inputChooseFileToReplaceWith"
-                accept="application/json"
-              />
-            </button>
-            <button
-              class="icon"
-              @click="openDialogChooseFileToImportFrom"
-              v-tooltip="$t('preserve_current')"
-            >
-              <i class="material-icons">folder_special</i>
-              <span>{{ $t("import_json") }}</span>
-              <input
-                type="file"
-                @change="importFromJSON"
-                style="display: none"
-                ref="inputChooseFileToImportFrom"
-                accept="application/json"
-              />
-            </button>
-          </div>
-        </li>
-      </ul>
+              </div>
+              <div
+                v-tooltip.bottom="{
+                  content: !fb.currentUser
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : fb.currentUser.provider !== 'github.com'
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : null,
+                }"
+              >
+                <button
+                  :disabled="
+                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                  "
+                  class="icon"
+                  @click="createCollectionGist"
+                  v-close-popover
+                >
+                  <i class="material-icons">assignment_turned_in</i>
+                  <span>{{ $t("create_secret_gist") }}</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <textarea v-model="collectionJson" rows="8"></textarea>
+      <div class="flex flex-col items-start">
+        <span
+          v-tooltip="{
+            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+          }"
+        >
+          <button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
+            <i class="material-icons">folder_shared</i>
+            <span>{{ $t("import_from_sync") }}</span>
+          </button>
+        </span>
+        <button
+          class="icon"
+          @click="openDialogChooseFileToReplaceWith"
+          v-tooltip="$t('replace_current')"
+        >
+          <i class="material-icons">create_new_folder</i>
+          <span>{{ $t("replace_json") }}</span>
+          <input
+            type="file"
+            @change="replaceWithJSON"
+            style="display: none"
+            ref="inputChooseFileToReplaceWith"
+            accept="application/json"
+          />
+        </button>
+        <button
+          class="icon"
+          @click="openDialogChooseFileToImportFrom"
+          v-tooltip="$t('preserve_current')"
+        >
+          <i class="material-icons">folder_special</i>
+          <span>{{ $t("import_json") }}</span>
+          <input
+            type="file"
+            @change="importFromJSON"
+            style="display: none"
+            ref="inputChooseFileToImportFrom"
+            accept="application/json"
+          />
+        </button>
+      </div>
+      <div v-if="showJsonCode" class="row-wrapper">
+        <textarea v-model="collectionJson" rows="8" readonly></textarea>
+      </div>
     </div>
     <div slot="footer">
       <div class="row-wrapper">
-        <span></span>
+        <span>
+          <pw-toggle :on="showJsonCode" @change="showJsonCode = $event">
+            {{ $t("show_code") }}
+          </pw-toggle>
+        </span>
         <span>
           <button class="icon" @click="hideModal">
             {{ $t("cancel") }}
@@ -120,6 +118,7 @@ export default {
   data() {
     return {
       fb,
+      showJsonCode: false,
     }
   },
   props: {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 2487e8ce8..120d4e67a 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -89,11 +89,9 @@ TODO:
         </li>
       </ul>
     </div>
-    <ul class="flex-col" v-if="filterText && filteredCollections.length === 0">
-      <li>
-        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
-      </li>
-    </ul>
+    <p v-if="filterText && filteredCollections.length === 0" class="info">
+      {{ $t("nothing_found") }} "{{ filterText }}"
+    </p>
   </pw-section>
 </template>
 
diff --git a/components/collections/save-request-as.vue b/components/collections/save-request-as.vue
index 3b48abc84..7526f3ae4 100644
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -1,29 +1,20 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("save_request_as") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("save_request_as") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
+      <label for="selectLabel">{{ $t("token_req_name") }}</label>
+      <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
       <ul>
         <li>
-          <label for="selectLabel">{{ $t("token_req_name") }}</label>
-          <input
-            type="text"
-            id="selectLabel"
-            v-model="requestData.name"
-            @keyup.enter="saveRequestAs"
-          />
           <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
             <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
@@ -39,13 +30,17 @@
               </option>
             </select>
           </span>
-          <label>{{ $t("folder") }}</label>
-          <autocomplete
-            :placeholder="$t('search')"
-            :source="folders"
-            :spellcheck="false"
-            v-model="requestData.folderName"
-          />
+        </li>
+      </ul>
+      <label>{{ $t("folder") }}</label>
+      <autocomplete
+        :placeholder="$t('search')"
+        :source="folders"
+        :spellcheck="false"
+        v-model="requestData.folderName"
+      />
+      <ul>
+        <li>
           <label for="selectRequest">{{ $t("request") }}</label>
           <span class="select-wrapper">
             <select type="text" id="selectRequest" v-model="requestData.requestIndex">
diff --git a/components/environments/add-environment.vue b/components/environments/add-environment.vue
index 71ba6f0a4..84764cbe0 100644
--- a/components/environments/add-environment.vue
+++ b/components/environments/add-environment.vue
@@ -1,30 +1,24 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("new_environment") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("new_environment") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="$t('my_new_environment')"
-            @keyup.enter="addNewEnvironment"
-          />
-        </li>
-      </ul>
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="$t('my_new_environment')"
+        @keyup.enter="addNewEnvironment"
+      />
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index 506072b62..a55a3b083 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -1,42 +1,32 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("edit_environment") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("edit_environment") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <input
-            type="text"
-            v-model="name"
-            :placeholder="editingEnvironment.name"
-            @keyup.enter="saveEnvironment"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label for="variableList">{{ $t("env_variable_list") }}</label>
-            <div>
-              <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
-                <i class="material-icons">clear_all</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <label for="selectLabel">{{ $t("label") }}</label>
+      <input
+        type="text"
+        id="selectLabel"
+        v-model="name"
+        :placeholder="editingEnvironment.name"
+        @keyup.enter="saveEnvironment"
+      />
+      <div class="row-wrapper">
+        <label for="variableList">{{ $t("env_variable_list") }}</label>
+        <div>
+          <button class="icon" @click="clearContent($event)" v-tooltip.bottom="$t('clear')">
+            <i class="material-icons">clear_all</i>
+          </button>
+        </div>
+      </div>
       <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
         <li>
           <input
diff --git a/components/environments/import-export-environment.vue b/components/environments/import-export-environment.vue
index fcf9262c0..dac69068e 100644
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -1,105 +1,103 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
-            <div>
-              <v-popover>
-                <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-                  <i class="material-icons">more_vert</i>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
+        <div>
+          <v-popover>
+            <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <button class="icon" @click="readEnvironmentGist" v-close-popover>
+                  <i class="material-icons">assignment_returned</i>
+                  <span>{{ $t("import_from_gist") }}</span>
                 </button>
-                <template slot="popover">
-                  <div>
-                    <button class="icon" @click="readEnvironmentGist" v-close-popover>
-                      <i class="material-icons">code</i>
-                      <span>{{ $t("import_from_gist") }}</span>
-                    </button>
-                  </div>
-                  <div
-                    v-tooltip.bottom="{
-                      content: !fb.currentUser
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
-                        : fb.currentUser.provider !== 'github.com'
-                        ? $t('login_with_github_to') + $t('create_secret_gist')
-                        : null,
-                    }"
-                  >
-                    <button
-                      :disabled="
-                        !fb.currentUser
-                          ? true
-                          : fb.currentUser.provider !== 'github.com'
-                          ? true
-                          : false
-                      "
-                      class="icon"
-                      @click="createEnvironmentGist"
-                      v-close-popover
-                    >
-                      <i class="material-icons">code</i>
-                      <span>{{ $t("create_secret_gist") }}</span>
-                    </button>
-                  </div>
-                </template>
-              </v-popover>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-          <div class="row-wrapper">
-            <span
-              v-tooltip="{
-                content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
-              }"
-            >
-              <button :disabled="!fb.currentUser" class="icon" @click="syncEnvironments">
-                <i class="material-icons">folder_shared</i>
-                <span>{{ $t("import_from_sync") }}</span>
-              </button>
-            </span>
-            <button
-              class="icon"
-              @click="openDialogChooseFileToReplaceWith"
-              v-tooltip="$t('replace_current')"
-            >
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("replace_json") }}</span>
-              <input
-                type="file"
-                @change="replaceWithJSON"
-                style="display: none"
-                ref="inputChooseFileToReplaceWith"
-                accept="application/json"
-              />
-            </button>
-            <button
-              class="icon"
-              @click="openDialogChooseFileToImportFrom"
-              v-tooltip="$t('preserve_current')"
-            >
-              <i class="material-icons">folder_special</i>
-              <span>{{ $t("import_json") }}</span>
-              <input
-                type="file"
-                @change="importFromJSON"
-                style="display: none"
-                ref="inputChooseFileToImportFrom"
-                accept="application/json"
-              />
-            </button>
-          </div>
-        </li>
-      </ul>
+              </div>
+              <div
+                v-tooltip.bottom="{
+                  content: !fb.currentUser
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : fb.currentUser.provider !== 'github.com'
+                    ? $t('login_with_github_to') + $t('create_secret_gist')
+                    : null,
+                }"
+              >
+                <button
+                  :disabled="
+                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                  "
+                  class="icon"
+                  @click="createEnvironmentGist"
+                  v-close-popover
+                >
+                  <i class="material-icons">assignment_turned_in</i>
+                  <span>{{ $t("create_secret_gist") }}</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <textarea v-model="environmentJson" rows="8"></textarea>
+      <div class="flex flex-col items-start">
+        <span
+          v-tooltip="{
+            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+          }"
+        >
+          <button :disabled="!fb.currentUser" class="icon" @click="syncEnvironments">
+            <i class="material-icons">folder_shared</i>
+            <span>{{ $t("import_from_sync") }}</span>
+          </button>
+        </span>
+        <button
+          class="icon"
+          @click="openDialogChooseFileToReplaceWith"
+          v-tooltip="$t('replace_current')"
+        >
+          <i class="material-icons">create_new_folder</i>
+          <span>{{ $t("replace_json") }}</span>
+          <input
+            type="file"
+            @change="replaceWithJSON"
+            style="display: none"
+            ref="inputChooseFileToReplaceWith"
+            accept="application/json"
+          />
+        </button>
+        <button
+          class="icon"
+          @click="openDialogChooseFileToImportFrom"
+          v-tooltip="$t('preserve_current')"
+        >
+          <i class="material-icons">folder_special</i>
+          <span>{{ $t("import_json") }}</span>
+          <input
+            type="file"
+            @change="importFromJSON"
+            style="display: none"
+            ref="inputChooseFileToImportFrom"
+            accept="application/json"
+          />
+        </button>
+      </div>
+      <div v-if="showJsonCode" class="row-wrapper">
+        <textarea v-model="environmentJson" rows="8" readonly></textarea>
+      </div>
     </div>
     <div slot="footer">
       <div class="row-wrapper">
-        <span></span>
+        <span>
+          <pw-toggle :on="showJsonCode" @change="showJsonCode = $event">
+            {{ $t("show_code") }}
+          </pw-toggle>
+        </span>
         <span>
           <button class="icon" @click="hideModal">
             {{ $t("cancel") }}
@@ -120,6 +118,7 @@ export default {
   data() {
     return {
       fb,
+      showJsonCode: false,
     }
   },
   props: {
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
index f226127c4..717764b40 100644
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -1,40 +1,29 @@
 <template>
-  <div>
-    <ul class="flex-col">
-      <div class="show-on-large-screen">
-        <li>
-          <input
-            :aria-label="$t('label')"
-            type="text"
-            autofocus
-            v-model="message"
-            :placeholder="$t('paste_a_note')"
-            @keyup.enter="formPost"
-          />
-        </li>
-      </div>
-      <div class="show-on-large-screen">
-        <li>
-          <input
-            :aria-label="$t('label')"
-            type="text"
-            autofocus
-            v-model="label"
-            :placeholder="$t('label')"
-            @keyup.enter="formPost"
-          />
-        </li>
-        <button
-          class="icon"
-          :disabled="!(this.message || this.label)"
-          value="Save"
-          @click="formPost"
-        >
-          <i class="material-icons">add</i>
-          <span>Add</span>
-        </button>
-      </div>
-    </ul>
+  <div class="flex-col">
+    <div class="show-on-large-screen">
+      <input
+        :aria-label="$t('label')"
+        type="text"
+        autofocus
+        v-model="message"
+        :placeholder="$t('paste_a_note')"
+        @keyup.enter="formPost"
+      />
+    </div>
+    <div class="show-on-large-screen">
+      <input
+        :aria-label="$t('label')"
+        type="text"
+        autofocus
+        v-model="label"
+        :placeholder="$t('label')"
+        @keyup.enter="formPost"
+      />
+      <button class="icon" :disabled="!(this.message || this.label)" value="Save" @click="formPost">
+        <i class="material-icons">add</i>
+        <span>Add</span>
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/components/http/codegen-modal.vue b/components/http/codegen-modal.vue
index af5301275..125fdc5dd 100644
--- a/components/http/codegen-modal.vue
+++ b/components/http/codegen-modal.vue
@@ -1,72 +1,60 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("generate_code") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("generate_code") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <label for="requestType">{{ $t("request_type") }}</label>
-          <span class="select-wrapper">
-            <v-popover>
-              <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
-              <input
-                v-else
-                id="requestType"
-                v-model="requestType"
-                :placeholder="$t('choose_language')"
-                class="cursor-pointer"
-                readonly
-                autofocus
-              />
-              <template slot="popover">
-                <div v-for="gen in codegens" :key="gen.id">
-                  <button class="icon" @click="requestType = gen.id" v-close-popover>
-                    {{ gen.name }}
-                  </button>
-                </div>
-              </template>
-            </v-popover>
-          </span>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label for="generatedCode">{{ $t("generated_code") }}</label>
-            <div>
-              <button
-                class="icon"
-                @click="copyRequestCode"
-                id="copyRequestCode"
-                ref="copyRequestCode"
-                v-tooltip="$t('copy_code')"
-              >
-                <i class="material-icons">content_copy</i>
+      <label for="requestType">{{ $t("request_type") }}</label>
+      <span class="select-wrapper">
+        <v-popover>
+          <pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
+          <input
+            v-else
+            id="requestType"
+            v-model="requestType"
+            :placeholder="$t('choose_language')"
+            class="cursor-pointer"
+            readonly
+            autofocus
+          />
+          <template slot="popover">
+            <div v-for="gen in codegens" :key="gen.id">
+              <button class="icon" @click="requestType = gen.id" v-close-popover>
+                {{ gen.name }}
               </button>
             </div>
-          </div>
-          <textarea
-            id="generatedCode"
-            ref="generatedCode"
-            name="generatedCode"
-            rows="8"
-            v-model="requestCode"
-            readonly
-          ></textarea>
-        </li>
-      </ul>
+          </template>
+        </v-popover>
+      </span>
+      <div class="row-wrapper">
+        <label for="generatedCode">{{ $t("generated_code") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="copyRequestCode"
+            id="copyRequestCode"
+            ref="copyRequestCode"
+            v-tooltip="$t('copy_code')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <textarea
+        id="generatedCode"
+        ref="generatedCode"
+        name="generatedCode"
+        rows="8"
+        v-model="requestCode"
+        readonly
+      ></textarea>
     </div>
   </modal>
 </template>
diff --git a/components/http/import-curl.vue b/components/http/import-curl.vue
index 6a7227fb3..8fd449ef2 100644
--- a/components/http/import-curl.vue
+++ b/components/http/import-curl.vue
@@ -1,25 +1,17 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("import_curl") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("import_curl") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
-        </li>
-      </ul>
+      <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
     </div>
     <div slot="footer">
       <div class="row-wrapper">
diff --git a/components/http/notes.vue b/components/http/notes.vue
index d83c43114..aa1aba315 100644
--- a/components/http/notes.vue
+++ b/components/http/notes.vue
@@ -5,14 +5,8 @@
       <feeds />
     </div>
     <div v-else>
-      <ul>
-        <li>
-          <label>{{ $t("login_first") }}</label>
-          <p>
-            <login />
-          </p>
-        </li>
-      </ul>
+      <p class="info">{{ $t("login_first") }}</p>
+      <login />
     </div>
   </pw-section>
 </template>
diff --git a/components/http/token-list.vue b/components/http/token-list.vue
index b8bdea37b..899d2ec6c 100644
--- a/components/http/token-list.vue
+++ b/components/http/token-list.vue
@@ -1,36 +1,28 @@
 <template>
   <modal v-if="show" @close="hideModal">
     <div slot="header">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <h3 class="title">{{ $t("manage_token") }}</h3>
-            <div>
-              <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("manage_token") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
     </div>
     <div slot="body">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label for="token-list">{{ $t("token_list") }}</label>
-            <div v-if="tokens.length != 0">
-              <button
-                class="icon"
-                @click="clearContent('tokens', $event)"
-                v-tooltip.bottom="$t('clear')"
-              >
-                <i class="material-icons">clear_all</i>
-              </button>
-            </div>
-          </div>
-        </li>
-      </ul>
+      <div class="row-wrapper">
+        <label for="token-list">{{ $t("token_list") }}</label>
+        <div v-if="tokens.length != 0">
+          <button
+            class="icon"
+            @click="clearContent('tokens', $event)"
+            v-tooltip.bottom="$t('clear')"
+          >
+            <i class="material-icons">clear_all</i>
+          </button>
+        </div>
+      </div>
       <ul id="token-list" v-for="(token, index) in tokens" :key="index">
         <li>
           <input
diff --git a/components/layout/history.vue b/components/layout/history.vue
index f6e19facc..507ca6e67 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -129,11 +129,9 @@
         </transition>
       </ul>
     </div>
-    <ul :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }">
-      <li>
-        <label>{{ $t("nothing_found") }} "{{ filterText }}"</label>
-      </li>
-    </ul>
+    <p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }" class="info">
+      {{ $t("nothing_found") }} "{{ filterText }}"
+    </p>
     <p v-if="history.length === 0" class="info">
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index c6840a9eb..1e5c88d07 100644
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -124,167 +124,15 @@
         </v-popover>
       </span>
     </div>
-    <modal v-if="showExtensions" @close="showExtensions = false">
-      <div slot="header">
-        <ul>
-          <li>
-            <div class="row-wrapper">
-              <h3 class="title">{{ $t("extensions") }}</h3>
-              <div>
-                <button class="icon" @click="showExtensions = false">
-                  <i class="material-icons">close</i>
-                </button>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div slot="body">
-        <p class="info">
-          {{ $t("extensions_info1") }}
-        </p>
-        <div>
-          <a
-            href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-            target="_blank"
-            rel="noopener"
-          >
-            <button class="icon">
-              <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-                <path
-                  d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
-                />
-              </svg>
-              <span>Firefox</span>
-              <span class="icon" v-if="hasFirefoxExtInstalled" v-tooltip="$t('installed')">
-                <i class="material-icons">done</i>
-              </span>
-            </button>
-          </a>
-        </div>
-        <div>
-          <a
-            href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-            target="_blank"
-            rel="noopener"
-          >
-            <button class="icon">
-              <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-                <path
-                  d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
-                />
-              </svg>
-              <span>Chrome</span>
-              <span class="icon" v-if="hasChromeExtInstalled" v-tooltip="$t('installed')">
-                <i class="material-icons">done</i>
-              </span>
-            </button>
-          </a>
-        </div>
-      </div>
-      <div slot="footer"></div>
-    </modal>
-    <modal v-if="showShortcuts" @close="showShortcuts = false">
-      <div slot="header">
-        <ul>
-          <li>
-            <div class="row-wrapper">
-              <h3 class="title">{{ $t("shortcuts") }}</h3>
-              <div>
-                <button class="icon" @click="showShortcuts = false">
-                  <i class="material-icons">close</i>
-                </button>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div slot="body">
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd>
-          +
-          <kbd>G</kbd>
-          <label>{{ $t("send_request") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>S</kbd>
-          <label>{{ $t("save_to_collections") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>K</kbd>
-          <label>{{ $t("copy_request_link") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>I</kbd>
-          <label>{{ $t("reset_request") }}</label>
-        </div>
-        <hr />
-        <div>
-          <kbd>Alt</kbd>+<kbd>▲</kbd>
-          <label>{{ $t("select_next_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>▼</kbd>
-          <label>{{ $t("select_previous_method") }}</label>
-        </div>
-        <hr />
-        <div>
-          <kbd>Alt</kbd>+<kbd>G</kbd>
-          <label>{{ $t("select_get_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>H</kbd>
-          <label>{{ $t("select_head_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>P</kbd>
-          <label>{{ $t("select_post_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>U</kbd>
-          <label>{{ $t("select_put_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>X</kbd>
-          <label>{{ $t("select_delete_method") }}</label>
-        </div>
-      </div>
-      <div slot="footer"></div>
-    </modal>
-    <modal v-if="showSupport" @close="showSupport = false">
-      <div slot="header">
-        <ul>
-          <li>
-            <div class="row-wrapper">
-              <h3 class="title">{{ $t("support_us") }}</h3>
-              <div>
-                <button class="icon" @click="showSupport = false">
-                  <i class="material-icons">close</i>
-                </button>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div slot="body">
-        <contributors />
-      </div>
-      <div slot="footer"></div>
-    </modal>
+    <extensions :show="showExtensions" @hide-modal="showExtensions = false" />
+    <shortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
+    <support :show="showSupport" @hide-modal="showSupport = false" />
   </header>
 </template>
 
 <style scoped lang="scss">
 $responsiveWidth: 768px;
 
-kbd {
-  @apply inline-flex;
-  @apply resize-none;
-}
-
 @keyframes slideIn {
   0% {
     @apply opacity-0;
@@ -316,12 +164,7 @@ kbd {
 
 <script>
 import intializePwa from "~/helpers/pwa"
-import {
-  hasExtensionInstalled,
-  hasChromeExtensionInstalled,
-  hasFirefoxExtensionInstalled,
-} from "~/helpers/strategies/ExtensionStrategy"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
 import { fb } from "~/helpers/fb"
 
 export default {
@@ -332,115 +175,107 @@ export default {
       // prompt.
       showInstallPrompt: null,
       showExtensions: false,
-      hasChromeExtInstalled: hasChromeExtensionInstalled(),
-      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
       showShortcuts: false,
       showSupport: false,
-      fb,
       navigatorShare: navigator.share,
+      fb,
     }
   },
+  async mounted() {
+    this._keyListener = function (e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.showExtensions = this.showShortcuts = this.showSupport = false
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
 
-  mounted() {
     // Initializes the PWA code - checks if the app is installed,
     // etc.
-    ;(async () => {
-      this.showInstallPrompt = await intializePwa()
-      let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
-      if (!cookiesAllowed) {
-        this.$toast.show(this.$t("we_use_cookies"), {
-          icon: "info",
+    this.showInstallPrompt = await intializePwa()
+    let cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
+    if (!cookiesAllowed) {
+      this.$toast.show(this.$t("we_use_cookies"), {
+        icon: "info",
+        duration: 5000,
+        theme: "toasted-primary",
+        action: [
+          {
+            text: this.$t("dismiss"),
+            onClick: (e, toastObject) => {
+              localStorage.setItem("cookiesAllowed", "yes")
+              toastObject.goAway(0)
+            },
+          },
+        ],
+      })
+    }
+
+    let showAd = localStorage.getItem("showAd") === "no"
+    if (!showAd) {
+      setTimeout(() => {
+        this.$toast.clear()
+        this.$toast.show(
+          "<span><a href='https://github.com/sponsors/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: "Sponsor",
+                icon: "chevron_right",
+                onClick: (e, toastObject) => {
+                  localStorage.setItem("showAd", "no")
+                  toastObject.goAway(0)
+                  window.open("https://github.com/sponsors/hoppscotch")
+                },
+              },
+            ],
+            onComplete() {
+              localStorage.setItem("showAd", "no")
+            },
+          }
+        )
+      }, 8000)
+    }
+
+    let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
+    // Just return if showExtensionsToast is "no"
+    if (!showExtensionsToast) return
+
+    setTimeout(() => {
+      if (!hasExtensionInstalled()) {
+        this.$toast.show(this.$t("extensions_info2"), {
+          icon: "extension",
           duration: 5000,
           theme: "toasted-primary",
           action: [
             {
-              text: this.$t("dismiss"),
+              text: this.$t("yes"),
               onClick: (e, toastObject) => {
-                localStorage.setItem("cookiesAllowed", "yes")
+                this.showExtensions = true
+                localStorage.setItem("showExtensionsToast", "yes")
+                toastObject.goAway(0)
+              },
+            },
+            {
+              text: this.$t("no"),
+              onClick: (e, toastObject) => {
+                this.$store.commit("setMiscState", {
+                  value: false,
+                  attribute: "showExtensionsToast",
+                })
+                localStorage.setItem("showExtensionsToast", "no")
                 toastObject.goAway(0)
               },
             },
           ],
         })
       }
-
-      let showAd = localStorage.getItem("showAd") === "no"
-      if (!showAd) {
-        setTimeout(() => {
-          this.$toast.clear()
-          this.$toast.show(
-            "<span><a href='https://github.com/sponsors/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: "Sponsor",
-                  icon: "chevron_right",
-                  onClick: (e, toastObject) => {
-                    localStorage.setItem("showAd", "no")
-                    toastObject.goAway(0)
-                    window.open("https://github.com/sponsors/hoppscotch")
-                  },
-                },
-              ],
-              onComplete() {
-                localStorage.setItem("showAd", "no")
-              },
-            }
-          )
-        }, 8000)
-      }
-
-      let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
-
-      // Just return if showExtensionsToast is "no"
-      if (!showExtensionsToast) return
-
-      setTimeout(() => {
-        if (!hasExtensionInstalled()) {
-          this.$toast.show(this.$t("extensions_info2"), {
-            icon: "extension",
-            duration: 5000,
-            theme: "toasted-primary",
-            action: [
-              {
-                text: this.$t("yes"),
-                onClick: (e, toastObject) => {
-                  this.showExtensions = true
-                  localStorage.setItem("showExtensionsToast", "yes")
-                  toastObject.goAway(0)
-                },
-              },
-              {
-                text: this.$t("no"),
-                onClick: (e, toastObject) => {
-                  this.$store.commit("setMiscState", {
-                    value: false,
-                    attribute: "showExtensionsToast",
-                  })
-                  localStorage.setItem("showExtensionsToast", "no")
-                  toastObject.goAway(0)
-                },
-              },
-            ],
-          })
-        }
-      }, 5000)
-
-      this._keyListener = function (e) {
-        if (e.key === "Escape") {
-          e.preventDefault()
-          this.showExtensions = this.showShortcuts = this.showSupport = false
-        }
-      }
-      document.addEventListener("keydown", this._keyListener.bind(this))
-    })()
+    }, 5000)
   },
-
   methods: {
-    getSpecialKey: getPlatformSpecialKey,
     nativeShare() {
       if (navigator.share) {
         navigator
@@ -457,5 +292,8 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
 }
 </script>
diff --git a/components/lenses/headers.vue b/components/lenses/headers.vue
index c838898f4..fdd9290ec 100644
--- a/components/lenses/headers.vue
+++ b/components/lenses/headers.vue
@@ -1,10 +1,8 @@
 <template>
   <div>
-    <ul v-for="(value, key) in headers" :key="key">
-      <li>
-        <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
-      </li>
-    </ul>
+    <p v-for="(value, key) in headers" :key="key">
+      <input :value="`${key} → ${value}`" :name="key" class="bg-transparent" readonly />
+    </p>
   </div>
 </template>
 
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 2a0106810..70320d35b 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,77 +1,75 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            v-if="response.body"
-            class="icon"
-            @click.prevent="togglePreview"
-            v-tooltip="{
-              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !previewEnabled ? "visibility" : "visibility_off" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="responseBodyText"
-          :lang="'html'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
-        <iframe
-          :class="{ hidden: !previewEnabled }"
-          class="covers-response"
-          ref="previewFrame"
-          src="about:blank"
-        ></iframe>
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          v-if="response.body"
+          class="icon"
+          @click.prevent="togglePreview"
+          v-tooltip="{
+            content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+          }"
+        >
+          <i class="material-icons">
+            {{ !previewEnabled ? "visibility" : "visibility_off" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="responseBodyText"
+        :lang="'html'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+      <iframe
+        :class="{ hidden: !previewEnabled }"
+        class="covers-response"
+        ref="previewFrame"
+        src="about:blank"
+      ></iframe>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index fe93d22ef..aa22d570a 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,25 +1,23 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-        </div>
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
       </div>
-      <div id="response-details-wrapper">
-        <img class="max-w-full" :src="imageSource" />
-      </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <img class="max-w-full" :src="imageSource" />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 92456140f..15a56aaed 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,62 +1,60 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body && canDownloadResponse"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div class="valid-warning" v-if="jsonInvalid">
-        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="jsonBodyText"
-          :lang="'json'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body && canDownloadResponse"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div class="valid-warning" v-if="jsonInvalid">
+      <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="jsonBodyText"
+        :lang="'json'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 6c256a3ab..be8592fbc 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -1,59 +1,57 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body && canDownloadResponse"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="responseBodyText"
-          :lang="'plain_text'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body && canDownloadResponse"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="responseBodyText"
+        :lang="'plain_text'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 364424116..f0ba40021 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,59 +1,57 @@
 <template>
-  <ul>
-    <li>
-      <div class="row-wrapper">
-        <label for="body">{{ $t("response") }}</label>
-        <div>
-          <button
-            class="icon"
-            @click="ToggleExpandResponse"
-            ref="ToggleExpandResponse"
-            v-if="response.body"
-            v-tooltip="{
-              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-            }"
-          >
-            <i class="material-icons">
-              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-            </i>
-          </button>
-          <button
-            class="icon"
-            @click="downloadResponse"
-            ref="downloadResponse"
-            v-if="response.body"
-            v-tooltip="$t('download_file')"
-          >
-            <i class="material-icons">save_alt</i>
-          </button>
-          <button
-            class="icon"
-            @click="copyResponse"
-            ref="copyResponse"
-            v-if="response.body"
-            v-tooltip="$t('copy_response')"
-          >
-            <i class="material-icons">content_copy</i>
-          </button>
-        </div>
-      </div>
-      <div id="response-details-wrapper">
-        <ace-editor
-          :value="responseBodyText"
-          :lang="'xml'"
-          :options="{
-            maxLines: responseBodyMaxLines,
-            minLines: '16',
-            fontSize: '16px',
-            autoScrollEditorIntoView: true,
-            readOnly: true,
-            showPrintMargin: false,
-            useWorker: false,
+  <div>
+    <div class="row-wrapper">
+      <label for="body">{{ $t("response") }}</label>
+      <div>
+        <button
+          class="icon"
+          @click="ToggleExpandResponse"
+          ref="ToggleExpandResponse"
+          v-if="response.body"
+          v-tooltip="{
+            content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
           }"
-        />
+        >
+          <i class="material-icons">
+            {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+          </i>
+        </button>
+        <button
+          class="icon"
+          @click="downloadResponse"
+          ref="downloadResponse"
+          v-if="response.body"
+          v-tooltip="$t('download_file')"
+        >
+          <i class="material-icons">save_alt</i>
+        </button>
+        <button
+          class="icon"
+          @click="copyResponse"
+          ref="copyResponse"
+          v-if="response.body"
+          v-tooltip="$t('copy_response')"
+        >
+          <i class="material-icons">content_copy</i>
+        </button>
       </div>
-    </li>
-  </ul>
+    </div>
+    <div id="response-details-wrapper">
+      <ace-editor
+        :value="responseBodyText"
+        :lang="'xml'"
+        :options="{
+          maxLines: responseBodyMaxLines,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/components/others/extensions.vue b/components/others/extensions.vue
new file mode 100644
index 000000000..cd9cbab81
--- /dev/null
+++ b/components/others/extensions.vue
@@ -0,0 +1,82 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("extensions") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body">
+      <p class="info">
+        {{ $t("extensions_info1") }}
+      </p>
+      <div>
+        <a
+          href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+          target="_blank"
+          rel="noopener"
+        >
+          <button class="icon">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+              <path
+                d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
+              />
+            </svg>
+            <span>Firefox</span>
+            <span class="icon" v-if="hasFirefoxExtInstalled" v-tooltip="$t('installed')">
+              <i class="material-icons">done</i>
+            </span>
+          </button>
+        </a>
+      </div>
+      <div>
+        <a
+          href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+          target="_blank"
+          rel="noopener"
+        >
+          <button class="icon">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+              <path
+                d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
+              />
+            </svg>
+            <span>Chrome</span>
+            <span class="icon" v-if="hasChromeExtInstalled" v-tooltip="$t('installed')">
+              <i class="material-icons">done</i>
+            </span>
+          </button>
+        </a>
+      </div>
+    </div>
+    <div slot="footer"></div>
+  </modal>
+</template>
+
+<script>
+import {
+  hasChromeExtensionInstalled,
+  hasFirefoxExtensionInstalled,
+} from "~/helpers/strategies/ExtensionStrategy"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      hasChromeExtInstalled: hasChromeExtensionInstalled(),
+      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
+    }
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
diff --git a/components/others/shortcuts.vue b/components/others/shortcuts.vue
new file mode 100644
index 000000000..ecd70400e
--- /dev/null
+++ b/components/others/shortcuts.vue
@@ -0,0 +1,91 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("shortcuts") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body">
+      <div>
+        <kbd>{{ getSpecialKey() }}</kbd>
+        +
+        <kbd>G</kbd>
+        <label>{{ $t("send_request") }}</label>
+      </div>
+      <div>
+        <kbd>{{ getSpecialKey() }}</kbd
+        >+<kbd>S</kbd>
+        <label>{{ $t("save_to_collections") }}</label>
+      </div>
+      <div>
+        <kbd>{{ getSpecialKey() }}</kbd
+        >+<kbd>K</kbd>
+        <label>{{ $t("copy_request_link") }}</label>
+      </div>
+      <div>
+        <kbd>{{ getSpecialKey() }}</kbd
+        >+<kbd>I</kbd>
+        <label>{{ $t("reset_request") }}</label>
+      </div>
+      <hr />
+      <div>
+        <kbd>Alt</kbd>+<kbd>▲</kbd>
+        <label>{{ $t("select_next_method") }}</label>
+      </div>
+      <div>
+        <kbd>Alt</kbd>+<kbd>▼</kbd>
+        <label>{{ $t("select_previous_method") }}</label>
+      </div>
+      <hr />
+      <div>
+        <kbd>Alt</kbd>+<kbd>G</kbd>
+        <label>{{ $t("select_get_method") }}</label>
+      </div>
+      <div>
+        <kbd>Alt</kbd>+<kbd>H</kbd>
+        <label>{{ $t("select_head_method") }}</label>
+      </div>
+      <div>
+        <kbd>Alt</kbd>+<kbd>P</kbd>
+        <label>{{ $t("select_post_method") }}</label>
+      </div>
+      <div>
+        <kbd>Alt</kbd>+<kbd>U</kbd>
+        <label>{{ $t("select_put_method") }}</label>
+      </div>
+      <div>
+        <kbd>Alt</kbd>+<kbd>X</kbd>
+        <label>{{ $t("select_delete_method") }}</label>
+      </div>
+    </div>
+    <div slot="footer"></div>
+  </modal>
+</template>
+
+<style scoped lang="scss">
+kbd {
+  @apply inline-flex;
+  @apply resize-none;
+}
+</style>
+
+<script>
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+
+export default {
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    getSpecialKey: getPlatformSpecialKey,
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
diff --git a/components/others/support.vue b/components/others/support.vue
new file mode 100644
index 000000000..69f09e71b
--- /dev/null
+++ b/components/others/support.vue
@@ -0,0 +1,31 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("support_us") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body">
+      <contributors />
+    </div>
+    <div slot="footer"></div>
+  </modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+}
+</script>
diff --git a/pages/doc.vue b/pages/doc.vue
index 942078af3..4ea535a1a 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -89,7 +89,7 @@
                 class="icon"
                 @click="createDocsGist"
               >
-                <i class="material-icons">code</i>
+                <i class="material-icons">assignment</i>
                 <span>{{ $t("create_secret_gist") }}</span>
               </button>
             </div>
diff --git a/pages/index.vue b/pages/index.vue
index 7cc91d042..d1e84702d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -724,43 +724,39 @@
 
     <modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
       <div slot="header">
-        <ul>
-          <li>
-            <div class="row-wrapper">
-              <h3 class="title">{{ $t("manage_token_req") }}</h3>
-              <div>
-                <button class="icon" @click="showTokenRequestList = false">
-                  <i class="material-icons">close</i>
-                </button>
-              </div>
-            </div>
-          </li>
-        </ul>
+        <div class="row-wrapper">
+          <h3 class="title">{{ $t("manage_token_req") }}</h3>
+          <div>
+            <button class="icon" @click="showTokenRequestList = false">
+              <i class="material-icons">close</i>
+            </button>
+          </div>
+        </div>
       </div>
       <div slot="body">
+        <div class="row-wrapper">
+          <label for="token-req-list">{{ $t("token_req_list") }}</label>
+          <div>
+            <button
+              :disabled="this.tokenReqs.length === 0"
+              class="icon"
+              @click="showTokenRequestList = false"
+              v-tooltip.bottom="$t('use_token_req')"
+            >
+              <i class="material-icons">input</i>
+            </button>
+            <button
+              :disabled="this.tokenReqs.length === 0"
+              class="icon"
+              @click="removeOAuthTokenReq"
+              v-tooltip.bottom="$t('delete')"
+            >
+              <i class="material-icons">delete</i>
+            </button>
+          </div>
+        </div>
         <ul>
           <li>
-            <div class="row-wrapper">
-              <label for="token-req-list">{{ $t("token_req_list") }}</label>
-              <div>
-                <button
-                  :disabled="this.tokenReqs.length === 0"
-                  class="icon"
-                  @click="showTokenRequestList = false"
-                  v-tooltip.bottom="$t('use_token_req')"
-                >
-                  <i class="material-icons">input</i>
-                </button>
-                <button
-                  :disabled="this.tokenReqs.length === 0"
-                  class="icon"
-                  @click="removeOAuthTokenReq"
-                  v-tooltip.bottom="$t('delete')"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </div>
-            </div>
             <span class="select-wrapper">
               <select
                 id="token-req-list"
@@ -775,20 +771,12 @@
             </span>
           </li>
         </ul>
-        <ul>
-          <li>
-            <label for="token-req-name">{{ $t("token_req_name") }}</label>
-            <input v-model="tokenReqName" />
-          </li>
-        </ul>
-        <ul>
-          <li>
-            <label for="token-req-details">
-              {{ $t("token_req_details") }}
-            </label>
-            <textarea id="token-req-details" readonly rows="7" v-model="tokenReqDetails"></textarea>
-          </li>
-        </ul>
+        <label for="token-req-name">{{ $t("token_req_name") }}</label>
+        <input v-model="tokenReqName" />
+        <label for="token-req-details">
+          {{ $t("token_req_details") }}
+        </label>
+        <textarea id="token-req-details" readonly rows="7" v-model="tokenReqDetails"></textarea>
       </div>
       <div slot="footer">
         <div class="row-wrapper">