Fix font not resetting when logging out

src/settings/Settings.tsx

@@ -42,6 +42,7 @@ import { ImageSize } from "./enums/ImageSize";
 import { MetaSpace } from "../stores/spaces";
 import SdkConfig from "../SdkConfig";
 import ThreadBetaController from './controllers/ThreadBetaController';
+import { FontWatcher } from "./watchers/FontWatcher";
 
 // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
 const LEVELS_ROOM_SETTINGS = [
@@ -420,7 +421,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
     "baseFontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        default: 10,
+        default: FontWatcher.DEFAULT_SIZE,
         controller: new FontSizeController(),
     },
     "useCustomFontSize": {

src/settings/watchers/FontWatcher.ts

@@ -20,9 +20,12 @@ import IWatcher from "./Watcher";
 import { toPx } from '../../utils/units';
 import { Action } from '../../dispatcher/actions';
 import { SettingLevel } from "../SettingLevel";
+import { UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
+import { ActionPayload } from "../../dispatcher/payloads";
 
 export class FontWatcher implements IWatcher {
     public static readonly MIN_SIZE = 8;
+    public static readonly DEFAULT_SIZE = 10;
     public static readonly MAX_SIZE = 15;
     // Externally we tell the user the font is size 15. Internally we use 10.
     public static readonly SIZE_DIFF = 5;
@@ -34,27 +37,41 @@ export class FontWatcher implements IWatcher {
     }
 
     public start() {
-        this.setRootFontSize(SettingsStore.getValue("baseFontSize"));
-        this.setSystemFont({
-            useSystemFont: SettingsStore.getValue("useSystemFont"),
-            font: SettingsStore.getValue("systemFont"),
-        });
+        this.updateFont();
         this.dispatcherRef = dis.register(this.onAction);
     }
 
     public stop() {
         dis.unregister(this.dispatcherRef);
     }
 
-    private onAction = (payload) => {
+    private updateFont() {
+        this.setRootFontSize(SettingsStore.getValue("baseFontSize"));
+        this.setSystemFont({
+            useSystemFont: SettingsStore.getValue("useSystemFont"),
+            font: SettingsStore.getValue("systemFont"),
+        });
+    }
+
+    private onAction = (payload: ActionPayload) => {
         if (payload.action === Action.UpdateFontSize) {
             this.setRootFontSize(payload.size);
         } else if (payload.action === Action.UpdateSystemFont) {
-            this.setSystemFont(payload);
+            this.setSystemFont(payload as UpdateSystemFontPayload);
+        } else if (payload.action === "on_logged_out") {
+            // Clear font overrides when logging out
+            this.setRootFontSize(FontWatcher.DEFAULT_SIZE);
+            this.setSystemFont({
+                useSystemFont: false,
+                font: "",
+            });
+        } else if (payload.action === "on_logged_in") {
+            // Font size can be saved on the account, so grab value when logging in
+            this.updateFont();
         }
     };
 
-    private setRootFontSize = (size) => {
+    private setRootFontSize = (size: number) => {
         const fontSize = Math.max(Math.min(FontWatcher.MAX_SIZE, size), FontWatcher.MIN_SIZE);
 
         if (fontSize !== size) {
@@ -63,7 +80,7 @@ export class FontWatcher implements IWatcher {
         document.querySelector<HTMLElement>(":root").style.fontSize = toPx(fontSize);
     };
 
-    private setSystemFont = ({ useSystemFont, font }) => {
+    private setSystemFont = ({ useSystemFont, font }: Pick<UpdateSystemFontPayload, "useSystemFont" | "font">) => {
         document.body.style.fontFamily = useSystemFont ? font : "";
     };
 }