feat: add font family customization

lifinance · May 31, 2022 · ea46d79 · ea46d79
1 parent 779b935
commit ea46d79
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/packages/widget-embedded/src/index.tsx b/packages/widget-embedded/src/index.tsx
@@ -69,6 +69,7 @@ const App = () => {
   const [drawer, setDrawer] = useState(false);
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [config, setConfig] = useState(widgetConfig);
+  const [fontFamily, setFontFamily] = useState('Inter var, Inter, sans-serif');
   const [borderRadius, setBorderRadius] = useState(12);
   const [borderRadiusSecondary, setBorderRadiusSecondary] = useState(6);
   const [primary, setPrimaryColor] = useState('#3F49E1');
@@ -115,13 +116,17 @@ const App = () => {
           borderRadius,
           borderRadiusSecondary,
         },
+        typography: {
+          fontFamily,
+        },
       },
     }));
   }, [
     borderRadius,
     borderRadiusSecondary,
     darkMode,
     drawer,
+    fontFamily,
     prefersDarkMode,
     primary,
     systemColor,
@@ -224,19 +229,36 @@ const App = () => {
                   sx={{ width: 160 }}
                 />
               </Box>
+              <Box px={1}>
+                <TextField
+                  value={fontFamily}
+                  label="Font Family"
+                  helperText="Should be loaded separately or supported by OS"
+                  size="small"
+                  InputProps={{
+                    sx: {
+                      width: 300,
+                    },
+                  }}
+                  onChange={(event) => setFontFamily(event.target.value)}
+                />
+              </Box>
+              <Box px={1}>
+                <TextField
+                  value={primary}
+                  label="Main Color"
+                  type="color"
+                  size="small"
+                  InputProps={{
+                    sx: {
+                      width: 96,
+                    },
+                  }}
+                  onChange={(event) => setPrimaryColor(event.target.value)}
+                />
+              </Box>
             </FormGroup>
           </FormControl>
-          <TextField
-            value={primary}
-            type="color"
-            size="small"
-            InputProps={{
-              sx: {
-                width: 64,
-              },
-            }}
-            onChange={(event) => setPrimaryColor(event.target.value)}
-          />
         </Box>
 
         <Box

diff --git a/packages/widget/src/config/theme.ts b/packages/widget/src/config/theme.ts
@@ -62,6 +62,7 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
   createMuiTheme({
     typography: {
       fontFamily: 'Inter var, Inter, sans-serif',
+      ...theme.typography,
     },
     palette: {
       mode,
@@ -122,8 +123,10 @@ export const createTheme = (mode: PaletteMode, theme: ThemeConfig = {}) =>
         styleOverrides: {
           root: {
             fontFamily: 'Inter, sans-serif',
+            ...theme.typography,
             '@supports (font-variation-settings: normal)': {
               fontFamily: 'Inter var, sans-serif',
+              ...theme.typography,
             },
           },
         },

diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -1,12 +1,14 @@
 import { ChainKey } from '@lifinance/sdk';
 import { PaletteMode, PaletteOptions, Shape } from '@mui/material';
+import { TypographyOptions } from '@mui/material/styles/createTypography';
 import { Signer } from 'ethers';
 import { CSSProperties } from 'react';
 
 export type Appearance = PaletteMode | 'auto';
 export type ThemeConfig = {
   palette?: PaletteOptions;
   shape?: Shape;
+  typography?: TypographyOptions;
 };
 
 export interface WidgetConfig {