chore(refactor): modern UI

2020-12-11 22:24:34 +05:30
parent 773423069b
commit 5a7bcf32ea
55 changed files with 936 additions and 860 deletions
--- a/components/collections/add-collection.vue
+++ b/components/collections/add-collection.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/collections/add-folder.vue
+++ b/components/collections/add-folder.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -55,7 +55,6 @@
        </v-popover>
      </div>
    </div>
-
    <div v-show="showChildren || isFiltered">
      <ul class="flex-col">
        <li
@@ -75,9 +74,6 @@
            @edit-request="$emit('edit-request', $event)"
          />
        </li>
-        <li v-if="collection.folders.length === 0 && collection.requests.length === 0">
-          <p class="info">{{ $t("collection_empty") }}</p>
-        </li>
      </ul>
      <ul class="flex-col">
        <li
@@ -96,6 +92,16 @@
          />
        </li>
      </ul>
+      <ul>
+        <li
+          v-if="collection.folders.length === 0 && collection.requests.length === 0"
+          class="flex ml-8 border-l border-brdColor"
+        >
+          <p class="info">
+            <i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
+          </p>
+        </li>
+      </ul>
    </div>
  </div>
 </template>
--- a/components/collections/edit-collection.vue
+++ b/components/collections/edit-collection.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/collections/edit-folder.vue
+++ b/components/collections/edit-folder.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/collections/edit-request.vue
+++ b/components/collections/edit-request.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -51,7 +51,6 @@
        </template>
      </v-popover>
    </div>
-
    <div v-show="showChildren || isFiltered">
      <ul class="flex-col">
        <li
@@ -71,7 +70,11 @@
        </li>
      </ul>
      <ul v-if="folder.folders && folder.folders.length" class="flex-col">
-        <li v-for="(subFolder, subFolderIndex) in folder.folders" :key="subFolder.name">
+        <li
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="subFolder.name"
+          class="ml-8 border-l border-brdColor"
+        >
          <folder
            :folder="subFolder"
            :folder-index="subFolderIndex"
@@ -84,6 +87,11 @@
          />
        </li>
      </ul>
+      <ul v-if="folder.folders.length === 0 && folder.requests.length === 0">
+        <li class="flex ml-8 border-l border-brdColor">
+          <p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
+        </li>
+      </ul>
    </div>
  </div>
 </template>
--- a/components/collections/import-export-collections.vue
+++ b/components/collections/import-export-collections.vue
@@ -44,8 +44,8 @@
        </div>
      </div>
    </div>
-    <div slot="body">
-      <div class="flex flex-col items-start">
+    <div slot="body" class="flex flex-col">
+      <div class="flex flex-col items-start p-2">
        <span
          v-tooltip="{
            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,15 +1,13 @@
-<!--
-TODO:
-    - probably refactor and pass event arguments to modals directly without unpacking
-->
-
 <template>
-  <pw-section class="yellow" :label="$t('collections')" ref="collections">
+  <pw-section class="yellow" :label="$t('collections')" ref="collections" no-legend>
    <div class="show-on-large-screen">
-      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
-      <!-- <button class="icon">
-        <i class="material-icons">search</i>
-      </button> -->
+      <input
+        aria-label="Search"
+        type="search"
+        :placeholder="$t('search')"
+        v-model="filterText"
+        class="rounded-t-lg"
+      />
    </div>
    <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
    <edit-collection
@@ -45,28 +43,14 @@ TODO:
      :show="showModalImportExport"
      @hide-modal="displayModalImportExport(false)"
    />
-
-    <div class="row-wrapper">
-      <div>
-        <button class="icon" @click="displayModalAdd(true)">
-          <i class="material-icons">add</i>
-          <span>{{ $t("new") }}</span>
-        </button>
-      </div>
-      <div>
-        <button class="icon" @click="displayModalImportExport(true)">
-          {{ $t("import_export") }}
-        </button>
-        <!-- <a
-          href="https://github.com/hoppscotch/hoppscotch/wiki/Collections"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon" v-tooltip="'Wiki'">
-            <i class="material-icons">help_outline</i>
-          </button>
-        </a> -->
-      </div>
+    <div class="border-b row-wrapper border-brdColor">
+      <button class="icon" @click="displayModalAdd(true)">
+        <i class="material-icons">add</i>
+        <span>{{ $t("new") }}</span>
+      </button>
+      <button class="icon" @click="displayModalImportExport(true)">
+        {{ $t("import_export") }}
+      </button>
    </div>
    <p v-if="collections.length === 0" class="info">
      <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
