chore(ui): improve ui consistency

packages/hoppscotch-app/assets/icons/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+</svg>

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

@@ -45,11 +45,11 @@
   --secondary-light-color: theme("colors.true-gray.500");
   --secondary-dark-color: theme("colors.true-gray.100");
   --divider-color: theme("colors.true-gray.800");
-  --divider-light-color: theme("colors.dark.700");
+  --divider-light-color: theme("colors.dark.800");
   --divider-dark-color: theme("colors.dark.300");
   --error-color: theme("colors.warm-gray.900");
   --tooltip-color: theme("colors.true-gray.100");
-  --popover-color: theme("colors.dark.700");
+  --popover-color: theme("colors.dark.600");
   --editor-theme: "twilight";
 }
 

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

@@ -97,6 +97,20 @@
                 }
               "
             />
+            <SmartItem
+              svg="gift"
+              :label="`${t('app.whats_new')}`"
+              to="https://docs.hoppscotch.io/changelog"
+              blank
+              @click.native="options.tippy().hide()"
+            />
+            <SmartItem
+              svg="activity"
+              :label="t('app.status')"
+              to="https://status.hoppscotch.io"
+              blank
+              @click.native="options.tippy().hide()"
+            />
             <hr />
             <SmartItem
               svg="github"
@@ -129,14 +143,6 @@
               blank
               @click.native="options.tippy().hide()"
             />
-            <SmartItem
-              svg="gift"
-              :label="`${t('app.whats_new')}`"
-              to="https://docs.hoppscotch.io/changelog"
-              blank
-              @click.native="options.tippy().hide()"
-            />
-            <!-- <SmartItem :label="t('app.status')" /> -->
             <div class="flex opacity-50 py-2 px-4">
               {{ `${t("app.name")} ${t("app.version")}` }}
             </div>

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

@@ -85,6 +85,15 @@
                   svg="user"
                 />
               </template>
+              <div class="flex text-tiny px-2 flex-col">
+                <span class="inline-flex truncate font-semibold">
+                  {{ currentUser.displayName }}
+                </span>
+                <span class="inline-flex truncate text-secondaryLight">
+                  {{ currentUser.email }}
+                </span>
+              </div>
+              <hr />
               <div
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col space-y-4 p-4 items-start">
+  <div class="flex flex-col space-y-4 p-4">
     <div class="flex flex-col">
-      <h2 class="inline-flex font-semibold text-secondaryDark pb-2">
+      <h2 class="inline-flex font-semibold text-secondaryDark pb-1">
         {{ t("settings.interceptor") }}
       </h2>
-      <p class="inline-flex">
+      <p class="inline-flex text-tiny">
         {{ t("settings.interceptor_description") }}
       </p>
     </div>

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

@@ -29,6 +29,7 @@
                 ? 'radio_button_checked'
                 : 'radio_button_unchecked'
             "
