use standard containers, style map

src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx

@@ -2,7 +2,7 @@ import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PulseDot from "../../../../../Components/Animated/PulseDot";
 import "flag-icons/css/flag-icons.min.css";
-import { styled } from "@mui/material/styles";
+import { ColContainer } from "../../../../../Components/StandardContainer";
 
 const BASE_BOX_PADDING_VERTICAL = 16;
 const BASE_BOX_PADDING_HORIZONTAL = 8;
@@ -15,19 +15,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 	};
 
 	return (
-		<Stack
-			direction="column"
-			gap={theme.spacing(2)}
-			width={width}
-			sx={{
-				padding: `${theme.spacing(BASE_BOX_PADDING_VERTICAL)} ${theme.spacing(BASE_BOX_PADDING_HORIZONTAL)}`,
-				backgroundColor: theme.palette.background.main,
-				border: 1,
-				borderStyle: "solid",
-				borderRadius: theme.spacing(4),
-				borderColor: theme.palette.primary.lowContrast,
-			}}
-		>
+		<ColContainer>
 			<Stack
 				direction="row"
 				gap={theme.spacing(4)}
@@ -88,7 +76,7 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 					})}
 				</tbody>
 			</table>
-		</Stack>
+		</ColContainer>
 	);
 };
 

src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx

@@ -5,6 +5,7 @@ import { useTheme } from "@mui/material/styles";
 import maplibregl from "maplibre-gl";
 import { useSelector } from "react-redux";
 import buildStyle from "./buildStyle";
+import { ColContainer } from "../../../../../Components/StandardContainer";
 
 const DistributedUptimeMap = ({ width = "100%", checks }) => {
 	const mapContainer = useRef(null);
@@ -87,6 +88,10 @@ const DistributedUptimeMap = ({ width = "100%", checks }) => {
 			ref={mapContainer}
 			style={{
 				width: width,
+				borderRadius: theme.spacing(4),
+				borderColor: theme.palette.primary.lowContrast,
+				borderStyle: "solid",
+				borderWidth: 1,
 			}}
 		/>
 	);

src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx

@@ -1,6 +1,6 @@
 // Components
 import { Stack } from "@mui/material";
-import StatBox from "../../../../../Components/StatBox";
+import InfoBox from "../../../../../Components/InfoBox";
 import LastUpdate from "../LastUpdate";
 import UptLogo from "../../../../../assets/icons/upt_logo.png";
 
@@ -14,17 +14,21 @@ const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
 	return (
 		<Stack
 			direction="row"
+			justifyContent="space-between"
 			gap={theme.spacing(8)}
 		>
-			<StatBox
+			<InfoBox
+				sx={{ flex: 1 }}
 				heading="Avg Response Time"
 				subHeading={`${Math.floor(monitor?.avgResponseTime ?? 0)} ms`}
 			/>
-			<StatBox
+			<InfoBox
+				sx={{ flex: 1 }}
 				heading="Checking every"
 				subHeading={`${(monitor?.interval ?? 0) / 1000} seconds`}
 			/>
-			<StatBox
+			<InfoBox
+				sx={{ flex: 1 }}
 				heading={"Last check"}
 				subHeading={
 					<LastUpdate
@@ -33,7 +37,8 @@ const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
 					/>
 				}
 			/>
-			<StatBox
+			<InfoBox
+				sx={{ flex: 1 }}
 				heading="Last server push"
 				subHeading={
 					<LastUpdate
@@ -43,13 +48,6 @@ const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
 					/>
 				}
 			/>
-
-			<StatBox
-				heading="UPT Burned"
-				subHeading={monitor?.totalUptBurnt ?? 0}
-				img={UptLogo}
-				alt="Upt Logo"
-			/>
 		</Stack>
 	);
 };

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -15,6 +15,7 @@ import SkeletonLayout from "./Components/Skeleton";
 import StatBox from "../../../Components/StatBox";
 import UptLogo from "../../../assets/icons/upt_logo.png";
 import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
+import InfoBox from "../../../Components/InfoBox";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
@@ -175,14 +176,14 @@ const DistributedUptimeStatus = () => {
 						direction="row"
 						gap={theme.spacing(8)}
 					>
-						<StatBox
+						<InfoBox
 							heading="Devices"
 							subHeading={monitor?.totalChecks ?? 0}
 							icon={PeopleAltOutlinedIcon}
 							alt="Upt Logo"
 							sx={{ width: "50%" }}
 						/>
-						<StatBox
+						<InfoBox
 							heading="UPT Burned"
 							subHeading={monitor?.totalUptBurnt ?? 0}
 							img={UptLogo}