@@ -90,7 +74,7 @@ TODO:
      </ul>
    </div>
    <p v-if="filterText && filteredCollections.length === 0" class="info">
-      {{ $t("nothing_found") }} "{{ filterText }}"
+      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
    </p>
  </pw-section>
 </template>
--- a/components/collections/save-request-as.vue
+++ b/components/collections/save-request-as.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("token_req_name") }}</label>
      <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
      <ul>
--- a/components/environments/add-environment.vue
+++ b/components/environments/add-environment.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="selectLabel">{{ $t("label") }}</label>
      <input
        type="text"
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -44,8 +44,8 @@
        </div>
      </div>
    </div>
-    <div slot="body">
-      <div class="flex flex-col items-start">
+    <div slot="body" class="flex flex-col">
+      <div class="flex flex-col items-start p-2">
        <span
          v-tooltip="{
            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,26 +1,23 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
+  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
    <div class="show-on-large-screen">
-      <ul class="w-full">
-        <li>
-          <label for="currentEnvironment">{{ $t("select_environment") }}</label>
-          <span class="select-wrapper">
-            <select
-              id="currentEnvironment"
-              v-model="selectedEnvironmentIndex"
-              :disabled="environments.length == 0"
-            >
-              <option :value="-1">No environment</option>
-              <option v-if="environments.length === 0" value="0">
-                {{ $t("create_new_environment") }}
-              </option>
-              <option v-for="(environment, index) in environments" :value="index" :key="index">
-                {{ environment.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
+      <!-- <label for="currentEnvironment">{{ $t("select_environment") }}</label> -->
+      <span class="select-wrapper">
+        <select
+          id="currentEnvironment"
+          v-model="selectedEnvironmentIndex"
+          :disabled="environments.length == 0"
+          class="rounded-t-lg"
+        >
+          <option :value="-1">No environment</option>
+          <option v-if="environments.length === 0" value="0">
+            {{ $t("create_new_environment") }}
+          </option>
+          <option v-for="(environment, index) in environments" :value="index" :key="index">
+            {{ environment.name }}
+          </option>
+        </select>
+      </span>
    </div>
    <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
    <edit-environment
@@ -33,7 +30,7 @@
      :show="showModalImportExport"
      @hide-modal="displayModalImportExport(false)"
    />
-    <div class="row-wrapper">
+    <div class="border-b row-wrapper border-brdColor">
      <div>
        <button class="icon" @click="displayModalAdd(true)">
          <i class="material-icons">add</i>
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -1,10 +1,9 @@
 <template>
-  <div v-if="fb.currentFeeds.length !== 0" class="virtual-list">
-    <ul
-      v-for="feed in fb.currentFeeds"
-      :key="feed.id"
-      class="flex-col py-2 border-b border-dashed border-brdColor"
-    >
+  <div
+    v-if="fb.currentFeeds.length !== 0"
+    class="divide-y virtual-list divide-dashed divide-brdColor"
+  >
+    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
      <div data-test="list-item" class="show-on-large-screen">
        <li class="info">
          <label data-test="list-label">
@@ -24,7 +23,7 @@
  </div>
  <ul v-else class="flex-col">
    <li>
-      <label class="info">{{ $t("empty") }}</label>
+      <p class="info"><i class="material-icons">not_interested</i> {{ $t("empty") }}</p>
    </li>
  </ul>
 </template>
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -8,9 +8,10 @@
        v-model="message"
        :placeholder="$t('paste_a_note')"
        @keyup.enter="formPost"
+        class="rounded-t-lg"
      />
    </div>
-    <div class="show-on-large-screen">
+    <div class="border-b show-on-large-screen border-brdColor">
      <input
        :aria-label="$t('label')"
        type="text"
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="opacity-0 show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
  </div>
 </template>

@@ -46,6 +46,10 @@ export default {
      type: Object,
      default: {},
    },
+    styles: {
+      type: String,
+      default: "",
+    },
  },

  data() {
--- a/components/http/codegen-modal.vue
+++ b/components/http/codegen-modal.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <label for="requestType">{{ $t("request_type") }}</label>
      <span class="select-wrapper">
        <v-popover>
@@ -54,6 +54,7 @@
        rows="8"
        v-model="requestCode"
        readonly
+        class="rounded-b-lg"
      ></textarea>
    </div>
  </modal>
--- a/components/http/http-headers.vue
+++ b/components/http/http-headers.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="orange" label="Headers" ref="headers">
+  <pw-section class="orange" label="Headers" ref="headers" no-legend>
    <ul v-if="headers.length !== 0">
      <li>
        <div class="row-wrapper">
--- a/components/http/http-parameters.vue
+++ b/components/http/http-parameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="pink" label="Parameters" ref="parameters">
+  <pw-section class="pink" label="Parameters" ref="parameters" no-legend>
    <ul v-if="params.length !== 0">
      <li>
        <div class="row-wrapper">
--- a/components/http/import-curl.vue
+++ b/components/http/import-curl.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
    </div>
    <div slot="footer">
--- a/components/http/notes.vue
+++ b/components/http/notes.vue
@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="pink" :label="$t('notes')" ref="sync">
+  <pw-section class="pink" :label="$t('notes')" ref="sync" no-legend>
    <div v-if="fb.currentUser">
      <inputform />
      <feeds />
--- a/components/http/token-list.vue
+++ b/components/http/token-list.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <div class="row-wrapper">
        <label for="token-list">{{ $t("token_list") }}</label>
        <div v-if="tokens.length != 0">
--- a/components/layout/contributors.vue
+++ b/components/layout/contributors.vue
@@ -6,7 +6,7 @@
    <p class="info">
      {{ $t("donate_info2") }}
    </p>
-    <div class="row-wrapper">
+    <div class="px-2 row-wrapper">
      <span>
        <a
          href="https://github.com/sponsors/hoppscotch"
@@ -33,7 +33,7 @@
        </a>
      </span>
    </div>
-    <div class="row-wrapper">
+    <div class="px-2 row-wrapper">
      <span>
        <a
          href="https://opencollective.com/hoppscotch"
@@ -48,84 +48,96 @@
        </a>
      </span>
    </div>
-    <div>
-      <a
-        href="https://www.patreon.com/liyasthomas"
-        target="_blank"
-        rel="noopener"
-        v-tooltip.right="$t('recurring')"
-      >
-        <button class="icon">
-          <i class="material-icons">local_parking</i>
-          <span>{{ $t("patreon") }}</span>
-        </button>
-      </a>
+    <div class="px-2 row-wrapper">
+      <span>
+        <a
+          href="https://www.patreon.com/liyasthomas"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('recurring')"
+        >
+          <button class="icon">
+            <i class="material-icons">local_parking</i>
+            <span>{{ $t("patreon") }}</span>
+          </button>
+        </a>
+      </span>
    </div>
-    <div>
-      <a
-        href="https://www.paypal.me/liyascthomas"
-        target="_blank"
-        rel="noopener"
-        v-tooltip.right="$t('one_time')"
-      >
-        <button class="icon">
-          <i class="material-icons">payment</i>
-          <span>{{ $t("paypal") }}</span>
-        </button>
-      </a>
+    <div class="px-2 row-wrapper">
+      <span>
+        <a
+          href="https://www.paypal.me/liyascthomas"
+          target="_blank"
+          rel="noopener"
+          v-tooltip.right="$t('one_time')"
+        >
+          <button class="icon">
+            <i class="material-icons">payment</i>
+            <span>{{ $t("paypal") }}</span>
+          </button>
+        </a>
+      </span>
    </div>
    <hr />
-    <h3 class="title">Financial Contributors</h3>
-    <div class="contributors fle">
-      <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
-        <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
-      </a>
+    <div class="p-2">
+      <h3 class="title">Financial Contributors</h3>
+      <div class="contributors">
+        <a href="https://www.deta.sh/?ref=hoppscotch" target="_blank" rel="noopener">
+          <img style="max-width: 200px" src="~assets/images/hs-gh-banner.png" alt="Deta" />
+        </a>
+      </div>
+      <div class="contributors">
+        <a
+          href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
+          target="_blank"
+          rel="noopener"
+        >
+          <img
+            style="max-width: 100px"
+            src="~assets/images/Paw-Logo-for-Hoppscotch.png"
+            alt="Paw"
+          />
+        </a>
+      </div>
+      <div class="contributors">
+        <a href="https://tyk.io" target="_blank" rel="noopener">
+          <img
+            style="max-width: 320px"
+            src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
+            alt="Tyk Banner"
+          />
+        </a>
+      </div>
+      <div class="contributors">
+        <a
+          target="_blank"
+          rel="noopener"
+          href="https://opencollective.com/hoppscotch/organization/0/website"
+        >
+          <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
+        </a>
+        <a
+          target="_blank"
+          rel="noopener"
+          href="https://opencollective.com/hoppscotch/organization/1/website"
+        >
+          <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
+        </a>
+      </div>
    </div>
-    <div class="contributors">
-      <a
-        href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
-        target="_blank"
-        rel="noopener"
-      >
-        <img style="max-width: 100px" src="~assets/images/Paw-Logo-for-Hoppscotch.png" alt="Paw" />
-      </a>
-    </div>
-    <div class="contributors">
-      <a href="https://tyk.io" target="_blank" rel="noopener">
-        <img
-          style="max-width: 320px"
-          src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
-          alt="Tyk Banner"
-        />
-      </a>
-    </div>
-    <div class="contributors">
-      <a
-        target="_blank"
-        rel="noopener"
-        href="https://opencollective.com/hoppscotch/organization/0/website"
-      >
-        <img src="https://opencollective.com/hoppscotch/organization/0/avatar.svg" />
-      </a>
-      <a
-        target="_blank"
-        rel="noopener"
-        href="https://opencollective.com/hoppscotch/organization/1/website"
-      >
-        <img src="https://opencollective.com/hoppscotch/organization/1/avatar.svg" />
-      </a>
-    </div>
-    <h3 class="title">Code Contributors</h3>
-    <p class="info">This project exists thanks to all the people who contribute.</p>
-    <div class="contributors">
+    <hr />
+    <p class="info">
+      This project exists thanks to all the
      <a
        target="_blank"
        rel="noopener"
        href="https://github.com/hoppscotch/hoppscotch/graphs/contributors"
+        class="link"
      >
-        <img src="https://opencollective.com/hoppscotch/contributors.svg" />
+        people who contribute
      </a>
-    </div>
+      .
+    </p>
  </div>
 </template>

@@ -135,11 +147,6 @@
  @apply items-center;
  @apply flex-no-wrap;
  @apply overflow-auto;
-  @apply my-4;
-}
-
-.github-sponsor {
-  @apply mr-2;
-  @apply rounded-full;
+  @apply m-2;
 }
 </style>
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -1,13 +1,19 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('history')" ref="history">
+  <pw-section class="green" icon="history" :label="$t('history')" ref="history" no-legend>
    <div class="show-on-large-screen">
-      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
-      <button class="icon">
-        <i class="material-icons">search</i>
-      </button>
+      <input
+        aria-label="Search"
+        type="search"
+        :placeholder="$t('search')"
+        v-model="filterText"
+        class="rounded-t-lg"
+      />
    </div>
-    <div class="virtual-list" :class="{ filled: filteredHistory.length }">
-      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+    <div
+      class="divide-y virtual-list divide-dashed divide-brdColor"
+      :class="{ filled: filteredHistory.length }"
+    >
+      <ul v-for="(entry, index) in filteredHistory" :key="index">
        <div class="show-on-large-screen">
          <span
            class="p-2 m-2"
@@ -105,15 +111,17 @@
                readonly
                :value="entry.time"
                v-tooltip="entry.date"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
              />
            </li>
            <li>
              <input
-                :aria-label="$t('duration')"
+                :aria-label="$t('nn')"
                type="text"
                readonly
                :value="entry.duration"
                :placeholder="$t('no_duration')"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
              />
            </li>
            <li>
@@ -123,6 +131,7 @@
                readonly
                :value="entry.preRequestScript"
                :placeholder="$t('no_prerequest_script')"
+                class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor"
              />
            </li>
          </div>
@@ -135,7 +144,7 @@
    <p v-if="history.length === 0" class="info">
      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
    </p>
-    <div v-if="history.length !== 0">
+    <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
      <div class="row-wrapper" v-if="!isClearingHistory">
        <button
          class="icon"
@@ -199,9 +208,9 @@
        </v-popover>
      </div>
      <div class="row-wrapper" v-else>
-        <label for="clear-history-button" class="info">
+        <p for="clear-history-button" class="info">
          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
-        </label>
+        </p>
        <div>
          <button
            class="icon"
@@ -253,11 +262,6 @@ ol {
  flex-direction: column;
 }

-.entry {
-  border-bottom: 1px dashed var(--brd-color);
-  padding: 0 0 8px;
-}
-
@media (max-width: 720px) {
  .virtual-list.filled {
    min-height: 320px;
--- a/components/layout/pw-section.vue
+++ b/components/layout/pw-section.vue
@@ -1,6 +1,6 @@
 <template>
  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': !frameColorsEnabled }">
-    <legend @click.prevent="collapse">
+    <legend v-if="!noLegend" @click.prevent="collapse">
      <span>{{ label }}</span>
      <i class="ml-2 align-middle material-icons">
        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
@@ -14,8 +14,7 @@

 <style scoped lang="scss">
 fieldset {
-  @apply my-2;
-  @apply p-2;
+  @apply my-4;
  @apply rounded-lg;
  @apply bg-bgDarkColor;
  @apply transition;
@@ -23,8 +22,8 @@ fieldset {
  @apply duration-200;

  legend {
+    @apply px-4;
    @apply text-fgColor;
-    @apply text-sm;
    @apply font-bold;
    @apply cursor-pointer;
    @apply transition;
@@ -86,6 +85,10 @@ export default {
      type: String,
      default: "Section",
    },
+    noLegend: {
+      type: Boolean,
+      default: false,
+    },
  },

  methods: {
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -61,6 +61,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="rounded-b-lg"
      />
      <iframe
        :class="{ hidden: !previewEnabled }"
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -52,6 +52,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="rounded-b-lg"
      />
    </div>
  </div>
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -49,6 +49,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="rounded-b-lg"
      />
    </div>
  </div>
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -49,6 +49,7 @@
          showPrintMargin: false,
          useWorker: false,
        }"
+        styles="rounded-b-lg"
      />
    </div>
  </div>
--- a/components/lenses/response-body-renderer.vue
+++ b/components/lenses/response-body-renderer.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <tabs>
+    <tabs styles="m-4">
      <tab
        v-for="(lens, index) in validLenses"
        :key="lens.lensName"
--- a/components/others/extensions.vue
+++ b/components/others/extensions.vue
@@ -10,11 +10,11 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <p class="info">
        {{ $t("extensions_info1") }}
      </p>
-      <div>
+      <div class="px-2">
        <a
          href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
          target="_blank"
@@ -33,7 +33,7 @@
          </button>
        </a>
      </div>
-      <div>
+      <div class="px-2">
        <a
          href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
          target="_blank"
--- a/components/others/shortcuts.vue
+++ b/components/others/shortcuts.vue
@@ -10,57 +10,63 @@
        </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 slot="body" class="flex flex-col">
+      <div class="p-2">
+        <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>
      </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 class="p-2">
+        <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>
      </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 class="p-2">
+        <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>
    <div slot="footer"></div>
@@ -71,6 +77,11 @@
 kbd {
  @apply inline-flex;
  @apply resize-none;
+  @apply m-2;
+  @apply rounded-lg;
+  @apply py-2;
+  @apply px-4;
+  @apply text-sm;
 }
 </style>

--- a/components/others/support.vue
+++ b/components/others/support.vue
@@ -10,7 +10,7 @@
        </div>
      </div>
    </div>
-    <div slot="body">
+    <div slot="body" class="flex flex-col">
      <contributors />
    </div>
    <div slot="footer"></div>
--- a/components/realtime/log.vue
+++ b/components/realtime/log.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col">
    <label for="log">{{ title }}</label>
    <div name="log" class="realtime-log" ref="log">
      <span v-if="log">
@@ -14,9 +14,7 @@

 <style scoped lang="scss">
 .realtime-log {
-  @apply m-2;
-  @apply p-2;
-  @apply rounded-lg;
+  @apply p-4;
  @apply bg-bgDarkColor;
  @apply text-fgColor;
  @apply overflow-auto;
@@ -25,7 +23,6 @@

  &,
  span {
-    @apply text-sm;
    @apply font-mono;
    @apply font-normal;
    @apply select-text;
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -1,15 +1,26 @@
 <template>
  <div>
-    <pw-section class="blue" :label="$t('request')">
+    <pw-section class="blue" :label="$t('request')" no-legend>
      <ul>
        <li>
          <label for="mqtt-url">{{ $t("url") }}</label>
-          <input id="mqtt-url" type="url" v-model="url" spellcheck="false" />
+          <input
+            id="mqtt-url"
+            type="url"
+            v-model="url"
+            spellcheck="false"
+            class="md:rounded-bl-lg"
+          />
        </li>
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button id="connect" :disabled="!validUrl" @click="toggleConnection">
+            <button
+              id="connect"
+              :disabled="!validUrl"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ this.connectionState ? $t("disconnect") : $t("connect") }}
              <span>
                <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
@@ -20,7 +31,7 @@
      </ul>
    </pw-section>

-    <pw-section class="blue" :label="$t('communication')">
+    <pw-section class="blue" :label="$t('communication')" no-legend>
      <ul>
        <li>
          <log :title="$t('log')" :log="this.log" />
@@ -50,12 +61,24 @@
      <ul>
        <li>
          <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
-          <input id="sub_topic" type="text" v-model="sub_topic" spellcheck="false" />
+          <input
+            id="sub_topic"
+            type="text"
+            v-model="sub_topic"
+            spellcheck="false"
+            class="md:rounded-bl-lg"
+          />
        </li>
        <div>
          <li>
            <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
-            <button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription">
+            <button
+              id="subscribe"
+              name="get"
+              :disabled="!cansubscribe"
+              @click="toggleSubscription"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
              <span>
                <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
      <ul>
        <li>
          <label for="socketio-url">{{ $t("url") }}</label>
@@ -11,6 +11,7 @@
            :class="{ error: !urlValid }"
            v-model="url"
            @keyup.enter="urlValid ? toggleConnection() : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
@@ -22,7 +23,13 @@
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            <button
+              :disabled="!urlValid"
+              id="connect"
+              name="connect"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ !connectionState ? $t("connect") : $t("disconnect") }}
              <span>
                <i class="material-icons">
@@ -34,7 +41,8 @@
        </div>
      </ul>
    </pw-section>
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
      <ul>
        <li>
          <log :title="$t('log')" :log="communication.log" />
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
      <ul>
        <li>
          <label for="server">{{ $t("server") }}</label>
@@ -10,12 +10,19 @@
            :class="{ error: !serverValid }"
            v-model="server"
            @keyup.enter="serverValid ? toggleSSEConnection() : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
          <li>
            <label for="start" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!serverValid" id="start" name="start" @click="toggleSSEConnection">
+            <button
+              :disabled="!serverValid"
+              id="start"
+              name="start"
+              @click="toggleSSEConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ !connectionSSEState ? $t("start") : $t("stop") }}
              <span>
                <i class="material-icons">
@@ -28,7 +35,7 @@
      </ul>
    </pw-section>

-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
      <ul>
        <li>
          <log :title="$t('events')" :log="events.log" />
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
      <ul>
        <li>
          <label for="websocket-url">{{ $t("url") }}</label>
@@ -11,12 +11,19 @@
            :class="{ error: !urlValid }"
            v-model="url"
            @keyup.enter="urlValid ? toggleConnection() : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            <button
+              :disabled="!urlValid"
+              id="connect"
+              name="connect"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ !connectionState ? $t("connect") : $t("disconnect") }}
              <span>
                <i class="material-icons">
@@ -29,7 +36,7 @@
      </ul>
    </pw-section>

-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
      <ul>
        <li>
          <log :title="$t('log')" :log="communication.log" />
@@ -47,12 +54,19 @@
            @keyup.enter="connectionState ? sendMessage() : null"
            @keyup.up="connectionState ? walkHistory('up') : null"
            @keyup.down="connectionState ? walkHistory('down') : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
          <li>
            <label for="send" class="hide-on-small-screen">&nbsp;</label>
-            <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+            <button
+              id="send"
+              name="send"
+              :disabled="!connectionState"
+              @click="sendMessage"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ $t("send") }}
              <span>
                <i class="material-icons">send</i>
