Merge pull request #9 from uprockcom/feat/standardized-container

Feat/standardized container

src/Components/InfoBox/index.jsx

@@ -0,0 +1,42 @@
+import { RowContainer } from "../StandardContainer";
+import { Stack, Typography } from "@mui/material";
+import Image from "../Image";
+
+import { useTheme } from "@mui/material/styles";
+
+const InfoBox = ({
+	img,
+	icon: Icon,
+	alt,
+	heading,
+	headingLevel = 2,
+	subHeading,
+	subHeadingLevel = "",
+	sx,
+}) => {
+	const theme = useTheme();
+	return (
+		<RowContainer sx={{ ...sx }}>
+			{img && (
+				<Image
+					src={img}
+					height={"30px"}
+					width={"30px"}
+					alt={alt}
+					sx={{ marginRight: theme.spacing(8) }}
+				/>
+			)}
+			{Icon && (
+				<Icon sx={{ width: "30px", height: "30px", marginRight: theme.spacing(8) }} />
+			)}
+			<Stack>
+				<Typography variant={`h${headingLevel}`}>{heading}</Typography>
+				<Typography variant={subHeadingLevel ? `h${subHeadingLevel}` : "body1"}>
+					{subHeading}
+				</Typography>
+			</Stack>
+		</RowContainer>
+	);
+};
+
+export default InfoBox;

src/Components/StandardContainer/index.jsx

@@ -0,0 +1,52 @@
+// Components
+import { Stack } from "@mui/material";
+
+// Utils
+import { useTheme } from "@emotion/react";
+
+const Container = ({ children, direction, backgroundColor, sx }) => {
+	const theme = useTheme();
+	let bgColor =
+		typeof backgroundColor !== "undefined"
+			? backgroundColor
+			: theme.palette.background.main;
+	return (
+		<Stack
+			direction={direction}
+			padding={theme.spacing(8)}
+			gap={theme.spacing(2)}
+			border={1}
+			borderColor={theme.palette.primary.lowContrast}
+			borderStyle="solid"
+			borderRadius={theme.spacing(4)}
+			backgroundColor={bgColor}
+			sx={{ ...sx }}
+		>
+			{children}
+		</Stack>
+	);
+};
+
+export const ColContainer = ({ children, backgroundColor, sx }) => {
+	return (
+		<Container
+			direction="column"
+			backgroundColor={backgroundColor}
+			sx={{ ...sx }}
+		>
+			{children}
+		</Container>
+	);
+};
+
+export const RowContainer = ({ children, backgroundColor, sx }) => {
+	return (
+		<Container
+			direction="row"
+			backgroundColor={backgroundColor}
+			sx={{ ...sx }}
+		>
+			{children}
+		</Container>
+	);
+};

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}