font overrides + fixes for font component

2 files changed, 22 insertions, 10 deletions

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 7ec22641..98d38288 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -151,9 +151,21 @@ const AppearanceTab = {
     ...SharedComputedObject()
   },
   methods: {
+    updateFont (key, value) {
+      console.log(key, value)
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
     isThemeActive (key) {
       const { theme } = this.mergedConfig
-      console.log(key, theme)
       return key === theme
     },
     setTheme (name) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 748a69ce..3d3655d7 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -73,42 +73,42 @@
           <ul class="setting-list">
             <li>
               <FontControl
-                :model-value="fontsOverride.interface"
+                :model-value="mergedConfig.theme3hacks.fonts.interface"
                 name="ui"
                 :label="$t('settings.style.fonts.components.interface')"
                 :fallback="{ family: 'sans-serif' }"
                 no-inherit="1"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
+                @update:modelValue="v => updateFont('interface', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.input"
+                :model-value="mergedConfig.theme3hacks.fonts.input"
                 name="input"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
+                @update:modelValue="v => updateFont('input', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.post"
+                :model-value="mergedConfig.theme3hacks.fonts.post"
                 name="post"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
+                @update:modelValue="v => updateFont('post', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.postCode"
+                :model-value="mergedConfig.theme3hacks.fonts.monospace"
                 name="postCode"
                 :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.postCode')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+                :label="$t('settings.style.fonts.components.monospace')"
+                @update:modelValue="v => updateFont('monospace', v)"
               />
             </li>
           </ul>