+            :active="authName === 'None'"
             @click.native="
               () => {
                 authType = 'none'
@@ -43,6 +44,7 @@
                 ? 'radio_button_checked'
                 : 'radio_button_unchecked'
             "
+            :active="authName === 'Basic Auth'"
             @click.native="
               () => {
                 authType = 'basic'
@@ -57,6 +59,7 @@
                 ? 'radio_button_checked'
                 : 'radio_button_unchecked'
             "
+            :active="authName === 'Bearer'"
             @click.native="
               () => {
                 authType = 'bearer'
@@ -71,6 +74,7 @@
                 ? 'radio_button_checked'
                 : 'radio_button_unchecked'
             "
+            :active="authName === 'OAuth 2.0'"
             @click.native="
               () => {
                 authType = 'oauth-2'
@@ -85,6 +89,7 @@
                 ? 'radio_button_checked'
                 : 'radio_button_unchecked'
             "
+            :active="authName === 'API key'"
             @click.native="
               () => {
                 authType = 'api-key'
@@ -223,6 +228,7 @@
                     ? 'radio_button_checked'
                     : 'radio_button_unchecked'
                 "
+                :active="addTo === 'Headers'"
                 :label="'Headers'"
                 @click.native="
                   () => {
@@ -237,6 +243,7 @@
                     ? 'radio_button_checked'
                     : 'radio_button_unchecked'
                 "
+                :active="addTo === 'Query params'"
                 :label="'Query params'"
                 @click.native="
                   () => {

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

@@ -69,11 +69,11 @@
           {{ t("error.network_fail") }}
         </span>
         <span
-          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+          class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
         >
           {{ t("helpers.network_fail") }}
         </span>
-        <AppInterceptor />
+        <AppInterceptor class="border border-dividerLight rounded" />
       </div>
       <div
         v-if="response.type === 'script_fail'"
@@ -89,7 +89,7 @@
           {{ t("error.script_fail") }}
         </span>
         <span
-          class="max-w-sm text-secondaryLight text-center mb-4 whitespace-normal"
+          class="max-w-sm text-secondaryLight text-center mb-6 whitespace-normal"
         >
           {{ t("helpers.script_fail") }}
         </span>

packages/hoppscotch-app/components/smart/ChangeLanguage.vue

@@ -16,15 +16,23 @@
         </span>
       </template>
       <NuxtLink
-        v-for="(locale, index) in $i18n.locales.filter(
+        v-for="(locale, index) in $i18n.locales"
-          ({ code }) => code !== $i18n.locale
+        :key="`locale-${index}`"
-        )"
-        :key="`locale-${String(index)}`"
         :to="switchLocalePath(locale.code)"
-        @click="$refs.language.tippy().hide()"
+        @click="language.tippy().hide()"
       >
-        <SmartItem :label="locale.name" />
+        <SmartItem
+          :label="locale.name"
+          :active-info-icon="$i18n.locale === locale.code"
+          :info-icon="$i18n.locale === locale.code ? 'done' : null"
+        />
       </NuxtLink>
     </tippy>
   </span>
 </template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+
+const language = ref<any | null>(null)
+</script>

packages/hoppscotch-app/components/smart/FontSizePicker.vue

@@ -22,10 +22,11 @@
         :icon="
           size === active ? 'radio_button_checked' : 'radio_button_unchecked'
         "
+        :active="size === active"
         @click.native="
           () => {
             setActiveFont(size)
-            $refs.fontSize.tippy().hide()
+            fontSize.tippy().hide()
           }
         "
       />
@@ -34,6 +35,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
   HoppFontSize,
@@ -46,6 +48,7 @@ const t = useI18n()
 
 const fontSizes = HoppFontSizes
 const active = useSetting("FONT_SIZE")
+const fontSize = ref<any | null>(null)
 
 const getFontSizeName = (size: HoppFontSize) => {
   return t(`settings.font_size_${size}`)

packages/hoppscotch-app/components/smart/Item.vue

@@ -24,22 +24,22 @@
     >
       <i
         v-if="icon"
+        class="opacity-75 material-icons"
         :class="[
-          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          label ? (reverse ? 'ml-4' : 'mr-4') : '',
           { 'text-accent': active },
         ]"
-        class="material-icons"
       >
         {{ icon }}
       </i>
       <SmartIcon
         v-if="svg"
         :name="svg"
+        class="opacity-75 svg-icons"
         :class="[
-          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          label ? (reverse ? 'ml-4' : 'mr-4') : '',
           { 'text-accent': active },
         ]"
-        class="svg-icons"
       />
     </span>
     <SmartSpinner v-else class="mr-4 text-secondaryDark" />

packages/hoppscotch-app/components/smart/Radio.vue

@@ -1,16 +1,16 @@
 <template>
-  <label
+  <div
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+    class="cursor-pointer flex flex-nowrap transition flex-1 items-center group hover:text-secondaryDark"
+    @click="$emit('change', value)"
   >
-    <input
+    <span class="inline-flex mr-4">
-      type="radio"
+      <i v-if="value === selected" class="text-accent material-icons">
-      :value="value"
+        radio_button_checked
-      :checked="value === selected"
+      </i>
-      class="appearance-none cursor-pointer mr-4 transition rounded-full h-4 w-4 border-2 border-divider group-hover:border-accentDark checked:border-4 checked:border-accent focus:outline-none"
+      <i v-else class="material-icons">radio_button_unchecked</i>
-      @change="$emit('change', value)"
+    </span>
-    />
+    <span class="font-semibold inline-flex">{{ label }}</span>
-    <span class="font-semibold transition">{{ label }}</span>
+  </div>
-  </label>
 </template>
 
 <script>

packages/hoppscotch-app/components/smart/RadioGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-4 items-start">
+  <div class="flex flex-col space-y-4">
     <SmartRadio
       v-for="(radio, index) in radios"
       :key="`radio-${index}`"

packages/hoppscotch-app/components/smart/Toggle.vue

@@ -3,12 +3,12 @@
     class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
     @click="$emit('change')"
   >
-    <label ref="toggle" class="toggle" :class="{ on: on }">
+    <span ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
-    </label>
+    </span>
-    <label class="cursor-pointer font-semibold pl-0 align-middle">
+    <span class="cursor-pointer font-semibold pl-0 align-middle">
       <slot></slot>
-    </label>
+    </span>
   </div>
 </template>
 

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

@@ -15,16 +15,16 @@
   >
     <i
       v-if="icon"
-      :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+      class="opacity-75 material-icons"
-      class="material-icons"
+      :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
     >
       {{ icon }}
     </i>
     <SmartIcon
       v-if="svg"
       :name="svg"
-      :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+      class="opacity-75 svg-icons"
-      class="svg-icons"
+      :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
     />
     {{ label }}
   </SmartLink>

packages/hoppscotch-app/components/teams/Edit.vue

@@ -111,6 +111,7 @@
                         ? 'radio_button_checked'
                         : 'radio_button_unchecked'
                     "
+                    :active="member.role === 'OWNER'"
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'OWNER')
@@ -125,6 +126,7 @@
                         ? 'radio_button_checked'
                         : 'radio_button_unchecked'
                     "
+                    :active="member.role === 'EDITOR'"
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'EDITOR')
@@ -139,6 +141,7 @@
                         ? 'radio_button_checked'
                         : 'radio_button_unchecked'
                     "
+                    :active="member.role === 'VIEWER'"
                     @click.native="
                       () => {
                         updateMemberRole(member.userID, 'VIEWER')

packages/hoppscotch-app/components/teams/Invite.vue

@@ -166,6 +166,7 @@
                       ? 'radio_button_checked'
                       : 'radio_button_unchecked'
                   "
+                  :active="invitee.value === 'OWNER'"
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'OWNER')
@@ -180,6 +181,7 @@
                       ? 'radio_button_checked'
                       : 'radio_button_unchecked'
                   "
+                  :active="invitee.value === 'EDITOR'"
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'EDITOR')
@@ -194,6 +196,7 @@
                       ? 'radio_button_checked'
                       : 'radio_button_unchecked'
                   "
+                  :active="invitee.value === 'VIEWER'"
                   @click.native="
                     () => {
                       updateNewInviteeRole(index, 'VIEWER')

packages/hoppscotch-app/locales/en.json

@@ -214,7 +214,7 @@
   "helpers": {
     "authorization": "The authorization header will be automatically generated when you send the request.",
     "generate_documentation_first": "Generate documentation first",
-    "network_fail": "Unable to reach the API endpoint. Check your network connection or turn on Proxy Interceptor and try again.",
+    "network_fail": "Unable to reach the API endpoint. Check your network connection or select a different Interceptor and try again.",
     "offline": "You seem to be offline. Data in this workspace might not be up to date.",
     "offline_short": "You seem to be offline.",
     "post_request_tests": "Test scripts are written in JavaScript, and are run after the response is received.",