add style to Dialog boxes

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/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/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/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/project/DashboardDevices.tsx

@@ -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}>

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;
@@ -112,16 +122,7 @@ const DashboardDevicesDialog = ({
   };
 
   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 DashboardDevicesDialog = ({
               <CircularProgress
                 size={24}
                 sx={{
-                  color: green[500],
+                  color: '#4caf50',
                   position: 'absolute',
                   right: '20%',
                   marginTop: '6px'

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>