diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 5e01d74b8..2949a919a 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -143,11 +143,7 @@ const BarChart = ({ checks = [] }) => { position="relative" width="9px" height="100%" - backgroundColor={ - check.status - ? theme.palette.success.contrastText - : theme.palette.error.contrastText - } + backgroundColor={theme.palette.tertiary.main} sx={{ borderRadius: theme.spacing(1.5), /* diff --git a/Client/src/Pages/Uptime/Home/actionsMenu.jsx b/Client/src/Pages/Uptime/Home/actionsMenu.jsx index 34a54fff7..cd09fddab 100644 --- a/Client/src/Pages/Uptime/Home/actionsMenu.jsx +++ b/Client/src/Pages/Uptime/Home/actionsMenu.jsx @@ -106,11 +106,16 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => slotProps={{ paper: { sx: { - "& ul": { p: theme.spacing(2.5) }, - "& li": { m: 0 }, + "& ul": { + p: theme.spacing(2.5), + backgroundColor: theme.palette.primary.main, + }, + "& li": { m: 0, color: theme.palette.primary.contrastText.secondary }, + /* + This should not be set automatically on the last of type "& li:last-of-type": { color: theme.palette.error.main, - }, + }, */ }, }, }} @@ -182,6 +187,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => e.stopPropagation(); openRemove(e); }} + sx={{ "&.MuiButtonBase-root": { color: theme.palette.error.main } }} > Remove diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index 8ff7d55a3..73e1591a9 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -58,19 +58,21 @@ const UptimeMonitors = () => { gap={theme.spacing(6)} > {canAddMonitor && ( - + <> + + )} diff --git a/Client/src/Pages/Uptime/utils.jsx b/Client/src/Pages/Uptime/utils.jsx index 122c916c4..c4d50cbc4 100644 --- a/Client/src/Pages/Uptime/utils.jsx +++ b/Client/src/Pages/Uptime/utils.jsx @@ -37,23 +37,38 @@ const useUtils = () => { }, /* 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, + "& 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, + "& 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, + "& 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 61c84f4fc..633c5b842 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -318,7 +318,7 @@ const newSemanticColors = { }, secondary: { main: { - light: newColors.gray100, + light: newColors.gray200, dark: newColors.blueGray600, }, contrastText: { @@ -326,6 +326,16 @@ const newSemanticColors = { dark: newColors.gray200, }, }, + tertiary: { + main: { + light: newColors.gray100, + dark: newColors.blueGray800, + }, + contrastText: { + light: newColors.blueGray800, + dark: newColors.gray100, + }, + }, /* 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: {