Add size slider and settings widget

frontend/src/basic/Main.tsx

@@ -97,6 +97,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     };
   }, []);
 
+  useEffect(() => {
+    setWindowSize(getWindowSize(theme.typography.fontSize));
+  }, [theme.typography.fontSize]);
+
   const onResize = function () {
     setWindowSize(getWindowSize(theme.typography.fontSize));
   };

frontend/src/components/SettingsForm/index.tsx

@@ -9,10 +9,12 @@ import {
   List,
   ListItem,
   ListItemIcon,
+  Slider,
+  Typography,
 } from '@mui/material';
 import { Settings } from '../../models';
 import SelectLanguage from './SelectLanguage';
-import { Language, Palette, LightMode, DarkMode } from '@mui/icons-material';
+import { Language, Palette, LightMode, DarkMode, FormatSize } from '@mui/icons-material';
 
 interface SettingsFormProps {
   dense?: boolean;
@@ -20,9 +22,31 @@ interface SettingsFormProps {
   setSettings: (state: Settings) => void;
 }
 
+const fontSizesBasic = [
+  { label: 'XS', value: 12 },
+  { label: 'S', value: 13 },
+  { label: 'M', value: 14 },
+  { label: 'L', value: 15 },
+  { label: 'XL', value: 16 },
+];
+const fontSizesPro = [
+  { label: 'XS', value: 10 },
+  { label: 'S', value: 11 },
+  { label: 'M', value: 12 },
+  { label: 'L', value: 13 },
+  { label: 'XL', value: 14 },
+];
+
 const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProps): JSX.Element => {
   const theme = useTheme();
   const { t } = useTranslation();
+  const fontSizes = [
+    { label: 'XS', value: { basic: 12, pro: 10 } },
+    { label: 'S', value: { basic: 13, pro: 11 } },
+    { label: 'M', value: { basic: 14, pro: 12 } },
+    { label: 'L', value: { basic: 15, pro: 13 } },
+    { label: 'XL', value: { basic: 16, pro: 14 } },
+  ];
 
   return (
     <Grid container spacing={1}>
@@ -37,6 +61,7 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
               setLanguage={(language) => setSettings({ ...settings, language })}
             />
           </ListItem>
+
           <ListItem>
             <ListItemIcon>
               <Palette />
@@ -55,6 +80,8 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
                         height: '1.2em',
                         borderRadius: '0.4em',
                         backgroundColor: 'white',
+                        position: 'relative',
+                        top: `${7 - 0.5 * theme.typography.fontSize}px`,
                       }}
                     >
                       <DarkMode sx={{ width: '0.8em', height: '0.8em', color: '#666' }} />
@@ -69,9 +96,11 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
                         borderRadius: '0.4em',
                         backgroundColor: 'white',
                         padding: '0.07em',
+                        position: 'relative',
+                        top: `${7 - 0.5 * theme.typography.fontSize}px`,
                       }}
                     >
-                      <LightMode sx={{ width: '0.7em', height: '0.7em', color: '#666' }} />
+                      <LightMode sx={{ width: '0.67em', height: '0.67em', color: '#666' }} />
                     </Paper>
                   }
                   onChange={(e) =>
@@ -81,6 +110,25 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
               }
             />
           </ListItem>
+
+          <ListItem>
+            <ListItemIcon>
+              <FormatSize />
+            </ListItemIcon>
+            <Slider
+              value={settings.fontSize}
+              min={settings.frontend == 'basic' ? 12 : 10}
+              max={settings.frontend == 'basic' ? 16 : 14}
+              step={1}
+              onChange={(e) => setSettings({ ...settings, fontSize: e.target.value })}
+              valueLabelDisplay='off'
+              marks={fontSizes.map(({ label, value }) => ({
+                label: <Typography variant='caption'>{t(label)}</Typography>,
+                value: settings.frontend === 'basic' ? value.basic : value.pro,
+              }))}
+              track={false}
+            />
+          </ListItem>
         </List>
       </Grid>
     </Grid>

frontend/src/models/Settings.default.basic.ts

