From 4ccc36acc28aae741b2e9eab8103cf6182407f5d Mon Sep 17 00:00:00 2001
From: Aryaman Kumar Sharma <kumararyaman26@gmail.com>
Date: Sat, 1 Mar 2025 10:21:39 +0530
Subject: [PATCH] Fix: Infrastructure Details Page Design

---
 src/Components/Charts/CustomGauge/index.jsx   |  8 ++--
 src/Components/StatBox/index.jsx              |  7 ++--
 .../Details/Components/GaugeBoxes/Gauge.jsx   | 38 +++++++++++++++----
 .../Details/Hooks/useHardwareUtils.jsx        |  1 +
 src/Pages/Infrastructure/Details/index.jsx    |  2 +-
 src/Utils/Theme/constants.js                  |  9 +++++
 6 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx
index d29663004..5c8481898 100644
--- a/src/Components/Charts/CustomGauge/index.jsx
+++ b/src/Components/Charts/CustomGauge/index.jsx
@@ -62,6 +62,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			className="radial-chart"
 			width={radius}
 			height={radius}
+			sx={{ backgroundColor: theme.palette.accent.baseBackground, borderRadius: "50%" }}
 		>
 			<svg
 				viewBox={`0 0 ${totalSize} ${totalSize}`}
@@ -70,7 +71,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			>
 				<circle
 					className="radial-chart-base"
-					stroke={theme.palette.primary.lowContrast} // CAIO_REVIEW
+					stroke={theme.palette.accent.base} // CAIO_REVIEW
 					strokeWidth={strokeWidth}
 					fill="none"
 					cx={totalSize / 2} // Center the circle
@@ -98,8 +99,9 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 					top: "50%",
 					left: "50%",
 					transform: "translate(-50%, -50%)",
-					...theme.typography.body2,
-					fill: theme.typography.body2.color,
+					...theme.typography.h2,
+					fill: theme.typography.h2.color,
+					fontWeight: 500,
 				}}
 			>
 				{`${progressWithinRange.toFixed(1)}%`}
diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx
index 3c91e1aae..71e01b4da 100644
--- a/src/Components/StatBox/index.jsx
+++ b/src/Components/StatBox/index.jsx
@@ -3,6 +3,7 @@ import Image from "../Image";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import useUtils from "../../Pages/Uptime/Monitors/Hooks/useUtils";
+import { lighten } from "@mui/material/styles";
 
 /**
  * StatBox Component
@@ -50,7 +51,7 @@ const StatBox = ({
 				borderColor: theme.palette[themeColor].lowContrast,
 			}
 		: {
-				background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`,
+				background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`,
 				borderColor: theme.palette.primary.lowContrast,
 			};
 
@@ -62,7 +63,7 @@ const StatBox = ({
 				color: theme.palette.primary.contrastTextSecondary,
 			};
 
-	const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 };
+	const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15, fontWeight: 600};
 	const detailTextStyles = gradient
 		? {
 				color: theme.palette[themeColor].contrastText,
@@ -120,7 +121,7 @@ const StatBox = ({
 			)}
 			<Stack>
 				<Typography component="h2">{heading}</Typography>
-				<Typography>{subHeading}</Typography>
+				<Typography sx={{fontWeight: 600}}>{subHeading}</Typography>
 			</Stack>
 		</Stack>
 	);
diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
index b1202682d..3adf0066b 100644
--- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
+++ b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
@@ -9,6 +9,17 @@ import PropTypes from "prop-types";
 const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
 	const theme = useTheme();
 
+	const boxStyle = {
+		borderRadius: 2,
+		backgroundColor: theme.palette.tertiary.main,
+		width: "40%",
+		mb: 2,
+		mt: 2,
+		pr: 4,
+		textAlign: 'right',
+		fontWeight: 600
+	}
+
 	return (
 		<BaseContainer>
 			<Stack
@@ -16,12 +27,21 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 				gap={theme.spacing(2)}
 				alignItems="center"
 			>
-				<CustomGauge
-					progress={value}
-					radius={100}
-					color={theme.palette.primary.main}
-				/>
-				<Typography component="h2">{heading}</Typography>
+				<Box
+					sx={{
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						width: "100%",
+						backgroundColor: theme.palette.gradient.color1
+					}}
+				>
+					<CustomGauge
+						progress={value}
+						radius={100}
+					/>
+					<Typography component="h2" sx={{ fontWeight: 600 }}>{heading}</Typography>
+				</Box>
 				<Box
 					sx={{
 						width: "100%",
@@ -31,18 +51,20 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 					<Stack
 						justifyContent={"space-between"}
 						direction="row"
+						alignItems="center"
 						gap={theme.spacing(2)}
 					>
 						<Typography>{metricOne}</Typography>
-						<Typography>{valueOne}</Typography>
+						<Typography sx={boxStyle}>{valueOne}</Typography>
 					</Stack>
 					<Stack
 						justifyContent={"space-between"}
 						direction="row"
+						alignItems="center"
 						gap={theme.spacing(2)}
 					>
 						<Typography>{metricTwo}</Typography>
-						<Typography>{valueTwo}</Typography>
+						<Typography sx={boxStyle}>{valueTwo}</Typography>
 					</Stack>
 				</Box>
 			</Stack>
diff --git a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx
index bc540dfe3..1752533d0 100644
--- a/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx
+++ b/src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx
@@ -64,6 +64,7 @@ const useHardwareUtils = () => {
 			return (
 				<>
 					{Number(MB.toFixed(0))}
+					{space ? " " : ""}
 					<Typography component="span">MB</Typography>
 				</>
 			);
diff --git a/src/Pages/Infrastructure/Details/index.jsx b/src/Pages/Infrastructure/Details/index.jsx
index f686fa9ff..fc704b444 100644
--- a/src/Pages/Infrastructure/Details/index.jsx
+++ b/src/Pages/Infrastructure/Details/index.jsx
@@ -62,7 +62,7 @@ const InfrastructureDetails = () => {
 					monitor={monitor}
 				/>
 				<GenericFallback>
-					<Typography>No check history for htis monitor yet.</Typography>
+					<Typography>No check history for this monitor yet.</Typography>
 				</GenericFallback>
 			</Stack>
 		);
diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js
index 36ab0a0f4..7397e6f5a 100644
--- a/src/Utils/Theme/constants.js
+++ b/src/Utils/Theme/constants.js
@@ -94,6 +94,7 @@ const newColors = {
 	blueGray600: "#344054",
 	blueGray800: "#1C2130",
 	blueBlueWave: "#1570EF",
+	lightBlueWave: "#CDE2FF",
 	/* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */
 	green100: "#67cd78",
 	green200: "#4B9B77",
@@ -138,6 +139,14 @@ const newSemanticColors = {
 			light: newColors.offWhite,
 			dark: newColors.offWhite,
 		},
+		base: {
+			light: newColors.lightBlueWave,
+			dark: newColors.lightBlueWave,
+		},
+		baseBackground: {
+			light: paletteColors.white,
+			dark: newColors.offBlack,
+		}
 	},
 	primary: {
 		main: {