From 49f675cf026f98b30d294457f6960bdd3e4c71fb Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Sun, 22 Dec 2024 19:52:40 -0500
Subject: [PATCH] fix: pie chart colors and Metrics box that was overflowing

---
 .../PageSpeed/Details/Charts/PieChart.jsx     | 26 +++++++++----------
 Client/src/Pages/PageSpeed/Details/index.jsx  |  1 +
 Client/src/Pages/PageSpeed/Details/styled.jsx |  2 +-
 Client/src/Pages/Settings/index.jsx           |  2 --
 Client/src/Utils/Theme/constants.js           |  5 ++--
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx
index d1d106c11..0ab92bb2e 100644
--- a/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx
+++ b/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 {
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index bf06797cd..838da21a9 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/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
diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx
index 91cc1864c..14d879f7b 100644
--- a/Client/src/Pages/PageSpeed/Details/styled.jsx
+++ b/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",
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 5c53f3d01..5e0768b8a 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/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(() => {
diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js
index df9b5da93..66e06b1ac 100644
--- a/Client/src/Utils/Theme/constants.js
+++ b/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: {