Added font size settings

src/utils/slices/settingsSlice.ts

@@ -18,6 +18,7 @@ export const changeAnalytics = createAsyncThunk(
 )
 
 export type SettingsState = {
+  fontsize: -1 | 0 | 1 | 2 | 3
   language: keyof availableLanguages
   theme: 'light' | 'dark' | 'auto'
   browser: 'internal' | 'external'
@@ -25,6 +26,7 @@ export type SettingsState = {
 }
 
 export const settingsInitialState = {
+  fontsize: 0,
   notification: {
     enabled: false
   },
@@ -46,6 +48,12 @@ const settingsSlice = createSlice({
   name: 'settings',
   initialState: settingsInitialState as SettingsState,
   reducers: {
+    changeFontsize: (
+      state,
+      action: PayloadAction<SettingsState['fontsize']>
+    ) => {
+      state.fontsize = action.payload
+    },
     changeLanguage: (
       state,
       action: PayloadAction<NonNullable<SettingsState['language']>>
@@ -72,6 +80,8 @@ const settingsSlice = createSlice({
   }
 })
 
+export const getSettingsFontsize = (state: RootState) =>
+  state.settings.fontsize || 0
 export const getSettingsLanguage = (state: RootState) => state.settings.language
 export const getSettingsTheme = (state: RootState) => state.settings.theme
 export const getSettingsBrowser = (state: RootState) => state.settings.browser
@@ -79,6 +89,7 @@ export const getSettingsAnalytics = (state: RootState) =>
   state.settings.analytics
 
 export const {
+  changeFontsize,
   changeLanguage,
   changeTheme,
   changeBrowser

src/utils/styles/constants.ts

@@ -7,25 +7,25 @@ const guidelineBaseWidth = 375
 
 const scale = (size: number) => (width / guidelineBaseWidth) * size
 // const verticalScale = (size: number) => (height / guidelineBaseHeight) * size
-const moderateScale = (size: number, factor = 0.5) =>
+export const adaptiveScale = (size: number, factor: number = 0) =>
   size + (scale(size) - size) * factor
 
 const Base = 4
 
 export const StyleConstants = {
   Font: {
-    Size: { S: moderateScale(14), M: moderateScale(16), L: moderateScale(18) },
+    Size: { S: 14, M: 16, L: 18 },
     LineHeight: {
-      S: moderateScale(20),
-      M: moderateScale(22),
-      L: moderateScale(30)
+      S: 20,
+      M: 22,
+      L: 30
     },
     Weight: { Normal: '400' as '400', Bold: '600' as '600' }
   },
   FontStyle: {
-    S: { fontSize: moderateScale(14), lineHeight: moderateScale(20) },
-    M: { fontSize: moderateScale(16), lineHeight: moderateScale(22) },
-    L: { fontSize: moderateScale(20), lineHeight: moderateScale(30) }
+    S: { fontSize: 14, lineHeight: 20 },
+    M: { fontSize: 16, lineHeight: 22 },
+    L: { fontSize: 20, lineHeight: 30 }
   },
 
   Spacing: {