@@ -2,6 +2,7 @@ import { baseSettings, Settings } from './Settings.model';
 
 export const defaultSettings: Settings = {
   ...baseSettings,
+  frontend: 'basic',
 };
 
 export default defaultSettings;

frontend/src/models/Settings.default.pro.ts

@@ -3,6 +3,7 @@ import { baseSettings, Settings } from './Settings.model';
 export const defaultSettings: Settings = {
   ...baseSettings,
   fontSize: 12,
+  frontend: 'pro',
 };
 
 export default defaultSettings;

frontend/src/models/Settings.model.ts

@@ -3,6 +3,7 @@ import type Coordinator from './Coordinator.model';
 import type Language from './Language.model';
 
 export interface Settings {
+  frontend: 'basic' | 'pro';
   mode: 'light' | 'dark';
   fontSize: number;
   language: Language;
@@ -12,6 +13,7 @@ export interface Settings {
 }
 
 export const baseSettings: Settings = {
+  frontend: 'basic',
   mode:
     window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
       ? 'dark'

frontend/src/pro/Main.tsx

@@ -17,7 +17,13 @@ import {
   defaultInfo,
 } from '../models';
 
-import { PlaceholderWidget, MakerWidget, BookWidget, DepthChartWidget } from '../pro/Widgets';
+import {
+  PlaceholderWidget,
+  MakerWidget,
+  BookWidget,
+  DepthChartWidget,
+  SettingsWidget,
+} from '../pro/Widgets';
 import ToolBar from '../pro/ToolBar';
 import LandingDialog from '../pro/LandingDialog';
 
@@ -101,6 +107,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
     setWindowSize(getWindowSize(em));
   };
 
+  useEffect(() => {
+    setWindowSize(getWindowSize(theme.typography.fontSize));
+  }, [theme.typography.fontSize]);
+
   const fetchLimits = async () => {
     setLimits({ ...limits, loading: true });
     const data = apiClient.get('/api/limits/').then((data) => {
@@ -188,6 +198,9 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
               windowSize={windowSize}
             />
           </div>
+          <div key='Settings'>
+            <SettingsWidget settings={settings} setSettings={setSettings} />
+          </div>
           <div key='Garage'>
             <PlaceholderWidget label='Robot Garage' />
           </div>
@@ -197,9 +210,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
           <div key='Trade'>
             <PlaceholderWidget label='Trade Box' />
           </div>
-          <div key='Settings'>
-            <PlaceholderWidget label='Settings' />
-          </div>
           <div key='Other'>
             <PlaceholderWidget label='Other' />
           </div>

frontend/src/pro/Widgets/Settings.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Settings } from '../../models';
+import { Paper, useTheme } from '@mui/material';
+import SettingsForm from '../../components/SettingsForm';
+
+interface SettingsWidgetProps {
+  settings: Settings;
+  setSettings: (state: Settings) => void;
+  style?: Object;
+  className?: string;
+  onMouseDown?: () => void;
+  onMouseUp?: () => void;
+  onTouchEnd?: () => void;
+}
+
+const SettingsWidget = React.forwardRef(
+  (
+    {
+      settings,
+      setSettings,
+      style,
+      className,
+      onMouseDown,
+      onMouseUp,
+      onTouchEnd,
+    }: SettingsWidgetProps,
+    ref,
+  ) => {
+    const theme = useTheme();
+    return React.useMemo(() => {
+      return (
+        <Paper
+          elevation={3}
+          style={{ width: '100%', height: '100%', position: 'relative', top: '0.6em', left: '0em' }}
+        >
+          <SettingsForm dense={true} settings={settings} setSettings={setSettings} />
+        </Paper>
+      );
+    }, [settings]);
+  },
+);
+
+export default SettingsWidget;

frontend/src/pro/Widgets/index.ts

@@ -1,4 +1,5 @@
 export { default as MakerWidget } from './Maker';
 export { default as BookWidget } from './Book';
 export { default as DepthChartWidget } from './Depth';
+export { default as SettingsWidget } from './Settings';
 export { default as PlaceholderWidget } from './Placeholder';