From 084039f59f8db96167e606d20737f641542dba22 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 4 Dec 2021 18:59:26 +0530
Subject: [PATCH] refactor: minor ui improvements

---
 .../{corner-down-left.svg => folder-open.svg} |  5 ++-
 packages/hoppscotch-app/assets/icons/logo.svg | 25 ++++++++++++++
 .../icons/{folder-minus.svg => wrap-text.svg} |  6 ++--
 .../hoppscotch-app/components/app/Header.vue  | 10 +++---
 .../components/app/Shortcuts.vue              |  2 +-
 .../components/button/Secondary.vue           |  6 ++--
 .../components/collections/ImportExport.vue   |  2 --
 .../collections/graphql/Collection.vue        |  2 +-
 .../components/collections/graphql/Folder.vue |  2 +-
 .../collections/graphql/ImportExport.vue      |  1 -
 .../components/collections/my/Collection.vue  |  2 +-
 .../components/collections/my/Folder.vue      |  2 +-
 .../collections/teams/Collection.vue          |  2 +-
 .../components/collections/teams/Folder.vue   |  2 +-
 .../hoppscotch-app/components/docs/Folder.vue |  2 +-
 .../components/environments/Edit.vue          |  2 --
 .../components/environments/Environment.vue   |  2 +-
 .../components/environments/ImportExport.vue  |  1 -
 .../components/graphql/RequestOptions.vue     | 34 +++++++++----------
 .../components/graphql/Response.vue           |  2 +-
 .../components/graphql/Sidebar.vue            |  2 +-
 .../components/history/graphql/Card.vue       |  2 +-
 .../components/http/Authorization.vue         | 20 +++++++++++
 .../components/http/OAuth2Authorization.vue   |  1 +
 .../components/http/PreRequestScript.vue      |  2 +-
 .../components/http/RawBody.vue               |  2 +-
 .../hoppscotch-app/components/http/Tests.vue  |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  2 +-
 .../lenses/renderers/RawLensRenderer.vue      |  2 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  2 +-
 .../components/realtime/Socketio.vue          |  2 --
 .../components/smart/AutoComplete.vue         |  8 +++--
 .../components/smart/FontSizePicker.vue       |  5 +--
 .../hoppscotch-app/components/smart/Modal.vue |  1 -
 .../components/smart/Toggle.vue               |  6 ++--
 .../hoppscotch-app/components/teams/Edit.vue  | 21 +++++++++---
 .../components/teams/Invite.vue               | 27 +++++++++------
 .../helpers/editor/themes/baseTheme.ts        | 19 +++++++----
 39 files changed, 152 insertions(+), 88 deletions(-)
 rename packages/hoppscotch-app/assets/icons/{corner-down-left.svg => folder-open.svg} (62%)
 create mode 100644 packages/hoppscotch-app/assets/icons/logo.svg
 rename packages/hoppscotch-app/assets/icons/{folder-minus.svg => wrap-text.svg} (50%)

