refactor: minor ui improvements

packages/hoppscotch-app/assets/scss/styles.scss

@@ -64,10 +64,10 @@ body {
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
+  @apply text-body;
+  @apply leading-body;
 
   animation: fade 300ms forwards;
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
@@ -103,15 +103,15 @@ body {
 .material-icons {
   @apply flex-shrink-0;
 
-  font-size: var(--body-line-height) !important;
-  width: var(--body-line-height);
+  font-size: var(--line-height-body) !important;
+  width: var(--line-height-body);
 }
 
 .svg-icons {
   @apply flex-shrink-0;
 
-  height: var(--body-line-height);
-  width: var(--body-line-height);
+  height: var(--line-height-body);
+  width: var(--line-height-body);
 }
 
 a {
@@ -120,9 +120,8 @@ a {
   @apply no-underline;
   @apply outline-none;
   @apply transition;
-
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
+  @apply text-body;
+  @apply leading-body;
 
   &.link {
     @apply items-center;
@@ -144,9 +143,9 @@ a {
   @apply rounded;
   @apply truncate;
   @apply shadow;
+  @apply leading-body;
 
   font-size: 88%;
-  line-height: var(--body-line-height);
 
   kbd {
     @apply inline-flex;
@@ -166,11 +165,10 @@ a {
   @apply text-secondary;
   @apply p-2;
   @apply shadow-lg;
+  @apply text-body;
+  @apply leading-body;
   @apply focus:outline-none;
 
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
-
   .tippy-roundarrow svg {
     @apply fill-popover;
   }
@@ -216,13 +214,12 @@ input,
 select,
 textarea,
 button {
-  @apply focus:outline-none;
   @apply truncate;
   @apply transition;
+  @apply text-body;
+  @apply leading-body;
+  @apply focus:outline-none;
   @apply disabled:cursor-not-allowed;
-
-  font-size: var(--body-font-size);
-  line-height: var(--body-line-height);
 }
 
 .input[type="file"],
@@ -323,9 +320,8 @@ pre.ace_editor {
       @apply shadow;
       @apply font-medium;
       @apply transition;
-
-      font-size: var(--body-font-size);
-      line-height: var(--body-line-height);
+      @apply text-body;
+      @apply leading-body;
 
       .action {
         @apply bg-gray-500;
@@ -337,12 +333,11 @@ pre.ace_editor {
         @apply rounded;
         @apply text-current;
         @apply normal-case;
+        @apply font-medium;
+        @apply text-body;
+        @apply leading-body;
         @apply hover:bg-opacity-20;
         @apply hover:no-underline;
-        @apply font-medium;
-
-        font-size: var(--body-font-size);
-        line-height: var(--body-line-height);
       }
     }
 
@@ -451,6 +446,7 @@ pre.ace_editor {
 }
 
 .shortcut-key {
+  @apply font-sans;
   @apply bg-dividerLight;
   @apply rounded;
   @apply ml-2;

packages/hoppscotch-app/assets/scss/themes.scss

@@ -2,6 +2,7 @@
   --font-sans: "Inter", sans-serif;
   --font-mono: "Roboto Mono", monospace;
   --font-icon: "Material Icons";
+  --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 
 @mixin dark-theme {
@@ -243,8 +244,8 @@
 }
 
 @mixin font-small {
-  --body-font-size: 0.75rem;
-  --body-line-height: 1rem;
+  --font-size-body: 0.75rem;
+  --line-height-body: 1rem;
   --upper-primary-sticky-fold: 4.125rem;
   --upper-secondary-sticky-fold: 6.125rem;
   --upper-tertiary-sticky-fold: 8.188rem;
@@ -255,8 +256,8 @@
 }
 
 @mixin font-medium {
-  --body-font-size: 0.875rem;
-  --body-line-height: 1.25rem;
+  --font-size-body: 0.875rem;
+  --line-height-body: 1.25rem;
   --upper-primary-sticky-fold: 4.375rem;
   --upper-secondary-sticky-fold: 6.625rem;
   --upper-tertiary-sticky-fold: 8.813rem;
@@ -267,8 +268,8 @@
 }
 
 @mixin font-large {
-  --body-font-size: 1rem;
-  --body-line-height: 1.5rem;
+  --font-size-body: 1rem;
+  --line-height-body: 1.5rem;
   --upper-primary-sticky-fold: 4.625rem;
   --upper-secondary-sticky-fold: 7.125rem;
   --upper-tertiary-sticky-fold: 9.5rem;

packages/hoppscotch-app/components/app/Fuse.vue

@@ -14,7 +14,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
         {{ t("state.nothing_found") }} "{{ search }}"
       </span>
     </div>

packages/hoppscotch-app/components/app/PowerSearch.vue

@@ -14,8 +14,29 @@
         autocomplete="off"
         name="command"
         :placeholder="`${t('app.type_a_command_search')}`"
-        class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
+        class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
       />
+      <div
+        class="flex pb-4 px-4 border-b text-tiny border-dividerLight justify-between text-secondaryLight whitespace-nowrap overflow-auto flex-shrink-0 hide-scrollbar"
+      >
+        <div class="flex items-center">
+          <kbd class="shortcut-key">↑</kbd>
+          <kbd class="shortcut-key">↓</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_navigate") }}
+          </span>
+          <kbd class="shortcut-key">↩</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_select") }}
+          </span>
+        </div>
+        <div class="flex items-center">
+          <kbd class="shortcut-key">ESC</kbd>
+          <span class="truncate ml-2">
+            {{ t("action.to_close") }}
+          </span>
+        </div>
+      </div>
       <AppFuse
         v-if="search && show"
         :input="fuse"

packages/hoppscotch-app/components/app/Shortcuts.vue

@@ -43,7 +43,7 @@
           class="flex flex-col text-secondaryLight p-4 items-center justify-center"
         >
           <i class="opacity-75 pb-2 material-icons">manage_search</i>
-          <span class="text-center">
+          <span class="text-center my-2">
             {{ t("state.nothing_found") }} "{{ filterText }}"
           </span>
         </div>

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -103,9 +103,8 @@ const primaryNavigation = [
 
   span {
     @apply mt-2;
-    @apply font-font-medium;
-
-    font-size: calc(var(--body-font-size) - 0.062rem);
+    @apply font-medium;
+    @apply text-tiny;
   }
 
   &.exact-active-link {

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -16,7 +16,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="getCollectionIcon"
         />
       </span>
@@ -24,7 +24,9 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
-        <span class="truncate"> {{ collection.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ collection.name }}
+        </span>
       </span>
       <div class="flex">
         <ButtonSecondary

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -16,7 +16,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="getCollectionIcon"
         />
       </span>
@@ -24,7 +24,7 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
-        <span class="truncate">
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
           {{ folder.name ? folder.name : folder.title }}
         </span>
       </span>

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -15,7 +15,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="isSelected ? 'check-circle' : 'file'"
         />
       </span>
@@ -23,7 +23,9 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="!doc ? selectRequest() : {}"
       >
-        <span class="truncate"> {{ request.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ request.name }}
+        </span>
       </span>
       <div class="flex">
         <ButtonSecondary

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -84,7 +84,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>

packages/hoppscotch-app/components/collections/index.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
-      :style="saveRequest ? 'top: calc(-1 * var(--body-font-size))' : 'top: 0'"
+      :style="saveRequest ? 'top: calc(-1 * var(--font-size-body))' : 'top: 0'"
     >
       <div v-if="!saveRequest" class="search-wrappe">
         <input
@@ -135,7 +135,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -16,7 +16,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="getCollectionIcon"
         />
       </span>
@@ -24,7 +24,9 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
-        <span class="truncate"> {{ collection.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ collection.name }}
+        </span>
       </span>
       <div class="flex">
         <ButtonSecondary

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -16,7 +16,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="getCollectionIcon"
         />
       </span>
@@ -24,7 +24,7 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
-        <span class="truncate">
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
           {{ folder.name ? folder.name : folder.title }}
         </span>
       </span>

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -17,7 +17,7 @@
         <SmartIcon
           v-if="isSelected"
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           name="check-circle"
         />
         <span v-else class="truncate">
@@ -28,7 +28,9 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
         @click="!doc ? selectRequest() : {}"
       >
-        <span class="truncate"> {{ request.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ request.name }}
+        </span>
         <span
           v-if="
             active &&

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -10,7 +10,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="getCollectionIcon"
         />
       </span>
@@ -18,7 +18,9 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
-        <span class="truncate"> {{ collection.title }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ collection.title }}
+        </span>
       </span>
       <div class="flex">
         <ButtonSecondary

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -10,7 +10,7 @@
       >
         <SmartIcon
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           :name="getCollectionIcon"
         />
       </span>
@@ -18,7 +18,7 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition group-hover:text-secondaryDark"
         @click="toggleShowChildren()"
       >
-        <span class="truncate">
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
           {{ folder.name ? folder.name : folder.title }}
         </span>
       </span>

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -12,10 +12,10 @@
         <SmartIcon
           v-if="isSelected"
           class="svg-icons"
-          :class="{ 'text-green-500': isSelected }"
+          :class="{ 'text-accent': isSelected }"
           name="check-circle"
         />
-        <span v-else>
+        <span v-else class="truncate">
           {{ request.method }}
         </span>
       </span>
@@ -23,7 +23,9 @@
         class="cursor-pointer flex flex-1 min-w-0 py-2 pr-2 transition items-center group-hover:text-secondaryDark"
         @click="!doc ? selectRequest() : {}"
       >
-        <span class="truncate"> {{ request.name }} </span>
+        <span class="truncate" :class="{ 'text-accent': isSelected }">
+          {{ request.name }}
+        </span>
         <span
           v-if="
             active &&

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
-      <SmartTab :id="'query'" :label="`${t('tab.query')}`" :selected="true">
+      <SmartTab
+        :id="'query'"
+        :label="`${t('tab.query')}`"
+        :selected="true"
+        :indicator="gqlQueryString.length > 0"
+      >
         <AppSection label="query">
           <div
             class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
@@ -30,6 +35,12 @@
                 :title="t('app.wiki')"
                 svg="help-circle"
               />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                svg="trash-2"
+                @click.native="clearGQLQuery()"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.prettify')"
@@ -48,7 +59,11 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'variables'" :label="`${t('tab.variables')}`">
+      <SmartTab
+        :id="'variables'"
+        :label="`${t('tab.variables')}`"
+        :indicator="variableString.length > 0"
+      >
         <AppSection label="variables">
           <div
             class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
@@ -64,6 +79,12 @@
                 :title="t('app.wiki')"
                 svg="help-circle"
               />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                svg="trash-2"
+                @click.native="clearGQLVariables()"
+              />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.copy')"
@@ -76,7 +97,11 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'headers'" :label="`${t('tab.headers')}`">
+      <SmartTab
+        :id="'headers'"
+        :label="`${t('tab.headers')}`"
+        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
+      >
         <AppSection label="headers">
           <div
             class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
@@ -96,7 +121,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="t('action.clear_all')"
                 svg="trash-2"
-                @click.native="clearContent()"
+                @click.native="clearHeaders()"
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
@@ -230,7 +255,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "@nuxtjs/composition-api"
+import { computed, onMounted, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
 import { GQLHeader, makeGQLRequest } from "@hoppscotch/data"
@@ -310,6 +335,12 @@ useCodemirror(bulkEditor, bulkHeaders, {
   environmentHighlights: false,
 })
 
+const activeGQLHeadersCount = computed(
+  () =>
+    headers.value.filter((x) => x.active && (x.key !== "" || x.value !== ""))
+      .length
+)
+
 const variableEditor = ref<any | null>(null)
 
 useCodemirror(variableEditor, variableString, {
@@ -507,8 +538,16 @@ const removeRequestHeader = (index: number) => {
   }
 }
 
-const clearContent = () => {
+const clearHeaders = () => {
   headers.value = []
   clearBulkEditor()
 }
+
+const clearGQLQuery = () => {
+  gqlQueryString.value = ""
+}
+
+const clearGQLVariables = () => {
+  variableString.value = ""
+}
 </script>

packages/hoppscotch-app/components/history/graphql/Card.vue

@@ -36,7 +36,7 @@
         @click.native="$emit('toggle-star')"
       />
     </div>
-    <div class="flex flex-col">
+    <div class="flex flex-col text-tiny">
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"

packages/hoppscotch-app/components/history/index.vue

@@ -52,7 +52,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
+      <span class="text-center my-2">
         {{ $t("state.nothing_found") }} "{{ filterText }}"
       </span>
     </div>

packages/hoppscotch-app/components/tab/Secondary.vue

@@ -3,9 +3,9 @@
     :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
     :exact="exact"
     :blank="blank"
-    class="font-semibold flex-1 py-2 transform transition inline-flex items-center truncate hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
+    class="font-semibold py-2 transform transition inline-flex items-center hover:translate-x-2 focus:outline-none focus-visible:translate-x-2"
     :class="[
-      label ? 'px-3' : 'px-2',
+      label ? 'px-4' : 'px-2',
       active
         ? color
           ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
@@ -32,7 +32,9 @@
       :class="label ? 'mr-4 opacity-75' : ''"
       class="svg-icons"
     />
-    {{ label }}
+    <span class="truncate">
+      {{ label }}
+    </span>
   </SmartLink>
 </template>
 

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -30,7 +30,7 @@ import { lintKeymap } from "@codemirror/lint"
 
 export const baseTheme = EditorView.theme({
   "&": {
-    fontSize: "var(--body-font-size)",
+    fontSize: "var(--font-size-body)",
   },
   ".cm-content": {
     caretColor: "var(--secondary-light-color)",

packages/hoppscotch-app/helpers/shortcuts.js

@@ -17,7 +17,7 @@ export default [
         label: "shortcut.general.show_all",
       },
       {
-        keys: ["Esc"],
+        keys: ["ESC"],
         label: "shortcut.general.close_current_menu",
       },
     ],

packages/hoppscotch-app/locales/af.json

@@ -29,6 +29,9 @@
     "send": "Stuur",
     "start": "Begin",
     "stop": "Stop",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Skakel af",
     "turn_on": "Sit aan",
     "undo": "Ontdoen",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Bepalings en privaatheid",
     "twitter": "Twitter",
     "type_a_command_search": "Tik 'n opdrag of soek ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Ons gebruik koekies",
     "whats_new": "Wat's nuut?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/ar.json

@@ -29,6 +29,9 @@
     "send": "يرسل",
     "start": "يبدأ",
     "stop": "قف",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "اطفئه",
     "turn_on": "شغله",
     "undo": "الغاء التحميل",

packages/hoppscotch-app/locales/ca.json

@@ -29,6 +29,9 @@
     "send": "Envia",
     "start": "Començar",
     "stop": "Atura",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Tanca",
     "turn_on": "Encendre",
     "undo": "Desfés",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Condicions i privadesa",
     "twitter": "Twitter",
     "type_a_command_search": "Escriviu una ordre o cerqueu ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Utilitzem cookies",
     "whats_new": "Que hi ha de nou?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/cn.json

@@ -29,6 +29,9 @@
     "send": "发送",
     "start": "开始",
     "stop": "停止",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "关闭",
     "turn_on": "开启",
     "undo": "撤消",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "隐私条款",
     "twitter": "Twitter",
     "type_a_command_search": "输入命令或搜索内容……",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "我们使用 cookies",
     "whats_new": "新增内容",
     "wiki": "帮助"

packages/hoppscotch-app/locales/cs.json

@@ -29,6 +29,9 @@
     "send": "Poslat",
     "start": "Start",
     "stop": "Stop",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Vypnout",
     "turn_on": "Zapnout",
     "undo": "vrátit",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Podmínky a soukromí",
     "twitter": "Cvrlikání",
     "type_a_command_search": "Zadejte příkaz nebo hledejte…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Používáme cookies",
     "whats_new": "Co je nového?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/da.json

@@ -29,6 +29,9 @@
     "send": "Sende",
     "start": "Start",
     "stop": "Hold op",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Sluk",
     "turn_on": "Tænde for",
     "undo": "Fortryd",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Vilkår og fortrolighed",
     "twitter": "Twitter",
     "type_a_command_search": "Skriv en kommando eller søg ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Vi bruger cookies",
     "whats_new": "Hvad er nyt?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/de.json

@@ -29,6 +29,9 @@
     "send": "Senden",
     "start": "Start",
     "stop": "Stopp",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Ausschalten",
     "turn_on": "Einschalten",
     "undo": "Rückgängig machen",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Allgemeine Geschäftsbedingungen und Datenschutzerklärung",
     "twitter": "Twitter",
     "type_a_command_search": "Geben Sie einen Befehl ein oder suchen Sie…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Wir verwenden Cookies",
     "whats_new": "Was gibt's Neues?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/el.json

@@ -29,6 +29,9 @@
     "send": "Στείλετε",
     "start": "Αρχή",
     "stop": "Να σταματήσει",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Σβήνω",
     "turn_on": "Ανάβω",
     "undo": "Ξεκάνω",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Όροι και απόρρητο",
     "twitter": "Κελάδημα",
     "type_a_command_search": "Πληκτρολογήστε μια εντολή ή αναζήτηση…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Χρησιμοποιούμε cookies",
     "whats_new": "Τι νέα?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/en.json

@@ -29,6 +29,9 @@
     "send": "Send",
     "start": "Start",
     "stop": "Stop",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Turn off",
     "turn_on": "Turn on",
     "undo": "Undo",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Terms and privacy",
     "twitter": "Twitter",
     "type_a_command_search": "Type a command or search…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "We use cookies",
     "whats_new": "What's new?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/es.json

@@ -29,6 +29,9 @@
     "send": "Enviar",
     "start": "Empezar",
     "stop": "Detener",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Desactivar",
     "turn_on": "Activar",
     "undo": "Deshacer",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Términos y privacidad",
     "twitter": "Twitter",
     "type_a_command_search": "Escribe un comando o busca…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Usamos cookies",
     "whats_new": "¿Qué hay de nuevo?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/fi.json

@@ -29,6 +29,9 @@
     "send": "Lähettää",
     "start": "alkaa",
     "stop": "Lopettaa",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Sammuttaa",
     "turn_on": "Kiihottua",
     "undo": "Kumoa",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Ehdot ja yksityisyys",
     "twitter": "Viserrys",
     "type_a_command_search": "Kirjoita komento tai hae…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Käytämme evästeitä",
     "whats_new": "Mikä on uutta?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/fr.json

@@ -29,6 +29,9 @@
     "send": "Envoyer",
     "start": "Démarrer",
     "stop": "Arrêter",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Éteindre",
     "turn_on": "Allumer",
     "undo": "Annuler",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Conditions et confidentialité",
     "twitter": "Twitter",
     "type_a_command_search": "Tapez une commande ou recherchez…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Nous utilisons des cookies",
     "whats_new": "Quoi de neuf?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/he.json

@@ -29,6 +29,9 @@
     "send": "לִשְׁלוֹחַ",
     "start": "הַתחָלָה",
     "stop": "תפסיק",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "לכבות",
     "turn_on": "להדליק",
     "undo": "לבטל",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "תנאים ופרטיות",
     "twitter": "טוויטר",
     "type_a_command_search": "הקלד פקודה או חפש ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "אנו משתמשים בעוגיות",
     "whats_new": "מה חדש?",
     "wiki": "ויקי"

packages/hoppscotch-app/locales/hu.json

@@ -29,6 +29,9 @@
     "send": "Küld",
     "start": "Rajt",
     "stop": "Álljon meg",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Kikapcsolni",
     "turn_on": "Bekapcsol",
     "undo": "Visszavonás",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Feltételek és adatvédelem",
     "twitter": "Twitter",
     "type_a_command_search": "Írjon be parancsot vagy keresést…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Sütiket használunk",
     "whats_new": "Mi újság?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/it.json

@@ -29,6 +29,9 @@
     "send": "Invia",
     "start": "Avvia",
     "stop": "Interrompi",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Spegni",
     "turn_on": "Accendi",
     "undo": "Annulla",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Termini e privacy",
     "twitter": "Twitter",
     "type_a_command_search": "Digita un comando o cerca...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Utilizziamo i cookie",
     "whats_new": "Cosa c'è di nuovo?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/ja.json

@@ -29,6 +29,9 @@
     "send": "送信",
     "start": "始める",
     "stop": "ストップ",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "消す",
     "turn_on": "オンにする",
     "undo": "元に戻す",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "利用規約とプライバシー",
     "twitter": "ツイッター",
     "type_a_command_search": "コマンドを入力するか、検索してください…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "クッキーを使用しています",
     "whats_new": "新着情報？",
     "wiki": "ウィキ"

packages/hoppscotch-app/locales/ko.json

@@ -29,6 +29,9 @@
     "send": "보내기",
     "start": "시작",
     "stop": "정지",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "끄기",
     "turn_on": "켜기",
     "undo": "실행 취소",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "약관 및 개인정보 보호",
     "twitter": "트위터",
     "type_a_command_search": "명령을 입력하거나 검색...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "우리는 쿠키를 사용중입니다",
     "whats_new": "새로운 소식?",
     "wiki": "위키"

packages/hoppscotch-app/locales/nl.json

@@ -29,6 +29,9 @@
     "send": "Versturen",
     "start": "Begin",
     "stop": "Stop",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Uitschakelen",
     "turn_on": "Inschakelen",
     "undo": "Ongedaan maken",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Voorwaarden en privacy",
     "twitter": "Twitter",
     "type_a_command_search": "Typ een opdracht of zoek...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Wij gebruiken cookies",
     "whats_new": "Wat is er nieuw?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/no.json

@@ -29,6 +29,9 @@
     "send": "Sende",
     "start": "Start",
     "stop": "Stoppe",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Skru av",
     "turn_on": "Slå på",
     "undo": "Angre",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Vilkår og personvern",
     "twitter": "Twitter",
     "type_a_command_search": "Skriv inn en kommando eller søk ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Vi bruker informasjonskapsler",
     "whats_new": "Hva er nytt?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/pl.json

@@ -29,6 +29,9 @@
     "send": "Wyślij",
     "start": "Rozpocznij",
     "stop": "Zatrzymaj",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Wyłącz",
     "turn_on": "Włącz",
     "undo": "Cofnij",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Warunki i prywatność",
     "twitter": "Twitter",
     "type_a_command_search": "Wpisz polecenie lub wyszukaj…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Używamy plików cookie",
     "whats_new": "Co nowego?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/pt-br.json

@@ -29,6 +29,9 @@
     "send": "Mandar",
     "start": "Começar",
     "stop": "Pare",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Desligar",
     "turn_on": "Ligar",
     "undo": "Desfazer",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Termos e privacidade",
     "twitter": "Twitter",
     "type_a_command_search": "Digite um comando ou pesquise ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Usamos cookies",
     "whats_new": "O que há de novo?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/pt.json

@@ -29,6 +29,9 @@
     "send": "Mandar",
     "start": "Começar",
     "stop": "Pare",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Desligar",
     "turn_on": "Ligar",
     "undo": "Desfazer",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Termos e privacidade",
     "twitter": "Twitter",
     "type_a_command_search": "Digite um comando ou pesquise ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Usamos cookies",
     "whats_new": "O que há de novo?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/ro.json

@@ -29,6 +29,9 @@
     "send": "Trimite",
     "start": "start",
     "stop": "Stop",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Opriți",
     "turn_on": "Aprinde",
     "undo": "Anula",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Termeni și confidențialitate",
     "twitter": "Stare de nervozitate",
     "type_a_command_search": "Tastați o comandă sau căutați ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Folosim cookie-uri",
     "whats_new": "Ce mai e nou?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/ru.json

@@ -29,6 +29,9 @@
     "send": "Отправить",
     "start": "Начать",
     "stop": "Стоп",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Выключить",
     "turn_on": "Включить",
     "undo": "Отменить",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Условия и конфиденциальность",
     "twitter": "Твиттер",
     "type_a_command_search": "Введите команду или выполните поиск…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Мы используем куки",
     "whats_new": "Что нового?",
     "wiki": "Вики"

packages/hoppscotch-app/locales/sr.json

@@ -29,6 +29,9 @@
     "send": "Пошаљи",
     "start": "Почетак",
     "stop": "Зауставити",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Искључити",
     "turn_on": "Укључити",
     "undo": "Поништи",

packages/hoppscotch-app/locales/sv.json

@@ -29,6 +29,9 @@
     "send": "Skicka",
     "start": "Start",
     "stop": "Sluta",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Stäng av",
     "turn_on": "Sätta på",
     "undo": "Ångra",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Villkor och sekretess",
     "twitter": "Twitter",
     "type_a_command_search": "Skriv ett kommando eller sök ...",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Vi använder cookies",
     "whats_new": "Vad är nytt?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/tr.json

@@ -29,6 +29,9 @@
     "send": "Gönder",
     "start": "Başla",
     "stop": "Dur",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Kapat",
     "turn_on": "Aç",
     "undo": "Geri al",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Şartlar ve gizlilik",
     "twitter": "heyecan",
     "type_a_command_search": "Bir komut yazın veya arayın…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "çerez kullanıyoruz",
     "whats_new": "Ne var ne yok?",
     "wiki": "Wiki"

packages/hoppscotch-app/locales/tw.json

@@ -29,6 +29,9 @@
     "send": "傳送",
     "start": "開始",
     "stop": "停止",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "關閉",
     "turn_on": "開啟",
     "undo": "復原",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "隱私條款",
     "twitter": "Twitter",
     "type_a_command_search": "輸入命令或搜尋內容……",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "我們使用 cookies",
     "whats_new": "新增內容",
     "wiki": "幫助"

packages/hoppscotch-app/locales/uk.json

@@ -29,6 +29,9 @@
     "send": "Надіслати",
     "start": "Почати",
     "stop": "Стій",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Вимкнути",
     "turn_on": "Ввімкнути",
     "undo": "Скасувати",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Умови та конфіденційність",
     "twitter": "Twitter",
     "type_a_command_search": "Введіть команду або виконайте пошук…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Ми використовуємо файли cookie",
     "whats_new": "Що нового?",
     "wiki": "Вікі"

packages/hoppscotch-app/locales/vi.json

@@ -29,6 +29,9 @@
     "send": "Gửi",
     "start": "Bắt đầu",
     "stop": "Ngừng lại",
+    "to_navigate": "to navigate",
+    "to_select": "to select",
+    "to_close": "to close",
     "turn_off": "Tắt",
     "turn_on": "Bật",
     "undo": "Hoàn tác",
@@ -63,7 +66,7 @@
     "terms_and_privacy": "Điều khoản và quyền riêng tư",
     "twitter": "Twitter",
     "type_a_command_search": "Nhập lệnh hoặc tìm kiếm…",
-    "version": "v2.0",
+    "version": "v2.1.0",
     "we_use_cookies": "Chúng tôi sử dụng cookie",
     "whats_new": "Có gì mới?",
     "wiki": "Wiki"

packages/hoppscotch-app/nuxt.config.js

@@ -11,7 +11,7 @@ export const options = {
   keywords:
     "hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
   loading: {
-    color: "var(--accent-color)",
+    color: "var(--divider-light-color)",
     background: "var(--primary-color)",
   },
   app: {

packages/hoppscotch-app/pages/index.vue

@@ -46,11 +46,16 @@
             <SmartTab
               :id="'preRequestScript'"
               :label="`${$t('tab.pre_request_script')}`"
+              :indicator="preRequestScript.length > 0"
             >
               <HttpPreRequestScript />
             </SmartTab>
 
-            <SmartTab :id="'tests'" :label="`${$t('tab.tests')}`">
+            <SmartTab
+              :id="'tests'"
+              :label="`${$t('tab.tests')}`"
+              :indicator="testScript.length > 0"
+            >
               <HttpTests />
             </SmartTab>
           </SmartTabs>
@@ -129,6 +134,8 @@ import {
   setRESTRequest,
   setRESTAuth,
   restAuth$,
+  useTestScript,
+  usePreRequestScript,
 } from "~/newstore/RESTSession"
 import { translateExtURLParams } from "~/helpers/RESTExtURLParams"
 import {
@@ -211,6 +218,9 @@ export default defineComponent({
   setup() {
     const requestForSync = ref<HoppRESTRequest | null>(null)
 
+    const testScript = useTestScript()
+    const preRequestScript = usePreRequestScript()
+
     const confirmSync = ref(false)
 
     const syncRequest = () => {
@@ -247,6 +257,8 @@ export default defineComponent({
       syncRequest,
       oAuthURL,
       requestForSync,
+      testScript,
+      preRequestScript,
     }
   },
 })

packages/hoppscotch-app/pages/profile.vue

@@ -79,7 +79,7 @@
                 <h4 class="font-semibold text-secondaryDark">
                   {{ t("settings.profile") }}
                 </h4>
-                <div class="mt-1 text-secondaryLight">
+                <div class="my-1 text-secondaryLight">
                   {{ t("settings.profile_description") }}
                 </div>
                 <div class="py-4">
@@ -141,7 +141,7 @@
                 <h4 class="font-semibold text-secondaryDark">
                   {{ t("settings.sync") }}
                 </h4>
-                <div class="mt-1 text-secondaryLight">
+                <div class="my-1 text-secondaryLight">
                   {{ t("settings.sync_description") }}
                 </div>
                 <div class="space-y-4 py-4">

packages/hoppscotch-app/pages/settings.vue

@@ -6,7 +6,7 @@
           <h3 class="heading">
             {{ $t("settings.theme") }}
           </h3>
-          <p class="mt-1 text-secondaryLight">
+          <p class="my-1 text-secondaryLight">
             {{ $t("settings.theme_description") }}
           </p>
         </div>
@@ -15,7 +15,7 @@
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.background") }}
             </h4>
-            <div class="mt-1 text-secondaryLight">
+            <div class="my-1 text-secondaryLight">
               <ColorScheme placeholder="..." tag="span">
                 {{ $t(getColorModeName($colorMode.preference)) }}
                 <span v-if="$colorMode.preference === 'system'">
@@ -31,7 +31,7 @@
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.accent_color") }}
             </h4>
-            <div class="mt-1 text-secondaryLight">
+            <div class="my-1 text-secondaryLight">
               {{ active.charAt(0).toUpperCase() + active.slice(1) }}
             </div>
             <div class="mt-4">
@@ -58,7 +58,7 @@
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.experiments") }}
             </h4>
-            <div class="mt-1 text-secondaryLight">
+            <div class="my-1 text-secondaryLight">
               {{ $t("settings.experiments_notice") }}
               <SmartLink
                 class="link"
@@ -105,7 +105,7 @@
           <h3 class="heading">
             {{ $t("settings.interceptor") }}
           </h3>
-          <p class="mt-1 text-secondaryLight">
+          <p class="my-1 text-secondaryLight">
             {{ $t("settings.interceptor_description") }}
           </p>
         </div>
@@ -114,7 +114,7 @@
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.extensions") }}
             </h4>
-            <div class="mt-1 text-secondaryLight">
+            <div class="my-1 text-secondaryLight">
               <span v-if="extensionVersion != null">
                 {{
                   `${$t("settings.extension_version")}: v${
@@ -166,7 +166,7 @@
             <h4 class="font-semibold text-secondaryDark">
               {{ $t("settings.proxy") }}
             </h4>
-            <div class="mt-1 text-secondaryLight">
+            <div class="my-1 text-secondaryLight">
               {{
                 `${$t("settings.official_proxy_hosting")} ${$t(
                   "settings.read_the"

packages/hoppscotch-app/windi.config.js

@@ -41,6 +41,13 @@ export default defineConfig({
         mono: "var(--font-mono)",
         icon: "var(--font-icon)",
       },
+      fontSize: {
+        tiny: "var(--font-size-tiny)",
+        body: "var(--font-size-body)",
+      },
+      lineHeight: {
+        body: "var(--line-height-body)",
+      },
       cursor: {
         nsResize: "ns-resize",
       },