Unify status card styles

4 files changed, 37 insertions, 65 deletions

diff --git a/modern/src/common/components/StatusCard.js b/modern/src/common/components/StatusCard.js
index 6b8a9fd3..c6ab1f51 100644
--- a/modern/src/common/components/StatusCard.js
+++ b/modern/src/common/components/StatusCard.js
@@ -77,6 +77,20 @@ const useStyles = makeStyles((theme) => ({
   actions: {
     justifyContent: 'space-between',
   },
+  root: ({ desktopPadding }) => ({
+    position: 'fixed',
+    zIndex: 5,
+    left: '50%',
+    [theme.breakpoints.up('md')]: {
+      left: `calc(50% + ${desktopPadding} / 2)`,
+      bottom: theme.spacing(3),
+    },
+    [theme.breakpoints.down('md')]: {
+      left: '50%',
+      bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
+    },
+    transform: 'translateX(-50%)',
+  }),
 }));
 
 const StatusRow = ({ name, content }) => {
@@ -94,8 +108,8 @@ const StatusRow = ({ name, content }) => {
   );
 };
 
-const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
-  const classes = useStyles();
+const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPadding = 0 }) => {
+  const classes = useStyles({ desktopPadding });
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const t = useTranslation();
@@ -153,7 +167,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
   }, [navigate]);
 
   return (
-    <>
+    <div className={classes.root}>
       {device && (
         <Draggable
           handle={`.${classes.media}, .${classes.header}`}
@@ -259,7 +273,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions }) => {
         itemId={deviceId}
         onResult={(removed) => handleRemove(removed)}
       />
-    </>
+    </div>
   );
 };
 
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index a174096e..4e88733a 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -80,19 +80,6 @@ const useStyles = makeStyles((theme) => ({
   deviceList: {
     flex: 1,
   },
-  statusCard: {
-    position: 'fixed',
-    zIndex: 5,
-    [theme.breakpoints.up('md')]: {
-      left: `calc(50% + ${theme.dimensions.drawerWidthDesktop} / 2)`,
-      bottom: theme.spacing(3),
-    },
-    [theme.breakpoints.down('md')]: {
-      left: '50%',
-      bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
-    },
-    transform: 'translateX(-50%)',
-  },
   sidebarToggle: {
     position: 'fixed',
     left: theme.spacing(1.5),
@@ -367,13 +354,12 @@ const MainPage = () => {
       )}
       {!features.disableEvents && <EventsDrawer open={eventsOpen} onClose={() => setEventsOpen(false)} />}
       {selectedDeviceId && (
-        <div className={classes.statusCard}>
-          <StatusCard
-            deviceId={selectedDeviceId}
-            position={positions[selectedDeviceId]}
-            onClose={() => dispatch(devicesActions.select(null))}
-          />
-        </div>
+        <StatusCard
+          deviceId={selectedDeviceId}
+          position={positions[selectedDeviceId]}
+          onClose={() => dispatch(devicesActions.select(null))}
+          desktopPadding={theme.dimensions.drawerWidthDesktop}
+        />
       )}
     </div>
   );
diff --git a/modern/src/other/EventPage.js b/modern/src/other/EventPage.js
index b040bfb3..9da8be79 100644
--- a/modern/src/other/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -14,7 +14,7 @@ import MapPositions from '../map/MapPositions';
 import MapGeofence from '../map/MapGeofence';
 import StatusCard from '../common/components/StatusCard';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
     height: '100%',
     display: 'flex',
@@ -26,18 +26,6 @@ const useStyles = makeStyles((theme) => ({
   mapContainer: {
     flexGrow: 1,
   },
-  statusCard: {
-    position: 'fixed',
-    zIndex: 5,
-    left: '50%',
-    [theme.breakpoints.up('md')]: {
-      bottom: theme.spacing(3),
-    },
-    [theme.breakpoints.down('md')]: {
-      bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
-    },
-    transform: 'translateX(-50%)',
-  },
 }));
 
 const EventPage = () => {
@@ -97,14 +85,12 @@ const EventPage = () => {
         </MapView>
         {position && <MapCamera latitude={position.latitude} longitude={position.longitude} />}
         {position && showCard && (
-          <div className={classes.statusCard}>
-            <StatusCard
-              deviceId={position.deviceId}
-              position={position}
-              onClose={() => setShowCard(false)}
-              disableActions
-            />
-          </div>
+          <StatusCard
+            deviceId={position.deviceId}
+            position={position}
+            onClose={() => setShowCard(false)}
+            disableActions
+          />
         )}
       </div>
     </div>
diff --git a/modern/src/other/ReplayPage.js b/modern/src/other/ReplayPage.js
index ee9e15d9..ab549eba 100644
--- a/modern/src/other/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -73,18 +73,6 @@ const useStyles = makeStyles((theme) => ({
       marginTop: theme.spacing(1),
     },
   },
-  statusCard: {
-    position: 'fixed',
-    zIndex: 5,
-    left: '50%',
-    [theme.breakpoints.up('md')]: {
-      bottom: theme.spacing(3),
-    },
-    [theme.breakpoints.down('md')]: {
-      bottom: `calc(${theme.spacing(3)} + ${theme.dimensions.bottomBarHeight}px)`,
-    },
-    transform: 'translateX(-50%)',
-  },
 }));
 
 const ReplayPage = () => {
@@ -228,14 +216,12 @@ const ReplayPage = () => {
         </Paper>
       </div>
       {showCard && index < positions.length && (
-        <div className={classes.statusCard}>
-          <StatusCard
-            deviceId={selectedDeviceId}
-            position={positions[index]}
-            onClose={() => setShowCard(false)}
-            disableActions
-          />
-        </div>
+        <StatusCard
+          deviceId={selectedDeviceId}
+          position={positions[index]}
+          onClose={() => setShowCard(false)}
+          disableActions
+        />
       )}
     </div>
   );