refactor: minor ui improvements

packages/hoppscotch-app/assets/icons/corner-down-left.svg → 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>
+  <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>

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>

packages/hoppscotch-app/assets/icons/folder-minus.svg → 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>

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>

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">

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,
       },
     ]"

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>

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"
     },
   },

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"
     },
   },

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>

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"
     },
   },

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"
     },
   },

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"
     },
   },

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"
     },
   },

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

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>

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')"

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>

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"

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

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

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

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()

packages/hoppscotch-app/components/http/OAuth2Authorization.vue

@@ -124,6 +124,7 @@ export default {
       clientID,
       scope,
       handleAccessTokenRequest,
+      t,
     }
   },
 }

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

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

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

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

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

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

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

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 })"

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;

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)

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"
                 />

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;

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')

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')

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,