From 059927cc20c505c6576489dff3b080eef7b73d30 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Sat, 11 Jan 2025 11:49:02 -0500
Subject: [PATCH] feat: changing green for light mode

---
 Client/src/Components/Sidebar/index.css |  1 +
 Client/src/Components/Sidebar/index.jsx | 89 +++++++++++++++----------
 Client/src/Pages/Uptime/utils.jsx       | 35 +++-------
 Client/src/Utils/Theme/constants.js     |  2 +-
 4 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 049591e0c..58805c7f8 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -1,3 +1,4 @@
+/* TODO  */
 aside .MuiList-root svg {
 	width: 20px;
 	height: 20px;
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 74d94ac42..ed98011dc 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -168,9 +168,19 @@ function Sidebar() {
 				border: 1,
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: theme.shape.borderRadius,
-				backgroundColor: theme.palette.background.main,
-				"& .selected-path, & .MuiListItemButton-root:hover": {
-					backgroundColor: theme.palette.background.accent,
+				/* TODO selected item */
+				"& .selected-path": {
+					/* TODO lookup theme.palette.background.accent */
+					backgroundColor:
+						theme.palette.secondary.main /* theme.palette.background.accent */,
+
+					/* TODO not working */
+					color: theme.palette.primary.main,
+				},
+				" & .MuiListItemButton-root:hover": {
+					backgroundColor: theme.palette.tertiary.main,
+					/* TODO try and change color */
+					color: theme.palette.secondary.main,
 				},
 				"& .MuiList-root svg path": {
 					stroke: theme.palette.primary.contrastText.tertiary,
@@ -180,12 +190,48 @@ function Sidebar() {
 				},
 			}}
 		>
-			{/* TODO change for link */}
+			<IconButton
+				sx={{
+					position: "absolute",
+					/* TODO 60 is a magic number. if logo chnges size this might break */
+					top: 60,
+					right: 0,
+					transform: `translate(50%, 0)`,
+					backgroundColor: theme.palette.tertiary.main,
+					border: 1,
+					borderColor: theme.palette.primary.lowContrast,
+					p: theme.spacing(2.5),
+					"& svg": {
+						width: theme.spacing(8),
+						height: theme.spacing(8),
+						"& path": {
+							stroke: theme.palette.primary.contrastText.secondary,
+						},
+					},
+					"&:focus": { outline: "none" },
+					"&:hover": {
+						backgroundColor: theme.palette.primary.lowContrast,
+						borderColor: theme.palette.primary.lowContrast,
+					},
+				}}
+				onClick={() => {
+					setOpen((prev) =>
+						Object.fromEntries(Object.keys(prev).map((key) => [key, false]))
+					);
+					dispatch(toggleSidebar());
+				}}
+			>
+				{collapsed ? <ArrowRight /> : <ArrowLeft />}
+			</IconButton>
+
+			{/* TODO Alignment done using padding. Use single source of truth to that*/}
 			<Stack
 				pt={theme.spacing(6)}
 				pb={theme.spacing(12)}
 				pl={theme.spacing(8)}
 			>
+				{/* TODO Abstract logo into component */}
+				{/* TODO Turn logo into a link */}
 				<Stack
 					direction="row"
 					alignItems="center"
@@ -219,38 +265,6 @@ function Sidebar() {
 						Checkmate
 					</Typography>
 				</Stack>
-				<IconButton
-					sx={{
-						position: "absolute",
-						top: 60,
-						right: 0,
-						transform: `translate(50%, 0)`,
-						backgroundColor: theme.palette.primary.lowContrast,
-						border: 1,
-						borderColor: theme.palette.primary.lowContrast,
-						p: theme.spacing(2.5),
-						"& svg": {
-							width: theme.spacing(8),
-							height: theme.spacing(8),
-							"& path": {
-								stroke: theme.palette.primary.contrastText.secondary,
-							},
-						},
-						"&:focus": { outline: "none" },
-						"&:hover": {
-							backgroundColor: theme.palette.primary.lowContrast,
-							borderColor: theme.palette.primary.lowContrast,
-						},
-					}}
-					onClick={() => {
-						setOpen((prev) =>
-							Object.fromEntries(Object.keys(prev).map((key) => [key, false]))
-						);
-						dispatch(toggleSidebar());
-					}}
-				>
-					{collapsed ? <ArrowRight /> : <ArrowLeft />}
-				</IconButton>
 			</Stack>
 			{/* menu */}
 			<List
@@ -258,6 +272,7 @@ function Sidebar() {
 				aria-labelledby="nested-menu-subheader"
 				disablePadding
 				subheader={
+					/* TODO Increase Menu bottom spacing */
 					<ListSubheader
 						component="div"
 						id="nested-menu-subheader"
@@ -300,7 +315,7 @@ function Sidebar() {
 								className={location.pathname.includes(item.path) ? "selected-path" : ""}
 								onClick={() => navigate(`/${item.path}`)}
 								sx={{
-									height: "37px",
+									/* TODO fixed height */ height: "37px",
 									gap: theme.spacing(4),
 									borderRadius: theme.shape.borderRadius,
 									px: theme.spacing(4),
diff --git a/Client/src/Pages/Uptime/utils.jsx b/Client/src/Pages/Uptime/utils.jsx
index c4d50cbc4..3238a516a 100644
--- a/Client/src/Pages/Uptime/utils.jsx
+++ b/Client/src/Pages/Uptime/utils.jsx
@@ -28,47 +28,34 @@ const useUtils = () => {
 		down: "Inactive",
 		paused: "Paused",
 	};
+
+	/* This is used on 
+	1) Details > Gradient card */
 	const statusStyles = {
 		up: {
-			backgroundColor: theme.palette.success.accent /* dark */,
+			backgroundColor: theme.palette.success.accent,
 			background: `linear-gradient(340deg, ${theme.palette.success.accent} -60%, ${theme.palette.success.contrastText} 35%)`,
-			borderColor: theme.palette.success.light,
+			borderColor: theme.palette.success.contrastText,
 			"& h2": { color: theme.palette.success.main },
 		},
-		/* TODO solve remaining gradients */
 		down: {
 			backgroundColor: theme.palette.error.accent /* dark */,
 			background: `linear-gradient(340deg, ${theme.palette.error.accent} -60%, ${theme.palette.error.contrastText} 35%)`,
-			borderColor: theme.palette.error.light,
+			borderColor: theme.palette.error.contrastText,
 			"& h2": { color: theme.palette.error.main },
-		} /* {
-			backgroundColor: theme.palette.error.dark,
-			background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.dark} 35%)`,
-			borderColor: theme.palette.error.light,
-			"& h2": { color: theme.palette.error.main },
-		}, */,
+		},
 		paused: {
 			backgroundColor: theme.palette.warning.accent /* dark */,
 			background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`,
-			borderColor: theme.palette.warning.light,
+			borderColor: theme.palette.warning.contrastText,
 			"& h2": { color: theme.palette.warning.main },
-		} /* {
-			backgroundColor: theme.palette.warning.dark,
-			background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.dark} 35%)`,
-			borderColor: theme.palette.warning.light,
-			"& h2": { color: theme.palette.warning.main },
-		} */,
+		},
 		pending: {
 			backgroundColor: theme.palette.warning.accent /* dark */,
 			background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`,
-			borderColor: theme.palette.warning.light,
+			borderColor: theme.palette.warning.contrastText,
 			"& h2": { color: theme.palette.warning.main },
-		} /* {
-			backgroundColor: theme.palette.warning.light,
-			background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`,
-			borderColor: theme.palette.warning.dark,
-			"& h2": { color: theme.palette.warning.main },
-		}, */,
+		},
 	};
 	const pagespeedStyles = {
 		up: {
diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js
index 633c5b842..6dd23572f 100644
--- a/Client/src/Utils/Theme/constants.js
+++ b/Client/src/Utils/Theme/constants.js
@@ -270,7 +270,7 @@ const newColors = {
 	green100: "#8CFFCB",
 	green200: "#4B9B77",
 	green400: "#079455",
-	green700: "#19543A",
+	green700: "#026513",
 	orange100: "#FFE5CC",
 	orange400: "#FD8F22",
 	orange600: "#9B734B",