fix: breadcrumbs

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,
 							},
 						}}
 					>

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={{

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 };

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)) {

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)) {