feat: font size picker

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

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