diff --git a/packages/hoppscotch-app/assets/icons/corner-down-left.svg b/packages/hoppscotch-app/assets/icons/folder-open.svg
similarity index 62%
rename from packages/hoppscotch-app/assets/icons/corner-down-left.svg
rename to packages/hoppscotch-app/assets/icons/folder-open.svg
index f7781ca6..b60c4030 100644
--- a/packages/hoppscotch-app/assets/icons/corner-down-left.svg
+++ b/packages/hoppscotch-app/assets/icons/folder-open.svg
@@ -1,4 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <polyline points="9 10 4 15 9 20"></polyline>
-  <path d="M20 4v7a4 4 0 01-4 4H4"></path>
-</svg>
\ No newline at end of file
+  <path d="M6 17l2-5h14l-3 8a2 2 0 01-2 1H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h7a2 2 0 012 2v4"></path>
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/logo.svg b/packages/hoppscotch-app/assets/icons/logo.svg
new file mode 100644
index 00000000..c806ceb9
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/logo.svg
@@ -0,0 +1,25 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16C0 7.16344 7.16344 0 16 0H112C120.837 0 128 7.16344 128 16V112C128 120.837 120.837 128 112 128H16C7.16344 128 0 120.837 0 112V16Z" fill="#10B981"/>
+<ellipse cx="49.94" cy="39.46" rx="2.5" ry="2.5" fill="white" fill-opacity="0.75"/>
+<ellipse cx="65.44" cy="40.46" rx="3" ry="3" fill="white" fill-opacity="0.75"/>
+<ellipse cx="80.44" cy="44.46" rx="2.50001" ry="2.5" fill="white" fill-opacity="0.75"/>
+<path d="M86.7407 58.919C87.2596 55.7445 77.0229 51.468 63.9989 49.3955C50.9765 47.3216 39.8979 48.2292 39.379 51.4037C39.3147 51.6624 39.379 51.8568 39.4448 52.1169C39.1203 51.9868 20.2663 104.92 20.2663 104.92H91.5347C91.5347 104.92 87.1295 59.5665 86.482 59.5665C86.6107 59.3735 86.7407 59.1792 86.7407 58.919Z" fill="url(#paint0_linear_202_73)"/>
+<path d="M79.2254 56.8465C78.9009 58.8547 71.5157 59.3078 62.6397 57.9471C53.828 56.5221 46.8943 53.7363 47.2188 51.7925C47.3489 51.145 48.1907 50.6261 49.5514 50.3675C45.0162 50.5618 42.0361 51.4037 41.7774 52.8287C41.3887 55.4858 50.4591 59.1134 62.1208 60.993C73.7826 62.8711 83.5662 62.1593 84.0193 59.5679C84.2795 58.0114 81.6867 56.3277 77.4116 54.7083C78.6422 55.4201 79.2897 56.1976 79.2254 56.8465Z" fill="#A7F3D0" fill-opacity="0.5"/>
+<path d="M83.8892 39.3532C83.1131 31.319 76.9571 24.5155 68.6642 23.2205C60.3713 21.9241 52.5315 26.4593 49.227 33.7803C54.5397 34.1047 60.2412 34.6879 66.2029 35.6598C72.5519 36.6318 78.5122 37.9282 83.8892 39.3532Z" fill="url(#paint1_radial_202_73)"/>
+<path d="M19.0356 39.5005C18.3882 43.4526 26.6153 48.3123 39.5091 52.2643C39.4448 52.0042 39.4448 51.8098 39.4448 51.5511C39.9622 48.3766 50.9765 47.469 64.0647 49.5429C77.1515 51.6154 87.3239 55.8919 86.805 59.0664C86.7407 59.3266 86.6764 59.5209 86.5463 59.7139C99.9576 59.9083 109.288 57.8358 109.936 53.8837C110.842 47.8577 91.2759 39.7592 66.203 35.8072C41.0642 31.8552 19.9418 33.4746 19.0356 39.5005ZM47.9321 39.1761C48.1264 38.1398 49.0984 37.3623 50.1346 37.5567C51.1709 37.7511 51.9484 38.723 51.754 39.7592C51.6239 40.7955 50.5877 41.5087 49.5515 41.3786C48.5152 41.1843 47.7377 40.2123 47.9321 39.1761ZM62.8984 40.2123C63.0928 38.7873 64.4535 37.8154 65.8785 38.0755C67.3035 38.2699 68.2754 39.6292 68.0168 41.0556C67.7566 42.4164 66.3973 43.3883 65.0366 43.1939C63.6102 42.9995 62.6382 41.6388 62.8984 40.2123ZM78.6423 44.0358C78.8366 42.9995 79.8086 42.222 80.8448 42.4164C81.8811 42.6107 82.6586 43.5827 82.4642 44.6189C82.3356 45.6552 81.2979 46.4327 80.2617 46.2383C79.2254 46.0439 78.4479 45.072 78.6423 44.0358Z" fill="url(#paint2_radial_202_73)"/>
+<defs>
+<linearGradient id="paint0_linear_202_73" x1="56.7496" y1="39.4014" x2="56.7496" y2="100.924" gradientUnits="userSpaceOnUse">
+<stop stop-color="#86EFAC" stop-opacity="0.75"/>
+<stop offset="0.635417" stop-color="white" stop-opacity="0.2"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint1_radial_202_73" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(66.5581 31.1766) rotate(90) scale(8.17659 17.3311)">
+<stop stop-color="#047857"/>
+<stop offset="1" stop-color="#064E3B"/>
+</radialGradient>
+<radialGradient id="paint2_radial_202_73" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64.4593 46.6885) scale(347.403)">
+<stop stop-color="#047857"/>
+<stop offset="0.114583" stop-color="#064E3B"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/folder-minus.svg b/packages/hoppscotch-app/assets/icons/wrap-text.svg
similarity index 50%
rename from packages/hoppscotch-app/assets/icons/folder-minus.svg
rename to packages/hoppscotch-app/assets/icons/wrap-text.svg
index 21e0b709..392a5d5a 100644
--- a/packages/hoppscotch-app/assets/icons/folder-minus.svg
+++ b/packages/hoppscotch-app/assets/icons/wrap-text.svg
@@ -1,4 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path>
-  <line x1="9" y1="14" x2="15" y2="14"></line>
+  <line x1="3" y1="6" x2="21" y2="6"></line>
+  <path d="M3 12h15a3 3 0 110 6h-4"></path>
+  <polyline points="16 16 14 18 16 20"></polyline>
+  <line x1="3" y1="18" x2="10" y2="18"></line>
 </svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 264d97e3..cfb25119 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -5,7 +5,7 @@
     >
       <div class="space-x-2 inline-flex items-center">
         <ButtonSecondary
