feat: fix success grdient

Client/src/Components/StatBox/index.jsx

@@ -32,6 +32,7 @@ const StatBox = ({ heading, subHeading, sx }) => {
 		<Box
 			sx={{
 				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
+				/* TODO why are we using width and min width here? */
 				minWidth: 200,
 				width: 225,
 				border: 1,
@@ -39,7 +40,7 @@ const StatBox = ({ heading, subHeading, sx }) => {
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 4,
 				backgroundColor: theme.palette.background.main,
-				background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,
+				/* background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`, */
 				"& h2": {
 					fontSize: 13,
 					fontWeight: 500,

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

@@ -136,6 +136,7 @@ const DetailsPage = () => {
 									height="fit-content"
 									gap={theme.spacing(2)}
 								>
+									{/* TODO there is  a tooltip at BarChart component. Wrap the Tooltip on our own component */}
 									<Tooltip
 										title={statusMsg[determineState(monitor)]}
 										disableInteractive
@@ -149,6 +150,21 @@ const DetailsPage = () => {
 														},
 													},
 												],
+												sx: {
+													"& .MuiTooltip-tooltip": {
+														backgroundColor: theme.palette.secondary.main,
+														color: theme.palette.secondary.contrastText,
+														px: theme.spacing(4),
+														py: theme.spacing(3),
+														border: 1,
+														borderColor: theme.palette.primary.lowContrast,
+														borderRadius: theme.shape.borderRadius,
+														boxShadow: theme.shape.boxShadow,
+														/* TODO Font size should point to theme */
+														fontSize: 12,
+														fontWeight: 500,
+													},
+												},
 											},
 										}}
 									>
@@ -204,7 +220,8 @@ const DetailsPage = () => {
 											"& svg": {
 												mr: theme.spacing(3),
 												"& path": {
-													stroke: theme.palette.primary.contrastText.tertiary,
+													/* Should always be contrastText for the button color */
+													stroke: theme.palette.secondary.contrastText,
 												},
 											},
 										}}

Client/src/Pages/Uptime/utils.jsx

@@ -11,10 +11,10 @@ const useUtils = () => {
 	const theme = useTheme();
 
 	const statusColor = {
-		up: theme.palette.success.main,
-		down: theme.palette.error.main,
-		paused: theme.palette.warning.main,
-		pending: theme.palette.warning.main,
+		up: theme.palette.success.accent,
+		down: theme.palette.error.accent,
+		paused: theme.palette.warning.accent,
+		pending: theme.palette.warning.accent,
 	};
 
 	const statusMsg = {
@@ -30,11 +30,12 @@ const useUtils = () => {
 	};
 	const statusStyles = {
 		up: {
-			backgroundColor: theme.palette.success.dark,
-			background: `linear-gradient(340deg, ${theme.palette.success.dark} -60%, ${theme.palette.success.light} 35%)`,
+			backgroundColor: theme.palette.success.accent /* dark */,
+			background: `linear-gradient(340deg, ${theme.palette.success.accent} -60%, ${theme.palette.success.contrastText} 35%)`,
 			borderColor: theme.palette.success.light,
 			"& h2": { color: theme.palette.success.main },
 		},
+		/* TODO solve remaining gradients */
 		down: {
 			backgroundColor: theme.palette.error.dark,
 			background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.dark} 35%)`,