diff options
| -rw-r--r-- | modern/src/main/StatusCard.js | 45 | ||||
| -rw-r--r-- | modern/src/other/GeofencesPage.js | 5 | ||||
| -rw-r--r-- | modern/src/settings/components/CollectionFab.js | 3 |
3 files changed, 32 insertions, 21 deletions
diff --git a/modern/src/main/StatusCard.js b/modern/src/main/StatusCard.js index e4734437..4067ac1e 100644 --- a/modern/src/main/StatusCard.js +++ b/modern/src/main/StatusCard.js @@ -26,7 +26,6 @@ import InfoIcon from '@mui/icons-material/Info'; import { useTranslation } from '../common/components/LocalizationProvider'; import RemoveDialog from '../common/components/RemoveDialog'; import PositionValue from '../common/components/PositionValue'; -import dimensions from '../common/theme/dimensions'; import { useDeviceReadonly, useReadonly } from '../common/util/permissions'; import usePersistedState from '../common/util/usePersistedState'; import usePositionAttributes from '../common/attributes/usePositionAttributes'; @@ -35,16 +34,26 @@ import { useCatch } from '../reactHelper'; const useStyles = makeStyles((theme) => ({ card: { - width: dimensions.popupMaxWidth, + width: theme.dimensions.popupMaxWidth, + }, + media: { + height: theme.dimensions.popupImageHeight, + display: 'flex', + justifyContent: 'flex-end', + alignItems: 'flex-start', + }, + mediaButton: { + color: theme.palette.colors.white, + mixBlendMode: 'difference', }, header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', - padding: theme.spacing(1, 1, 1, 2), + padding: theme.spacing(1, 1, 0, 2), }, content: { - paddingTop: 0, + paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1), }, negative: { @@ -121,21 +130,25 @@ const StatusCard = ({ deviceId, onClose }) => { <> {device && ( <Card elevation={3} className={classes.card}> - {deviceImage && ( + {deviceImage ? ( <CardMedia - component="img" - height={dimensions.popupImageHeight} + className={classes.media} image={`/api/media/${device.uniqueId}/${deviceImage}`} - /> + > + <IconButton size="small" onClick={onClose}> + <CloseIcon fontSize="small" className={classes.mediaButton} /> + </IconButton> + </CardMedia> + ) : ( + <div className={classes.header}> + <Typography variant="body2" color="textSecondary"> + {device.name} + </Typography> + <IconButton size="small" onClick={onClose}> + <CloseIcon fontSize="small" /> + </IconButton> + </div> )} - <div className={classes.header}> - <Typography variant="body2" color="textSecondary"> - {device.name} - </Typography> - <IconButton size="small" onClick={onClose}> - <CloseIcon fontSize="small" /> - </IconButton> - </div> {position && ( <CardContent className={classes.content}> <Table size="small" classes={{ root: classes.table }}> diff --git a/modern/src/other/GeofencesPage.js b/modern/src/other/GeofencesPage.js index 59dcdc4e..dd6d96c7 100644 --- a/modern/src/other/GeofencesPage.js +++ b/modern/src/other/GeofencesPage.js @@ -14,7 +14,6 @@ import MapCurrentLocation from '../map/MapCurrentLocation'; import MapGeofenceEdit from '../map/MapGeofenceEdit'; import GeofencesList from './GeofencesList'; import { useTranslation } from '../common/components/LocalizationProvider'; -import dimensions from '../common/theme/dimensions'; import MapGeocoder from '../map/geocoder/MapGeocoder'; import { errorsActions } from '../store'; @@ -36,10 +35,10 @@ const useStyles = makeStyles((theme) => ({ drawerPaper: { position: 'relative', [theme.breakpoints.up('sm')]: { - width: dimensions.drawerWidthTablet, + width: theme.dimensions.drawerWidthTablet, }, [theme.breakpoints.down('sm')]: { - height: dimensions.drawerHeightPhone, + height: theme.dimensions.drawerHeightPhone, }, }, mapContainer: { diff --git a/modern/src/settings/components/CollectionFab.js b/modern/src/settings/components/CollectionFab.js index 2fb5b5c9..44f91591 100644 --- a/modern/src/settings/components/CollectionFab.js +++ b/modern/src/settings/components/CollectionFab.js @@ -4,7 +4,6 @@ import makeStyles from '@mui/styles/makeStyles'; import AddIcon from '@mui/icons-material/Add'; import { useNavigate } from 'react-router-dom'; import { useReadonly } from '../../common/util/permissions'; -import dimensions from '../../common/theme/dimensions'; const useStyles = makeStyles((theme) => ({ fab: { @@ -12,7 +11,7 @@ const useStyles = makeStyles((theme) => ({ bottom: theme.spacing(2), right: theme.spacing(2), [theme.breakpoints.down('md')]: { - bottom: dimensions.bottomBarHeight + theme.spacing(2), + bottom: theme.dimensions.bottomBarHeight + theme.spacing(2), }, }, })); |