formatting icon table

This commit is contained in:
proddy
2022-03-30 20:59:57 +02:00
parent 2ebb77ff37
commit cf4fa9e76d

View File

@@ -116,28 +116,24 @@ const SettingsCustomization: FC = () => {
return ( return (
<> <>
<Box mb={1} color="warning.main"> <Box color="warning.main">
Select a device and customize each entity using the options: <Typography variant="body2">Select a device and customize each of its entities using the options:</Typography>
<Typography display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}> <Typography mt={1} ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
&nbsp;
<FavoriteBorderOutlinedIcon color="success" fontSize="small" /> <FavoriteBorderOutlinedIcon color="success" fontSize="small" />
&nbsp;mark it as favorite to be listed at the top of the Dashboard &nbsp;mark it as favorite to be listed at the top of the Dashboard
</Typography> </Typography>
<Typography display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}> <Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
&nbsp;
<VisibilityOffOutlinedIcon color="action" fontSize="small" />
&nbsp;hide from the Dashboard
</Typography>
<Typography display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
&nbsp;
<EditOffOutlinedIcon color="action" fontSize="small" /> <EditOffOutlinedIcon color="action" fontSize="small" />
&nbsp;make it read-only (if it has write operation available) &nbsp;make it read-only, only if it has write operation available
</Typography> </Typography>
<Typography display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}> <Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
&nbsp;
<CommentsDisabledOutlinedIcon color="action" fontSize="small" /> <CommentsDisabledOutlinedIcon color="action" fontSize="small" />
&nbsp;excluded it from MQTT and API outputs &nbsp;excluded it from MQTT and API outputs
</Typography> </Typography>
<Typography ml={2} mb={1} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
<VisibilityOffOutlinedIcon color="action" fontSize="small" />
&nbsp;hide it from the Dashboard
</Typography>
</Box> </Box>
<ValidatedTextField <ValidatedTextField
name="device" name="device"
@@ -216,7 +212,7 @@ const SettingsCustomization: FC = () => {
}; };
return ( return (
<Table size="small"> <Table size="small" padding="normal">
<TableHead> <TableHead>
<TableRow> <TableRow>
<StyledTableCell align="center">OPTIONS</StyledTableCell> <StyledTableCell align="center">OPTIONS</StyledTableCell>
@@ -227,7 +223,7 @@ const SettingsCustomization: FC = () => {
<TableBody> <TableBody>
{deviceEntities.map((de) => ( {deviceEntities.map((de) => (
<TableRow key={de.s} hover> <TableRow key={de.s} hover>
<StyledTableCell padding="checkbox"> <StyledTableCell padding="none">
<ToggleButtonGroup <ToggleButtonGroup
size="small" size="small"
color="secondary" color="secondary"