From 7686b1ecf5b98dfde1d8b4d90f0f3d5a4ced0d34 Mon Sep 17 00:00:00 2001
From: Caio Cabral <ocaiocabral@gmail.com>
Date: Thu, 9 Jan 2025 08:40:25 -0500
Subject: [PATCH] fix: breadcrumbs

---
 Client/src/Components/Breadcrumbs/index.jsx |  6 ++++--
 Client/src/Pages/Uptime/Home/StatusBox.jsx  | 11 +++--------
 Client/src/Utils/Theme/constants.js         | 16 +++++++++++++---
 Client/src/Utils/Theme/darkTheme.js         |  2 +-
 Client/src/Utils/Theme/lightTheme.js        |  2 +-
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
index c5a1be7da..80fc4b3fe 100644
--- a/Client/src/Components/Breadcrumbs/index.jsx
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -28,7 +28,9 @@ const Breadcrumbs = ({ list }) => {
 			px={theme.spacing(2)}
 			py={theme.spacing(3.5)}
 			width="fit-content"
-			backgroundColor={theme.palette.primary.lowContrast}
+			backgroundColor={
+				theme.palette.secondary.main /* theme.palette.primary.lowContrast */
+			}
 			borderRadius={theme.shape.borderRadius}
 			lineHeight="18px"
 			sx={{
@@ -52,7 +54,7 @@ const Breadcrumbs = ({ list }) => {
 							opacity: 0.8,
 							textTransform: "capitalize",
 							"&, &:hover": {
-								color: theme.palette.primary.contrastText.tertiary,
+								color: theme.palette.secondary.contrastText,
 							},
 						}}
 					>
diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx
index cd4254435..b39fb877d 100644
--- a/Client/src/Pages/Uptime/Home/StatusBox.jsx
+++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx
@@ -18,21 +18,21 @@ const StatusBox = ({ title, value }) => {
 	let color;
 	let icon;
 	if (title === "up") {
-		color = theme.palette.success.main;
+		color = theme.palette.success.accent;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: 8 }}>
 				<Arrow />
 			</Box>
 		);
 	} else if (title === "down") {
-		color = theme.palette.error.main;
+		color = theme.palette.error.accent;
 		icon = (
 			<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
 				<Arrow />
 			</Box>
 		);
 	} else if (title === "paused") {
-		color = theme.palette.warning.main;
+		color = theme.palette.warning.accent;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: 12, right: 12 }}>
 				<ClockSnooze />
@@ -50,11 +50,6 @@ const StatusBox = ({ title, value }) => {
 			backgroundColor={theme.palette.background.main}
 			p={theme.spacing(8)}
 			overflow="hidden"
-			sx={{
-				"&:hover": {
-					backgroundColor: theme.palette.background.accent,
-				},
-			}}
 		>
 			<Box
 				sx={{
diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js
index 38ad0d4a5..933dd61d0 100644
--- a/Client/src/Utils/Theme/constants.js
+++ b/Client/src/Utils/Theme/constants.js
@@ -1,4 +1,4 @@
-import { light } from "@mui/material/styles/createPalette";
+/* import { light } from "@mui/material/styles/createPalette"; */
 
 const typographyBase = 14;
 
@@ -259,6 +259,7 @@ const semanticColors = {
 const newColors = {
 	offWhite: "#FEFEFE",
 	offBlack: "#131315",
+	gray100: "#EFEFEF",
 	gray200: "#E3E3E3",
 	gray500: "#A2A3A3",
 	blueGray50: "#E8F0FE",
@@ -315,6 +316,16 @@ const newSemanticColors = {
 			dark: newColors.blueGray600,
 		},
 	},
+	secondary: {
+		main: {
+			light: newColors.gray100,
+			dark: newColors.gray100,
+		},
+		contrastText: {
+			light: newColors.blueGray600,
+			dark: newColors.gray200,
+		},
+	},
 	/* For success, warning and error, contrastText works wll with main, and with the theme primary main color. Accent is to be used in graphs */
 	success: {
 		main: {
@@ -358,6 +369,7 @@ const newSemanticColors = {
 			dark: newColors.orange600,
 		},
 	},
+	/* These are temporary, just for everything not to break */
 	gradient: {
 		color1: {
 			light: paletteColors.gray90,
@@ -394,6 +406,4 @@ const newSemanticColors = {
 	},
 };
 
-/* TODO proximo passo: quebrar o projeto */
-
 export { typographyLevels, semanticColors as colors, newSemanticColors };
diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js
index 84385a492..c0a5eb95f 100644
--- a/Client/src/Utils/Theme/darkTheme.js
+++ b/Client/src/Utils/Theme/darkTheme.js
@@ -1,6 +1,6 @@
 import { createTheme } from "@mui/material";
 import { baseTheme } from "./globalTheme";
-import { colors, newSemanticColors } from "./constants";
+import { /* colors, */ newSemanticColors } from "./constants";
 
 function extractThemeColors(themeType, colorObject) {
 	if (!["light", "dark"].includes(themeType)) {
diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js
index f71807765..ab9c1dc78 100644
--- a/Client/src/Utils/Theme/lightTheme.js
+++ b/Client/src/Utils/Theme/lightTheme.js
@@ -1,6 +1,6 @@
 import { createTheme } from "@mui/material";
 import { baseTheme } from "./globalTheme";
-import { colors, newSemanticColors } from "./constants";
+import { /* colors, */ newSemanticColors } from "./constants";
 
 function extractThemeColors(themeType, colorObject) {
 	if (!["light", "dark"].includes(themeType)) {