Move fonts to settings

src/renderer/app.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 import { MantineProvider } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
@@ -7,6 +7,7 @@ import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal } from '@/renderer/components';
 import { useTheme } from '@/renderer/hooks';
+import { useSettingsStore } from '@/renderer/store/settings.store';
 import { AppRouter } from './router/app-router';
 import './styles/global.scss';
 import 'ag-grid-community/styles/ag-grid.css';
@@ -23,6 +24,14 @@ const SelectRouter = ({ children }: { children: ReactNode }) => {
 
 export const App = () => {
   const theme = useTheme();
+  const contentFont = useSettingsStore((state) => state.general.fontContent);
+  const headerFont = useSettingsStore((state) => state.general.fontHeader);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--content-font-family', contentFont);
+    root.style.setProperty('--header-font-family', headerFont);
+  }, [contentFont, headerFont]);
 
   return (
     <MantineProvider

src/renderer/features/settings/components/general-tab.tsx

@@ -5,24 +5,37 @@ import { THEME_DATA } from '@/renderer/hooks';
 import { useSettingsStore } from '@/renderer/store/settings.store';
 import { AppTheme } from '@/renderer/themes/types';
 
+const FONT_OPTIONS = [
+  { label: 'AnekTamil', value: 'AnekTamil' },
+  { label: 'Archivo', value: 'Archivo' },
+  { label: 'Cormorant', value: 'Cormorant' },
+  { label: 'Circular STD', value: 'Circular STD' },
+  { label: 'Didact Gothic', value: 'Didact Gothic' },
+  { label: 'DM Sans', value: 'DM Sans' },
+  { label: 'Encode Sans', value: 'Encode Sans' },
+  { label: 'Epilogue', value: 'Epilogue' },
+  { label: 'Gotham', value: 'Gotham' },
+  { label: 'Hahmlet', value: 'Hahmlet' },
+  { label: 'Inconsolata', value: 'Inconsolata' },
+  { label: 'Inter', value: 'Inter' },
+  { label: 'JetBrains Mono', value: 'JetBrainsMono' },
+  { label: 'Manrope', value: 'Manrope' },
+  { label: 'Montserrat', value: 'Montserrat' },
+  { label: 'Oswald', value: 'Oswald' },
+  { label: 'Oxygen', value: 'Oxygen' },
+  { label: 'Poppins', value: 'Poppins' },
+  { label: 'Raleway', value: 'Raleway' },
+  { label: 'Roboto', value: 'Roboto' },
+  { label: 'Sora', value: 'Sora' },
+  { label: 'Spectral', value: 'Spectral' },
+  { label: 'Work Sans', value: 'Work Sans' },
+];
+
 export const GeneralTab = () => {
   const settings = useSettingsStore((state) => state.general);
   const update = useSettingsStore((state) => state.setSettings);
 
   const options = [
-    {
-      control: <Select disabled data={[]} />,
-      description: 'Sets the application language',
-      isHidden: false,
-      title: 'Language',
-    },
-
-    {
-      control: <Select disabled data={[]} />,
-      description: 'Sets the default font',
-      isHidden: false,
-      title: 'Font',
-    },
     {
       control: (
         <Select disabled data={['Windows', 'macOS']} defaultValue="Windows" />
@@ -31,6 +44,52 @@ export const GeneralTab = () => {
       isHidden: false,
       title: 'Titlebar style',
     },
+    {
+      control: <Select disabled data={[]} />,
+      description: 'Sets the application language',
+      isHidden: false,
+      title: 'Language',
+    },
+    {
+      control: (
+        <Select
+          data={FONT_OPTIONS}
+          defaultValue={settings.fontContent}
+          onChange={(e) => {
+            if (!e) return;
+            update({
+              general: {
+                ...settings,
+                fontContent: e,
+              },
+            });
+          }}
+        />
+      ),
+      description: 'Sets the application content font',
+      isHidden: false,
+      title: 'Font (Content)',
+    },
+    {
+      control: (
+        <Select
+          data={FONT_OPTIONS}
+          defaultValue={settings.fontHeader}
+          onChange={(e) => {
+            if (!e) return;
+            update({
+              general: {
+                ...settings,
+                fontHeader: e,
+              },
+            });
+          }}
+        />
+      ),
+      description: 'Sets the application header font',
+      isHidden: false,
+      title: 'Font (Header)',
+    },
   ];
 
   const themeOptions = [

src/renderer/store/settings.store.ts

@@ -28,6 +28,8 @@ export type DataTableProps = {
 export interface SettingsState {
   general: {
     followSystemTheme: boolean;
+    fontContent: string;
+    fontHeader: string;
     theme: AppTheme;
     themeDark: AppTheme;
     themeLight: AppTheme;
@@ -69,6 +71,8 @@ export const useSettingsStore = create<SettingsSlice>()(
       immer((set, get) => ({
         general: {
           followSystemTheme: false,
+          fontContent: 'Circular STD',
+          fontHeader: 'Gotham',
           theme: AppTheme.DEFAULT_DARK,
           themeDark: AppTheme.DEFAULT_DARK,
           themeLight: AppTheme.DEFAULT_LIGHT,

src/renderer/styles/global.scss

@@ -20,7 +20,7 @@ html {
   color: var(--content-text-color);
   background: var(--content-bg);
   font-family: var(--content-font-family);
-  font-size: 12px;
+  font-size: var(--root-font-size);
 }
 
 @media only screen and (max-width: 639px) {

src/renderer/themes/default.scss

@@ -1,12 +1,10 @@
 @use 'sass:color' as color;
 
 :root {
-  --content-font-family: Sora, sans-serif;
+  --root-font-size: 12px;
-  --header-font-family: Gotham, sans-serif;
-
   --icon-color: rgb(255, 255, 255);
 
-  --primary-color: rgb(66, 116, 214);
+  --primary-color: rgb(49, 107, 224);
   --secondary-color: rgb(255, 120, 120);
   --success-color: green;
   --warning-color: orange;
@@ -50,7 +48,7 @@
   --scrollbar-thumb-bg: rgba(90, 90, 90, 0.5);
 
   --btn-primary-bg: var(--primary-color);
-  --btn-primary-bg-hover: rgb(71, 122, 224);
+  --btn-primary-bg-hover: rgb(31, 93, 216);
   --btn-primary-fg: #ffffff;
   --btn-primary-fg-hover: #ffffff;