Merge pull request #1250 from proddy/dev

small changes

.gitignore

@@ -1,6 +1,6 @@
 # vscode
 .vscode/c_cpp_properties.json
-# .vscode/extensions.json
+.vscode/extensions.json
 .vscode/launch.json
 # .vscode/settings.json
 

.prettierignore

@@ -1,4 +1,5 @@
 node_modules/
 build/
+dist/
 .prettierrc
 .yarn/

interface/.eslintrc.json

@@ -97,6 +97,12 @@
           "{}": false
         }
       }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
     ]
   }
 }

interface/.prettierignore

@@ -1,5 +0,0 @@
-node_modules/
-build/
-dist/
-.prettierrc
-.yarn/

interface/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120,
-  "bracketSpacing": true
-}

interface/package.json

@@ -23,13 +23,13 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.14.4",
     "@preact/compat": "^17.1.2",
     "@prefresh/vite": "^2.4.1",
-    "@table-library/react-table-library": "4.1.4",
+    "@table-library/react-table-library": "4.1.6",
     "@types/lodash-es": "^4.17.8",
     "@types/node": "^20.4.8",
-    "@types/react": "^18.2.18",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
     "alova": "^2.9.3",

interface/src/CustomTheme.tsx

@@ -1,10 +1,19 @@
 import { CssBaseline } from '@mui/material';
-import { blueGrey, blue } from '@mui/material/colors';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
 import type { FC } from 'react';
 
 import type { RequiredChildrenProps } from 'utils';
 
