Merge pull request #1849 from Br0wnHammer/fix/fe/infrastructure-page

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.primary.main, 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.secondary.light} // CAIO_REVIEW
 					strokeWidth={strokeWidth}
 					fill="none"
 					cx={totalSize / 2} // Center the circle
@@ -98,8 +99,8 @@ 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,
 				}}
 			>
 				{`${progressWithinRange.toFixed(1)}%`}

src/Components/StatBox/index.jsx

@@ -50,7 +50,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 +62,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 +120,7 @@ const StatBox = ({
 			)}
 			<Stack>
 				<Typography component="h2">{heading}</Typography>
-				<Typography>{subHeading}</Typography>
+				<Typography sx={{fontWeight: 500}}>{subHeading}</Typography>
 			</Stack>
 		</Stack>
 	);

src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx

@@ -9,6 +9,16 @@ import PropTypes from "prop-types";
 const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) => {
 	const theme = useTheme();
 
+	const valueStyle = {
+		borderRadius: theme.spacing(2),
+		backgroundColor: theme.palette.tertiary.main,
+		width: "40%",
+		mb: theme.spacing(2),
+		mt: theme.spacing(2),
+		pr: theme.spacing(2),
+		textAlign: 'right'
+	}
+
 	return (
 		<BaseContainer>
 			<Stack
@@ -16,12 +26,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 +50,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={valueStyle}>{valueOne}</Typography>
 					</Stack>
 					<Stack
 						justifyContent={"space-between"}
 						direction="row"
+						alignItems="center"
 						gap={theme.spacing(2)}
 					>
 						<Typography>{metricTwo}</Typography>
-						<Typography>{valueTwo}</Typography>
+						<Typography sx={valueStyle}>{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

@@ -95,6 +95,7 @@ const newColors = {
 	blueGray800: "#1C2130",
 	blueGray900: "#515151",
 	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",
@@ -172,6 +173,10 @@ const newSemanticColors = {
 			light: newColors.gray200,
 			dark: "#313131" /* newColors.blueGray600 */,
 		},
+		light: {
+			light: newColors.lightBlueWave,
+			dark: newColors.lightBlueWave,
+		},
 		contrastText: {
 			light: newColors.blueGray600,
 			dark: newColors.gray200,