chore(ui): improve ui consistency

2021-12-24 08:12:35 +05:30
parent 1eb9eb911e
commit 10cb433e80
17 changed files with 90 additions and 48 deletions
--- a/packages/hoppscotch-app/assets/icons/activity.svg
+++ b/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>
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/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";
 }

--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/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"
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/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="
                  () => {
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-app/components/smart/ChangeLanguage.vue
@@ -16,15 +16,23 @@
        </span>
      </template>
      <NuxtLink
-        v-for="(locale, index) in $i18n.locales.filter(
-          ({ code }) => code !== $i18n.locale
-        )"
-        :key="`locale-${String(index)}`"
+        v-for="(locale, index) in $i18n.locales"
+        :key="`locale-${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>
--- a/packages/hoppscotch-app/components/smart/FontSizePicker.vue
+++ b/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}`)
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/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" />
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -1,16 +1,16 @@
 <template>
-  <label
-    class="cursor-pointer flex-nowrap transition inline-flex items-center justify-center group hover:text-secondaryDark"
+  <div
+    class="cursor-pointer flex flex-nowrap transition flex-1 items-center group hover:text-secondaryDark"
+    @click="$emit('change', value)"
  >
-    <input
-      type="radio"
-      :value="value"
-      :checked="value === selected"
-      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"
-      @change="$emit('change', value)"
-    />
-    <span class="font-semibold transition">{{ label }}</span>
-  </label>
+    <span class="inline-flex mr-4">
+      <i v-if="value === selected" class="text-accent material-icons">
+        radio_button_checked
+      </i>
+      <i v-else class="material-icons">radio_button_unchecked</i>
+    </span>
+    <span class="font-semibold inline-flex">{{ label }}</span>
+  </div>
 </template>

 <script>
--- a/packages/hoppscotch-app/components/smart/RadioGroup.vue
+++ b/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}`"
--- a/packages/hoppscotch-app/components/smart/Toggle.vue
+++ b/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>
-    <label class="cursor-pointer font-semibold pl-0 align-middle">
+    </span>
+    <span class="cursor-pointer font-semibold pl-0 align-middle">
      <slot></slot>
-    </label>
+    </span>
  </div>
 </template>

--- a/packages/hoppscotch-app/components/tab/Primary.vue
+++ b/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="material-icons"
+      class="opacity-75 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="svg-icons"
+      class="opacity-75 svg-icons"
+      :class="label ? (reverse ? 'ml-4' : 'mr-4') : ''"
    />
    {{ label }}
  </SmartLink>
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/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')
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/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')
--- a/packages/hoppscotch-app/locales/en.json
+++ b/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.",