+export const dialogStyle = {
+  '& .MuiDialog-paper': {
+    borderRadius: '8px',
+    borderColor: '#565656',
+    borderStyle: 'solid',
+    borderWidth: '1px'
+  },
+  backdropFilter: 'blur(1px)'
+};
+
 const theme = responsiveFontSizes(
   createTheme({
     typography: {
@@ -13,10 +22,10 @@ const theme = responsiveFontSizes(
     palette: {
       mode: 'dark',
       secondary: {
-        main: blue[500]
+        main: '#2196f3' // blue[500]
       },
       info: {
-        main: blueGrey[500]
+        main: '#607d8b' // blueGrey[500]
       }
     }
   })

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -20,11 +20,7 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ InputProps, .
         ...InputProps,
         endAdornment: (
           <InputAdornment position="end">
-            <IconButton
+            <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
-              aria-label="toggle password visibility"
-              onClick={() => setShowPassword(!showPassword)}
-              edge="end"
-            >
               {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
             </IconButton>
           </InputAdornment>

interface/src/components/layout/LayoutAppBar.tsx

@@ -21,13 +21,7 @@ const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => (
     }}
   >
     <Toolbar>
-      <IconButton
+      <IconButton color="inherit" edge="start" onClick={onToggleDrawer} sx={{ mr: 2, display: { md: 'none' } }}>
-        color="inherit"
-        aria-label="open drawer"
-        edge="start"
-        onClick={onToggleDrawer}
-        sx={{ mr: 2, display: { md: 'none' } }}
-      >
         <MenuIcon />
       </IconButton>
       <Typography variant="h6" noWrap component="div">

interface/src/components/layout/LayoutMenuItem.tsx

@@ -1,5 +1,4 @@
 import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { grey } from '@mui/material/colors';
 import { Link, useLocation } from 'react-router-dom';
 import type { SvgIconProps } from '@mui/material';
 import type { FC } from 'react';
@@ -21,10 +20,10 @@ const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabl
   return (
     <ListItem disablePadding>
       <ListItemButton component={Link} to={to} disabled={disabled} selected={selected}>
-        <ListItemIcon sx={{ color: selected ? '#90caf9' : grey[500] }}>
+        <ListItemIcon sx={{ color: selected ? '#90caf9' : '#9e9e9e' }}>
           <Icon />
         </ListItemIcon>
-        <ListItemText sx={{ color: selected ? '#90caf9' : grey[100] }}>{label}</ListItemText>
+        <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>{label}</ListItemText>
       </ListItemButton>
     </ListItem>
   );

interface/src/components/routing/BlockNavigation.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 
 import type { unstable_Blocker as Blocker } from 'react-router-dom';
 
+import { dialogStyle } from 'CustomTheme';
 import { useI18nContext } from 'i18n/i18n-react';
 
 interface BlockNavigationProps {
@@ -13,7 +14,7 @@ const BlockNavigation: FC<BlockNavigationProps> = ({ blocker }) => {
   const { LL } = useI18nContext();
 
   return (
-    <Dialog open={blocker.state === 'blocked'}>
+    <Dialog sx={dialogStyle} open={blocker.state === 'blocked'}>
       <DialogTitle>{LL.BLOCK_NAVIGATE_1()}</DialogTitle>
       <DialogContent dividers>{LL.BLOCK_NAVIGATE_2()}</DialogContent>
       <DialogActions>

interface/src/framework/mqtt/MqttSettingsForm.tsx

@@ -310,7 +310,7 @@ const MqttSettingsForm: FC = () => {
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_heartbeat"
-              label={LL.MQTT_INT_HEARTBEAT()}
+              label="Heartbeat"
               InputProps={{
                 endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
               }}

interface/src/framework/network/NetworkSettingsForm.tsx

@@ -142,7 +142,7 @@ const WiFiSettingsForm: FC = () => {
                 secondary={'Security: ' + networkSecurityMode(selectedNetwork) + ', Ch: ' + selectedNetwork.channel}
               />
               <ListItemSecondaryAction>
-                <IconButton aria-label="Manual Config" onClick={deselectNetwork}>
+                <IconButton onClick={deselectNetwork}>
                   <DeleteIcon />
                 </IconButton>
               </ListItemSecondaryAction>

interface/src/framework/ntp/NTPStatusForm.tsx

@@ -28,6 +28,7 @@ import type { Theme } from '@mui/material';
 import type { FC } from 'react';
 
 import type { NTPStatus } from 'types';
+import { dialogStyle } from 'CustomTheme';
 import * as NTPApi from 'api/ntp';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
@@ -108,7 +109,7 @@ const NTPStatusForm: FC = () => {
   };
 
   const renderSetTimeDialog = () => (
-    <Dialog open={settingTime} onClose={() => setSettingTime(false)}>
+    <Dialog sx={dialogStyle} open={settingTime} onClose={() => setSettingTime(false)}>
       <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
       <DialogContent dividers>
         <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>

interface/src/framework/security/GenerateToken.tsx

@@ -14,6 +14,7 @@ import { useRequest } from 'alova';
 import { useEffect } from 'react';
 
 import type { FC } from 'react';
+import { dialogStyle } from 'CustomTheme';
 import * as SecurityApi from 'api/security';
 import { MessageBox } from 'components';
 
@@ -39,8 +40,8 @@ const GenerateToken: FC<GenerateTokenProps> = ({ username, onClose }) => {
   }, [open, generateToken]);
 
   return (
-    <Dialog onClose={onClose} aria-labelledby="generate-token-dialog-title" open={!!username} fullWidth maxWidth="sm">
+    <Dialog sx={dialogStyle} onClose={onClose} open={!!username} fullWidth maxWidth="sm">
-      <DialogTitle id="generate-token-dialog-title">{LL.ACCESS_TOKEN_FOR() + ' ' + username}</DialogTitle>
+      <DialogTitle>{LL.ACCESS_TOKEN_FOR() + ' ' + username}</DialogTitle>
       <DialogContent dividers>
         {token ? (
           <>

interface/src/framework/security/ManageUsersForm.tsx

@@ -161,15 +161,14 @@ const ManageUsersForm: FC = () => {
                       <IconButton
                         size="small"
                         disabled={!authenticatedContext.me.admin}
-                        aria-label="Generate Token"
                         onClick={() => generateToken(u.username)}
                       >
                         <VpnKeyIcon />
                       </IconButton>
-                      <IconButton size="small" aria-label="Delete" onClick={() => removeUser(u)}>
+                      <IconButton size="small" onClick={() => removeUser(u)}>
                         <DeleteIcon />
                       </IconButton>
-                      <IconButton size="small" aria-label="Edit" onClick={() => editUser(u)}>
+                      <IconButton size="small" onClick={() => editUser(u)}>
                         <EditIcon />
                       </IconButton>
                     </Cell>

interface/src/framework/security/UserForm.tsx

@@ -9,6 +9,7 @@ import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';
 
 import type { User } from 'types';
+import { dialogStyle } from 'CustomTheme';
 import { BlockFormControlLabel, ValidatedPasswordField, ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { updateValue } from 'utils';
@@ -51,7 +52,7 @@ const UserForm: FC<UserFormProps> = ({ creating, validator, user, setUser, onDon
   };
 
   return (
-    <Dialog onClose={onCancelEditing} open={!!user} fullWidth maxWidth="sm">
+    <Dialog sx={dialogStyle} onClose={onCancelEditing} open={!!user} fullWidth maxWidth="sm">
       {user && (
         <>
           <DialogTitle id="user-form-dialog-title">

interface/src/framework/system/SystemStatusForm.tsx

@@ -34,6 +34,7 @@ import RestartMonitor from './RestartMonitor';
 import SystemStatusVersionDialog from './SystemStatusVersionDialog';
 import type { FC } from 'react';
 
+import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
@@ -115,7 +116,7 @@ const SystemStatusForm: FC = () => {
   };
 
   const renderRestartDialog = () => (
-    <Dialog open={confirmRestart} onClose={() => setConfirmRestart(false)}>
+    <Dialog sx={dialogStyle} open={confirmRestart} onClose={() => setConfirmRestart(false)}>
       <DialogTitle>{LL.RESTART()}</DialogTitle>
       <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
       <DialogActions>
@@ -153,7 +154,7 @@ const SystemStatusForm: FC = () => {
   );
 
   const renderFactoryResetDialog = () => (
-    <Dialog open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
+    <Dialog sx={dialogStyle} open={confirmFactoryReset} onClose={() => setConfirmFactoryReset(false)}>
       <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
       <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
       <DialogActions>

interface/src/framework/system/SystemStatusVersionDialog.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Link, Typography } from '@mui/material';
 import { useRequest } from 'alova';
 import { useCallback, useEffect } from 'react';
+import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 
 import MessageBox from 'components/MessageBox';
@@ -49,7 +50,7 @@ const SystemStatusVersionDialog = ({ open, onClose, version, platform }: SystemS
   const getBinURL = (v: string) => 'EMS-ESP-' + v.replaceAll('.', '_') + '-' + platform.replaceAll('-', '_') + '.bin';
 
   return (
-    <Dialog open={open} onClose={onClose}>
+    <Dialog sx={dialogStyle} open={open} onClose={onClose}>
       <DialogTitle>{LL.VERSION_CHECK(1)}</DialogTitle>
       <DialogContent dividers>
         <MessageBox my={0} level="info" message={LL.VERSION_ON() + ' ' + version + ' (' + platform + ')'} />

interface/src/i18n/de/index.ts

@@ -246,7 +246,6 @@ const de: Translation = {
   MQTT_INT_THERMOSTATS: 'Thermostate',
   MQTT_INT_SOLAR: 'Solarmodule',
   MQTT_INT_MIXER: 'Mischermodule',
-  MQTT_INT_HEARTBEAT: 'Heartbeat',
   MQTT_QUEUE: 'MQTT Queue',
   DEFAULT: 'Standard',
   MQTT_ENTITY_FORMAT: 'Entitäts-ID Format',

interface/src/i18n/en/index.ts

@@ -186,7 +186,7 @@ const en: Translation = {
   USE: 'Use',
   FACTORY_RESET: 'Factory Reset',
   SYSTEM_FACTORY_TEXT: 'Device has been factory reset and will now restart',
-  SYSTEM_FACTORY_TEXT_DIALOG: 'Are you sure you want to reset the device to its factory defaults?',
+  SYSTEM_FACTORY_TEXT_DIALOG: 'Are you sure you want to reset EMS-ESP to its factory defaults?',
   VERSION_CHECK: 'Version Check',
   THE_LATEST: 'The latest',
   OFFICIAL: 'official',
@@ -246,7 +246,6 @@ const en: Translation = {
   MQTT_INT_THERMOSTATS: 'Thermostats',
   MQTT_INT_SOLAR: 'Solar Modules',
   MQTT_INT_MIXER: 'Mixer Modules',
-  MQTT_INT_HEARTBEAT: 'Heartbeat',
   MQTT_QUEUE: 'MQTT Queue',
   DEFAULT: 'Default',
   MQTT_ENTITY_FORMAT: 'Entity ID format',

interface/src/i18n/fr/index.ts

@@ -246,7 +246,6 @@ const fr: Translation = {
   MQTT_INT_THERMOSTATS: 'Thermostats',
   MQTT_INT_SOLAR: 'Modules solaires',
   MQTT_INT_MIXER: 'Modules mélangeurs',
-  MQTT_INT_HEARTBEAT: 'Battements',
   MQTT_QUEUE: 'Queue MQTT',
   DEFAULT: 'Défaut',
   MQTT_ENTITY_FORMAT: 'Entity ID format', // TODO translate

interface/src/i18n/it/index.ts

@@ -248,7 +248,6 @@ const it: Translation = {
   MQTT_INT_THERMOSTATS: 'Termostati',
   MQTT_INT_SOLAR: 'Moduli solari',
   MQTT_INT_MIXER: 'Moduli Mixer',
-  MQTT_INT_HEARTBEAT: 'Heartbeat',
   MQTT_QUEUE: 'Coda MQTT',
   DEFAULT: 'Predefinito',
   MQTT_ENTITY_FORMAT: 'Formato ID entità',

interface/src/i18n/nl/index.ts

@@ -193,7 +193,7 @@ const nl: Translation = {
   DEVELOPMENT: 'development',
   RELEASE_IS: 'release is',
   RELEASE_NOTES: 'release notes',
-  EMS_ESP_VER: 'EMS-ESP Version',
+  EMS_ESP_VER: 'EMS-ESP Versie',
   PLATFORM: 'Apparaat (Platform / SDK)',
   UPTIME: 'Systeem Uptime',
   CPU_FREQ: 'CPU Frequency',
@@ -246,7 +246,6 @@ const nl: Translation = {
   MQTT_INT_THERMOSTATS: 'Thermostaten',
   MQTT_INT_SOLAR: 'Solar Modules',
   MQTT_INT_MIXER: 'Mixer Modules',
-  MQTT_INT_HEARTBEAT: 'Heartbeat',
   MQTT_QUEUE: 'MQTT Queue',
   DEFAULT: 'Default',
   MQTT_ENTITY_FORMAT: 'Entity ID formaat',
@@ -282,7 +281,7 @@ const nl: Translation = {
   SCAN_AGAIN: 'Opnieuw scannen',
   NETWORK_SCANNER: 'Netwerk Scanner',
   NETWORK_NO_WIFI: 'Geen WiFi networken gevonden',
-  NETWORK_BLANK_SSID: 'laat leeg om WiFi uit te schakelen', // and enable ETH // TODO translate
+  NETWORK_BLANK_SSID: 'laat leeg om WiFi uit te schakelen',
   TX_POWER: 'Tx Vermogen',
   HOSTNAME: 'Hostname',
   NETWORK_DISABLE_SLEEP: 'WiFi Sleep Mode uitzetten',
@@ -323,7 +322,7 @@ const nl: Translation = {
   WRITEABLE: 'Beschrijfbare',
   SHOWING: 'Tonen',
   SEARCH: 'Zoek',
-  CERT: 'TSL root certificate (leave blank to disable TSL)' // TODO translate
+  CERT: 'TSL rootcertificaat (laat leeg om TSL uit te schakelen)'
 };
 
 export default nl;

interface/src/i18n/no/index.ts

@@ -246,7 +246,6 @@ const no: Translation = {
   MQTT_INT_THERMOSTATS: 'Termostat',
   MQTT_INT_SOLAR: 'Solpaneler',
   MQTT_INT_MIXER: 'Blandeventil',
-  MQTT_INT_HEARTBEAT: 'Heartbeat',
   MQTT_QUEUE: 'MQTT Queue',
   DEFAULT: 'Standard',
   MQTT_ENTITY_FORMAT: 'Enhets ID format',

interface/src/i18n/pl/index.ts

@@ -246,7 +246,6 @@ const pl: BaseTranslation = {
   MQTT_INT_THERMOSTATS: 'Termostaty',
   MQTT_INT_SOLAR: 'Panele solarne',
   MQTT_INT_MIXER: 'Mieszacze',
-  MQTT_INT_HEARTBEAT: '"Heartbeat" (aktywność)',
   MQTT_QUEUE: 'Kolejka MQTT',
   DEFAULT: '{{Pozostałe|Domyślna|}}',
   MQTT_ENTITY_FORMAT: 'Format "Entity ID"',

interface/src/i18n/sv/index.ts

@@ -246,7 +246,6 @@ const sv: Translation = {
   MQTT_INT_THERMOSTATS: 'Termostater',
   MQTT_INT_SOLAR: 'Solpaneler',
   MQTT_INT_MIXER: 'Blandningsventiler',
-  MQTT_INT_HEARTBEAT: 'Heartbeat',
   MQTT_QUEUE: 'MQTT-kö',
   DEFAULT: 'Standard',
   MQTT_ENTITY_FORMAT: 'Entitets-ID format',

interface/src/i18n/tr/index.ts

@@ -246,7 +246,6 @@ const tr: Translation = {
   MQTT_INT_THERMOSTATS: 'Termostatlar',
   MQTT_INT_SOLAR: 'Güneş Enerjisi Modülleri',
   MQTT_INT_MIXER: 'Karışım Modülleri',
-  MQTT_INT_HEARTBEAT: 'Kalp atışı',
   MQTT_QUEUE: 'MQTT Sırası',
   DEFAULT: 'Varsayılan',
   MQTT_ENTITY_FORMAT: 'Varlık Kimlik biçimi',

interface/src/project/DashboardDevices.tsx

@@ -35,7 +35,7 @@ import { useState, useContext, useEffect, useCallback, useLayoutEffect } from 'r
 
 import { IconContext } from 'react-icons';
 import { toast } from 'react-toastify';
-import DashboarDevicesDialog from './DashboardDevicesDialog';
+import DashboardDevicesDialog from './DashboardDevicesDialog';
 import DeviceIcon from './DeviceIcon';
 
 import * as EMSESP from './api';
@@ -45,6 +45,7 @@ import { DeviceValueUOM_s, DeviceEntityMask, DeviceType } from './types';
 import { deviceValueItemValidation } from './validators';
 import type { Device, DeviceValue } from './types';
 import type { FC } from 'react';
+import { dialogStyle } from 'CustomTheme';
 import { ButtonRow, SectionContent, MessageBox } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 
@@ -361,7 +362,7 @@ const DashboardDevices: FC = () => {
       }
 
       return (
-        <Dialog open={showDeviceInfo} onClose={() => setShowDeviceInfo(false)}>
+        <Dialog sx={dialogStyle} open={showDeviceInfo} onClose={() => setShowDeviceInfo(false)}>
           <DialogTitle>{LL.DEVICE_DETAILS()}</DialogTitle>
           <DialogContent dividers>
             <List dense={true}>
@@ -581,7 +582,7 @@ const DashboardDevices: FC = () => {
       {renderDeviceData()}
       {renderDeviceDetails()}
       {selectedDeviceValue && (
-        <DashboarDevicesDialog
+        <DashboardDevicesDialog
           open={deviceValueDialogOpen}
           onClose={deviceValueDialogClose}
           onSave={deviceValueDialogSave}

interface/src/project/DashboardDevicesDialog.tsx

@@ -16,7 +16,6 @@ import {
   Typography,
   CircularProgress
 } from '@mui/material';
-import { green } from '@mui/material/colors';
 import { useState, useEffect } from 'react';
 
 import { DeviceValueUOM, DeviceValueUOM_s } from './types';
@@ -24,12 +23,23 @@ import type { DeviceValue } from './types';
 import type Schema from 'async-validator';
 
 import type { ValidateFieldsError } from 'async-validator';
+import { dialogStyle } from 'CustomTheme';
 import { ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { updateValue } from 'utils';
 
 import { validate } from 'validators';
 
+// const dialogStyle = {
+//   '& .MuiDialog-paper': {
+//     borderRadius: '8px',
+//     borderColor: '#565656',
+//     borderStyle: 'solid',
+//     borderWidth: '1px'
+//   },
+//   backdropFilter: 'blur(1px)'
+// };
+
 type DashboardDevicesDialogProps = {
   open: boolean;
   onClose: () => void;
@@ -40,7 +50,7 @@ type DashboardDevicesDialogProps = {
   progress: boolean;
 };
 
-const DashboarDevicesDialog = ({
+const DashboardDevicesDialog = ({
   open,
   onClose,
   onSave,
@@ -112,16 +122,7 @@ const DashboarDevicesDialog = ({
   };
 
   return (
-    <Dialog
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
-      open={open}
-      onClose={close}
-      sx={{
-        '& .MuiDialog-paper': {
-          borderRadius: '12px'
-        },
-        backdropFilter: 'blur(1px)'
-      }}
-    >
       <DialogTitle>
         {selectedItem.v === '' && selectedItem.c ? LL.RUN_COMMAND() : writeable ? LL.CHANGE_VALUE() : LL.VALUE(0)}
       </DialogTitle>
@@ -206,7 +207,7 @@ const DashboarDevicesDialog = ({
               <CircularProgress
                 size={24}
                 sx={{
-                  color: green[500],
+                  color: '#4caf50',
                   position: 'absolute',
                   right: '20%',
                   marginTop: '6px'
@@ -224,4 +225,4 @@ const DashboarDevicesDialog = ({
   );
 };
 
-export default DashboarDevicesDialog;
+export default DashboardDevicesDialog;

interface/src/project/DashboardSensorsAnalogDialog.tsx

@@ -21,6 +21,7 @@ import { AnalogType, AnalogTypeNames, DeviceValueUOM_s } from './types';
 import type { AnalogSensor } from './types';
 import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
+import { dialogStyle } from 'CustomTheme';
 import { ValidatedTextField } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
@@ -77,7 +78,7 @@ const DashboardSensorsAnalogDialog = ({
   };
 
   return (
-    <Dialog open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
       <DialogTitle>
         {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;{LL.ANALOG_SENSOR(0)}
       </DialogTitle>

interface/src/project/DashboardSensorsTemperatureDialog.tsx

@@ -18,6 +18,7 @@ import { useState, useEffect } from 'react';
 import type { TemperatureSensor } from './types';
 import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
+import { dialogStyle } from 'CustomTheme';
 import { ValidatedTextField } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
@@ -67,7 +68,7 @@ const DashboardSensorsTemperatureDialog = ({
   };
 
   return (
-    <Dialog open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
       <DialogTitle>
         {LL.EDIT()}&nbsp;{LL.TEMP_SENSOR()}
       </DialogTitle>

interface/src/project/DashboardStatus.tsx

@@ -30,6 +30,7 @@ import type { Theme } from '@mui/material';
 
 import type { Translation } from 'i18n/i18n-types';
 import type { FC } from 'react';
+import { dialogStyle } from 'CustomTheme';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -173,7 +174,7 @@ const DashboardStatus: FC = () => {
   };
 
   const renderScanDialog = () => (
-    <Dialog open={confirmScan} onClose={() => setConfirmScan(false)}>
+    <Dialog sx={dialogStyle} open={confirmScan} onClose={() => setConfirmScan(false)}>
       <DialogTitle>{LL.SCAN_DEVICES()}</DialogTitle>
       <DialogContent dividers>{LL.EMS_SCAN()}</DialogContent>
       <DialogActions>

interface/src/project/SettingsCustomization.tsx

@@ -35,6 +35,7 @@ import * as EMSESP from './api';
 import { DeviceEntityMask } from './types';
 import type { DeviceShort, DeviceEntity } from './types';
 import type { FC } from 'react';
+import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { ButtonRow, SectionContent, MessageBox, BlockNavigation } from 'components';
 
@@ -484,7 +485,7 @@ const SettingsCustomization: FC = () => {
   };
 
   const renderResetDialog = () => (
-    <Dialog open={confirmReset} onClose={() => setConfirmReset(false)}>
+    <Dialog sx={dialogStyle} open={confirmReset} onClose={() => setConfirmReset(false)}>
       <DialogTitle>{LL.RESET(1)}</DialogTitle>
       <DialogContent dividers>{LL.CUSTOMIZATIONS_RESET()}</DialogContent>
       <DialogActions>

interface/src/project/SettingsCustomizationDialog.tsx

@@ -18,6 +18,7 @@ import EntityMaskToggle from './EntityMaskToggle';
 import { DeviceEntityMask } from './types';
 import type { DeviceEntity } from './types';
 
+import { dialogStyle } from 'CustomTheme';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import { updateValue } from 'utils';
@@ -63,7 +64,7 @@ const SettingsCustomizationDialog = ({ open, onClose, onSave, selectedItem }: Se
   };
 
   return (
-    <Dialog open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
       <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
       <DialogContent dividers>
         <Box color="warning.main">

interface/src/project/SettingsEntitiesDialog.tsx

@@ -22,6 +22,7 @@ import type { EntityItem } from './types';
 import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
 
+import { dialogStyle } from 'CustomTheme';
 import { BlockFormControlLabel, ValidatedTextField } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
@@ -90,7 +91,7 @@ const SettingsEntitiesDialog = ({
   };
 
   return (
-    <Dialog open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
       <DialogTitle>
         {creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()}&nbsp;{LL.ENTITY()}
       </DialogTitle>

interface/src/project/SettingsSchedulerDialog.tsx

@@ -25,6 +25,7 @@ import type { ScheduleItem } from './types';
 import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
 
+import { dialogStyle } from 'CustomTheme';
 import { BlockFormControlLabel, ValidatedTextField } from 'components';
 
 import { useI18nContext } from 'i18n/i18n-react';
@@ -129,7 +130,7 @@ const SettingsSchedulerDialog = ({
   const isTimer = editItem.flags === ScheduleFlag.SCHEDULE_TIMER;
 
   return (
-    <Dialog open={open} onClose={close}>
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
       <DialogTitle>
         {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;{LL.SCHEDULE(1)}
       </DialogTitle>

interface/vite.config.ts

@@ -18,9 +18,9 @@ export default defineConfig(({ command, mode }) => {
       plugins: [
         preact(),
         viteTsconfigPaths(),
-        svgrPlugin()
+        svgrPlugin(),
         // prefresh()
-        // ProgmemGenerator({ outputPath: '../lib/framework/WWWData.h', bytesPerLine: 20 })
+        ProgmemGenerator({ outputPath: '../lib/framework/WWWData.h', bytesPerLine: 20 })
       ],
 
       build: {

interface/yarn.lock

@@ -357,7 +357,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.7":
   version: 7.22.6
   resolution: "@babel/runtime@npm:7.22.6"
   dependencies:
@@ -875,14 +875,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-beta.9":
+"@mui/base@npm:5.0.0-beta.10":
-  version: 5.0.0-beta.9
+  version: 5.0.0-beta.10
-  resolution: "@mui/base@npm:5.0.0-beta.9"
+  resolution: "@mui/base@npm:5.0.0-beta.10"
   dependencies:
     "@babel/runtime": ^7.22.6
     "@emotion/is-prop-valid": ^1.2.1
     "@mui/types": ^7.2.4
-    "@mui/utils": ^5.14.3
+    "@mui/utils": ^5.14.4
     "@popperjs/core": ^2.11.8
     clsx: ^2.0.0
     prop-types: ^15.8.1
@@ -894,14 +894,14 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: adf4e08b0798266ecf80c50b8898913c46cae829958b938c69a662bd88146a112d15277e257043ab540e95d397710388b7e59d2043f45faef9e6a993415d46a5
+  checksum: c7563a107334ef47eff5aa2595b0200f3b4061a0757aa0fb43e5c56e2fba594b20a3a535ea9847fa6e7138f4fcff7e67893193fb647730a2a6b0cb9ea1016c9a
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^5.14.3":
+"@mui/core-downloads-tracker@npm:^5.14.4":
-  version: 5.14.3
+  version: 5.14.4
-  resolution: "@mui/core-downloads-tracker@npm:5.14.3"
+  resolution: "@mui/core-downloads-tracker@npm:5.14.4"
-  checksum: aa26434efc2e36aeb58f5f56d879a02eb064765bb3c82abe6e9e72330b6778852852e11ecc6166aecf168b1f6f07d81d4ecf84f8b3f2978587485013d5e82c54
+  checksum: 23d652570020fcba2956dcc53da94da0242a900a3fa5ca4af1bfcb74f4ea6bc6f6725e1908dde232caf3a3a55fc0ab34fcb05832e3a41fbd8070b3d13a6aa6cc
   languageName: node
   linkType: hard
 
@@ -921,16 +921,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^5.14.3":
+"@mui/material@npm:^5.14.4":
-  version: 5.14.3
+  version: 5.14.4
-  resolution: "@mui/material@npm:5.14.3"
+  resolution: "@mui/material@npm:5.14.4"
   dependencies:
     "@babel/runtime": ^7.22.6
-    "@mui/base": 5.0.0-beta.9
+    "@mui/base": 5.0.0-beta.10
-    "@mui/core-downloads-tracker": ^5.14.3
+    "@mui/core-downloads-tracker": ^5.14.4
-    "@mui/system": ^5.14.3
+    "@mui/system": ^5.14.4
     "@mui/types": ^7.2.4
-    "@mui/utils": ^5.14.3
+    "@mui/utils": ^5.14.4
     "@types/react-transition-group": ^4.4.6
     clsx: ^2.0.0
     csstype: ^3.1.2
@@ -950,16 +950,16 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 29c3122b57423467b8ece41dacffb0bf8bdec5cd498d61ab6c0d320cd2a6d567e78ce3658a2987c2d5ab474b4396104af99308193d51a53c51d0e2ac3e99bb8b
+  checksum: 653b87fbd92de29a0e37579651333bea078518a81cbbab6f37b807aee10af438a050660b887da81ee5df8d14f688b169573f4f709f0e6c28d4a19c9de2eed502
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^5.13.7":
+"@mui/private-theming@npm:^5.14.4":
-  version: 5.13.7
+  version: 5.14.4
-  resolution: "@mui/private-theming@npm:5.13.7"
+  resolution: "@mui/private-theming@npm:5.14.4"
   dependencies:
-    "@babel/runtime": ^7.22.5
+    "@babel/runtime": ^7.22.6
-    "@mui/utils": ^5.13.7
+    "@mui/utils": ^5.14.4
     prop-types: ^15.8.1
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
@@ -967,7 +967,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: e38b0a441f55651767a8b29d767c9457d368ab0870f76d38d001fd127663796a219f8c50be79a71343faa798e1ae78b4b379d3c1e391fb0910b27fedf5ce3f70
+  checksum: 647c19aab6420c4cd5529220c30afa77278badb8cff0251f84bc0d41b566f9c3f3771a59f1100d87a90f420a057679bc9e696da0fcd56272bf3fb4c13769fb8b
   languageName: node
   linkType: hard
 
@@ -992,15 +992,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.14.3":
+"@mui/system@npm:^5.14.4":
-  version: 5.14.3
+  version: 5.14.4
-  resolution: "@mui/system@npm:5.14.3"
+  resolution: "@mui/system@npm:5.14.4"
   dependencies:
     "@babel/runtime": ^7.22.6
-    "@mui/private-theming": ^5.13.7
+    "@mui/private-theming": ^5.14.4
     "@mui/styled-engine": ^5.13.2
     "@mui/types": ^7.2.4
-    "@mui/utils": ^5.14.3
+    "@mui/utils": ^5.14.4
     clsx: ^2.0.0
     csstype: ^3.1.2
     prop-types: ^15.8.1
@@ -1016,7 +1016,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 8fef8203a024ea24b581096cc9a72ef0d6df3bf492949faf603dee242a3d36c74903d5683cda786af228a7ad5c169b40e83f101030dab149e7857cf77c59fed1
+  checksum: d8d74d5c05cd73cf859649ca2abbbaccc37bf6b87a122c09f080349f3e22e3d1c4cacc1f6d23a808b19078eba9a68a6ac2781e0783f6ca18d66964306c766f78
   languageName: node
   linkType: hard
 
@@ -1032,9 +1032,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.13.7, @mui/utils@npm:^5.14.3":
+"@mui/utils@npm:^5.14.4":
-  version: 5.14.3
+  version: 5.14.4
-  resolution: "@mui/utils@npm:5.14.3"
+  resolution: "@mui/utils@npm:5.14.4"
   dependencies:
     "@babel/runtime": ^7.22.6
     "@types/prop-types": ^15.7.5
@@ -1043,7 +1043,7 @@ __metadata:
     react-is: ^18.2.0
   peerDependencies:
     react: ^17.0.0 || ^18.0.0
-  checksum: 0f713f45639865df7babcd34bd69f5dc7214f27f31a519671f67c98d4b5c971e1e3e5321cca5ffa533f500eb8ebb88b806534202c2800d9395b43cabfb24d42a
+  checksum: ad0d6ac443cc99c74949bd0cac86034ea2c847419e014e2e49f9bf1d1c648d05649d682145fc7ff632b064bbf9f582a28e313091388ed6e640266c2a0ecf8533
   languageName: node
   linkType: hard
 
@@ -1335,9 +1335,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@table-library/react-table-library@npm:4.1.4":
+"@table-library/react-table-library@npm:4.1.6":
-  version: 4.1.4
+  version: 4.1.6
-  resolution: "@table-library/react-table-library@npm:4.1.4"
+  resolution: "@table-library/react-table-library@npm:4.1.6"
   dependencies:
     clsx: 1.1.1
     react-virtualized-auto-sizer: 1.0.7
@@ -1346,7 +1346,7 @@ __metadata:
     "@emotion/react": ">= 11"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: ace2711b777e596ed5fd1623108ac8fb7403566b108725f97e6710019a11f28f1f86b916932a662ad53ad18c994ba626f0b2fd7e6be91c44dff16d54e0364f0d
+  checksum: 148b33000353068d2f40ce4e18d5c3314e4d66840822f83abbdc5c3cd9c82c297f28eea3df0ea2231308c56cc5fe34c5d4ab69be38a066cd4fd18e25214a76c0
   languageName: node
   linkType: hard
 
@@ -1511,7 +1511,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18.2.18":
+"@types/react@npm:*":
   version: 18.2.18
   resolution: "@types/react@npm:18.2.18"
   dependencies:
@@ -1522,6 +1522,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^18.2.19":
+  version: 18.2.19
+  resolution: "@types/react@npm:18.2.19"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: 8ebea4e6e154b32135e54d8ead9ec2d7c99bdeb0b5d51b4a01dfcb0a6eaf0cea566463148abff8755b29e2aea8c3e66dc09e6cfface2161f46fc9a023823ffd3
+  languageName: node
+  linkType: hard
+
 "@types/scheduler@npm:*":
   version: 0.16.3
   resolution: "@types/scheduler@npm:0.16.3"
@@ -1668,15 +1679,15 @@ __metadata:
     "@emotion/react": ^11.11.1
     "@emotion/styled": ^11.11.0
     "@mui/icons-material": ^5.14.3
-    "@mui/material": ^5.14.3
+    "@mui/material": ^5.14.4
     "@preact/compat": ^17.1.2
     "@preact/preset-vite": ^2.5.0
     "@prefresh/vite": ^2.4.1
-    "@table-library/react-table-library": 4.1.4
+    "@table-library/react-table-library": 4.1.6
     "@types/babel__core": ^7
     "@types/lodash-es": ^4.17.8
     "@types/node": ^20.4.8
-    "@types/react": ^18.2.18
+    "@types/react": ^18.2.19
     "@types/react-dom": ^18.2.7
     "@types/react-router-dom": ^5.3.3
     "@typescript-eslint/eslint-plugin": ^6.3.0