From 696fb88c11213dc4fd06b51786a46b909fe42d34 Mon Sep 17 00:00:00 2001
From: Aryaman Kumar Sharma <kumararyaman26@gmail.com>
Date: Mon, 3 Mar 2025 10:51:52 +0530
Subject: [PATCH] Fix: Infrastructure Details Page Design

---
 src/Components/Charts/CustomGauge/index.jsx          |  5 ++---
 src/Components/StatBox/index.jsx                     |  2 +-
 .../Details/Components/GaugeBoxes/Gauge.jsx          |  5 ++---
 src/Utils/Theme/constants.js                         | 12 ++++--------
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/Components/Charts/CustomGauge/index.jsx b/src/Components/Charts/CustomGauge/index.jsx
index 5c8481898..3c7e13610 100644
--- a/src/Components/Charts/CustomGauge/index.jsx
+++ b/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)}%`}
diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx
index ab0411a68..54a4af5ca 100644
--- a/src/Components/StatBox/index.jsx
+++ b/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>
 	);
diff --git a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx b/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
index 3adf0066b..ee2ab5963 100644
--- a/src/Pages/Infrastructure/Details/Components/GaugeBoxes/Gauge.jsx
+++ b/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 (
diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js
index 7397e6f5a..81d83ecd7 100644
--- a/src/Utils/Theme/constants.js
+++ b/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,