From 88514a2ff053490b4342caeeaf5abf13355fc5d8 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Mon, 4 Jul 2022 10:27:06 -0700
Subject: Better image layout (fix #678)

---
 modern/src/main/StatusCard.js                   | 45 ++++++++++++++++---------
 modern/src/other/GeofencesPage.js               |  5 ++-
 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),
     },
   },
 }));
-- 
cgit v1.2.3