-          class="tracking-wide !font-bold !text-secondaryDark"
+          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
           label="HOPPSCOTCH"
           to="/"
         />
@@ -17,21 +17,21 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('header.install_pwa')"
           svg="download"
-          class="rounded"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click.native="showInstallPrompt()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('app.search')} <kbd>/</kbd>`"
           svg="search"
-          class="rounded"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click.native="showSearch = true"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${t('support.title')} <kbd>?</kbd>`"
           svg="life-buoy"
-          class="rounded"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click.native="showSupport = true"
         />
         <ButtonSecondary
@@ -74,7 +74,7 @@
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
                   :title="t('header.account')"
-                  class="rounded"
+                  class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
                   svg="user"
                 />
               </template>
diff --git a/packages/hoppscotch-app/components/app/Shortcuts.vue b/packages/hoppscotch-app/components/app/Shortcuts.vue
index da55b0c5..e563b128 100644
--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -6,7 +6,7 @@
       >
         <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
         <div class="flex">
-          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
+          <ButtonSecondary svg="x" @click.native="close()" />
         </div>
       </div>
       <div class="bg-primary border-b border-dividerLight">
diff --git a/packages/hoppscotch-app/components/button/Secondary.vue b/packages/hoppscotch-app/components/button/Secondary.vue
index fac87b94..7b2abbd8 100644
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -3,10 +3,10 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark"
+    class="font-semibold py-2 transition inline-flex items-center justify-center whitespace-nowrap focus:outline-none"
     :class="[
       color
-        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
+        ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
       label ? 'rounded px-4' : 'px-2',
       { 'rounded-full': rounded },
@@ -18,7 +18,7 @@
           outline,
       },
       {
-        '!bg-primaryLight !hover:bg-primaryDark !focus-visible:bg-primaryDark':
+        'bg-primaryLight hover:bg-primaryDark focus-visible:bg-primaryDark':
           filled,
       },
     ]"
diff --git a/packages/hoppscotch-app/components/collections/ImportExport.vue b/packages/hoppscotch-app/components/collections/ImportExport.vue
index 454c8d5a..bb1eaf8b 100644
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -10,7 +10,6 @@
         v-if="mode == 'import_from_my_collections'"
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('action.go_back')"
-        class="rounded"
         svg="arrow-left"
         @click.native="
           () => {
@@ -34,7 +33,6 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
-              class="rounded"
               svg="more-vertical"
             />
           </template>
diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index 1f5de7a8..fb692ab5 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -191,7 +191,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
       else return "folder"
     },
   },
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index 6d6f4c19..9584a628 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -189,7 +189,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
       else return "folder"
     },
   },
diff --git a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
index 50f1067e..af9b0b25 100644
--- a/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/ImportExport.vue
@@ -12,7 +12,6 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
-              class="rounded"
               svg="more-vertical"
             />
           </template>
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 74fe8078..434ebee6 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -218,7 +218,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
       else return "folder"
     },
   },
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 9cd31984..875588fa 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -204,7 +204,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
       else return "folder"
     },
   },
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index 6dd85375..84644396 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -210,7 +210,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
       else return "folder"
     },
   },
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 2dd67644..22abc364 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -192,7 +192,7 @@ export default defineComponent({
     getCollectionIcon() {
       if (this.isSelected) return "check-circle"
       else if (!this.showChildren && !this.isFiltered) return "folder"
-      else if (this.showChildren || this.isFiltered) return "folder-minus"
+      else if (this.showChildren || this.isFiltered) return "folder-open"
       else return "folder"
     },
   },
diff --git a/packages/hoppscotch-app/components/docs/Folder.vue b/packages/hoppscotch-app/components/docs/Folder.vue
index 3d0530f5..cf04e3d9 100644
--- a/packages/hoppscotch-app/components/docs/Folder.vue
+++ b/packages/hoppscotch-app/components/docs/Folder.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <h3 class="heading">
-      <SmartIcon name="folder-minus" class="svg-icons" />
+      <SmartIcon name="folder-open" class="svg-icons" />
       {{ folder.name || $t("state.none") }}
     </h3>
     <div
diff --git a/packages/hoppscotch-app/components/environments/Edit.vue b/packages/hoppscotch-app/components/environments/Edit.vue
index 09805198..3447dbe8 100644
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -31,14 +31,12 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.clear_all')"
               :svg="clearIcon"
-              class="rounded"
               @click.native="clearContent()"
             />
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               svg="plus"
               :title="$t('add.new')"
-              class="rounded"
               @click.native="addEnvironmentVariable"
             />
           </div>
diff --git a/packages/hoppscotch-app/components/environments/Environment.vue b/packages/hoppscotch-app/components/environments/Environment.vue
index 2642bf51..9ed88d36 100644
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center group">
+  <div class="flex items-stretch items-center group">
     <span
       class="cursor-pointer flex px-4 items-center justify-center"
       @click="$emit('edit-environment')"
diff --git a/packages/hoppscotch-app/components/environments/ImportExport.vue b/packages/hoppscotch-app/components/environments/ImportExport.vue
index 4dbb599f..c7d46737 100644
--- a/packages/hoppscotch-app/components/environments/ImportExport.vue
+++ b/packages/hoppscotch-app/components/environments/ImportExport.vue
@@ -12,7 +12,6 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('action.more')"
-              class="rounded"
               svg="more-vertical"
             />
           </template>
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index de3ca5a9..252ca3ec 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -1,21 +1,6 @@
 <template>
   <div>
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
-      <template #actions>
-        <ButtonSecondary
-          :label="`${t('request.run')}`"
-          svg="play"
-          class="rounded-none !text-accent"
-          @click.native="runQuery()"
-        />
-        <ButtonSecondary
-          ref="saveRequest"
-          :label="`${t('request.save')}`"
-          class="rounded-none"
-          @click.native="saveRequest"
-        />
-      </template>
-
       <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
         <AppSection label="query">
           <div
@@ -25,9 +10,22 @@
               {{ t("request.query") }}
             </label>
             <div class="flex">
+              <ButtonSecondary
+                :label="`${t('request.run')}`"
+                svg="play"
+                class="rounded-none !text-accent !hover:text-accentDark"
+                @click.native="runQuery()"
+              />
+              <ButtonSecondary
+                ref="saveRequest"
+                :label="`${t('request.save')}`"
+                svg="save"
+                class="rounded-none"
+                @click.native="saveRequest"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql/#queries"
+                to="https://docs.hoppscotch.io/graphql"
                 blank
                 :title="t('app.wiki')"
                 svg="help-circle"
@@ -61,7 +59,7 @@
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql/#queries"
+                to="https://docs.hoppscotch.io/graphql"
                 blank
                 :title="t('app.wiki')"
                 svg="help-circle"
@@ -89,7 +87,7 @@
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                to="https://docs.hoppscotch.io/graphql/#headers"
+                to="https://docs.hoppscotch.io/graphql"
                 blank
                 :title="t('app.wiki')"
                 svg="help-circle"
diff --git a/packages/hoppscotch-app/components/graphql/Response.vue b/packages/hoppscotch-app/components/graphql/Response.vue
index 014b99e0..972c92db 100644
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -19,7 +19,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="t('state.linewrap')"
             :class="{ '!text-accent': linewrapEnabled }"
-            svg="corner-down-left"
+            svg="wrap-text"
             @click.native.prevent="linewrapEnabled = !linewrapEnabled"
           />
           <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index 5b635daf..0087f199 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -157,7 +157,7 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="t('state.linewrap')"
               :class="{ '!text-accent': linewrapEnabled }"
-              svg="corner-down-left"
+              svg="wrap-text"
               @click.native.prevent="linewrapEnabled = !linewrapEnabled"
             />
             <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/history/graphql/Card.vue b/packages/hoppscotch-app/components/history/graphql/Card.vue
index 9fb9a5f5..90327494 100644
--- a/packages/hoppscotch-app/components/history/graphql/Card.vue
+++ b/packages/hoppscotch-app/components/history/graphql/Card.vue
@@ -40,7 +40,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer text-secondaryLight px-4 truncate whitespace-pre"
+        class="cursor-pointer font-mono text-secondaryLight px-4 truncate whitespace-pre"
         data-testid="restore_history_entry"
         @click="useEntry"
         >{{ line }}</span
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index 132a3c2a..797b6261 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -24,6 +24,11 @@
           </template>
           <SmartItem
             label="None"
+            :icon="
+              authName === 'None'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
             @click.native="
               authType = 'none'
               $refs.authTypeOptions.tippy().hide()
@@ -31,6 +36,11 @@
           />
           <SmartItem
             label="Basic Auth"
+            :icon="
+              authName === 'Basic Auth'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
             @click.native="
               authType = 'basic'
               $refs.authTypeOptions.tippy().hide()
@@ -38,6 +48,11 @@
           />
           <SmartItem
             label="Bearer Token"
+            :icon="
+              authName === 'Bearer'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
             @click.native="
               authType = 'bearer'
               $refs.authTypeOptions.tippy().hide()
@@ -45,6 +60,11 @@
           />
           <SmartItem
             label="OAuth 2.0"
+            :icon="
+              authName === 'OAuth 2.0'
+                ? 'radio_button_checked'
+                : 'radio_button_unchecked'
+            "
             @click.native="
               authType = 'oauth-2'
               $refs.authTypeOptions.tippy().hide()
diff --git a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
index 565beaba..e9f527e9 100644
--- a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
@@ -124,6 +124,7 @@ export default {
       clientID,
       scope,
       handleAccessTokenRequest,
+      t,
     }
   },
 }
diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index 4f79f6a2..b89de57f 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -18,7 +18,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/RawBody.vue b/packages/hoppscotch-app/components/http/RawBody.vue
index 8bc6dd78..58d62343 100644
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -18,7 +18,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/http/Tests.vue b/packages/hoppscotch-app/components/http/Tests.vue
index d7d6f708..eabd4dba 100644
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -18,7 +18,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
index 509a469b..0a621078 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 55e0d133..dd31ba3f 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
index f71a60f1..aa9bc624 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
index 34acae34..65d1198d 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
@@ -12,7 +12,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': linewrapEnabled }"
-          svg="corner-down-left"
+          svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 14a81d54..bfb8c584 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -127,7 +127,6 @@
               v-tippy="{ theme: 'tooltip' }"
               :title="$t('add.new')"
               svg="plus"
-              class="rounded"
               @click.native="addCommunicationInput"
             />
           </div>
@@ -153,7 +152,6 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
                 svg="trash"
-                class="rounded"
                 color="red"
                 outline
                 @click.native="removeCommunicationInput({ index })"
diff --git a/packages/hoppscotch-app/components/smart/AutoComplete.vue b/packages/hoppscotch-app/components/smart/AutoComplete.vue
index d8588ba6..5e65a852 100644
--- a/packages/hoppscotch-app/components/smart/AutoComplete.vue
+++ b/packages/hoppscotch-app/components/smart/AutoComplete.vue
@@ -18,7 +18,7 @@
     />
     <ul
       v-if="suggestions.length > 0 && suggestionsVisible"
-      class="suggestions"
+      class="suggestions hide-scrollbar"
       :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
     >
       <li
@@ -101,8 +101,8 @@ export default defineComponent({
           )
           // Cut off the part that's already been typed.
           .map((entry) => entry.substring(this.selectionStart))
-          // We only want the top 6 suggestions.
-          .slice(0, 6)
+          // We only want the top 10 suggestions.
+          .slice(0, 10)
       )
     },
   },
@@ -215,6 +215,8 @@ export default defineComponent({
     @apply left-0;
     @apply z-50;
     @apply shadow-lg;
+    @apply max-h-46;
+    @apply overflow-y-auto;
 
     top: calc(100% - 4px);
     border-radius: 0 0 8px 8px;
diff --git a/packages/hoppscotch-app/components/smart/FontSizePicker.vue b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
index ce602851..9f86c4ac 100644
--- a/packages/hoppscotch-app/components/smart/FontSizePicker.vue
+++ b/packages/hoppscotch-app/components/smart/FontSizePicker.vue
@@ -19,8 +19,9 @@
         v-for="(size, index) in fontSizes"
         :key="`size-${index}`"
         :label="`${getFontSizeName(size)}`"
-        :info-icon="size === active ? 'done' : ''"
-        :active-info-icon="size === active"
+        :icon="
+          size === active ? 'radio_button_checked' : 'radio_button_unchecked'
+        "
         @click.native="
           () => {
             setActiveFont(size)
diff --git a/packages/hoppscotch-app/components/smart/Modal.vue b/packages/hoppscotch-app/components/smart/Modal.vue
index c587c272..147310d9 100644
--- a/packages/hoppscotch-app/components/smart/Modal.vue
+++ b/packages/hoppscotch-app/components/smart/Modal.vue
@@ -48,7 +48,6 @@
                 <slot name="actions"></slot>
                 <ButtonSecondary
                   v-if="dimissible"
-                  class="rounded"
                   svg="x"
                   @click.native="close"
                 />
diff --git a/packages/hoppscotch-app/components/smart/Toggle.vue b/packages/hoppscotch-app/components/smart/Toggle.vue
index 55893152..9f8ed125 100644
--- a/packages/hoppscotch-app/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/components/smart/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
+    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
     @click="$emit('change')"
   >
     <label ref="toggle" class="toggle" :class="{ on: on }">
@@ -28,7 +28,7 @@ export default defineComponent({
 <style scoped lang="scss">
 $useBorder: true;
 $borderColor: var(--divider-color);
-$activeColor: var(--divider-color);
+$activeColor: var(--divider-dark-color);
 $inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--secondary-light-color);
 $activeHandleColor: var(--accent-color);
@@ -49,6 +49,8 @@ $transition: all 0.2s ease-in-out;
   @apply mr-4;
   @apply cursor-pointer;
   @apply flex-shrink-0;
+  @apply group-hover:border-accentDark;
+  @apply transition;
 
   width: $width;
   height: $height;
diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index f53de3bc..597d03d9 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -99,17 +99,18 @@
                         class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
                         :placeholder="`${t('team.permissions')}`"
                         :name="'value' + index"
-                        :value="
-                          typeof member.role === 'string'
-                            ? member.role
-                            : JSON.stringify(member.role)
-                        "
+                        :value="member.role"
                         readonly
                       />
                     </span>
                   </template>
                   <SmartItem
                     label="OWNER"
+                    :icon="
+                      member.role === 'OWNER'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'OWNER')
@@ -119,6 +120,11 @@
                   />
                   <SmartItem
                     label="EDITOR"
+                    :icon="
+                      member.role === 'EDITOR'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'EDITOR')
@@ -128,6 +134,11 @@
                   />
                   <SmartItem
                     label="VIEWER"
+                    :icon="
+                      member.role === 'VIEWER'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'VIEWER')
diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
index beaffea1..0ef48687 100644
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -80,11 +80,7 @@
                   class="bg-transparent flex flex-1 text-secondaryLight py-2 px-4"
                   :placeholder="`${t('team.permissions')}`"
                   :name="'value' + index"
-                  :value="
-                    typeof invitee.inviteeRole === 'string'
-                      ? invitee.inviteeRole
-                      : JSON.stringify(invitee.inviteeRole)
-                  "
+                  :value="invitee.inviteeRole"
                   readonly
                 />
                 <div class="flex">
@@ -158,17 +154,18 @@
                       class="bg-transparent cursor-pointer flex flex-1 py-2 px-4"
                       :placeholder="`${t('team.permissions')}`"
                       :name="'value' + index"
-                      :value="
-                        typeof invitee.value === 'string'
-                          ? invitee.value
-                          : JSON.stringify(invitee.value)
-                      "
+                      :value="invitee.value"
                       readonly
                     />
                   </span>
                 </template>
                 <SmartItem
                   label="OWNER"
+                  :icon="
+                    invitee.value === 'OWNER'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'OWNER')
@@ -178,6 +175,11 @@
                 />
                 <SmartItem
                   label="EDITOR"
+                  :icon="
+                    invitee.value === 'EDITOR'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'EDITOR')
@@ -187,6 +189,11 @@
                 />
                 <SmartItem
                   label="VIEWER"
+                  :icon="
+                    invitee.value === 'VIEWER'
+                      ? 'radio_button_checked'
+                      : 'radio_button_unchecked'
+                  "
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'VIEWER')
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index a9633fa3..ebb0cdb4 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -18,7 +18,11 @@ import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
 import { defaultKeymap } from "@codemirror/commands"
 import { bracketMatching } from "@codemirror/matchbrackets"
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import {
+  searchKeymap,
+  highlightSelectionMatches,
+  searchConfig,
+} from "@codemirror/search"
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete"
 import { commentKeymap } from "@codemirror/comment"
 import { rectangularSelection } from "@codemirror/rectangular-selection"
@@ -207,17 +211,15 @@ export const baseHighlightStyle = HighlightStyle.define([
   { tag: t.invalid, color: editorInvalidColor },
 ])
 
-const baseFoldStyle = foldGutter({
-  openText: "▾",
-  closedText: "▸",
-})
-
 export const basicSetup: Extension = [
   lineNumbers(),
   highlightActiveLineGutter(),
   highlightSpecialChars(),
   history(),
-  baseFoldStyle,
+  foldGutter({
+    openText: "▾",
+    closedText: "▸",
+  }),
   EditorState.allowMultipleSelections.of(true),
   indentOnInput(),
   defaultHighlightStyle.fallback,
@@ -227,6 +229,9 @@ export const basicSetup: Extension = [
   rectangularSelection(),
   highlightActiveLine(),
   highlightSelectionMatches(),
+  searchConfig({
+    top: true,
+  }),
   keymap.of([
     ...closeBracketsKeymap,
     ...defaultKeymap,