Fix: Infrastructure Details Page Design

src/Components/Charts/CustomGauge/index.jsx

@@ -62,7 +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%" }}
+			sx={{ backgroundColor: theme.palette.primary.main, borderRadius: "50%" }}
 		>
 			<svg
 				viewBox={`0 0 ${totalSize} ${totalSize}`}
@@ -71,7 +71,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			>
 				<circle
 					className="radial-chart-base"
-					stroke={theme.palette.accent.base} // CAIO_REVIEW
+					stroke={theme.palette.secondary.light} // CAIO_REVIEW
 					strokeWidth={strokeWidth}
 					fill="none"
 					cx={totalSize / 2} // Center the circle
@@ -101,7 +101,6 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 					transform: "translate(-50%, -50%)",
 					...theme.typography.h2,
 					fill: theme.typography.h2.color,
-					fontWeight: 500,
 				}}
 			>
 				{`${progressWithinRange.toFixed(1)}%`}

src/Components/StatBox/index.jsx

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

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

@@ -15,9 +15,8 @@ const Gauge = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) =>
 		width: "40%",
 		mb: 2,
 		mt: 2,
-		pr: 4,
-		textAlign: 'right',
-		fontWeight: 600
+		pr: 2,
+		textAlign: 'right'
 	}
 
 	return (

src/Utils/Theme/constants.js

@@ -139,14 +139,6 @@ const newSemanticColors = {
 			light: newColors.offWhite,
 			dark: newColors.offWhite,
 		},
-		base: {
-			light: newColors.lightBlueWave,
-			dark: newColors.lightBlueWave,
-		},
-		baseBackground: {
-			light: paletteColors.white,
-			dark: newColors.offBlack,
-		}
 	},
 	primary: {
 		main: {
@@ -180,6 +172,10 @@ const newSemanticColors = {
 			light: newColors.gray200,
 			dark: "#313131" /* newColors.blueGray600 */,
 		},
+		light: {
+			light: newColors.lightBlueWave,
+			dark: newColors.lightBlueWave,
+		},
 		contrastText: {
 			light: newColors.blueGray600,
 			dark: newColors.gray200,