refs #4653 Change fontSize

locales/en/translation.json

@@ -113,6 +113,7 @@
   },
   "settings": {
     "title": "Settings",
-    "language": "Language"
+    "language": "Language",
+    "font_size": "Font size"
   }
 }

renderer/components/Settings.tsx

@@ -1,5 +1,5 @@
 import { localeType } from '@/utils/i18n'
-import { Label, Modal, Select } from 'flowbite-react'
+import { Label, Modal, Select, TextInput } from 'flowbite-react'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
@@ -22,6 +22,7 @@ const languages = [
 
 export default function Settings(props: Props) {
   const [language, setLanguage] = useState<localeType>('en')
+  const [fontSize, setFontSize] = useState<number>(16)
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -38,25 +39,47 @@ export default function Settings(props: Props) {
     props.reloadSettings()
   }
 
+  const fontSizeChanged = (e: ChangeEvent<HTMLInputElement>) => {
+    setFontSize(parseInt(e.target.value))
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem('fontSize', e.target.value)
+    }
+    props.reloadSettings()
+  }
+
   return (
     <Modal show={props.opened} onClose={props.close}>
       <Modal.Header>
         <FormattedMessage id="settings.title" />
       </Modal.Header>
       <Modal.Body>
-        <div className="mb-2">
+        <div className="flex flex-col gap-4">
-          <Label htmlFor="language">
+          <div>
-            <FormattedMessage id="settings.language" />
+            <div className="mb-2">
-          </Label>
+              <Label htmlFor="fontsize">
-        </div>
+                <FormattedMessage id="settings.font_size" />
-        <div>
+              </Label>
-          <Select id="language" onChange={languageChanged} defaultValue={language}>
+            </div>
-            {languages.map(lang => (
+            <div>
-              <option key={lang.value} value={lang.value}>
+              <TextInput type="number" value={fontSize} onChange={fontSizeChanged} />
-                {lang.label}
+            </div>
-              </option>
+          </div>
-            ))}
+          <div>
-          </Select>
+            <div className="mb-2">
+              <Label htmlFor="language">
+                <FormattedMessage id="settings.language" />
+              </Label>
+            </div>
+            <div>
+              <Select id="language" onChange={languageChanged} defaultValue={language}>
+                {languages.map(lang => (
+                  <option key={lang.value} value={lang.value}>
+                    {lang.label}
+                  </option>
+                ))}
+              </Select>
+            </div>
+          </div>
         </div>
       </Modal.Body>
     </Modal>

renderer/components/layouts/account.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useRef, useState } from 'react'
+import { CSSProperties, useContext, useEffect, useRef, useState } from 'react'
 import { FaGear, FaPlus } from 'react-icons/fa6'
 import { Account, db } from '@/db'
 import NewAccount from '@/components/accounts/New'
@@ -18,6 +18,7 @@ export default function Layout({ children }: LayoutProps) {
   const [accounts, setAccounts] = useState<Array<Account>>([])
   const [openNewModal, setOpenNewModal] = useState(false)
   const [openSettings, setOpenSettings] = useState(false)
+  const [style, setStyle] = useState<CSSProperties>({})
   const { switchLang } = useContext(Context)
   const router = useRouter()
   const { formatMessage } = useIntl()
@@ -104,11 +105,17 @@ export default function Layout({ children }: LayoutProps) {
     if (typeof localStorage !== 'undefined') {
       const lang = localStorage.getItem('language')
       switchLang(lang)
+      const fontSize = localStorage.getItem('fontSize')
+      if (parseInt(fontSize)) {
+        setStyle({
+          fontSize: `${fontSize}px`
+        })
+      }
     }
   }
 
   return (
-    <div className="app flex flex-col min-h-screen">
+    <div className="app flex flex-col min-h-screen" style={style}>
       <main className="flex w-full box-border my-0 mx-auto min-h-screen">
         <aside className="w-16 bg-gray-900 flex flex-col justify-between">
           <div>

renderer/utils/i18n.tsx

@@ -25,7 +25,6 @@ export const IntlProviderWrapper: React.FC<Props> = props => {
 
   const switchLang = (locale: string) => {
     const changeLang = langs.find(lang => lang.locale === locale)
-    console.log(changeLang)
     if (changeLang == null) {
       return
     }