migrate deprecated Grid v5 to v6 (Grid2)

interface/src/SignIn.tsx

@@ -109,9 +109,11 @@ const SignIn = () => {
             onChange={updateLoginRequestValue}
             margin="normal"
             variant="outlined"
-            inputProps={{
+            slotProps={{
-              autoCapitalize: 'none',
+              input: {
-              autoCorrect: 'off'
+                autoCapitalize: 'none',
+                autoCorrect: 'off'
+              }
             }}
           />
           <ValidatedPasswordField

interface/src/app/main/CustomEntitiesDialog.tsx

@@ -12,11 +12,11 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   InputAdornment,
   MenuItem,
   TextField
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import type Schema from 'async-validator';
@@ -100,8 +100,8 @@ const CustomEntitiesDialog = ({
         <Box display="flex" flexWrap="wrap" mb={1}>
           <Box flexWrap="nowrap" whiteSpace="nowrap" />
         </Box>
-        <Grid container spacing={2}>
+        <Grid container spacing={1} rowSpacing={0}>
-          <Grid item xs={4}>
+          <Grid size={12}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="name"
@@ -112,7 +112,7 @@ const CustomEntitiesDialog = ({
               onChange={updateFormValue}
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid>
             <TextField
               name="ram"
               label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
@@ -128,7 +128,7 @@ const CustomEntitiesDialog = ({
             </TextField>
           </Grid>
           {editItem.ram === 1 && (
-            <Grid item xs={4}>
+            <Grid>
               <TextField
                 name="value"
                 label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
@@ -143,7 +143,7 @@ const CustomEntitiesDialog = ({
           )}
           {editItem.ram === 0 && (
             <>
-              <Grid item xs={4} mt={3}>
+              <Grid mt={3} size={9}>
                 <BlockFormControlLabel
                   control={
                     <Checkbox
@@ -155,63 +155,67 @@ const CustomEntitiesDialog = ({
                   label={LL.WRITEABLE()}
                 />
               </Grid>
-              <Grid item xs={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="device_id"
                   label={LL.ID_OF(LL.DEVICE())}
                   margin="normal"
+                  sx={{ width: '11ch' }}
                   type="string"
-                  fullWidth
                   value={editItem.device_id as string}
                   onChange={updateFormValue}
-                  inputProps={{ style: { textTransform: 'uppercase' } }}
+                  slotProps={{
-                  InputProps={{
+                    input: {
-                    startAdornment: (
+                      startAdornment: (
-                      <InputAdornment position="start">0x</InputAdornment>
+                        <InputAdornment position="start">0x</InputAdornment>
-                    )
+                      )
+                    },
+                    htmlInput: { style: { textTransform: 'uppercase' } }
                   }}
                 />
               </Grid>
-              <Grid item xs={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="type_id"
                   label={LL.ID_OF(LL.TYPE(1))}
                   margin="normal"
-                  fullWidth
+                  sx={{ width: '11ch' }}
                   type="string"
                   value={editItem.type_id as string}
                   onChange={updateFormValue}
-                  inputProps={{ style: { textTransform: 'uppercase' } }}
+                  slotProps={{
-                  InputProps={{
+                    input: {
-                    startAdornment: (
+                      startAdornment: (
-                      <InputAdornment position="start">0x</InputAdornment>
+                        <InputAdornment position="start">0x</InputAdornment>
-                    )
+                      )
+                    },
+                    htmlInput: { style: { textTransform: 'uppercase' } }
                   }}
                 />
               </Grid>
-              <Grid item xs={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="offset"
                   label={LL.OFFSET()}
                   margin="normal"
-                  fullWidth
+                  sx={{ width: '11ch' }}
                   type="number"
                   value={editItem.offset}
                   onChange={updateFormValue}
                 />
               </Grid>
-              <Grid item xs={4}>
+              <Grid>
                 <TextField
                   name="value_type"
                   label={LL.VALUE(0) + ' ' + LL.TYPE(1)}
                   value={editItem.value_type}
                   variant="outlined"
+                  sx={{ width: '11ch' }}
                   onChange={updateFormValue}
                   margin="normal"
-                  fullWidth
                   select
                 >
                   <MenuItem value={DeviceValueType.BOOL}>
@@ -247,26 +251,28 @@ const CustomEntitiesDialog = ({
               {editItem.value_type !== DeviceValueType.BOOL &&
                 editItem.value_type !== DeviceValueType.STRING && (
                   <>
-                    <Grid item xs={4}>
+                    <Grid>
                       <TextField
                         name="factor"
                         label={LL.FACTOR()}
                         value={numberValue(editItem.factor)}
                         variant="outlined"
                         onChange={updateFormValue}
-                        fullWidth
+                        sx={{ width: '11ch' }}
                         margin="normal"
                         type="number"
-                        inputProps={{ step: '0.001' }}
+                        slotProps={{
+                          htmlInput: { step: '0.001' }
+                        }}
                       />
                     </Grid>
-                    <Grid item xs={4}>
+                    <Grid>
                       <TextField
                         name="uom"
                         label={LL.UNIT()}
                         value={editItem.uom}
                         margin="normal"
-                        fullWidth
+                        sx={{ width: '11ch' }}
                         onChange={updateFormValue}
                         select
                       >
@@ -281,20 +287,21 @@ const CustomEntitiesDialog = ({
                 )}
               {editItem.value_type === DeviceValueType.STRING &&
                 editItem.device_id !== '0' && (
-                  <Grid item xs={4}>
+                  <Grid>
                     <TextField
                       name="factor"
                       label="Bytes"
                       value={editItem.factor}
                       variant="outlined"
                       onChange={updateFormValue}
-                      fullWidth
                       margin="normal"
                       type="number"
-                      inputProps={{
+                      slotProps={{
-                        min: '1',
+                        htmlInput: {
-                        max: String(256 - editItem.offset),
+                          min: '1',
-                        step: '1'
+                          max: String(256 - editItem.offset),
+                          step: '1'
+                        }
                       }}
                     />
                   </Grid>
@@ -303,7 +310,6 @@ const CustomEntitiesDialog = ({
           )}
         </Grid>
       </DialogContent>
-
       <DialogActions>
         {!creating && (
           <Box flexGrow={1}>

interface/src/app/main/Customizations.tsx

@@ -16,7 +16,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   InputAdornment,
   Link,
   MenuItem,
@@ -25,6 +24,7 @@ import {
   ToggleButtonGroup,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { restart } from 'api/system';
 
@@ -514,7 +514,7 @@ const Customizations = () => {
           justifyContent="flex-start"
           alignItems="center"
         >
-          <Grid item xs={2}>
+          <Grid>
             <TextField
               size="small"
               variant="outlined"
@@ -522,16 +522,18 @@ const Customizations = () => {
               onChange={(event) => {
                 setSearch(event.target.value);
               }}
-              InputProps={{
+              slotProps={{
-                startAdornment: (
+                input: {
-                  <InputAdornment position="start">
+                  startAdornment: (
-                    <SearchIcon color="primary" sx={{ fontSize: 16 }} />
+                    <InputAdornment position="start">
-                  </InputAdornment>
+                      <SearchIcon color="primary" sx={{ fontSize: 16 }} />
-                )
+                    </InputAdornment>
+                  )
+                }
               }}
             />
           </Grid>
-          <Grid item>
+          <Grid>
             <ToggleButtonGroup
               size="small"
               color="secondary"
@@ -557,7 +559,7 @@ const Customizations = () => {
               </ToggleButton>
             </ToggleButtonGroup>
           </Grid>
-          <Grid item>
+          <Grid>
             <Button
               size="small"
               sx={{ fontSize: 10 }}
@@ -570,7 +572,7 @@ const Customizations = () => {
               <OptionIcon type="web_exclude" isSet={false} />
             </Button>
           </Grid>
-          <Grid item>
+          <Grid>
             <Button
               size="small"
               sx={{ fontSize: 10 }}
@@ -583,7 +585,7 @@ const Customizations = () => {
               <OptionIcon type="web_exclude" isSet={true} />
             </Button>
           </Grid>
-          <Grid item>
+          <Grid>
             <Typography variant="subtitle2" color="primary">
               {LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
               &nbsp;{LL.ENTITIES(deviceEntities.length)}

interface/src/app/main/CustomizationsDialog.tsx

@@ -10,10 +10,10 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   TextField,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -81,7 +81,7 @@ const CustomizationsDialog = ({
     <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
       <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
       <DialogContent dividers>
-        <Grid container direction="row">
+        <Grid container>
           <Typography variant="body2" color="warning.main">
             {LL.ID_OF(LL.ENTITY())}:&nbsp;
           </Typography>
@@ -112,19 +112,18 @@ const CustomizationsDialog = ({
           <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
         </Box>
         <Grid container spacing={1}>
-          <Grid item>
+          <Grid>
             <TextField
               name="cn"
               label={LL.NEW_NAME_OF(LL.ENTITY())}
               value={editItem.cn}
-              // autoFocus
               sx={{ width: '30ch' }}
               onChange={updateFormValue}
             />
           </Grid>
           {isWriteableNumber && (
             <>
-              <Grid item>
+              <Grid>
                 <TextField
                   name="mi"
                   label={LL.MIN()}
@@ -134,7 +133,7 @@ const CustomizationsDialog = ({
                   onChange={updateFormValue}
                 />
               </Grid>
-              <Grid item>
+              <Grid>
                 <TextField
                   name="ma"
                   label={LL.MAX()}

interface/src/app/main/Devices.tsx

@@ -30,7 +30,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   IconButton,
   List,
   ListItem,
@@ -41,6 +40,7 @@ import {
   styled,
   tooltipClasses
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { useRowSelect } from '@table-library/react-table-library/select';
 import { SortToggleType, useSort } from '@table-library/react-table-library/sort';
@@ -677,7 +677,7 @@ const Devices = () => {
                 </IconButton>
               </ButtonTooltip>
             </Typography>
-            <Grid item zeroMinWidth justifyContent="flex-end">
+            <Grid justifyContent="flex-end">
               <ButtonTooltip title={LL.CANCEL()}>
                 <IconButton onClick={resetDeviceSelect}>
                   <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />

interface/src/app/main/DevicesDialog.tsx

@@ -11,12 +11,12 @@ import {
   DialogContent,
   DialogTitle,
   FormHelperText,
-  Grid,
   InputAdornment,
   MenuItem,
   TextField,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import type Schema from 'async-validator';
@@ -112,15 +112,14 @@ const DevicesDialog = ({
         <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
           <Typography variant="body2">{editItem.id.slice(2)}</Typography>
         </Box>
-        <Grid>
+        <Grid container>
-          <Grid item>
+          <Grid size={12}>
             {editItem.l ? (
               <TextField
                 name="v"
                 label={LL.VALUE(0)}
                 value={editItem.v}
                 disabled={!writeable}
-                // autoFocus
                 sx={{ width: '30ch' }}
                 select
                 onChange={updateFormValue}
@@ -142,17 +141,17 @@ const DevicesDialog = ({
                 type="number"
                 sx={{ width: '30ch' }}
                 onChange={updateFormValue}
-                inputProps={
+                slotProps={{
-                  editItem.s
+                  htmlInput: editItem.s
                     ? { min: editItem.m, max: editItem.x, step: editItem.s }
-                    : {}
+                    : {},
-                }
+                  input: {
-                InputProps={{
+                    startAdornment: (
-                  startAdornment: (
+                      <InputAdornment position="start">
-                    <InputAdornment position="start">
+                        {setUom(editItem.u)}
-                      {setUom(editItem.u)}
+                      </InputAdornment>
-                    </InputAdornment>
+                    )
-                  )
+                  }
                 }}
               />
             ) : (
@@ -162,7 +161,6 @@ const DevicesDialog = ({
                 label={LL.VALUE(0)}
                 value={editItem.v}
                 disabled={!writeable}
-                // autoFocus
                 sx={{ width: '30ch' }}
                 multiline={editItem.u ? false : true}
                 onChange={updateFormValue}
@@ -170,7 +168,7 @@ const DevicesDialog = ({
             )}
           </Grid>
           {writeable && (
-            <Grid item>
+            <Grid>
               <FormHelperText>{showHelperText(editItem)}</FormHelperText>
             </Grid>
           )}

interface/src/app/main/ModulesDialog.tsx

@@ -10,9 +10,9 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   TextField
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import { BlockFormControlLabel } from 'components';

interface/src/app/main/SchedulerDialog.tsx

@@ -13,12 +13,12 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   TextField,
   ToggleButton,
   ToggleButtonGroup,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import type Schema from 'async-validator';

interface/src/app/main/SensorsAnalogDialog.tsx

@@ -10,12 +10,12 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   InputAdornment,
   MenuItem,
   TextField,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import type Schema from 'async-validator';
@@ -86,11 +86,12 @@ const SensorsAnalogDialog = ({
       </DialogTitle>
       <DialogContent dividers>
         <Grid container spacing={2}>
-          <Grid item xs={4}>
+          <Grid>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="g"
               label="GPIO"
+              sx={{ width: '15ch' }}
               value={numberValue(editItem.g)}
               type="number"
               variant="outlined"
@@ -98,13 +99,13 @@ const SensorsAnalogDialog = ({
             />
           </Grid>
           {creating && (
-            <Grid item>
+            <Grid>
               <Box color="warning.main" mt={2}>
                 <Typography variant="body2">{LL.WARN_GPIO()}</Typography>
               </Box>
             </Grid>
           )}
-          <Grid item xs={12}>
+          <Grid>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="n"
@@ -115,7 +116,7 @@ const SensorsAnalogDialog = ({
               onChange={updateFormValue}
             />
           </Grid>
-          <Grid item xs={8}>
+          <Grid>
             <TextField
               name="t"
               label={LL.TYPE(0)}
@@ -132,12 +133,12 @@ const SensorsAnalogDialog = ({
             </TextField>
           </Grid>
           {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
-            <Grid item xs={4}>
+            <Grid>
               <TextField
                 name="u"
                 label={LL.UNIT()}
                 value={editItem.u}
-                fullWidth
+                sx={{ width: '15ch' }}
                 select
                 onChange={updateFormValue}
               >
@@ -150,55 +151,61 @@ const SensorsAnalogDialog = ({
             </Grid>
           )}
           {editItem.t === AnalogType.ADC && (
-            <Grid item xs={4}>
+            <Grid>
               <TextField
                 name="o"
                 label={LL.OFFSET()}
                 value={numberValue(editItem.o)}
-                fullWidth
                 type="number"
+                sx={{ width: '15ch' }}
                 variant="outlined"
                 onChange={updateFormValue}
-                inputProps={{ min: '0', max: '3300', step: '1' }}
+                slotProps={{
-                InputProps={{
+                  input: {
-                  startAdornment: (
+                    startAdornment: (
-                    <InputAdornment position="start">mV</InputAdornment>
+                      <InputAdornment position="start">mV</InputAdornment>
-                  )
+                    )
+                  },
+                  htmlInput: { min: '0', max: '3300', step: '1' }
                 }}
               />
             </Grid>
           )}
           {editItem.t === AnalogType.COUNTER && (
-            <Grid item xs={4}>
+            <Grid>
               <TextField
                 name="o"
                 label={LL.STARTVALUE()}
                 value={numberValue(editItem.o)}
-                fullWidth
                 type="number"
+                sx={{ width: '15ch' }}
                 variant="outlined"
                 onChange={updateFormValue}
-                inputProps={{ step: '0.001' }}
+                slotProps={{
+                  htmlInput: { step: '0.001' }
+                }}
               />
             </Grid>
           )}
           {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
-            <Grid item xs={4}>
+            <Grid>
               <TextField
                 name="f"
                 label={LL.FACTOR()}
                 value={numberValue(editItem.f)}
-                fullWidth
+                sx={{ width: '15ch' }}
                 type="number"
                 variant="outlined"
                 onChange={updateFormValue}
-                inputProps={{ step: '0.001' }}
+                slotProps={{
+                  htmlInput: { step: '0.001' }
+                }}
               />
             </Grid>
           )}
           {editItem.t === AnalogType.DIGITAL_OUT &&
             (editItem.g === 25 || editItem.g === 26) && (
-              <Grid item xs={4}>
+              <Grid>
                 <TextField
                   name="o"
                   label={LL.VALUE(0)}
@@ -207,7 +214,9 @@ const SensorsAnalogDialog = ({
                   type="number"
                   variant="outlined"
                   onChange={updateFormValue}
-                  inputProps={{ min: '0', max: '255', step: '1' }}
+                  slotProps={{
+                    htmlInput: { min: '0', max: '255', step: '1' }
+                  }}
                 />
               </Grid>
             )}
@@ -215,12 +224,11 @@ const SensorsAnalogDialog = ({
             editItem.g !== 25 &&
             editItem.g !== 26 && (
               <>
-                <Grid item xs={4}>
+                <Grid>
                   <TextField
                     name="o"
                     label={LL.VALUE(0)}
                     value={numberValue(editItem.o)}
-                    fullWidth
                     select
                     variant="outlined"
                     onChange={updateFormValue}
@@ -229,12 +237,12 @@ const SensorsAnalogDialog = ({
                     <MenuItem value={1}>{LL.ON()}</MenuItem>
                   </TextField>
                 </Grid>
-                <Grid item xs={4}>
+                <Grid>
                   <TextField
                     name="f"
                     label={LL.POLARITY()}
                     value={editItem.f}
-                    fullWidth
+                    sx={{ width: '15ch' }}
                     select
                     onChange={updateFormValue}
                   >
@@ -242,12 +250,12 @@ const SensorsAnalogDialog = ({
                     <MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
                   </TextField>
                 </Grid>
-                <Grid item xs={4}>
+                <Grid>
                   <TextField
                     name="u"
                     label={LL.STARTVALUE()}
+                    sx={{ width: '15ch' }}
                     value={editItem.u}
-                    fullWidth
                     select
                     onChange={updateFormValue}
                   >
@@ -266,37 +274,41 @@ const SensorsAnalogDialog = ({
             editItem.t === AnalogType.PWM_1 ||
             editItem.t === AnalogType.PWM_2) && (
             <>
-              <Grid item xs={4}>
+              <Grid>
                 <TextField
                   name="f"
                   label={LL.FREQ()}
                   value={numberValue(editItem.f)}
-                  fullWidth
                   type="number"
                   variant="outlined"
+                  sx={{ width: '15ch' }}
                   onChange={updateFormValue}
-                  inputProps={{ min: '1', max: '5000', step: '1' }}
+                  slotProps={{
-                  InputProps={{
+                    input: {
-                    startAdornment: (
+                      startAdornment: (
-                      <InputAdornment position="start">Hz</InputAdornment>
+                        <InputAdornment position="start">Hz</InputAdornment>
-                    )
+                      )
+                    },
+                    htmlInput: { min: '1', max: '5000', step: '1' }
                   }}
                 />
               </Grid>
-              <Grid item xs={4}>
+              <Grid>
                 <TextField
                   name="o"
                   label={LL.DUTY_CYCLE()}
                   value={numberValue(editItem.o)}
-                  fullWidth
                   type="number"
+                  sx={{ width: '15ch' }}
                   variant="outlined"
                   onChange={updateFormValue}
-                  inputProps={{ min: '0', max: '100', step: '0.1' }}
+                  slotProps={{
-                  InputProps={{
+                    input: {
-                    startAdornment: (
+                      startAdornment: (
-                      <InputAdornment position="start">%</InputAdornment>
+                        <InputAdornment position="start">%</InputAdornment>
-                    )
+                      )
+                    },
+                    htmlInput: { min: '0', max: '100', step: '0.1' }
                   }}
                 />
               </Grid>

interface/src/app/main/SensorsTemperatureDialog.tsx

@@ -9,11 +9,11 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   InputAdornment,
   TextField,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { dialogStyle } from 'CustomTheme';
 import type Schema from 'async-validator';
@@ -80,18 +80,17 @@ const SensorsTemperatureDialog = ({
           </Typography>
         </Box>
         <Grid container spacing={1}>
-          <Grid item>
+          <Grid>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="n"
               label={LL.NAME(0)}
               value={editItem.n}
-              // autoFocus
               sx={{ width: '30ch' }}
               onChange={updateFormValue}
             />
           </Grid>
-          <Grid item>
+          <Grid>
             <TextField
               name="o"
               label={LL.OFFSET()}
@@ -100,9 +99,13 @@ const SensorsTemperatureDialog = ({
               type="number"
               variant="outlined"
               onChange={updateFormValue}
-              inputProps={{ min: '-5', max: '5', step: '0.1' }}
+              slotProps={{
-              InputProps={{
+                input: {
-                startAdornment: <InputAdornment position="start">°C</InputAdornment>
+                  startAdornment: (
+                    <InputAdornment position="start">°C</InputAdornment>
+                  )
+                },
+                htmlInput: { min: '-5', max: '5', step: '0.1' }
               }}
             />
           </Grid>

interface/src/app/main/types.ts

@@ -420,12 +420,11 @@ export const enum DeviceValueType {
   TIME, // same as UINT24
   UINT32,
   ENUM,
-  STRING,
+  STRING, // RAW
   CMD
 }
 
 export const DeviceValueTypeNames = [
-  //
   'BOOL',
   'INT8',
   'UINT8',

interface/src/app/settings/ApplicationSettings.tsx

@@ -9,12 +9,12 @@ import {
   Button,
   Checkbox,
   Divider,
-  Grid,
   InputAdornment,
   MenuItem,
   TextField,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import { readHardwareStatus, restart } from 'api/system';
 
@@ -114,6 +114,19 @@ const ApplicationSettings = () => {
 
   useLayoutTitle(LL.SETTINGS_OF(LL.APPLICATION()));
 
+  const SecondsInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+  };
+  const MilliSecondsInputProps = {
+    endAdornment: <InputAdornment position="end">ms</InputAdornment>
+  };
+  const MinutesInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
+  };
+  const HoursInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
+  };
+
   const content = () => {
     if (!data || !hardwareData) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -191,19 +204,12 @@ const ApplicationSettings = () => {
           label={LL.ENABLE_MODBUS()}
         />
         {data.modbus_enabled && (
-          <Grid
+          <Grid container spacing={1} rowSpacing={0}>
-            container
+            <Grid>
-            spacing={1}
-            direction="row"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="modbus_max_clients"
                 label={LL.AP_MAX_CLIENTS()}
-                fullWidth
                 variant="outlined"
                 value={numberValue(data.modbus_max_clients)}
                 type="number"
@@ -211,12 +217,11 @@ const ApplicationSettings = () => {
                 margin="normal"
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="modbus_port"
                 label="Port"
-                fullWidth
                 variant="outlined"
                 value={numberValue(data.modbus_port)}
                 type="number"
@@ -224,15 +229,14 @@ const ApplicationSettings = () => {
                 margin="normal"
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="modbus_timeout"
                 label="Timeout"
-                InputProps={{
+                slotProps={{
-                  endAdornment: <InputAdornment position="end">ms</InputAdornment>
+                  input: MilliSecondsInputProps
                 }}
-                fullWidth
                 variant="outlined"
                 value={numberValue(data.modbus_timeout)}
                 type="number"
@@ -254,31 +258,23 @@ const ApplicationSettings = () => {
           label={LL.ENABLE_SYSLOG()}
         />
         {data.syslog_enabled && (
-          <Grid
+          <Grid container spacing={1} rowSpacing={0}>
-            container
+            <Grid>
-            spacing={1}
-            direction="row"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_host"
                 label="Host"
-                fullWidth
                 variant="outlined"
                 value={data.syslog_host}
                 onChange={updateFormValue}
                 margin="normal"
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_port"
                 label="Port"
-                fullWidth
                 variant="outlined"
                 value={numberValue(data.syslog_port)}
                 type="number"
@@ -286,7 +282,7 @@ const ApplicationSettings = () => {
                 margin="normal"
               />
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid>
               <TextField
                 name="syslog_level"
                 label={LL.LOG_LEVEL()}
@@ -305,17 +301,14 @@ const ApplicationSettings = () => {
                 <MenuItem value={9}>ALL</MenuItem>
               </TextField>
             </Grid>
-            <Grid item xs={12} sm={6}>
+            <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_mark_interval"
                 label={LL.MARK_INTERVAL()}
-                InputProps={{
+                slotProps={{
-                  endAdornment: (
+                  input: SecondsInputProps
-                    <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                  )
                 }}
-                fullWidth
                 variant="outlined"
                 value={numberValue(data.syslog_mark_interval)}
                 type="number"
@@ -358,43 +351,37 @@ const ApplicationSettings = () => {
         <Typography sx={{ pb: 1, pt: 2 }} variant="h6" color="primary">
           {LL.FORMATTING_OPTIONS()}
         </Typography>
-        <Grid item>
+        <Grid container spacing={1}>
-          <TextField
+          <Grid size={3}>
-            name="locale"
+            <TextField
-            label={LL.LANGUAGE_ENTITIES()}
+              name="locale"
-            value={data.locale}
+              label={LL.LANGUAGE_ENTITIES()}
-            fullWidth
+              value={data.locale}
-            variant="outlined"
+              fullWidth
-            onChange={updateFormValue}
+              variant="outlined"
-            margin="normal"
+              onChange={updateFormValue}
-            select
+              margin="normal"
-          >
+              select
-            <MenuItem value="de">Deutsch (DE)</MenuItem>
+            >
-            <MenuItem value="en">English (EN)</MenuItem>
+              <MenuItem value="de">Deutsch (DE)</MenuItem>
-            <MenuItem value="fr">Français (FR)</MenuItem>
+              <MenuItem value="en">English (EN)</MenuItem>
-            <MenuItem value="it">Italiano (IT)</MenuItem>
+              <MenuItem value="fr">Français (FR)</MenuItem>
-            <MenuItem value="nl">Nederlands (NL)</MenuItem>
+              <MenuItem value="it">Italiano (IT)</MenuItem>
-            <MenuItem value="no">Norsk (NO)</MenuItem>
+              <MenuItem value="nl">Nederlands (NL)</MenuItem>
-            <MenuItem value="pl">Polski (PL)</MenuItem>
+              <MenuItem value="no">Norsk (NO)</MenuItem>
-            <MenuItem value="sk">Slovenčina (SK)</MenuItem>
+              <MenuItem value="pl">Polski (PL)</MenuItem>
-            <MenuItem value="sv">Svenska (SV)</MenuItem>
+              <MenuItem value="sk">Slovenčina (SK)</MenuItem>
-            <MenuItem value="tr">Türk (TR)</MenuItem>
+              <MenuItem value="sv">Svenska (SV)</MenuItem>
-          </TextField>
+              <MenuItem value="tr">Türk (TR)</MenuItem>
-        </Grid>
+            </TextField>
-        <Grid
+          </Grid>
-          container
+          <Grid size={3}>
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="flex-start"
-        >
-          <Grid item xs={12} sm={6} md={4}>
             <TextField
               name="bool_dashboard"
               label={LL.BOOLEAN_FORMAT_DASHBOARD()}
               value={data.bool_dashboard}
-              fullWidth
               variant="outlined"
+              fullWidth
               onChange={updateFormValue}
               margin="normal"
               select
@@ -405,13 +392,13 @@ const ApplicationSettings = () => {
               <MenuItem value={5}>1/0</MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid size={3}>
             <TextField
               name="bool_format"
               label={LL.BOOLEAN_FORMAT_API()}
               value={data.bool_format}
-              fullWidth
               variant="outlined"
+              fullWidth
               onChange={updateFormValue}
               margin="normal"
               select
@@ -424,13 +411,13 @@ const ApplicationSettings = () => {
               <MenuItem value={6}>1/0</MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid size={3}>
             <TextField
               name="enum_format"
               label={LL.ENUM_FORMAT()}
               value={data.enum_format}
-              fullWidth
               variant="outlined"
+              fullWidth
               onChange={updateFormValue}
               margin="normal"
               select
@@ -469,7 +456,6 @@ const ApplicationSettings = () => {
           label={LL.BOARD_PROFILE()}
           value={data.board_profile}
           disabled={processingBoard || hardwareData.model.startsWith('BBQKees')}
-          fullWidth
           variant="outlined"
           onChange={changeBoardProfile}
           margin="normal"
@@ -483,15 +469,8 @@ const ApplicationSettings = () => {
         </TextField>
         {data.board_profile === 'CUSTOM' && (
           <>
-            <Grid
+            <Grid container spacing={1} rowSpacing={0}>
-              container
+              <Grid>
-              spacing={1}
-              sx={{ pt: 1 }}
-              direction="row"
-              justifyContent="flex-start"
-              alignItems="flex-start"
-            >
-              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="rx_gpio"
@@ -504,7 +483,7 @@ const ApplicationSettings = () => {
                   margin="normal"
                 />
               </Grid>
-              <Grid item xs={12} sm={6} md={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="tx_gpio"
@@ -517,7 +496,7 @@ const ApplicationSettings = () => {
                   margin="normal"
                 />
               </Grid>
-              <Grid item xs={12} sm={6} md={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="pbutton_gpio"
@@ -530,7 +509,7 @@ const ApplicationSettings = () => {
                   margin="normal"
                 />
               </Grid>
-              <Grid item xs={12} sm={6} md={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="dallas_gpio"
@@ -545,7 +524,7 @@ const ApplicationSettings = () => {
                   margin="normal"
                 />
               </Grid>
-              <Grid item xs={12} sm={6} md={4}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="led_gpio"
@@ -558,7 +537,7 @@ const ApplicationSettings = () => {
                   margin="normal"
                 />
               </Grid>
-              <Grid item xs={12} sm={6} md={4}>
+              <Grid>
                 <TextField
                   name="phy_type"
                   label={LL.PHY_TYPE()}
@@ -576,15 +555,8 @@ const ApplicationSettings = () => {
               </Grid>
             </Grid>
             {data.phy_type !== 0 && (
-              <Grid
+              <Grid container spacing={1} rowSpacing={0}>
-                container
+                <Grid>
-                spacing={1}
-                sx={{ pt: 1 }}
-                direction="row"
-                justifyContent="flex-start"
-                alignItems="flex-start"
-              >
-                <Grid item xs={12} sm={6} md={4}>
                   <TextField
                     name="eth_power"
                     label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -596,7 +568,7 @@ const ApplicationSettings = () => {
                     margin="normal"
                   />
                 </Grid>
-                <Grid item xs={12} sm={6} md={4}>
+                <Grid>
                   <TextField
                     name="eth_phy_addr"
                     label={LL.ADDRESS_OF('PHY I²C')}
@@ -608,7 +580,7 @@ const ApplicationSettings = () => {
                     margin="normal"
                   />
                 </Grid>
-                <Grid item xs={12} sm={6} md={4}>
+                <Grid>
                   <TextField
                     name="eth_clock_mode"
                     label="PHY Clk"
@@ -629,14 +601,8 @@ const ApplicationSettings = () => {
             )}
           </>
         )}
-        <Grid
+        <Grid container spacing={1} rowSpacing={0}>
-          container
+          <Grid>
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="flex-start"
-        >
-          <Grid item xs={12} sm={6}>
             <TextField
               name="tx_mode"
               label={LL.TX_MODE()}
@@ -653,7 +619,7 @@ const ApplicationSettings = () => {
               <MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <TextField
               name="ems_bus_id"
               label={LL.ID_OF(LL.EMS_BUS(0))}
@@ -741,10 +707,8 @@ const ApplicationSettings = () => {
               fieldErrors={fieldErrors}
               name="remote_timeout"
               label={LL.REMOTE_TIMEOUT()}
-              InputProps={{
+              slotProps={{
-                endAdornment: (
+                input: HoursInputProps
-                  <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
-                )
               }}
               variant="outlined"
               value={numberValue(data.remote_timeout)}
@@ -753,13 +717,7 @@ const ApplicationSettings = () => {
             />
           </Box>
         )}
-        <Grid
+        <Grid container spacing={1} rowSpacing={0}>
-          container
-          spacing={0}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="flex-start"
-        >
           <BlockFormControlLabel
             control={
               <Checkbox
@@ -782,25 +740,15 @@ const ApplicationSettings = () => {
             disabled={!data.shower_timer}
           />
         </Grid>
-        <Grid
+        <Grid container spacing={1} rowSpacing={2} sx={{ pt: 2 }}>
-          container
-          sx={{ pt: 2 }}
-          rowSpacing={3}
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="flex-start"
-        >
           {data.shower_timer && (
-            <Grid item xs={12} sm={6}>
+            <Grid>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="shower_min_duration"
                 label={LL.MIN_DURATION()}
-                InputProps={{
+                slotProps={{
-                  endAdornment: (
+                  input: SecondsInputProps
-                    <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                  )
                 }}
                 variant="outlined"
                 value={numberValue(data.shower_min_duration)}
@@ -812,15 +760,13 @@ const ApplicationSettings = () => {
           )}
           {data.shower_alert && (
             <>
-              <Grid item xs={12} sm={6}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_trigger"
                   label={LL.TRIGGER_TIME()}
-                  InputProps={{
+                  slotProps={{
-                    endAdornment: (
+                    input: MinutesInputProps
-                      <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
-                    )
                   }}
                   variant="outlined"
                   value={numberValue(data.shower_alert_trigger)}
@@ -830,15 +776,13 @@ const ApplicationSettings = () => {
                   disabled={!data.shower_timer}
                 />
               </Grid>
-              <Grid item xs={12} sm={6}>
+              <Grid>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_coldshot"
                   label={LL.COLD_SHOT_DURATION()}
-                  InputProps={{
+                  slotProps={{
-                    endAdornment: (
+                    input: SecondsInputProps
-                      <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                    )
                   }}
                   variant="outlined"
                   value={numberValue(data.shower_alert_coldshot)}

interface/src/app/settings/MqttSettings.tsx

@@ -5,12 +5,12 @@ import WarningIcon from '@mui/icons-material/Warning';
 import {
   Button,
   Checkbox,
-  Grid,
   InputAdornment,
   MenuItem,
   TextField,
   Typography
 } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 
 import * as MqttApi from 'api/mqtt';
 
@@ -59,6 +59,10 @@ const MqttSettings = () => {
     updateDataValue
   );
 
+  const SecondsInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+  };
+
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
@@ -86,19 +90,12 @@ const MqttSettings = () => {
           }
           label={LL.ENABLE_MQTT()}
         />
-        <Grid
+        <Grid container spacing={1} rowSpacing={0}>
-          container
+          <Grid>
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="flex-start"
-        >
-          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="host"
               label={LL.ADDRESS_OF(LL.BROKER())}
-              fullWidth
               multiline
               variant="outlined"
               value={data.host}
@@ -106,12 +103,11 @@ const MqttSettings = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="port"
               label="Port"
-              fullWidth
               variant="outlined"
               value={numberValue(data.port)}
               type="number"
@@ -119,62 +115,55 @@ const MqttSettings = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="base"
               label={LL.BASE_TOPIC()}
-              fullWidth
               variant="outlined"
               value={data.base}
               onChange={updateFormValue}
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <TextField
               name="client_id"
               label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
-              fullWidth
               variant="outlined"
               value={data.client_id}
               onChange={updateFormValue}
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <TextField
               name="username"
               label={LL.USERNAME(0)}
-              fullWidth
               variant="outlined"
               value={data.username}
               onChange={updateFormValue}
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <ValidatedPasswordField
               name="password"
               label={LL.PASSWORD()}
-              fullWidth
               variant="outlined"
               value={data.password}
               onChange={updateFormValue}
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="keep_alive"
               label="Keep Alive"
-              InputProps={{
+              slotProps={{
-                endAdornment: (
+                input: SecondsInputProps
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
               }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.keep_alive)}
               type="number"
@@ -182,12 +171,11 @@ const MqttSettings = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6}>
+          <Grid>
             <TextField
               name="mqtt_qos"
               label="QoS"
               value={data.mqtt_qos}
-              fullWidth
               variant="outlined"
               onChange={updateFormValue}
               margin="normal"
@@ -215,14 +203,12 @@ const MqttSettings = () => {
           <ValidatedPasswordField
             name="rootCA"
             label={LL.CERT()}
-            fullWidth
             variant="outlined"
             value={data.rootCA}
             onChange={updateFormValue}
             margin="normal"
           />
         )}
-
         <BlockFormControlLabel
           control={
             <Checkbox
@@ -243,7 +229,6 @@ const MqttSettings = () => {
           }
           label={LL.MQTT_RETAIN_FLAG()}
         />
-
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.FORMATTING()}
         </Typography>
@@ -251,7 +236,6 @@ const MqttSettings = () => {
           name="nested_format"
           label={LL.MQTT_FORMAT()}
           value={data.nested_format}
-          fullWidth
           variant="outlined"
           onChange={updateFormValue}
           margin="normal"
@@ -271,15 +255,8 @@ const MqttSettings = () => {
           label={LL.MQTT_RESPONSE()}
         />
         {!data.ha_enabled && (
-          <Grid
+          <Grid container spacing={1} rowSpacing={0}>
-            container
+            <Grid>
-            rowSpacing={-1}
-            spacing={1}
-            direction="row"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Grid item>
               <BlockFormControlLabel
                 control={
                   <Checkbox
@@ -292,7 +269,7 @@ const MqttSettings = () => {
               />
             </Grid>
             {data.publish_single && (
-              <Grid item>
+              <Grid>
                 <BlockFormControlLabel
                   control={
                     <Checkbox
@@ -308,14 +285,8 @@ const MqttSettings = () => {
           </Grid>
         )}
         {!data.publish_single && (
-          <Grid
+          <Grid container spacing={1} rowSpacing={0}>
-            container
+            <Grid>
-            spacing={1}
-            direction="row"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Grid item>
               <BlockFormControlLabel
                 control={
                   <Checkbox
@@ -328,20 +299,12 @@ const MqttSettings = () => {
               />
             </Grid>
             {data.ha_enabled && (
-              <Grid
+              <Grid container spacing={1} rowSpacing={0}>
-                container
+                <Grid>
-                sx={{ pl: 1 }}
-                spacing={1}
-                direction="row"
-                justifyContent="flex-start"
-                alignItems="flex-start"
-              >
-                <Grid item xs={12} sm={6} md={4}>
                   <TextField
                     name="discovery_type"
                     label={LL.MQTT_PUBLISH_TEXT_5()}
                     value={data.discovery_type}
-                    fullWidth
                     variant="outlined"
                     onChange={updateFormValue}
                     margin="normal"
@@ -352,23 +315,21 @@ const MqttSettings = () => {
                     <MenuItem value={2}>Domoticz (latest)</MenuItem>
                   </TextField>
                 </Grid>
-                <Grid item xs={12} sm={6} md={4}>
+                <Grid>
                   <TextField
                     name="discovery_prefix"
                     label={LL.MQTT_PUBLISH_TEXT_4()}
-                    fullWidth
                     variant="outlined"
                     value={data.discovery_prefix}
                     onChange={updateFormValue}
                     margin="normal"
                   />
                 </Grid>
-                <Grid item xs={12} sm={6} md={4}>
+                <Grid>
                   <TextField
                     name="entity_format"
                     label={LL.MQTT_ENTITY_FORMAT()}
                     value={data.entity_format}
-                    fullWidth
                     variant="outlined"
                     onChange={updateFormValue}
                     margin="normal"
@@ -392,24 +353,15 @@ const MqttSettings = () => {
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
         </Typography>
-        <Grid
+        <Grid container spacing={1} rowSpacing={0}>
-          container
+          <Grid>
-          spacing={1}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="flex-start"
-        >
-          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_heartbeat"
               label="Heartbeat"
-              InputProps={{
+              slotProps={{
-                endAdornment: (
+                input: SecondsInputProps
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
               }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_heartbeat)}
               type="number"
@@ -417,127 +369,105 @@ const MqttSettings = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_boiler"
               label={LL.MQTT_INT_BOILER()}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_boiler)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_thermostat"
               label={LL.MQTT_INT_THERMOSTATS()}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_thermostat)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_solar"
               label={LL.MQTT_INT_SOLAR()}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_solar)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_mixer"
               label={LL.MQTT_INT_MIXER()}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_mixer)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_water"
               label={LL.MQTT_INT_WATER()}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_water)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_sensor"
               label={LL.TEMP_SENSORS()}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_sensor)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
-          <Grid item xs={12} sm={6} md={4}>
+          <Grid>
             <TextField
               name="publish_time_other"
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-                )
-              }}
               label={LL.DEFAULT(0)}
-              fullWidth
               variant="outlined"
               value={numberValue(data.publish_time_other)}
               type="number"
               onChange={updateFormValue}
               margin="normal"
+              slotProps={{
+                input: SecondsInputProps
+              }}
             />
           </Grid>
         </Grid>
-
         {dirtyFlags && dirtyFlags.length !== 0 && (
           <ButtonRow>
             <Button

interface/src/app/status/NTPStatus.tsx

@@ -134,8 +134,10 @@ const NTPStatus = () => {
           onChange={updateLocalTime}
           disabled={processing}
           fullWidth
-          InputLabelProps={{
+          slotProps={{
-            shrink: true
+            inputLabel: {
+              shrink: true
+            }
           }}
         />
       </DialogContent>

interface/src/app/status/SystemLog.tsx

@@ -3,15 +3,8 @@ import { toast } from 'react-toastify';
 
 import DownloadIcon from '@mui/icons-material/GetApp';
 import WarningIcon from '@mui/icons-material/Warning';
-import {
+import { Box, Button, Checkbox, MenuItem, TextField, styled } from '@mui/material';
-  Box,
+import Grid from '@mui/material/Grid2';
-  Button,
-  Checkbox,
-  Grid,
-  MenuItem,
-  TextField,
-  styled
-} from '@mui/material';
 
 import * as SystemApi from 'api/system';
 import { fetchLogES } from 'api/system';
@@ -177,14 +170,8 @@ const SystemLog = () => {
 
     return (
       <>
-        <Grid
+        <Grid container spacing={1} alignItems="center">
-          container
+          <Grid size={2}>
-          spacing={3}
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="center"
-        >
-          <Grid item xs={4}>
             <TextField
               name="level"
               label={LL.LOG_LEVEL()}
@@ -203,7 +190,7 @@ const SystemLog = () => {
               <MenuItem value={9}>ALL</MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={4}>
+          <Grid size={2}>
             <TextField
               name="max_messages"
               label={LL.BUFFER_SIZE()}
@@ -220,7 +207,7 @@ const SystemLog = () => {
               <MenuItem value={100}>100</MenuItem>
             </TextField>
           </Grid>
-          <Grid item xs={2}>
+          <Grid>
             <BlockFormControlLabel
               control={
                 <Checkbox
@@ -232,32 +219,24 @@ const SystemLog = () => {
               label={LL.COMPACT()}
             />
           </Grid>
-          <Box
+          <Button
-            sx={{
+            startIcon={<DownloadIcon />}
-              '& button, & a, & .MuiCard-root': {
+            variant="outlined"
-                ml: 3
+            color="secondary"
-              }
+            onClick={onDownload}
-            }}
           >
+            {LL.EXPORT()}
+          </Button>
+          {dirtyFlags && dirtyFlags.length !== 0 && (
             <Button
-              startIcon={<DownloadIcon />}
+              startIcon={<WarningIcon color="warning" />}
-              variant="outlined"
+              variant="contained"
-              color="secondary"
+              color="info"
-              onClick={onDownload}
+              onClick={saveSettings}
             >
-              {LL.EXPORT()}
+              {LL.APPLY_CHANGES(dirtyFlags.length)}
             </Button>
-            {dirtyFlags && dirtyFlags.length !== 0 && (
+          )}
-              <Button
-                startIcon={<WarningIcon color="warning" />}
-                variant="contained"
-                color="info"
-                onClick={saveSettings}
-              >
-                {LL.APPLY_CHANGES(dirtyFlags.length)}
-              </Button>
-            )}
-          </Box>
         </Grid>
         <Box
           sx={{

interface/src/components/inputs/ValidatedPasswordField.tsx

@@ -10,25 +10,23 @@ import type { ValidatedTextFieldProps } from './ValidatedTextField';
 
 type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
 
-const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({
+const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) => {
-  InputProps,
-  ...props
-}) => {
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
   return (
     <ValidatedTextField
       {...props}
       type={showPassword ? 'text' : 'password'}
-      InputProps={{
+      slotProps={{
-        ...InputProps,
+        input: {
-        endAdornment: (
+          endAdornment: (
-          <InputAdornment position="end">
+            <InputAdornment position="end">
-            <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
+              <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
-              {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
+                {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
-            </IconButton>
+              </IconButton>
-          </InputAdornment>
+            </InputAdornment>
-        )
+          )
+        }
       }}
     />
   );

interface/src/components/upload/SingleUpload.tsx

@@ -88,7 +88,7 @@ const SingleUpload = ({ callRestart }) => {
             sx={{ ml: 2, mt: 2 }}
             startIcon={<CancelIcon />}
             variant="outlined"
-            color="error"
+            color="secondary"
             onClick={cancelUpload}
           >
             {LL.CANCEL()}