Fix: Infrastructure Details Page Design

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)}%`}

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>
 	);

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>

src/Pages/Infrastructure/Details/Hooks/useHardwareUtils.jsx

@@ -64,6 +64,7 @@ const useHardwareUtils = () => {
 			return (
 				<>
 					{Number(MB.toFixed(0))}
+					{space ? " " : ""}
 					<Typography component="span">MB</Typography>
 				</>
 			);

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>
 		);

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: {