feat: fixing table

Client/src/Components/Breadcrumbs/index.jsx

@@ -28,15 +28,16 @@ const Breadcrumbs = ({ list }) => {
 			px={theme.spacing(2)}
 			py={theme.spacing(3.5)}
 			width="fit-content"
-			backgroundColor={
-				theme.palette.secondary.main /* theme.palette.primary.lowContrast */
-			}
+			backgroundColor={theme.palette.secondary.main}
 			borderRadius={theme.shape.borderRadius}
 			lineHeight="18px"
 			sx={{
+				"& .MuiBreadcrumbs-li a": {
+					transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
+				},
 				"& .MuiBreadcrumbs-li:not(:last-of-type):hover a": {
-					backgroundColor: theme.palette.primary.lowContrast,
-					opacity: 1,
+					backgroundColor: theme.palette.secondary.contrastText,
+					color: theme.palette.secondary.main,
 				},
 			}}
 		>

Client/src/Components/Charts/BarChart/index.jsx

@@ -39,6 +39,7 @@ const BarChart = ({ checks = [] }) => {
 		>
 			{checks.map((check, index) =>
 				check === "placeholder" ? (
+					/* TODO what is the purpose of this box? */
 					<Box
 						key={`${check}-${index}`}
 						position="relative"
@@ -67,8 +68,8 @@ const BarChart = ({ checks = [] }) => {
 										height={theme.spacing(4)}
 										backgroundColor={
 											check.status
-												? theme.palette.success.main
-												: theme.palette.error.contrastText
+												? theme.palette.success.accent
+												: theme.palette.error.accent
 										}
 										sx={{ borderRadius: "50%" }}
 									/>
@@ -120,16 +121,18 @@ const BarChart = ({ checks = [] }) => {
 										borderRadius: theme.shape.borderRadius,
 										boxShadow: theme.shape.boxShadow,
 										px: theme.spacing(4),
-										py: theme.spacing(2),
+										py: theme.spacing(3),
 									},
 									"& .MuiTooltip-tooltip p": {
+										/* TODO Font size should point to theme */
 										fontSize: 12,
-										color: theme.palette.primary.contrastText.tertiary,
+										color: theme.palette.secondary.contrastText,
 										fontWeight: 500,
 									},
 									"& .MuiTooltip-tooltip span": {
+										/* TODO Font size should point to theme */
 										fontSize: 11,
-										color: theme.palette.primary.contrastText.tertiary,
+										color: theme.palette.secondary.contrastText,
 										fontWeight: 600,
 									},
 								},
@@ -143,13 +146,15 @@ const BarChart = ({ checks = [] }) => {
 							backgroundColor={
 								check.status
 									? theme.palette.success.contrastText
-									: theme.palette.error.dark
+									: theme.palette.error.contrastText
 							}
 							sx={{
 								borderRadius: theme.spacing(1.5),
+								/* 
+								TODO this doesn't seem to be used
 								"&:hover > .MuiBox-root": {
 									filter: "brightness(0.8)",
-								},
+								}, */
 							}}
 						>
 							<Box
@@ -158,7 +163,7 @@ const BarChart = ({ checks = [] }) => {
 								width="100%"
 								height={`${animate ? check.responseTime : 0}%`}
 								backgroundColor={
-									check.status ? theme.palette.success.main : theme.palette.error.main
+									check.status ? theme.palette.success.accent : theme.palette.error.accent
 								}
 								sx={{
 									borderRadius: theme.spacing(1.5),

Client/src/Pages/Uptime/Home/UptimeTable/index.jsx

@@ -178,7 +178,14 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 				</>
 			)}
 			<TableContainer component={Paper}>
-				<Table>
+				<Table
+					sx={{
+						backgroundColor: theme.palette.primary.main,
+						"& :is(th, td)": {
+							color: theme.palette.primary.contrastText.main,
+						},
+					}}
+				>
 					<TableHead>
 						<TableRow>
 							<TableCell
@@ -241,13 +248,14 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 											: (monitor.uptimePercentage * 100).toFixed(2);
 
 									percentageColor =
+										/* TODO colors update */
 										monitor.uptimePercentage < 0.25
 											? theme.palette.percentage.uptimePoor
 											: monitor.uptimePercentage < 0.5
 												? theme.palette.percentage.uptimeFair
 												: monitor.uptimePercentage < 0.75
 													? theme.palette.percentage.uptimeGood
-													: theme.palette.success.accent;
+													: theme.palette.success.main;
 								}
 
 								const params = {

Client/src/Pages/Uptime/Home/host.jsx

@@ -42,6 +42,7 @@ const Host = ({ url, title, percentageColor, percentage }) => {
 					sx={{
 						color: percentageColor,
 						fontWeight: 500,
+						/* TODO point font weight to theme */
 						ml: "15px",
 					}}
 				>

Client/src/Pages/Uptime/Home/index.jsx

@@ -64,7 +64,14 @@ const UptimeMonitors = () => {
 							onClick={() => {
 								navigate("/uptime/create");
 							}}
-							sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
+							sx={{
+								fontWeight: 500,
+								whiteSpace: "nowrap",
+								/* 
+								TODO Problem, could not make button mui work
+								backgroundColor: theme.palette.accent.main,
+								color: theme.palette.accent.contrastText, */
+							}}
 						>
 							Create new
 						</Button>

Client/src/Utils/Theme/constants.js

@@ -319,7 +319,7 @@ const newSemanticColors = {
 	secondary: {
 		main: {
 			light: newColors.gray100,
-			dark: newColors.gray100,
+			dark: newColors.blueGray600,
 		},
 		contrastText: {
 			light: newColors.blueGray600,

Client/src/Utils/Theme/globalTheme.js

@@ -41,6 +41,7 @@ const baseTheme = (palette) => ({
 			defaultProps: {
 				disableRipple: true,
 			},
+
 			styleOverrides: {
 				root: ({ theme }) => ({
 					variants: [
@@ -61,6 +62,13 @@ const baseTheme = (palette) => ({
 								backgroundColor: theme.palette.secondary.main,
 							},
 						},
+						/* {
+							props: (props) => props.variant === "contained",
+							style: {
+								backgroundColor: `${theme.palette.accent.main} !important`,
+							},
+						}, */
+
 						{
 							props: (props) =>
 								props.variant === "contained" && props.color === "secondary",