--- a/components/ui/accent-mode-picker.vue
+++ b/components/ui/accent-mode-picker.vue
@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <div>
    <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
    <div class="space-x-2">
      <span
@@ -13,7 +13,7 @@
        <i class="material-icons">lens</i>
      </span>
    </div>
-  </li>
+  </div>
 </template>

 <script>
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
  </div>
 </template>

@@ -48,6 +48,10 @@ export default {
      type: Object,
      default: {},
    },
+    styles: {
+      type: String,
+      default: "",
+    },
  },

  data() {
--- a/components/ui/autocomplete.vue
+++ b/components/ui/autocomplete.vue
@@ -12,6 +12,7 @@
      :spellcheck="spellcheck"
      :autocapitalize="autocapitalize"
      :autocorrect="spellcheck"
+      :class="styles"
    />
    <ul
      class="suggestions"
@@ -108,6 +109,11 @@ export default {
      default: "",
      required: false,
    },
+
+    styles: {
+      type: String,
+      default: "",
+    },
  },

  watch: {
--- a/components/ui/color-mode-picker.vue
+++ b/components/ui/color-mode-picker.vue
@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <div>
    <label>
      <ColorScheme placeholder="..." tag="span">
        {{ $t("background") }}:
@@ -24,7 +24,7 @@
        <i class="material-icons">{{ getIcon(color) }}</i>
      </span>
    </div>
-  </li>
+  </div>
 </template>

 <script>
--- a/components/ui/js-editor.vue
+++ b/components/ui/js-editor.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
  </div>
 </template>

@@ -40,6 +40,10 @@ export default {
      type: Object,
      default: {},
    },
+    styles: {
+      type: String,
+      default: "",
+    },
  },

  data() {
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -49,7 +49,6 @@
  @apply flex-1;
  @apply flex-col;
  @apply m-2;
-  @apply p-2;
  @apply transition;
  @apply ease-in-out;
  @apply duration-200;
@@ -58,13 +57,21 @@
  @apply shadow-2xl;

  max-height: calc(100vh - 128px);
-  max-width: 720px;
+  max-width: 640px;
+}
+
+.modal-header {
+  @apply pl-2;
 }

 .modal-body {
  @apply overflow-auto;
 }

