From d0c0a543cfd196a4021e128a57957951efd53b7b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 3 Aug 2021 21:35:01 +0530
Subject: [PATCH] feat: font size picker

---
 assets/scss/styles.scss               | 17 +++++--
 assets/scss/themes.scss               | 33 +++++++++++++
 components/smart/AccentModePicker.vue |  1 -
 components/smart/ChangeLanguage.vue   | 61 ++++++++++++------------
 components/smart/FontSizePicker.vue   | 68 +++++++++++++++++++++++++++
 components/smart/Item.vue             |  4 +-
 lang/en-US.json                       |  9 ++--
 layouts/default.vue                   |  4 ++
 layouts/error.vue                     |  2 +-
 newstore/settings.ts                  | 19 ++++++++
 pages/settings.vue                    | 12 ++++-
 11 files changed, 186 insertions(+), 44 deletions(-)
 create mode 100644 components/smart/FontSizePicker.vue

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 2c327a3a7..e6ae18625 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -41,11 +41,13 @@ html {
 
 body {
   @apply bg-primary;
-  @apply text-secondary text-xs;
+  @apply text-secondary;
   @apply font-medium;
   @apply select-none;
   @apply overflow-x-hidden;
 
+  font-size: var(--font-size);
+  line-height: var(--line-height);
   overflow: overlay;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -162,16 +164,15 @@ hr {
   @apply text-secondaryDark text-lg;
 }
 
-.textarea,
 .input,
-.select {
+.select,
+.textarea {
   @apply flex flex-1;
   @apply w-full;
   @apply px-4 py-2;
   @apply bg-primary;
   @apply truncate;
   @apply rounded;
-  @apply text-xs;
   @apply font-semibold;
   @apply border border-divider;
   @apply transition;
@@ -179,6 +180,14 @@ hr {
   @apply disabled:cursor-not-allowed;
 }
 
+input,
+select,
+textarea,
+button {
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+
 .input[type="file"],
 .input[type="radio"],
 #installPWA {
diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 80cf3a87f..ad1c86e8c 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -297,3 +297,36 @@
 :root[data-accent="yellow"] {
   @include yellowTheme;
 }
+
+@mixin fontSmall {
+  // Font size
+  --font-size: 0.75rem;
+  // Line height
+  --line-height: 1rem;
+}
+
+@mixin fontMedium {
+  // Font size
+  --font-size: 0.875rem;
+  // Line height
+  --line-height: 1.25rem;
+}
+
+@mixin fontLarge {
+  // Font size
+  --font-size: 1rem;
+  // Line height
+  --line-height: 1.5rem;
+}
+
+:root[data-font-size="xs"] {
+  @include fontSmall;
+}
+
+:root[data-font-size="sm"] {
+  @include fontMedium;
+}
+
+:root[data-font-size="base"] {
+  @include fontLarge;
+}
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index d85970afe..dfc326179 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -47,7 +47,6 @@ export default Vue.extend({
   methods: {
     setActiveColor(color: HoppAccentColor) {
       document.documentElement.setAttribute("data-accent", color)
-
       applySetting("THEME_COLOR", color)
     },
   },
diff --git a/components/smart/ChangeLanguage.vue b/components/smart/ChangeLanguage.vue
index cc4ca39f0..c3de9077d 100644
--- a/components/smart/ChangeLanguage.vue
+++ b/components/smart/ChangeLanguage.vue
@@ -1,35 +1,36 @@
 <template>
   <span class="inline-flex">
-    <tippy
-      ref="language"
-      interactive
-      tabindex="-1"
-      trigger="click"
-      theme="popover"
-      arrow
-      :animate-fill="false"
-    >
-      <template #trigger>
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('choose_language')"
-          class="font-medium focus:outline-none"
-          outline
-          :label="`${
-            $i18n.locales.find(({ code }) => code == $i18n.locale).name
-          }`"
-        />
-      </template>
-      <nuxt-link
-        v-for="(locale, index) in $i18n.locales.filter(
-          ({ code }) => code !== $i18n.locale
-        )"
-        :key="`locale-${index}`"
-        :to="switchLocalePath(locale.code)"
-        @click="$refs.language.tippy().hide()"
+    <span class="select-wrapper">
+      <tippy
+        ref="language"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
       >
-        <SmartItem :label="locale.name" />
-      </nuxt-link>
-    </tippy>
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('settings.choose_language')"
+            class="pr-8"
+            outline
+            :label="`${
+              $i18n.locales.find(({ code }) => code == $i18n.locale).name
+            }`"
+          />
+        </template>
+        <nuxt-link
+          v-for="(locale, index) in $i18n.locales.filter(
+            ({ code }) => code !== $i18n.locale
+          )"
+          :key="`locale-${index}`"
+          :to="switchLocalePath(locale.code)"
+          @click="$refs.language.tippy().hide()"
+        >
+          <SmartItem :label="locale.name" />
+        </nuxt-link>
+      </tippy>
+    </span>
   </span>
 </template>
diff --git a/components/smart/FontSizePicker.vue b/components/smart/FontSizePicker.vue
new file mode 100644
index 000000000..031e23a6b
--- /dev/null
+++ b/components/smart/FontSizePicker.vue
@@ -0,0 +1,68 @@
+<template>
+  <span class="inline-flex">
+    <span class="select-wrapper">
+      <tippy
+        ref="fontSize"
+        interactive
+        tabindex="-1"
+        trigger="click"
+        theme="popover"
+        arrow
+      >
+        <template #trigger>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('settings.change_font_size')"
+            class="pr-8"
+            outline
+            :label="`${fontSizes.find(({ code }) => code == active.code).name}`"
+          />
+        </template>
+        <!-- text-xs -->
+        <!-- text-sm -->
+        <!-- text-base -->
+        <SmartItem
+          v-for="(size, index) in fontSizes"
+          :key="`size-${index}`"
+          :class="`text-${size.code}`"
+          :label="size.name"
+          @click.native="
+            setActiveFont(size)
+            $refs.fontSize.tippy().hide()
+          "
+        />
+      </tippy>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+import {
+  HoppFontSizes,
+  getSettingSubject,
+  HoppFontSize,
+  settingsStore,
+  applySetting,
+} from "~/newstore/settings"
+
+export default Vue.extend({
+  data() {
+    return {
+      fontSizes: HoppFontSizes,
+      active: settingsStore.value.FONT_SIZE,
+    }
+  },
+  subscriptions() {
+    return {
+      active: getSettingSubject("FONT_SIZE"),
+    }
+  },
+  methods: {
+    setActiveFont(size: HoppFontSize) {
+      document.documentElement.setAttribute("data-font-size", size.code)
+      applySetting("FONT_SIZE", size)
+    },
+  },
+})
+</script>
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index 1489ff6a9..90304af0b 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -6,15 +6,13 @@
     class="
       rounded
       font-semibold
-      text-xs
       py-2
       px-4
       transition
       inline-flex
       items-center
-      focus:bg-primaryDark focus:text-secondaryDark
       hover:bg-primaryDark hover:text-secondaryDark
-      focus:outline-none
+      focus:bg-primaryDark focus:outline-none focus:text-secondaryDark
     "
     :class="[
       { 'opacity-75 cursor-not-allowed': disabled },
diff --git a/lang/en-US.json b/lang/en-US.json
index 3d54cdcf9..ca1329fce 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -152,7 +152,12 @@
     "shortcuts_indicator": "Shortcuts indicator",
     "telemetry": "Telemetry",
     "interceptor": "Interceptor",
-    "navigation_sidebar": "Navigation sidebar"
+    "navigation_sidebar": "Navigation sidebar",
+    "font_size": "Font size",
+    "change_font_size": "Change font size",
+    "language": "Language",
+    "choose_language": "Choose language",
+    "accent_color": "Accent color"
   },
   "layout": {
     "zen_mode": "Zen mode"
@@ -166,7 +171,6 @@
   "endpoint": "Endpoint",
   "schema": "Schema",
   "theme": "Theme",
-  "choose_language": "Choose Language",
   "shortcuts": "Shortcuts",
   "javascript_code": "JavaScript Code",
   "method": "Method",
@@ -217,7 +221,6 @@
   "types": "Types",
   "send": "Send",
   "background": "Background",
-  "color": "Color",
   "labels": "Labels",
   "enabled": "Enabled",
   "disabled": "Disabled",
diff --git a/layouts/default.vue b/layouts/default.vue
index 65097e258..3445c7ea1 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -77,6 +77,10 @@ export default defineComponent({
     this.$subscribeTo(getSettingSubject("BG_COLOR"), (color) => {
       ;(this as any).$colorMode.preference = color
     })
+
+    this.$subscribeTo(getSettingSubject("FONT_SIZE"), (size) => {
+      document.documentElement.setAttribute("data-font-size", size.code)
+    })
   },
   async mounted() {
     performMigrations()
diff --git a/layouts/error.vue b/layouts/error.vue
index 6658beeff..2016c4e30 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page page-error">
     <h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
-    <h3 class="font-mono font-semibold text-xs select-text">{{ message }}</h3>
+    <h3 class="font-mono font-semibold select-text">{{ message }}</h3>
     <p class="mt-4">
       <ButtonSecondary to="/" icon="home" outline :label="$t('home')" />
       <ButtonSecondary
diff --git a/newstore/settings.ts b/newstore/settings.ts
index ada4752c8..31263e2da 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -24,6 +24,23 @@ export const HoppAccentColors = [
 
 export type HoppAccentColor = typeof HoppAccentColors[number]
 
+export const HoppFontSizes = [
+  {
+    name: "Small",
+    code: "xs",
+  },
+  {
+    name: "Medium",
+    code: "sm",
+  },
+  {
+    name: "Large",
+    code: "base",
+  },
+] as const
+
+export type HoppFontSize = typeof HoppFontSizes[number]
+
 export type SettingsType = {
   syncCollections: boolean
   syncHistory: boolean
@@ -48,6 +65,7 @@ export type SettingsType = {
   LEFT_SIDEBAR: boolean
   RIGHT_SIDEBAR: boolean
   ZEN_MODE: boolean
+  FONT_SIZE: HoppFontSize
 }
 
 export const defaultSettings: SettingsType = {
@@ -74,6 +92,7 @@ export const defaultSettings: SettingsType = {
   LEFT_SIDEBAR: true,
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,
+  FONT_SIZE: { name: "Small", code: "xs" },
 }
 
 const validKeys = Object.keys(defaultSettings)
diff --git a/pages/settings.vue b/pages/settings.vue
index 27d6f2988..2576bdf37 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -124,7 +124,7 @@
           </section>
           <section>
             <h4 class="font-bold text-secondaryDark">
-              {{ $t("color") }}
+              {{ $t("settings.accent_color") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
               {{ active.charAt(0).toUpperCase() + active.slice(1) }}
@@ -135,7 +135,15 @@
           </section>
           <section>
             <h4 class="font-bold text-secondaryDark">
-              {{ $t("choose_language") }}
+              {{ $t("settings.font_size") }}
+            </h4>
+            <div class="mt-4">
+              <SmartFontSizePicker />
+            </div>
+          </section>
+          <section>
+            <h4 class="font-bold text-secondaryDark">
+              {{ $t("settings.language") }}
             </h4>
             <div class="mt-4">
               <SmartChangeLanguage />