feat: font size picker

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 {

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;
+}

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)
     },
   },

components/smart/ChangeLanguage.vue

@@ -1,5 +1,6 @@
 <template>
   <span class="inline-flex">
+    <span class="select-wrapper">
       <tippy
         ref="language"
         interactive
@@ -7,13 +8,12 @@
         trigger="click"
         theme="popover"
         arrow
-      :animate-fill="false"
       >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-          :title="$t('choose_language')"
+            :title="$t('settings.choose_language')"
-          class="font-medium focus:outline-none"
+            class="pr-8"
             outline
             :label="`${
               $i18n.locales.find(({ code }) => code == $i18n.locale).name
@@ -32,4 +32,5 @@
         </nuxt-link>
       </tippy>
     </span>
+  </span>
 </template>

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>

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 },

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",

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()

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

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)

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 />