fix: pie chart colors and Metrics box that was overflowing

Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx

@@ -101,21 +101,21 @@ PieValueLabel.propTypes = {
 	highlighted: PropTypes.bool.isRequired,
 };
 
+/**
+ * Weight constants for different performance metrics.
+ * @type {Object}
+ */
+const weights = {
+	fcp: 10,
+	si: 10,
+	lcp: 25,
+	tbt: 30,
+	cls: 25,
+};
+
 const PieChart = ({ audits }) => {
 	const theme = useTheme();
 
-	/**
-	 * Weight constants for different performance metrics.
-	 * @type {Object}
-	 */
-	const weights = {
-		fcp: 10,
-		si: 10,
-		lcp: 25,
-		tbt: 30,
-		cls: 25,
-	};
-
 	/**
 	 * Retrieves color properties based on the performance value.
 	 *
@@ -128,7 +128,7 @@ const PieChart = ({ audits }) => {
 				stroke: theme.palette.success.main,
 				strokeBg: theme.palette.success.light,
 				text: theme.palette.success.contrastText,
-				bg: theme.palette.success.dark,
+				bg: theme.palette.success.light,
 			};
 		else if (value >= 50 && value < 90)
 			return {

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -294,6 +294,7 @@ const PageSpeedDetails = () => {
 					</Box>
 					<ChartBox
 						flex={1}
+						/* TODO apply 1fr 1fr for columns, and auto 1fr for Rows */
 						sx={{ gridTemplateColumns: "50% 50%", gridTemplateRows: "15% 85%" }}
 					>
 						<Stack

Client/src/Pages/PageSpeed/Details/styled.jsx

@@ -2,7 +2,7 @@ import { Stack, styled } from "@mui/material";
 
 export const ChartBox = styled(Stack)(({ theme }) => ({
 	display: "grid",
-	height: 300,
+	minHeight: 300,
 	minWidth: 250,
 	border: 1,
 	borderStyle: "solid",

Client/src/Pages/Settings/index.jsx

@@ -20,7 +20,6 @@ import timezones from "../../Utils/timezones.json";
 import { useState, useEffect } from "react";
 import { networkService } from "../../main";
 import { settingsValidation } from "../../Validation/validation";
-import { useNavigate } from "react-router";
 import Dialog from "../../Components/Dialog";
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
 import ConfigBox from "../../Components/ConfigBox";
@@ -44,7 +43,6 @@ const Settings = () => {
 	const deleteStatsMonitorsInitState = { deleteMonitors: false, deleteStats: false };
 	const [isOpen, setIsOpen] = useState(deleteStatsMonitorsInitState);
 	const dispatch = useDispatch();
-	const navigate = useNavigate();
 
 	//Fetching latest release version from github
 	useEffect(() => {

Client/src/Utils/Theme/constants.js

@@ -46,6 +46,7 @@ const paletteColors = {
 	green50: "#D4F4E1",
 	green150: "#45BB7A",
 	green400: "#079455",
+	green500: "#07B467",
 	green800: "#1C4428",
 	green900: "#12261E",
 	red50: "#F9ECED",
@@ -96,10 +97,10 @@ const semanticColors = {
 		},
 		contrastText: {
 			light: paletteColors.green50,
-			dark: paletteColors.green900,
+			dark: paletteColors.green50,
 		},
 		light: {
-			light: paletteColors.green50,
+			light: paletteColors.green500,
 			dark: paletteColors.green800,
 		},
 		dark: {