+.modal-footer {
+  @apply p-2;
+}
+
 /*
  * The following styles are auto-applied to elements with
  * transition="modal" when their visibility is toggled
--- a/components/ui/pw-toggle.vue
+++ b/components/ui/pw-toggle.vue
@@ -1,9 +1,9 @@
 <template>
-  <div @click="toggle()">
+  <div @click="toggle()" class="inline-block cursor-pointer">
    <label class="toggle" :class="{ on: on }" ref="toggle">
      <span class="handle"></span>
    </label>
-    <label class="caption">
+    <label class="pl-0 align-middle cursor-pointer">
      <slot />
    </label>
  </div>
@@ -21,24 +21,13 @@ $height: 16px;
 $handleSpacing: 4px;
 $transition: all 0.2s ease-in-out;

-div {
-  @apply inline-block;
-  @apply cursor-pointer;
-}
-
-label.caption {
-  @apply align-middle;
-  @apply cursor-pointer;
-}
-
-label.toggle {
+.toggle {
  @apply relative;
  @apply inline-block;
  @apply align-middle;
  @apply rounded-full;
  @apply p-0;
-  @apply my-4;
-  @apply mx-2;
+  @apply m-4;
  @apply cursor-pointer;

  width: $width;
--- a/components/ui/tabs.vue
+++ b/components/ui/tabs.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="tabs-wrapper">
    <div class="tabs">
-      <ul>
+      <ul :class="styles">
        <li
          v-for="(tab, index) in tabs"
          :class="{ 'is-active': tab.isActive }"
@@ -90,6 +90,13 @@

 <script>
 export default {
+  props: {
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
  data() {
    return {
      tabs: [],