From 275f0a6172792a9684980313548be58dbc09c755 Mon Sep 17 00:00:00 2001
From: anastasiia <anastasiya1155@gmail.com>
Date: Thu, 7 Dec 2023 08:42:42 -0500
Subject: [PATCH] save user preferred font size in local storage

---
 apps/desktop/src/App.tsx       | 18 ++++++++++++++++--
 client/src/services/storage.ts |  1 +
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 81855e69ac..75750a765d 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -25,6 +25,7 @@ import {
   getPlainFromStorage,
   LANGUAGE_KEY,
   savePlainToStorage,
+  USER_FONT_SIZE_KEY,
 } from '../../../client/src/services/storage';
 import { LocaleType } from '../../../client/src/types/general';
 import { polling } from '../../../client/src/utils/requestUtils';
@@ -165,12 +166,25 @@ function App() {
         .getPropertyValue('font-size');
       const fontSize = parseFloat(style);
 
-      (root as HTMLElement).style.fontSize =
-        (e.key === '0' ? 16 : fontSize + (e.key === '=' ? 1 : -1)) + 'px';
+      const newFontSize =
+        e.key === '0' ? 16 : fontSize + (e.key === '=' ? 1 : -1);
+      (root as HTMLElement).style.fontSize = newFontSize + 'px';
+      savePlainToStorage(USER_FONT_SIZE_KEY, newFontSize);
     }
   }, []);
   useKeyboardNavigation(handleKeyEvent);
 
+  useEffect(() => {
+    const root = document.querySelector(':root');
+    if (!root) {
+      return;
+    }
+    const newFontSize = getPlainFromStorage(USER_FONT_SIZE_KEY);
+    if (newFontSize) {
+      (root as HTMLElement).style.fontSize = newFontSize + 'px';
+    }
+  }, []);
+
   useEffect(() => {
     let intervalId: number;
     if (!Object.keys(envConfig).length) {
diff --git a/client/src/services/storage.ts b/client/src/services/storage.ts
index 4a3d180a1b..9b1a71f7a7 100644
--- a/client/src/services/storage.ts
+++ b/client/src/services/storage.ts
@@ -37,3 +37,4 @@ export const ANSWER_SPEED_KEY = 'answer_speed_key';
 export const HIDE_TUTORIALS_KEY = 'hide_tutorials';
 export const ACCESS_TOKEN_KEY = 'access_token';
 export const REFRESH_TOKEN_KEY = 'refresh_token';
+export const USER_FONT_SIZE_KEY = 'user_font_size';