refactor(ui): better rendering with Inter font

assets/scss/styles.scss

@@ -41,7 +41,7 @@ html {
 
 body {
   @apply bg-primary;
-  @apply text-secondary !text-sm;
+  @apply text-secondary text-xs;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
@@ -69,14 +69,14 @@ body {
 }
 
 .material-icons {
-  font-size: 1.25rem !important;
+  font-size: 1rem;
 }
 
 .svg-icons {
   @apply inline-flex;
   @apply flex-shrink-0;
-  @apply h-5;
+  @apply h-4;
-  @apply w-5;
+  @apply w-4;
 }
 
 a {
@@ -166,8 +166,7 @@ hr {
   @apply bg-primary;
   @apply truncate;
   @apply rounded;
-  @apply font-semibold font-mono;
+  @apply font-semibold;
-  @apply text-xs;
   @apply border border-divider;
   @apply transition;
   @apply focus:(outline-none border-accent);
@@ -204,7 +203,7 @@ pre.ace_editor {
     @apply pointer-events-none;
     @apply font-icon;
     @apply text-secondaryLight;
-    @apply top-3;
+    @apply top-2.5;
     @apply right-3;
 
     content: "\e313";
@@ -290,13 +289,9 @@ input[type="checkbox"] {
       @apply text-primary text-xs;
       @apply !font-semibold;
 
-      .material-icons {
-        @apply !text-md;
-      }
-
       .action {
         @apply transition;
-        @apply text-current text-xs;
+        @apply text-current;
         @apply hover:(opacity-75 no-underline);
       }
     }

assets/scss/themes.scss

@@ -1,5 +1,5 @@
 @mixin baseTheme {
-  --font-sans: "Montserrat", "sans-serif";
+  --font-sans: "Inter", "sans-serif";
   --font-mono: "Roboto Mono", "monospace";
   --font-icon: "Material Icons";
 }
@@ -41,7 +41,7 @@
   // Text color
   --secondary-color: theme("colors.true-gray.600");
   // Light Text color
-  --secondary-light-color: theme("colors.true-gray.400");
+  --secondary-light-color: theme("colors.true-gray.500");
   // Dark Text color
   --secondary-dark-color: theme("colors.true-gray.800");
   // Border color

components/app/Announcement.vue

@@ -13,7 +13,7 @@
         blank
         class="
           flex
-          py-3
+          py-2
           px-4
           transition
           relative
@@ -23,7 +23,7 @@
         "
       >
         <i class="mr-4 material-icons">science</i>
-        <span class="text-secondaryDark text-xs">
+        <span class="text-secondaryDark">
           <span class="md:hidden"> Beta Layout </span>
           <span class="hidden md:inline">
             You're currently viewing an experimental beta layout
@@ -34,7 +34,7 @@
             border-l border-divider
             flex
             font-semibold
-            text-accent text-xs
+            text-accent
             ml-4
             pl-4
             transition
@@ -51,7 +51,7 @@
         to="https://hoppscotch.io"
         class="flex transition items-center justify-center group"
       >
-        <span class="text-secondaryDark text-xs">
+        <span class="text-secondaryDark">
           Switch back to the Hoppscotch website
         </span>
       </SmartLink>

components/app/Header.vue

@@ -1,6 +1,8 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
-    <div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
+    <div
+      class="font-extrabold space-x-2 flex-shrink-0 inline-flex items-center"
+    >
       <AppLogo class="h-6 mr-4" /> Hoppscotch
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">

components/app/Shortcuts.vue

@@ -20,30 +20,38 @@
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
       </div>
-      <div class="p-4">
+      <div
+        class="
+          divide-y divide-dividerLight
+          flex flex-col flex-1
+          overflow-auto
+          hide-scrollbar
+        "
+      >
         <div
-          v-for="(shortcut, index) in shortcuts"
+          v-for="(map, mapIndex) in mappings"
-          :key="`shortcut-${index}`"
+          :key="`map-${mapIndex}`"
-          class="flex items-center"
+          class="space-y-4 p-4"
         >
-          <kbd
+          <h5 class="font-bold text-secondaryDark text-base">
-            v-for="(key, keyIndex) in shortcut.keys"
+            {{ map.section }}
-            :key="`shortcut-${index}-key-${keyIndex}`"
+          </h5>
-            class="
+          <div
-              border border-divider
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
-              rounded
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-              font-bold
+            class="flex items-center"
-              m-1
-              text-xs
-              py-1
-              px-2
-            "
           >
-            {{ key }}
+            <span class="flex flex-1 text-secondaryLight mr-4">
-          </kbd>
+              {{ shortcut.label }}
-          <span class="flex text-xs ml-4">
+            </span>
-            {{ shortcut.label }}
+            <span
-          </span>
+              v-for="(key, keyIndex) in shortcut.keys"
+              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
+              class="bg-dividerLight rounded ml-1 py-1 px-2 inline-flex"
+            >
+              {{ key }}
+            </span>
+          </div>
         </div>
       </div>
     </template>
@@ -59,50 +67,60 @@ export default {
   },
   data() {
     return {
-      shortcuts: [
+      mappings: [
         {
-          keys: [this.getSpecialKey(), "G"],
+          section: "General",
-          label: this.$t("send_request"),
+          shortcuts: [
+            {
+              keys: [this.getSpecialKey(), "G"],
+              label: this.$t("send_request"),
+            },
+            {
+              keys: [this.getSpecialKey(), "S"],
+              label: this.$t("save_to_collections"),
+            },
+            {
+              keys: [this.getSpecialKey(), "K"],
+              label: this.$t("copy_request_link"),
+            },
+            {
+              keys: [this.getSpecialKey(), "I"],
+              label: this.$t("reset_request"),
+            },
+          ],
         },
         {
-          keys: [this.getSpecialKey(), "S"],
+          section: "Request",
-          label: this.$t("save_to_collections"),
+          shortcuts: [
-        },
+            {
-        {
+              keys: ["Alt", "↑"],
-          keys: [this.getSpecialKey(), "K"],
+              label: this.$t("select_next_method"),
-          label: this.$t("copy_request_link"),
+            },
-        },
+            {
-        {
+              keys: ["Alt", "↓"],
-          keys: [this.getSpecialKey(), "I"],
+              label: this.$t("select_previous_method"),
-          label: this.$t("reset_request"),
+            },
-        },
+            {
-        {
+              keys: ["Alt", "G"],
-          keys: ["Alt", "▲"],
+              label: this.$t("select_get_method"),
-          label: this.$t("select_next_method"),
+            },
-        },
+            {
-        {
+              keys: ["Alt", "H"],
-          keys: ["Alt", "▼"],
+              label: this.$t("select_head_method"),
-          label: this.$t("select_previous_method"),
+            },
-        },
+            {
-        {
+              keys: ["Alt", "P"],
-          keys: ["Alt", "G"],
+              label: this.$t("select_post_method"),
-          label: this.$t("select_get_method"),
+            },
-        },
+            {
-        {
+              keys: ["Alt", "U"],
-          keys: ["Alt", "H"],
+              label: this.$t("select_put_method"),
-          label: this.$t("select_head_method"),
+            },
-        },
+            {
-        {
+              keys: ["Alt", "X"],
-          keys: ["Alt", "P"],
+              label: this.$t("select_delete_method"),
-          label: this.$t("select_post_method"),
+            },
-        },
+          ],
-        {
-          keys: ["Alt", "U"],
-          label: this.$t("select_put_method"),
-        },
-        {
-          keys: ["Alt", "X"],
-          label: this.$t("select_delete_method"),
         },
       ],
     }

components/app/Sidenav.vue

@@ -48,7 +48,6 @@ export default {
 
   span {
     @apply mt-2;
-    @apply text-xs;
     @apply font-semibold;
   }
 

components/app/SlideOver.vue

@@ -9,12 +9,12 @@
       leave-to-class="opacity-0"
     >
       <div
-        v-show="show"
+        v-if="show"
         class="inset-0 transition-opacity z-20 fixed"
         @keydown.esc="close()"
       >
         <div
-          class="bg-black opacity-25 inset-0 absolute"
+          class="bg-primaryDark opacity-75 inset-0 absolute"
           tabindex="0"
           @click="close()"
         ></div>
@@ -23,6 +23,7 @@
     <aside
       class="
         bg-primary
+        flex flex-col
         h-full
         max-w-full
         shadow-xl

components/button/Primary.vue

@@ -4,7 +4,7 @@
     :exact="exact"
     :blank="blank"
     class="
-      font-semibold
+      font-bold
       py-2
       transition
       inline-flex

components/collections/Add.vue

@@ -6,7 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelAdd" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelAdd" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/AddFolder.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
+        <label for="selectLabelAddFolder" class="font-semibold px-4 pb-4">
-          for="selectLabelAddFolder"
-          class="font-semibold text-xs px-4 pb-4"
-        >
           {{ $t("label") }}
         </label>
         <input

components/collections/ChooseType.vue

@@ -22,12 +22,11 @@
                 border-b border-dividerLight
                 flex
                 font-medium
-                text-xs
                 w-full
-                py-3
+                py-2
                 px-4
                 focus:outline-none
-                select
+                appearance-none
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >

components/collections/Edit.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEdit" class="font-semibold text-xs px-4 pb-4">{{
+        <label for="selectLabelEdit" class="font-semibold px-4 pb-4">{{
           $t("label")
         }}</label>
         <input

components/collections/EditFolder.vue

@@ -8,11 +8,9 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
+        <label for="selectLabelEditFolder" class="font-semibold px-4 pb-4">{{
-          for="selectLabelEditFolder"
+          $t("label")
-          class="font-semibold text-xs px-4 pb-4"
+        }}</label>
-          >{{ $t("label") }}</label
-        >
         <input
           id="selectLabelEditFolder"
           v-model="name"

components/collections/EditRequest.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEditReq" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelEditReq" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/SaveRequest.vue

@@ -6,7 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelSaveReq" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelSaveReq" class="font-semibold px-4 pb-4">
           {{ $t("request_name") }}
         </label>
         <input
@@ -15,9 +15,7 @@
           class="input"
           type="text"
         />
-        <label class="font-semibold text-xs px-4 pt-4 pb-4">
+        <label class="font-semibold px-4 pt-4 pb-4"> Select Location </label>
-          Select Location
-        </label>
         <CollectionsGraphql
           v-if="mode === 'graphql'"
           :doc="false"

components/collections/graphql/Add.vue

@@ -6,7 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelGqlAdd" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/AddFolder.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
+        <label for="selectLabelGqlAddFolder" class="font-semibold px-4 pb-4">
-          for="selectLabelGqlAddFolder"
-          class="font-semibold text-xs px-4 pb-4"
-        >
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/Collection.vue

@@ -10,15 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -97,7 +88,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
@@ -146,7 +137,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/graphql/Edit.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelGqlEdit" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/EditFolder.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
+        <label for="selectLabelGqlEditFolder" class="font-semibold px-4 pb-4">
-          for="selectLabelGqlEditFolder"
-          class="font-semibold text-xs px-4 pb-4"
-        >
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/EditRequest.vue

@@ -8,10 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
+        <label for="selectLabelGqlEditReq" class="font-semibold px-4 pb-4">
-          for="selectLabelGqlEditReq"
-          class="font-semibold text-xs px-4 pb-4"
-        >
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/Folder.vue

@@ -10,15 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -93,7 +84,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
@@ -145,7 +136,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>

components/collections/graphql/Request.vue

@@ -14,7 +14,6 @@
           flex
           font-mono font-bold
           mx-2
-          text-xs
           w-12
           justify-center
           items-center
@@ -32,9 +31,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark

components/collections/graphql/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="flex flex-col top-10 z-10 sticky"
+      class="flex flex-col top-8 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -18,8 +18,7 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
+          py-2
-          py-3
           px-4
           focus:outline-none
         "
@@ -63,7 +62,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -72,7 +71,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-xs text-center">
+      <span class="text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>

components/collections/index.vue

@@ -5,7 +5,7 @@
   >
     <div
       class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
-      :class="{ '!top-10': !saveRequest && !doc }"
+      :class="{ '!top-8': !saveRequest && !doc }"
     >
       <input
         v-if="!saveRequest"
@@ -18,8 +18,7 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
+          py-2
-          py-3
           px-4
           focus:outline-none
         "
@@ -98,7 +97,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
@@ -107,7 +106,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-xs text-center">
+      <span class="text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>

components/collections/my/Collection.vue

@@ -10,15 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -114,7 +105,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsMyFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
@@ -169,7 +160,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/my/Folder.vue

@@ -10,15 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -31,9 +23,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -98,7 +89,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsMyFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
@@ -154,7 +145,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>

components/collections/my/Request.vue

@@ -14,7 +14,6 @@
           flex
           font-mono font-bold
           mx-2
-          text-xs
           w-12
           justify-center
           items-center
@@ -40,9 +39,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark

components/collections/teams/Collection.vue

@@ -2,15 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -111,7 +102,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
         :key="`folder-${folder}`"
@@ -166,7 +157,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("collection_empty") }}
         </span>
       </div>

components/collections/teams/Folder.vue

@@ -2,15 +2,7 @@
   <div class="flex flex-col">
     <div class="flex items-center group">
       <span
-        class="
+        class="cursor-pointer flex w-10 justify-center items-center truncate"
-          cursor-pointer
-          flex
-          text-xs
-          w-10
-          justify-center
-          items-center
-          truncate
-        "
         @click="toggleShowChildren()"
       >
         <i class="material-icons" :class="{ 'text-green-400': isSelected }">
@@ -23,9 +15,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark
@@ -95,7 +86,7 @@
         />
       </tippy>
     </div>
-    <div v-show="showChildren || isFiltered">
+    <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="`subFolder-${subFolderIndex}`"
@@ -149,7 +140,7 @@
         "
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-xs text-center">
+        <span class="text-center">
           {{ $t("folder_empty") }}
         </span>
       </div>

components/collections/teams/Request.vue

@@ -7,7 +7,6 @@
           flex
           font-mono font-bold
           mx-2
-          text-xs
           w-12
           justify-center
           items-center
@@ -33,9 +32,8 @@
           flex
           font-semibold
           flex-1
-          text-xs
           min-w-0
-          py-3
+          py-2
           pr-2
           transition
           group-hover:text-secondaryDark

components/environments/Add.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEnvAdd" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelEnvAdd" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/environments/Edit.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelEnvEdit" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelEnvEdit" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input
@@ -20,10 +20,7 @@
           @keyup.enter="saveEnvironment"
         />
         <div class="flex flex-1 justify-between items-center">
-          <label
+          <label for="variableList" class="font-semibold px-4 pt-4 pb-4">
-            for="variableList"
-            class="font-semibold text-xs px-4 pt-4 pb-4"
-          >
             {{ $t("env_variable_list") }}
           </label>
           <div>
@@ -58,8 +55,7 @@
                 flex
                 font-semibold font-mono
                 flex-1
-                text-xs
+                py-2
-                py-3
                 px-4
                 focus:outline-none
               "
@@ -73,7 +69,6 @@
                 flex
                 font-semibold font-mono
                 flex-1
-                text-xs
                 py-2
                 px-4
                 focus:outline-none

components/environments/Environment.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="
+      class="cursor-pointer flex w-10 justify-center items-center truncate"
-        cursor-pointer
-        flex
-        text-xs
-        w-10
-        justify-center
-        items-center
-        truncate
-      "
       @click="$emit('edit-environment')"
     >
       <i class="material-icons">layers</i>
@@ -20,9 +12,8 @@
         flex
         font-semibold
         flex-1
-        text-xs
         min-w-0
-        py-3
+        py-2
         pr-2
         transition
         group-hover:text-secondaryDark

components/environments/index.vue

@@ -1,6 +1,6 @@
 <template>
   <AppSection label="environments">
-    <div class="bg-primary rounded-t flex flex-col top-10 z-10 sticky">
+    <div class="bg-primary rounded-t flex flex-col top-8 z-10 sticky">
       <div class="select-wrapper">
         <select
           v-model="selectedEnvironmentIndex"
@@ -10,12 +10,11 @@
             border-b border-dividerLight
             flex
             font-medium
-            text-xs
             w-full
-            py-3
+            py-2
             px-4
             focus:outline-none
-            select
+            appearance-none
           "
         >
           <option :value="-1">No environment</option>
@@ -64,7 +63,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">library_add</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("create_new_environment") }}
       </span>
     </div>

components/firebase/Login.vue

@@ -73,13 +73,13 @@
       </div>
     </template>
     <template #footer>
-      <p v-if="mode === 'sign-in'" class="text-secondaryLight text-xs">
+      <p v-if="mode === 'sign-in'" class="text-secondaryLight">
         By signing in, you are agreeing to our
         <SmartAnchor class="link" to="/index" label="Terms of Service" />
         and
         <SmartAnchor class="link" to="/index" label="Privacy Policy" />.
       </p>
-      <p v-if="mode === 'email'" class="text-secondaryLight text-xs">
+      <p v-if="mode === 'email'" class="text-secondaryLight">
         <SmartAnchor
           class="link"
           label="← All sign in options"
@@ -88,7 +88,7 @@
       </p>
       <p
         v-if="mode === 'email-sent'"
-        class="flex flex-1 text-secondaryLight text-xs justify-between"
+        class="flex flex-1 text-secondaryLight justify-between"
       >
         <SmartAnchor
           class="link"

components/graphql/Field.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="font-semibold text-xs field-title"
+      class="font-semibold field-title"
       :class="{ 'field-highlighted': isHighlighted }"
     >
       {{ fieldName }}
@@ -24,7 +24,7 @@
     </div>
     <div
       v-if="gqlField.description"
-      class="text-xs text-secondaryLight py-2 field-desc"
+      class="text-secondaryLight py-2 field-desc"
     >
       {{ gqlField.description }}
     </div>
@@ -35,7 +35,7 @@
         font-semibold
         bg-yellow-200
         my-1
-        text-xs text-black
+        text-black
         py-1
         px-2
         inline-block
@@ -45,10 +45,10 @@
       {{ $t("deprecated") }}
     </div>
     <div v-if="fieldArgs.length > 0">
-      <h5 class="my-2 text-xs">Arguments:</h5>
+      <h5 class="my-2">Arguments:</h5>
       <div class="border-divider border-l-2 pl-4">
         <div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
-          <span class="font-semibold text-xs">
+          <span class="font-semibold">
             {{ field.name }}:
             <GraphqlTypeLink
               :gql-type="field.type"
@@ -57,7 +57,7 @@
           </span>
           <div
             v-if="field.description"
-            class="text-xs text-secondaryLight py-2 field-desc"
+            class="text-secondaryLight py-2 field-desc"
           >
             {{ field.description }}
           </div>

components/graphql/Type.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-4">
     <div
-      class="font-semibold text-xs type-title"
+      class="font-semibold type-title"
       :class="{ 'text-accent': isHighlighted }"
     >
       <span v-if="isInput" class="text-accent">input </span>
@@ -9,14 +9,11 @@
       <span v-else-if="isEnum" class="text-accent">enum </span>
       {{ gqlType.name }}
     </div>
-    <div
+    <div v-if="gqlType.description" class="text-secondaryLight py-2 type-desc">
-      v-if="gqlType.description"
-      class="text-xs text-secondaryLight py-2 type-desc"
-    >
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0">
-      <h5 class="my-2 text-xs">Interfaces:</h5>
+      <h5 class="my-2">Interfaces:</h5>
       <div
         v-for="(gqlInterface, index) in interfaces"
         :key="`gqlInterface-${index}`"
@@ -29,7 +26,7 @@
       </div>
     </div>
     <div v-if="children.length > 0" class="mb-2">
-      <h5 class="my-2 text-xs">Children:</h5>
+      <h5 class="my-2">Children:</h5>
       <GraphqlTypeLink
         v-for="(child, index) in children"
         :key="`child-${index}`"
@@ -39,7 +36,7 @@
       />
     </div>
     <div v-if="gqlType.getFields">
-      <h5 class="my-2 text-xs">Fields:</h5>
+      <h5 class="my-2">Fields:</h5>
       <GraphqlField
         v-for="(field, index) in gqlType.getFields()"
         :key="`field-${index}`"
@@ -50,7 +47,7 @@
       />
     </div>
     <div v-if="isEnum">
-      <h5 class="my-2 text-xs">Values:</h5>
+      <h5 class="my-2">Values:</h5>
       <div
         v-for="(value, index) in gqlType.getValues()"
         :key="`value-${index}`"

components/graphql/TypeLink.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     :class="isScalar ? 'text-secondaryLight' : 'cursor-pointer text-accent'"
-    class="font-mono text-xs"
+    class="font-mono"
     @click="jumpToType"
   >
     {{ typeString }}

components/history/graphql/Card.vue

@@ -2,7 +2,18 @@
   <div class="flex flex-col group">
     <div class="flex items-center">
       <span
-        class="cursor-pointer flex font-semibold flex-1 text-xs min-w-0 py-3 pr-2 pl-4 transition group-hover:text-secondaryDark"
+        class="
+          cursor-pointer
+          flex
+          font-semibold
+          flex-1
+          min-w-0
+          py-2
+          pr-2
+          pl-4
+          transition
+          group-hover:text-secondaryDark
+        "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
       >
@@ -40,7 +51,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer font-mono text-xs text-secondaryLight px-4 truncate"
+        class="cursor-pointer font-mono text-secondaryLight px-4 truncate"
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
       >

components/history/index.vue

@@ -5,7 +5,7 @@
         bg-primaryLight
         border-b border-dividerLight
         flex
-        top-10
+        top-8
         z-10
         sticky
       "
@@ -18,8 +18,7 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
+          py-2
-          py-3
           px-4
           focus:outline-none
         "
@@ -60,7 +59,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-xs text-center">
+      <span class="text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>
@@ -69,7 +68,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">schedule</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("history_empty") }}
       </span>
     </div>

components/history/rest/Card.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex font-mono font-bold mx-2 text-xs w-12 justify-center items-center truncate"
+      class="
+        cursor-pointer
+        flex
+        font-mono font-bold
+        mx-2
+        w-12
+        justify-center
+        items-center
+        truncate
+      "
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="duration"
@@ -10,7 +19,17 @@
       {{ entry.method }}
     </span>
     <span
-      class="cursor-pointer flex font-semibold flex-1 text-xs min-w-0 py-3 pr-2 transition group-hover:text-secondaryDark"
+      class="
+        cursor-pointer
+        flex
+        font-semibold
+        flex-1
+        min-w-0
+        py-2
+        pr-2
+        transition
+        group-hover:text-secondaryDark
+      "
       data-testid="restore_history_entry"
       :title="duration"
       @click="$emit('use-entry')"

components/http/Body.vue

@@ -20,7 +20,6 @@
                   rounded
                   flex
                   font-semibold font-mono
-                  text-xs
                   w-full
                   py-2
                   px-4

components/http/BodyParameters.vue

@@ -6,14 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-110px
+        top-98px
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="reqParamList" class="font-semibold text-xs">
+      <label for="reqParamList" class="font-semibold">
         {{ $t("request_body") }}
       </label>
       <div class="flex">
@@ -41,7 +41,6 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
           py-2
           px-4
           focus:outline-none
@@ -60,7 +59,6 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
           py-2
           px-4
           focus:outline-none

components/http/CodegenModal.vue

@@ -6,7 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="requestType" class="font-semibold text-xs px-4 pb-4">
+        <label for="requestType" class="font-semibold px-4 pb-4">
           {{ $t("choose_language") }}
         </label>
         <div class="flex flex-1">
@@ -23,14 +23,13 @@
                 <span
                   class="
                     bg-primaryLight
-                    border-b border-dividerLight
+                    border border-dividerLight
                     rounded
                     cursor-pointer
                     flex
                     font-semibold
-                    text-xs
                     w-full
-                    py-3
+                    py-2
                     px-4
                     focus:outline-none
                   "
@@ -51,10 +50,7 @@
           </span>
         </div>
         <div class="flex flex-1 justify-between">
-          <label
+          <label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
-            for="generatedCode"
-            class="font-semibold text-xs px-4 pt-4 pb-4"
-          >
             {{ $t("generated_code") }}
           </label>
           <ButtonSecondary
@@ -73,7 +69,7 @@
           :options="{
             maxLines: '16',
             minLines: '8',
-            fontSize: '14px',
+            fontSize: '12px',
             autoScrollEditorIntoView: true,
             readOnly: true,
             showPrintMargin: false,

components/http/Headers.vue

@@ -6,14 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-110px
+        top-98px
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="headerList" class="font-semibold text-xs">
+      <label for="headerList" class="font-semibold">
         {{ $t("header_list") }}
       </label>
       <div class="flex">
@@ -61,7 +61,6 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
           py-2
           px-4
           focus:outline-none

components/http/Parameters.vue

@@ -6,14 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-110px
+        top-98px
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label class="font-semibold text-xs">
+      <label class="font-semibold">
         {{ $t("parameter_list") }}
       </label>
       <div class="flex">
@@ -47,7 +47,6 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
           py-2
           px-4
           focus:outline-none
@@ -70,7 +69,6 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
           py-2
           px-4
           focus:outline-none

components/http/PreRequestScript.vue

@@ -6,14 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-110px
+        top-98px
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label class="font-semibold text-xs">
+      <label class="font-semibold">
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -29,7 +29,7 @@
       :options="{
         maxLines: '16',
         minLines: '8',
-        fontSize: '14px',
+        fontSize: '12px',
         autoScrollEditorIntoView: true,
         showPrintMargin: false,
         useWorker: false,

components/http/RawBody.vue

@@ -6,14 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-110px
+        top-98px
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="rawBody" class="font-semibold text-xs">
+      <label for="rawBody" class="font-semibold">
         {{ $t("raw_request_body") }}
       </label>
       <div class="flex">
@@ -55,7 +55,7 @@
         :options="{
           maxLines: '16',
           minLines: '8',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           showPrintMargin: false,
           useWorker: false,

components/http/ResponseMeta.vue

@@ -11,7 +11,7 @@
       "
     >
       <i class="opacity-75 pb-2 material-icons">send</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("waiting_send_req") }}
       </span>
     </div>
@@ -28,17 +28,11 @@
           <span class="text-secondaryDark"> Status: </span>
           {{ response.statusCode || $t("waiting_send_req") }}
         </span>
-        <span
+        <span v-if="response.meta && response.meta.responseDuration">
-          v-if="response.meta && response.meta.responseDuration"
-          class="text-xs"
-        >
           <span class="text-secondaryDark"> Time: </span>
           {{ `${response.meta.responseDuration} ms` }}
         </span>
-        <span
+        <span v-if="response.meta && response.meta.responseSize">
-          v-if="response.meta && response.meta.responseSize"
-          class="text-xs"
-        >
           <span class="text-secondaryDark"> Size: </span>
           {{ `${response.meta.responseSize} B` }}
         </span>

components/http/TestResult.vue

@@ -3,7 +3,7 @@
     <div v-if="results.tests">
       <span
         v-if="results.tests.description"
-        class="font-semibold text-secondaryDark text-xs"
+        class="font-semibold text-secondaryDark"
       >
         {{ results.tests.description }}
       </span>
@@ -26,13 +26,10 @@
         >
           {{ result.status === "pass" ? "check_circle" : "cancel" }}
         </i>
-        <span
+        <span v-if="result.message" class="font-semibold text-secondaryDark">
-          v-if="result.message"
-          class="font-semibold text-secondaryDark text-xs"
-        >
           {{ result.message }}
         </span>
-        <span class="text-secondaryLight text-xs">
+        <span class="text-secondaryLight">
           {{
             ` \xA0 — \xA0test ${
               result.status === "pass" ? $t("passed") : $t("failed")

components/http/Tests.vue

@@ -6,14 +6,14 @@
         border-b border-dividerLight
         flex flex-1
         pl-4
-        top-110px
+        top-98px
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label class="font-semibold text-xs">
+      <label class="font-semibold">
         {{ $t("javascript_code") }}
       </label>
       <ButtonSecondary
@@ -29,7 +29,7 @@
       :options="{
         maxLines: '16',
         minLines: '8',
-        fontSize: '14px',
+        fontSize: '12px',
         autoScrollEditorIntoView: true,
         showPrintMargin: false,
         useWorker: false,
@@ -37,9 +37,21 @@
       complete-mode="test"
     />
     <div v-if="testResults">
-      <div class="flex flex-1 pl-4 items-center justify-between">
+      <div
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex flex-1
+          pl-4
+          top-98px
+          z-10
+          sticky
+          items-center
+          justify-between
+        "
+      >
         <div>
-          <label class="font-semibold text-xs"> Test Report </label>
+          <label class="font-semibold"> Test Report </label>
         </div>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -50,15 +62,13 @@
       </div>
       <div class="flex my-4 items-center">
         <div class="ml-4">
-          <span class="font-semibold text-xs text-red-500">
+          <span class="font-semibold text-red-500">
             {{ failedTests }} failing,
           </span>
-          <span class="font-semibold text-xs text-green-500">
+          <span class="font-semibold text-green-500">
             {{ passedTests }} successful,
           </span>
-          <span class="font-semibold text-xs">
+          <span class="font-semibold"> out of {{ totalTests }} tests. </span>
-            out of {{ totalTests }} tests.
-          </span>
         </div>
         <div class="bg-primaryDark flex space-x-2 flex-1 h-1 mx-4 relative">
           <div

components/landing/Footer.vue

@@ -158,7 +158,6 @@ export default {
 .footer-nav {
   @apply px-2 py-1;
   @apply -mx-2 -my-1;
-  @apply text-xs;
   @apply hover:text-secondaryDark;
   @apply focus:text-secondaryDark;
 }

components/lenses/HeadersRenderer.vue

@@ -6,19 +6,41 @@
       class="flex items-center"
     >
       <span
-        class="flex font-semibold text-xs min-w-0 p-2 transition group-hover:text-secondaryDark"
+        class="
+          flex
+          font-semibold
+          min-w-0
+          p-2
+          transition
+          group-hover:text-secondaryDark
+        "
       >
         <span class="truncate">
           {{ header.key }}
         </span>
       </span>
       <span
-        class="flex font-mono font-bold mx-2 text-xs justify-center items-center truncate"
+        class="
+          flex
+          font-mono font-bold
+          mx-2
+          justify-center
+          items-center
+          truncate
+        "
       >
         →
       </span>
       <span
-        class="flex font-semibold flex-1 text-xs min-w-0 p-2 transition group-hover:text-secondaryDark"
+        class="
+          flex
+          font-semibold
+          flex-1
+          min-w-0
+          p-2
+          transition
+          group-hover:text-secondaryDark
+        "
       >
         <span class="truncate">
           {{ header.value }}

components/lenses/ResponseBodyRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartTabs styles="sticky z-10 top-13">
+  <SmartTabs styles="sticky z-10 top-12">
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.lensName"

components/lenses/renderers/HTMLLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -48,7 +48,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/ImageLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/lenses/renderers/JSONLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -42,7 +42,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/RawLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -41,7 +41,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/XMLLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -41,7 +41,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/realtime/Log.vue

@@ -13,10 +13,10 @@
         justify-between
       "
     >
-      <label for="log" class="font-semibold text-xs py-2">{{ title }}</label>
+      <label for="log" class="font-semibold py-2">{{ title }}</label>
     </div>
     <div ref="log" name="log" class="realtime-log">
-      <span v-if="log">
+      <span v-if="log" class="space-y-2">
         <span
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
@@ -65,7 +65,7 @@ export default {
 
   &,
   span {
-    @apply font-mono;
+    @apply font-mono font-semibold;
     @apply select-text;
   }
 

components/realtime/Mqtt.vue

@@ -1,8 +1,8 @@
 <template>
-  <Splitpanes vertical :dbl-click-splitter="false">
+  <Splitpanes :dbl-click-splitter="false" vertical>
-    <Pane class="overflow-auto hide-scrollbar">
+    <Pane class="!overflow-auto hide-scrollbar">
-      <Splitpanes horizontal :dbl-click-splitter="false">
+      <Splitpanes :dbl-click-splitter="false" horizontal>
-        <Pane class="overflow-auto hide-scrollbar">
+        <Pane class="!overflow-auto hide-scrollbar">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
               <div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="overflow-auto hide-scrollbar">
+        <Pane class="!overflow-auto hide-scrollbar">
           <AppSection label="response">
             <RealtimeLog :title="$t('log')" :log="log" />
           </AppSection>
@@ -48,10 +48,10 @@
     </Pane>
     <Pane
       v-if="RIGHT_SIDEBAR"
-      max-size="30"
+      max-size="35"
       size="25"
       min-size="20"
-      class="overflow-auto hide-scrollbar"
+      class="!overflow-auto hide-scrollbar"
     >
       <AppSection label="messages">
         <label for="pub_topic">{{ $t("mqtt_topic") }}</label>

components/realtime/Socketio.vue

@@ -1,8 +1,8 @@
 <template>
-  <Splitpanes vertical :dbl-click-splitter="false">
+  <Splitpanes :dbl-click-splitter="false" vertical>
-    <Pane class="overflow-auto hide-scrollbar">
+    <Pane class="!overflow-auto hide-scrollbar">
-      <Splitpanes horizontal :dbl-click-splitter="false">
+      <Splitpanes :dbl-click-splitter="false" horizontal>
-        <Pane class="overflow-auto hide-scrollbar">
+        <Pane class="!overflow-auto hide-scrollbar">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
               <div class="flex-1 inline-flex">
@@ -59,7 +59,7 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="overflow-auto hide-scrollbar">
+        <Pane class="!overflow-auto hide-scrollbar">
           <AppSection label="response">
             <RealtimeLog :title="$t('log')" :log="communication.log" />
           </AppSection>
@@ -68,10 +68,10 @@
     </Pane>
     <Pane
       v-if="RIGHT_SIDEBAR"
-      max-size="30"
+      max-size="35"
       size="25"
       min-size="20"
-      class="overflow-auto hide-scrollbar"
+      class="!overflow-auto hide-scrollbar"
     >
       <AppSection label="messages">
         <label for="event_name">{{ $t("event_name") }}</label>

components/realtime/Sse.vue

@@ -1,6 +1,6 @@
 <template>
-  <Splitpanes horizontal :dbl-click-splitter="false">
+  <Splitpanes :dbl-click-splitter="false" horizontal>
-    <Pane class="overflow-auto hide-scrollbar">
+    <Pane class="!overflow-auto hide-scrollbar">
       <AppSection label="request">
         <div class="bg-primary flex p-4 top-0 z-10 sticky">
           <div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
         </div>
       </AppSection>
     </Pane>
-    <Pane class="overflow-auto hide-scrollbar">
+    <Pane class="!overflow-auto hide-scrollbar">
       <AppSection label="response">
         <ul>
           <li>

components/realtime/Websocket.vue

@@ -1,8 +1,8 @@
 <template>
-  <Splitpanes vertical :dbl-click-splitter="false">
+  <Splitpanes :dbl-click-splitter="false" vertical>
-    <Pane class="overflow-auto hide-scrollbar">
+    <Pane class="!overflow-auto hide-scrollbar">
-      <Splitpanes horizontal :dbl-click-splitter="false">
+      <Splitpanes :dbl-click-splitter="false" horizontal>
-        <Pane class="overflow-auto hide-scrollbar">
+        <Pane class="!overflow-auto hide-scrollbar">
           <AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
             <div class="flex-1 inline-flex">
               <input
@@ -52,7 +52,7 @@
               justify-between
             "
           >
-            <label class="font-semibold text-xs">
+            <label class="font-semibold">
               {{ $t("protocols") }}
             </label>
             <div class="flex">
@@ -87,7 +87,6 @@
                 flex
                 font-semibold font-mono
                 flex-1
-                text-xs
                 py-2
                 px-4
                 focus:outline-none
@@ -132,7 +131,7 @@
             </div>
           </div>
         </Pane>
-        <Pane class="overflow-auto hide-scrollbar">
+        <Pane class="!overflow-auto hide-scrollbar">
           <AppSection label="response">
             <RealtimeLog :title="$t('log')" :log="communication.log" />
           </AppSection>
@@ -141,14 +140,14 @@
     </Pane>
     <Pane
       v-if="RIGHT_SIDEBAR"
-      max-size="30"
+      max-size="35"
       size="25"
       min-size="20"
-      class="overflow-auto hide-scrollbar"
+      class="!overflow-auto hide-scrollbar"
     >
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="websocket-message" class="font-semibold text-xs pb-4">
+          <label for="websocket-message" class="font-semibold pb-4">
             {{ $t("message") }}
           </label>
           <input

components/smart/AceEditor.vue

@@ -10,6 +10,7 @@
         font-mono
         flex-1
         shadow-lg
+        py-1
         px-4
         bottom-0
         z-10
@@ -25,7 +26,7 @@
           cursor-pointer
           font-semibold
           flex-grow-0 flex-shrink-0
-          text-secondaryLight text-xs
+          text-secondaryLight
           inline-flex
           items-center
           hover:text-secondary

components/smart/AutoComplete.vue

@@ -8,7 +8,6 @@
         flex
         font-semibold font-mono
         flex-1
-        text-xs
         py-2
         px-4
         focus:outline-none
@@ -220,8 +219,7 @@ export default {
       @apply w-full;
       @apply block;
       @apply py-2 px-4;
-      @apply text-xs;
+      @apply font-semibold font-mono;
-      @apply font-mono;
 
       &:last-child {
         border-radius: 0 0 8px 8px;

components/smart/ConfirmModal.vue

@@ -8,7 +8,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label class="font-semibold text-xs">
+        <label class="font-semibold">
           {{ title }}
         </label>
       </div>

components/smart/DeletableChip.vue

@@ -19,7 +19,7 @@
   @apply pl-4;
   @apply bg-primaryDark;
   @apply text-secondary;
-  @apply font-mono;
+  @apply font-mono font-semibold;
   @apply border border-divider;
 }
 

components/smart/Item.vue

@@ -45,7 +45,7 @@
       <div class="font-semibold">
         {{ label }}
       </div>
-      <p v-if="description" class="my-2 text-xs text-left text-secondaryLight">
+      <p v-if="description" class="my-2 text-left text-secondaryLight">
         {{ description }}
       </p>
     </div>

components/smart/Spinner.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="h-5 animate-spin w-5"
+    class="h-4 animate-spin w-4"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"

components/smart/Tabs.vue

@@ -82,10 +82,9 @@ export default {
     @apply flex;
     @apply items-center;
     @apply justify-center;
-    @apply px-4 py-3;
+    @apply px-4 py-2;
     @apply text-secondary;
     @apply font-semibold;
-    @apply text-xs;
     @apply cursor-pointer;
     @apply transition;
     @apply hover:text-secondaryDark;

components/smart/Toggle.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="cursor-pointer flex-nowrap inline-flex" @click="$emit('change')">
+  <div
+    class="cursor-pointer flex-nowrap inline-flex items-center justify-center"
+    @click="$emit('change')"
+  >
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label
+    <label class="cursor-pointer font-semibold pl-0 align-middle truncate">
-      class="cursor-pointer font-semibold text-xs pl-0 align-middle truncate"
-    >
       <slot></slot>
     </label>
   </div>
@@ -29,15 +30,16 @@ $activeColor: var(--accent-color);
 $inactiveColor: var(--divider-color);
 $inactiveHandleColor: var(--primary-color);
 $activeHandleColor: var(--primary-color);
-$width: 2rem;
+$width: 1.6rem;
-$height: 1rem;
+$height: 0.78rem;
-$handleSpacing: 0.25rem;
+$handleSpacing: 0.2rem;
 $transition: all 0.2s ease-in-out;
 
 .toggle {
   @apply relative;
-  @apply inline-block;
+  @apply inline-flex;
-  @apply align-middle;
+  @apply items-center;
+  @apply justify-center;
   @apply rounded-full;
   @apply p-0;
   @apply mr-4;

components/teams/Add.vue

@@ -6,7 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label for="selectLabelTeamAdd" class="font-semibold text-xs px-4 pb-4">
+        <label for="selectLabelTeamAdd" class="font-semibold px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/teams/Edit.vue

@@ -6,10 +6,7 @@
     </template>
     <template #body>
       <div class="flex flex-col px-2">
-        <label
+        <label for="selectLabelTeamEdit" class="font-semibold px-4 pb-4">
-          for="selectLabelTeamEdit"
-          class="font-semibold text-xs px-4 pb-4"
-        >
           {{ $t("label") }}
         </label>
         <input
@@ -20,7 +17,7 @@
           :placeholder="editingTeam.name"
           @keyup.enter="saveTeam"
         />
-        <label for="memberList" class="font-semibold text-xs px-4 pt-4 pb-4">
+        <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
           {{ $t("team_member_list") }}
         </label>
         <ul

components/teams/index.vue

@@ -38,7 +38,7 @@
     <p v-if="myTeams.length === 0">
       <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
     </p>
-    <div v-else class="overflow-auto hide-scrollbar">
+    <div v-else class="!overflow-auto hide-scrollbar">
       <ul class="flex-col">
         <li v-for="(team, index) in myTeams" :key="`team-${index}`">
           <TeamsTeam

layouts/default.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex h-screen w-screen">
-    <Splitpanes horizontal :dbl-click-splitter="false">
+    <Splitpanes :dbl-click-splitter="false" horizontal>
-      <Pane class="flex flex-1 overflow-auto">
+      <Pane class="flex flex-1 !overflow-auto">
-        <Splitpanes vertical :dbl-click-splitter="false">
+        <Splitpanes :dbl-click-splitter="false" vertical>
           <Pane
             v-if="LEFT_SIDEBAR"
             style="width: auto"
@@ -10,13 +10,13 @@
           >
             <AppSidenav />
           </Pane>
-          <Pane class="flex flex-1 overflow-auto">
+          <Pane class="flex flex-1 !overflow-auto">
-            <Splitpanes horizontal :dbl-click-splitter="false">
+            <Splitpanes :dbl-click-splitter="false" horizontal>
               <Pane v-if="!ZEN_MODE" style="height: auto">
                 <!-- <AppAnnouncement /> -->
                 <AppHeader />
               </Pane>
-              <Pane class="flex flex-1 overflow-auto">
+              <Pane class="flex flex-1 !overflow-auto">
                 <nuxt class="flex flex-1" />
               </Pane>
             </Splitpanes>

layouts/error.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="page page-error">
     <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
-    <h3 class="font-mono text-xs mb-4 heading">{{ message }}</h3>
+    <h3 class="font-mono text-xs">{{ message }}</h3>
-    <p class="border-t border-divider mt-4">
+    <p class="mt-4">
       <ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
       <ButtonSecondary
         icon="refresh"

nuxt.config.js

@@ -207,7 +207,7 @@ export default {
   googleFonts: {
     display: "block",
     families: {
-      Montserrat: [400, 500, 600, 700, 800],
+      Inter: [400, 500, 600, 700, 800],
       "Material+Icons": true,
       "Roboto+Mono": true,
     },

package-lock.json

@@ -9,7 +9,7 @@
       "dependencies": {
         "@apollo/client": "^3.3.21",
         "@nuxtjs/axios": "^5.13.6",
-        "@nuxtjs/composition-api": "^0.24.7",
+        "@nuxtjs/composition-api": "^0.25.1",
         "@nuxtjs/gtm": "^2.4.0",
         "@nuxtjs/robots": "^2.5.0",
         "@nuxtjs/sitemap": "^2.4.0",
@@ -5414,11 +5414,11 @@
       "dev": true
     },
     "node_modules/@nuxtjs/composition-api": {
-      "version": "0.24.7",
+      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.24.7.tgz",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.25.1.tgz",
-      "integrity": "sha512-q633RvsCi3veuGzTSkP/+a55Fn9EZS1APV2GJrdjajnBKKOMNPIXlAC8xAWGcsHE73/Cgf9DfGURQhcFvERRJA==",
+      "integrity": "sha512-YoRVwt8zmdomYeaRM7AcQ8K7jlz/T3vz6Yn5EBVZqYOuQ6e7b987DBrZFbxr6yCsx5ytaihD+nJyDM8+XPfcOw==",
       "dependencies": {
-        "@vue/composition-api": "1.0.0-rc.14",
+        "@vue/composition-api": "^1.0.4",
         "defu": "^5.0.0",
         "estree-walker": "^2.0.2",
         "fs-extra": "^9.1.0",
@@ -7899,9 +7899,9 @@
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
     "node_modules/@vue/composition-api": {
-      "version": "1.0.0-rc.14",
+      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.14.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.4.tgz",
-      "integrity": "sha512-WKbOiy1zk8loM7ma88fOH0yacOEfMIQb0IZJEq561A+4C8GvLSqVSLT5K1iBVkzzJ07Pha8ntbeWSUQlBhRDKg==",
+      "integrity": "sha512-3OzvW8RS7/7kxE+SDXm8zSLZRy9GtCYwyLYdnGtIsqXRSt5nWkA7zu80Cw8Vg+67jglrpMdVBBy7AUXAB34ZSw==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -35791,11 +35791,11 @@
       }
     },
     "@nuxtjs/composition-api": {
-      "version": "0.24.7",
+      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.24.7.tgz",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.25.1.tgz",
-      "integrity": "sha512-q633RvsCi3veuGzTSkP/+a55Fn9EZS1APV2GJrdjajnBKKOMNPIXlAC8xAWGcsHE73/Cgf9DfGURQhcFvERRJA==",
+      "integrity": "sha512-YoRVwt8zmdomYeaRM7AcQ8K7jlz/T3vz6Yn5EBVZqYOuQ6e7b987DBrZFbxr6yCsx5ytaihD+nJyDM8+XPfcOw==",
       "requires": {
-        "@vue/composition-api": "1.0.0-rc.14",
+        "@vue/composition-api": "^1.0.4",
         "defu": "^5.0.0",
         "estree-walker": "^2.0.2",
         "fs-extra": "^9.1.0",
@@ -37985,9 +37985,9 @@
       }
     },
     "@vue/composition-api": {
-      "version": "1.0.0-rc.14",
+      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.14.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.4.tgz",
-      "integrity": "sha512-WKbOiy1zk8loM7ma88fOH0yacOEfMIQb0IZJEq561A+4C8GvLSqVSLT5K1iBVkzzJ07Pha8ntbeWSUQlBhRDKg==",
+      "integrity": "sha512-3OzvW8RS7/7kxE+SDXm8zSLZRy9GtCYwyLYdnGtIsqXRSt5nWkA7zu80Cw8Vg+67jglrpMdVBBy7AUXAB34ZSw==",
       "requires": {
         "tslib": "^2.3.0"
       },

package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@apollo/client": "^3.3.21",
     "@nuxtjs/axios": "^5.13.6",
-    "@nuxtjs/composition-api": "^0.24.7",
+    "@nuxtjs/composition-api": "^0.25.1",
     "@nuxtjs/gtm": "^2.4.0",
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",

pages/documentation.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <Splitpanes vertical :dbl-click-splitter="false">
+    <Splitpanes :dbl-click-splitter="false" vertical>
-      <Pane class="overflow-auto hide-scrollbar">
+      <Pane class="!overflow-auto hide-scrollbar">
-        <Splitpanes horizontal :dbl-click-splitter="false">
+        <Splitpanes :dbl-click-splitter="false" horizontal>
-          <Pane class="overflow-auto hide-scrollbar">
+          <Pane class="!overflow-auto hide-scrollbar">
             <AppSection label="import">
               <div class="flex flex-col">
                 <label>{{ $t("collection") }}</label>
@@ -43,7 +43,7 @@
                   :options="{
                     maxLines: '16',
                     minLines: '8',
-                    fontSize: '14px',
+                    fontSize: '12px',
                     autoScrollEditorIntoView: true,
                     showPrintMargin: false,
                     useWorker: false,
@@ -57,7 +57,7 @@
               </div>
             </AppSection>
           </Pane>
-          <Pane class="overflow-auto hide-scrollbar">
+          <Pane class="!overflow-auto hide-scrollbar">
             <AppSection label="documentation">
               <div class="flex flex-col">
                 <label>{{ $t("documentation") }}</label>
@@ -104,10 +104,10 @@
       </Pane>
       <Pane
         v-if="RIGHT_SIDEBAR"
-        max-size="30"
+        max-size="35"
         size="25"
         min-size="20"
-        class="overflow-auto hide-scrollbar"
+        class="!overflow-auto hide-scrollbar"
       >
         <aside>
           <Collections

pages/enter.vue

@@ -3,10 +3,10 @@
     <span v-if="signingInWithEmail">
       <SmartSpinner />
     </span>
-    <span v-else class="text-secondaryLight text-xs">
+    <span v-else class="text-secondaryLight">
       {{ $t("waiting_for_connection") }}
     </span>
-    <pre v-if="error" class="font-mono text-xs">{{ error }}</pre>
+    <pre v-if="error" class="font-mono">{{ error }}</pre>
   </div>
 </template>
 

pages/graphql.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <Splitpanes vertical :dbl-click-splitter="false">
+    <Splitpanes :dbl-click-splitter="false" vertical>
-      <Pane class="overflow-auto hide-scrollbar">
+      <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes horizontal :dbl-click-splitter="false">
+        <Splitpanes :dbl-click-splitter="false" horizontal>
-          <Pane class="overflow-auto hide-scrollbar">
+          <Pane class="hide-scrollbar !overflow-auto">
-            <div class="bg-primary flex p-4 top-0 z-20 sticky">
+            <div class="bg-primary flex p-4 top-0 z-10 sticky">
               <div class="flex-1 inline-flex">
                 <input
                   id="url"
@@ -37,7 +37,7 @@
                 />
               </div>
             </div>
-            <SmartTabs styles="sticky top-68px z-10">
+            <SmartTabs styles="sticky top-16 z-10">
               <SmartTab :id="'query'" :label="$t('query')" :selected="true">
                 <AppSection label="query">
                   <div
@@ -46,7 +46,7 @@
                       border-b border-dividerLight
                       flex flex-1
                       pl-4
-                      top-108px
+                      top-24
                       z-10
                       sticky
                       items-center
@@ -54,7 +54,7 @@
                       gqlRunQuery
                     "
                   >
-                    <label for="gqlQuery" class="font-semibold text-xs">
+                    <label for="gqlQuery" class="font-semibold">
                       {{ $t("query") }}
                     </label>
                     <div class="flex">
@@ -62,7 +62,7 @@
                         :label="$t('run')"
                         :shortcut="[getSpecialKey(), 'Enter']"
                         icon="play_arrow"
-                        class="text-xs !text-accent"
+                        class="!text-accent"
                         @click.native="runQuery()"
                       />
                       <ButtonSecondary
@@ -95,7 +95,7 @@
                     :options="{
                       maxLines: Infinity,
                       minLines: '16',
-                      fontSize: '14px',
+                      fontSize: '12px',
                       autoScrollEditorIntoView: true,
                       showPrintMargin: false,
                       useWorker: false,
@@ -113,14 +113,14 @@
                       border-b border-dividerLight
                       flex flex-1
                       pl-4
-                      top-108px
+                      top-24
                       z-10
                       sticky
                       items-center
                       justify-between
                     "
                   >
-                    <label class="font-semibold text-xs">
+                    <label class="font-semibold">
                       {{ $t("variables") }}
                     </label>
                     <div class="flex">
@@ -147,7 +147,7 @@
                     :options="{
                       maxLines: Infinity,
                       minLines: '16',
-                      fontSize: '14px',
+                      fontSize: '12px',
                       autoScrollEditorIntoView: true,
                       showPrintMargin: false,
                       useWorker: false,
@@ -164,14 +164,14 @@
                       border-b border-dividerLight
                       flex flex-1
                       pl-4
-                      top-108px
+                      top-24
                       z-10
                       sticky
                       items-center
                       justify-between
                     "
                   >
-                    <label class="font-semibold text-xs">
+                    <label class="font-semibold">
                       {{ $t("headers") }}
                     </label>
                     <div class="flex">
@@ -218,7 +218,6 @@
                         flex
                         font-semibold font-mono
                         flex-1
-                        text-xs
                         py-2
                         px-4
                         focus:outline-none
@@ -276,7 +275,7 @@
               </SmartTab>
             </SmartTabs>
           </Pane>
-          <Pane class="overflow-auto hide-scrollbar">
+          <Pane class="hide-scrollbar !overflow-auto">
             <AppSection ref="response" label="response">
               <div
                 v-if="response"
@@ -292,7 +291,7 @@
                   justify-between
                 "
               >
-                <label class="font-semibold text-xs" for="responseField">
+                <label class="font-semibold" for="responseField">
                   {{ $t("response") }}
                 </label>
                 <div class="flex">
@@ -320,7 +319,7 @@
                 :options="{
                   maxLines: Infinity,
                   minLines: '16',
-                  fontSize: '14px',
+                  fontSize: '12px',
                   autoScrollEditorIntoView: true,
                   readOnly: true,
                   showPrintMargin: false,
@@ -339,7 +338,7 @@
                 "
               >
                 <i class="opacity-75 pb-2 material-icons">send</i>
-                <span class="text-xs text-center">
+                <span class="text-center">
                   {{ $t("waiting_send_req") }}
                 </span>
               </div>
@@ -349,16 +348,16 @@
       </Pane>
       <Pane
         v-if="RIGHT_SIDEBAR"
-        max-size="30"
+        max-size="35"
         size="25"
         min-size="20"
-        class="overflow-auto hide-scrollbar"
+        class="hide-scrollbar !overflow-auto"
       >
         <aside>
           <SmartTabs styles="sticky z-10 top-0">
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
-                <div class="bg-primaryLight flex flex-col top-10 z-10 sticky">
+                <div class="bg-primaryLight flex flex-col top-8 z-10 sticky">
                   <input
                     v-model="graphqlFieldsFilterText"
                     type="text"
@@ -368,8 +367,7 @@
                       flex
                       font-semibold font-mono
                       flex-1
-                      text-xs
+                      py-2
-                      py-3
                       px-4
                       focus:outline-none
                     "
@@ -378,7 +376,7 @@
                 <SmartTabs
                   ref="gqlTabs"
                   styles="
-                    border-t border-dividerLight sticky z-10 top-20"
+                    border-t border-dividerLight sticky z-8 top-16"
                 >
                   <div class="gqlTabs">
                     <SmartTab
@@ -463,7 +461,7 @@
                   "
                 >
                   <i class="opacity-75 pb-2 material-icons">link</i>
-                  <span class="text-xs text-center">
+                  <span class="text-center">
                     {{ $t("connect_graphql_endpoint") }}
                   </span>
                 </div>
@@ -491,14 +489,14 @@
                     border-b border-dividerLight
                     flex flex-1
                     pl-4
-                    top-10
+                    top-8
                     z-10
                     sticky
                     items-center
                     justify-between
                   "
                 >
-                  <label class="font-semibold text-xs">
+                  <label class="font-semibold">
                     {{ $t("schema") }}
                   </label>
                   <div class="flex">
@@ -525,7 +523,7 @@
                   :options="{
                     maxLines: Infinity,
                     minLines: '16',
-                    fontSize: '14px',
+                    fontSize: '12px',
                     autoScrollEditorIntoView: true,
                     readOnly: true,
                     showPrintMargin: false,
@@ -543,7 +541,7 @@
                   "
                 >
                   <i class="opacity-75 pb-2 material-icons">link</i>
-                  <span class="text-xs text-center">
+                  <span class="text-center">
                     {{ $t("connect_graphql_endpoint") }}
                   </span>
                 </div>

pages/index.vue

@@ -1,12 +1,12 @@
 <template>
   <!-- eslint-disable -->
   <div>
-    <Splitpanes vertical :dbl-click-splitter="false">
+    <Splitpanes :dbl-click-splitter="false" vertical>
-      <Pane class="overflow-auto hide-scrollbar">
+      <Pane class="hide-scrollbar !overflow-auto">
-        <Splitpanes horizontal :dbl-click-splitter="false">
+        <Splitpanes :dbl-click-splitter="false" horizontal>
-          <Pane class="overflow-auto hide-scrollbar">
+          <Pane class="hide-scrollbar !overflow-auto">
             <HttpRequest />
-            <SmartTabs styles="sticky top-70px z-10">
+            <SmartTabs styles="sticky top-66px z-10">
               <SmartTab
                 :id="'params'"
                 :label="$t('parameters')"
@@ -257,17 +257,17 @@
               </SmartTab>
             </SmartTabs>
           </Pane>
-          <Pane class="overflow-auto hide-scrollbar">
+          <Pane class="hide-scrollbar !overflow-auto">
             <HttpResponse ref="response" />
           </Pane>
         </Splitpanes>
       </Pane>
       <Pane
         v-if="RIGHT_SIDEBAR"
-        max-size="30"
+        max-size="35"
         size="25"
         min-size="20"
-        class="overflow-auto hide-scrollbar"
+        class="hide-scrollbar !overflow-auto"
       >
         <aside>
           <SmartTabs styles="sticky z-10 top-0">

pages/settings.vue

@@ -6,16 +6,14 @@
           <h3 class="heading">
             {{ $t("account") }}
           </h3>
-          <p class="mt-1 text-xs text-secondaryLight">
+          <p class="mt-1 text-secondaryLight">
             Customize your account settings.
           </p>
         </div>
         <div class="p-8 md:col-span-2">
           <div v-if="currentUser === null">
             <ButtonPrimary label="Log in" @click.native="showLogin = true" />
-            <div class="mt-4 text-xs text-secondaryLight">
+            <div class="mt-4 text-secondaryLight">Log in to access.</div>
-              Log in to access.
-            </div>
           </div>
           <div v-else class="space-y-8">
             <fieldset>
@@ -34,7 +32,7 @@
                     <label>
                       {{ currentUser.displayName || $t("nothing_found") }}
                     </label>
-                    <p class="mt-1 text-xs text-secondaryLight">
+                    <p class="mt-1 text-secondaryLight">
                       This is your display name.
                     </p>
                   </div>
@@ -47,7 +45,7 @@
                     <label>
                       {{ currentUser.email || $t("nothing_found") }}
                     </label>
-                    <p class="mt-1 text-xs text-secondaryLight">
+                    <p class="mt-1 text-secondaryLight">
                       Your primary email address.
                     </p>
                   </div>
@@ -56,7 +54,7 @@
             </fieldset>
             <fieldset>
               <legend class="font-bold text-secondaryDark">Sync</legend>
-              <div class="mt-1 text-xs text-secondaryLight">
+              <div class="mt-1 text-secondaryLight">
                 These settings are synced to cloud.
               </div>
               <div class="space-y-4 mt-4">
@@ -99,7 +97,7 @@
           <h3 class="heading">
             {{ $t("theme") }}
           </h3>
-          <p class="mt-1 text-xs text-secondaryLight">
+          <p class="mt-1 text-secondaryLight">
             Customize your application theme.
           </p>
         </div>
@@ -108,7 +106,7 @@
             <legend class="font-bold text-secondaryDark">
               {{ $t("background") }}
             </legend>
-            <div class="mt-1 text-xs text-secondaryLight">
+            <div class="mt-1 text-secondaryLight">
               <ColorScheme placeholder="..." tag="span">
                 {{
                   $colorMode.preference.charAt(0).toUpperCase() +
@@ -127,7 +125,7 @@
             <legend class="font-bold text-secondaryDark">
               {{ $t("color") }}
             </legend>
-            <div class="mt-1 text-xs text-secondaryLight">
+            <div class="mt-1 text-secondaryLight">
               {{ active.charAt(0).toUpperCase() + active.slice(1) }}
             </div>
             <div class="mt-4">
@@ -138,7 +136,7 @@
             <legend class="font-bold text-secondaryDark">
               {{ $t("experiments") }}
             </legend>
-            <div class="mt-1 text-xs text-secondaryLight">
+            <div class="mt-1 text-secondaryLight">
               {{ $t("experiments_notice") }}
               <SmartLink
                 class="link"
@@ -205,7 +203,7 @@
           <h3 class="heading">
             {{ $t("interceptor") }}
           </h3>
-          <p class="mt-1 text-xs text-secondaryLight">
+          <p class="mt-1 text-secondaryLight">
             Middleware between application and APIs.
           </p>
         </div>
@@ -214,7 +212,7 @@
             <legend class="font-bold text-secondaryDark">
               {{ $t("extensions") }}
             </legend>
-            <div class="mt-1 text-xs text-secondaryLight">
+            <div class="mt-1 text-secondaryLight">
               <span v-if="extensionVersion != null">
                 {{
                   `${$t("extension_version")}: v${extensionVersion.major}.${
@@ -262,7 +260,7 @@
             <legend class="font-bold text-secondaryDark">
               {{ $t("proxy") }}
             </legend>
-            <div class="mt-1 text-xs text-secondaryLight">
+            <div class="mt-1 text-secondaryLight">
               {{ `${$t("official_proxy_hosting")} ${$t("read_the")}` }}
               <SmartLink
                 class="link"
@@ -284,7 +282,6 @@
                     bg-primaryLight
                     border border-divider
                     rounded-l
-                    text-xs
                     ml-2
                     py-2
                     px-4
@@ -301,7 +298,6 @@
                     rounded-r
                     font-semibold font-mono
                     flex-1
-                    text-xs
                     mr-2
                     w-full
                     py-2