From 61aaa8489a4592247f7cce81b22a926033ec0eef Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 09:39:31 -0500 Subject: [PATCH] feat: simplify and adjust status label --- Client/src/Components/BasicTable/index.jsx | 6 +- .../src/Components/Charts/BarChart/index.jsx | 8 +- .../Charts/MonitorDetailsAreaChart/index.jsx | 6 +- .../Components/Charts/Utils/chartUtils.jsx | 12 +- Client/src/Components/Check/Check.jsx | 2 +- Client/src/Components/ConfigBox/index.jsx | 4 +- .../src/Components/Dialog/genericDialog.jsx | 4 +- Client/src/Components/Fallback/index.jsx | 2 +- Client/src/Components/IconBox/index.jsx | 2 +- .../src/Components/Inputs/Checkbox/index.jsx | 4 +- Client/src/Components/Inputs/Image/index.jsx | 6 +- Client/src/Components/Inputs/Radio/index.jsx | 4 +- Client/src/Components/Inputs/Search/index.jsx | 8 +- Client/src/Components/Inputs/Select/index.jsx | 6 +- .../Inputs/TextInput/Adornments/index.jsx | 2 +- .../src/Components/Inputs/TextInput/index.jsx | 2 +- Client/src/Components/Label/index.jsx | 39 ++++--- Client/src/Components/Link/index.jsx | 8 +- Client/src/Components/ProgressBars/index.jsx | 4 +- Client/src/Components/Sidebar/index.jsx | 10 +- Client/src/Components/StatBox/index.jsx | 6 +- .../TabPanels/Account/PasswordPanel.jsx | 2 +- .../TabPanels/Account/ProfilePanel.jsx | 2 +- .../TabPanels/Account/TeamPanel.jsx | 4 +- .../Components/ThemeSwitch/SunAndMoonIcon.jsx | 4 +- Client/src/Pages/Account/index.jsx | 2 +- Client/src/Pages/Auth/Register/Register.jsx | 6 +- .../Incidents/IncidentTable/Empty/Empty.jsx | 2 +- .../Pages/Incidents/IncidentTable/index.jsx | 2 +- Client/src/Pages/Incidents/index.jsx | 2 +- .../Pages/Infrastructure/Details/empty.jsx | 2 +- .../Infrastructure/components/Menu/index.jsx | 2 +- .../components/TablePagination/index.jsx | 4 +- Client/src/Pages/Infrastructure/index.jsx | 6 +- Client/src/Pages/Integrations/index.jsx | 2 +- .../Maintenance/CreateMaintenance/index.jsx | 2 +- .../MaintenanceTable/ActionsMenu/index.jsx | 2 +- .../Maintenance/MaintenanceTable/index.jsx | 4 +- .../src/Pages/PageSpeed/Configure/index.jsx | 4 +- .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 4 +- .../PageSpeed/Details/Charts/AreaChart.jsx | 6 +- Client/src/Pages/PageSpeed/Details/index.jsx | 6 +- Client/src/Pages/PageSpeed/Details/styled.jsx | 4 +- Client/src/Pages/PageSpeed/card.jsx | 6 +- Client/src/Pages/PageSpeed/index.jsx | 2 +- Client/src/Pages/Uptime/Configure/index.jsx | 4 +- Client/src/Pages/Uptime/Details/index.jsx | 10 +- Client/src/Pages/Uptime/Details/styled.jsx | 8 +- .../Uptime/Home/CurrentMonitoring/index.jsx | 2 +- Client/src/Pages/Uptime/Home/StatusBox.jsx | 14 +-- .../Pages/Uptime/Home/UptimeTable/index.jsx | 6 +- Client/src/Pages/Uptime/Home/actionsMenu.jsx | 4 +- Client/src/Pages/Uptime/Home/fallback.jsx | 2 +- Client/src/Pages/Uptime/Home/index.jsx | 39 +++++++ Client/src/Pages/Uptime/utils.jsx | 31 ++++-- Client/src/Utils/Theme/constants.js | 105 ++++++++++-------- Client/src/Utils/Theme/globalTheme.js | 10 +- Client/src/Utils/greeting.jsx | 6 +- 58 files changed, 266 insertions(+), 202 deletions(-) diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index da053db14..f4d343b0a 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -251,7 +251,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data" px={theme.spacing(4)} sx={{ "& p": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, }} > @@ -305,9 +305,9 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data" }} sx={{ mt: theme.spacing(6), - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, "& svg path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 1.3, }, "& .MuiSelect-select": { diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 2949a919a..6ed2a7ebd 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -68,8 +68,8 @@ const BarChart = ({ checks = [] }) => { height={theme.spacing(4)} backgroundColor={ check.status - ? theme.palette.success.accent - : theme.palette.error.accent + ? theme.palette.success.lowContrast + : theme.palette.error.lowContrast } sx={{ borderRadius: "50%" }} /> @@ -159,7 +159,9 @@ const BarChart = ({ checks = [] }) => { width="100%" height={`${animate ? check.responseTime : 0}%`} backgroundColor={ - check.status ? theme.palette.success.accent : theme.palette.error.accent + check.status + ? theme.palette.success.lowContrast + : theme.palette.error.lowContrast } sx={{ borderRadius: theme.spacing(1.5), diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index b60230008..2c6579bc3 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -36,7 +36,7 @@ const CustomToolTip = ({ active, payload, label }) => { > { ml={theme.spacing(3)} sx={{ "& span": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, fontSize: 11, fontWeight: 500, }, @@ -114,7 +114,7 @@ const CustomTick = ({ x, y, payload, index }) => { x={x} y={y + 10} textAnchor="middle" - fill={theme.palette.primary.contrastText.tertiary} + fill={theme.palette.primary.contrastTextTertiary} fontSize={11} fontWeight={400} > diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx index 7dc9df6de..ced9fadbc 100644 --- a/Client/src/Components/Charts/Utils/chartUtils.jsx +++ b/Client/src/Components/Charts/Utils/chartUtils.jsx @@ -23,7 +23,7 @@ export const TzTick = ({ x, y, payload, index }) => { x={x} y={y + 10} textAnchor="middle" - fill={theme.palette.primary.contrastText.tertiary} + fill={theme.palette.primary.contrastTextTertiary} fontSize={11} fontWeight={400} > @@ -57,7 +57,7 @@ export const PercentTick = ({ x, y, payload, index }) => { x={x - 20} y={y} textAnchor="middle" - fill={theme.palette.primary.contrastText.tertiary} + fill={theme.palette.primary.contrastTextTertiary} fontSize={11} fontWeight={400} > @@ -128,7 +128,7 @@ export const InfrastructureTooltip = ({ > sx={{ color: variant === "info" - ? theme.palette.primary.contrastText.tertiary + ? theme.palette.primary.contrastTextTertiary : colors[variant], opacity: 0.8, }} diff --git a/Client/src/Components/ConfigBox/index.jsx b/Client/src/Components/ConfigBox/index.jsx index 90dc22a05..8f7eb7b24 100644 --- a/Client/src/Components/ConfigBox/index.jsx +++ b/Client/src/Components/ConfigBox/index.jsx @@ -28,10 +28,10 @@ const ConfigBox = styled(Stack)(({ theme }) => ({ paddingLeft: theme.spacing(18), }, "& h1, & h2": { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, }, "& p": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, })); diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx index 5adabc231..871b3f329 100644 --- a/Client/src/Components/Dialog/genericDialog.jsx +++ b/Client/src/Components/Dialog/genericDialog.jsx @@ -37,7 +37,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) = id={titleId} component="h2" fontSize={16} - color={theme.palette.primary.contrastText.main} + color={theme.palette.primary.contrastText} fontWeight={600} > {title} @@ -45,7 +45,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) = {description && ( {description} diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 1f43271c3..0354dbe65 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -54,7 +54,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) => {vowelStart ? "An" : "A"} {title} is used to: diff --git a/Client/src/Components/IconBox/index.jsx b/Client/src/Components/IconBox/index.jsx index 0b67b56d1..bb9770e6a 100644 --- a/Client/src/Components/IconBox/index.jsx +++ b/Client/src/Components/IconBox/index.jsx @@ -59,7 +59,7 @@ const IconBox = styled(Box)( width: svgWidth, height: svgHeight, "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }, }) diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx index 1da433caa..b3a036d57 100644 --- a/Client/src/Components/Inputs/Checkbox/index.jsx +++ b/Client/src/Components/Inputs/Checkbox/index.jsx @@ -94,10 +94,10 @@ const Checkbox = ({ }, "& span.MuiTypography-root": { fontSize: 13, - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, ".MuiFormControlLabel-label.Mui-disabled": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, opacity: 0.25, }, }} diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx index 413f3d8c8..a955a8ad6 100644 --- a/Client/src/Components/Inputs/Image/index.jsx +++ b/Client/src/Components/Inputs/Image/index.jsx @@ -94,7 +94,7 @@ const ImageField = ({ id, src, loading, onChange }) => { { (maximum size: 3MB) @@ -117,7 +117,7 @@ const ImageField = ({ id, src, loading, onChange }) => { Supported formats: JPG, PNG diff --git a/Client/src/Components/Inputs/Radio/index.jsx b/Client/src/Components/Inputs/Radio/index.jsx index b1f970722..8c1c06b38 100644 --- a/Client/src/Components/Inputs/Radio/index.jsx +++ b/Client/src/Components/Inputs/Radio/index.jsx @@ -43,7 +43,7 @@ const Radio = (props) => { height: 16, boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.main}`, "&:not(.Mui-checked)": { - boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText.main}70`, // Use theme text color for the outline + boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText}70`, // Use theme text color for the outline }, mt: theme.spacing(0.5), }} @@ -56,7 +56,7 @@ const Radio = (props) => { {props.desc} diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index 8fab78d79..2749d7f74 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/Client/src/Components/Inputs/Search/index.jsx @@ -27,7 +27,7 @@ const SearchAdornment = () => { width: 16, height: 16, "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 1.2, }, }, @@ -80,7 +80,7 @@ const Search = ({ {label} @@ -157,7 +157,7 @@ const Search = ({ sx: { "& ul": { p: 2, backgroundColor: theme.palette.primary.main }, "& li.MuiAutocomplete-option": { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, px: 4, borderRadius: theme.shape.borderRadius, }, @@ -168,7 +168,7 @@ const Search = ({ }, "& li.MuiAutocomplete-option:hover:not([aria-selected='true'])": { color: theme.palette.primary.main, - backgroundColor: theme.palette.primary.contrastText.secondary, + backgroundColor: theme.palette.primary.contrastTextSecondary, }, "& .MuiAutocomplete-noOptions": { px: theme.spacing(6), diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx index 27085a11a..f0a1d11c0 100644 --- a/Client/src/Components/Inputs/Select/index.jsx +++ b/Client/src/Components/Inputs/Select/index.jsx @@ -54,7 +54,7 @@ const Select = ({ const theme = useTheme(); const itemStyles = { fontSize: "var(--env-var-font-size-medium)", - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, borderRadius: theme.shape.borderRadius, margin: theme.spacing(2), }; @@ -67,7 +67,7 @@ const Select = ({ {label && ( @@ -95,7 +95,7 @@ const Select = ({ borderColor: theme.palette.primary.lowContrast, }, "& svg path": { - fill: theme.palette.primary.contrastText.tertiary, + fill: theme.palette.primary.contrastTextTertiary, }, ...sx, }} diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx index a112f2f7f..2b3717085 100644 --- a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx +++ b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx @@ -20,7 +20,7 @@ export const HttpAdornment = ({ https }) => { {https ? "https" : "http"}:// diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 4b65285bf..022d286d8 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -101,7 +101,7 @@ const TextInput = forwardRef( {label} diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index d27a7bee0..64dfe9a7e 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -31,8 +31,8 @@ const BaseLabel = ({ label, styles, children }) => { className="label" sx={{ borderRadius: borderRadius, - border: `1px solid ${theme.palette.primary.contrastText.tertiary}`, - color: theme.palette.primary.contrastText.tertiary, + border: `1px solid ${theme.palette.primary.contrastTextTertiary}`, + color: theme.palette.primary.contrastTextTertiary, padding: padding, ...styles, }} @@ -122,55 +122,58 @@ ColoredLabel.propTypes = { * */ -/* TODO check design aspect with Gorkem */ +const statusToTheme = { + up: "success", + down: "error", + paused: "warning", + pending: "secondary", + "cannot resolve": "tertiary", +}; + const StatusLabel = ({ status, text, customStyles }) => { const theme = useTheme(); - const colors = { + /* const colors = { up: { dotColor: theme.palette.success.main, - /* bgColor: theme.palette.success.contrastText */ /* dark */ - borderColor: theme.palette.success.main /* light */, + borderColor: theme.palette.success.main , }, down: { dotColor: theme.palette.error.main, - /* TODO Look for dark and light, they still work */ - /* bgColor: theme.palette.primary.lowContrast, */ borderColor: theme.palette.error.light, }, paused: { dotColor: theme.palette.warning.main, - /* bgColor: theme.palette.warning.dark, */ borderColor: theme.palette.warning.light, }, pending: { - dotColor: theme.palette.primary.contrastText.secondary, - bgColor: theme.palette.primary.main, + dotColor: theme.palette.primary.contrastTextSecondary, borderColor: theme.palette.primary.lowContrast, }, "cannot resolve": { dotColor: theme.palette.unresolved.main, - bgColor: theme.palette.primary.lowContrast, borderColor: theme.palette.unresolved.light, }, - }; + }; */ + + const themeColor = statusToTheme[status]; // Look up the color for the status - const { borderColor, bgColor, dotColor } = colors[status]; + /* const { borderColor, bgColor, dotColor } = colors[status]; */ return ( diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx index 875da5ada..6a317502b 100644 --- a/Client/src/Components/Link/index.jsx +++ b/Client/src/Components/Link/index.jsx @@ -16,22 +16,22 @@ const Link = ({ level, label, url }) => { const levelConfig = { primary: {}, secondary: { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, sx: { ":hover": { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, }, }, }, tertiary: { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, sx: { textDecoration: "underline", textDecorationStyle: "dashed", textDecorationColor: theme.palette.primary.main, textUnderlineOffset: "1px", ":hover": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, textDecorationColor: theme.palette.primary.main, backgroundColor: theme.palette.primary.lowContrast, }, diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 9ff6c0ad0..8a284ccd5 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -71,7 +71,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => width: 23, height: 23, "& path": { - fill: theme.palette.primary.contrastText.tertiary, + fill: theme.palette.primary.contrastTextTertiary, }, }, }} @@ -90,7 +90,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => {error} ) : ( - + { "& h2": { fontSize: 13, fontWeight: 500, - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, textTransform: "uppercase", }, "& p": { fontSize: 18, - color: theme.palette.primary.contrastText.main, + color: theme.palette.primary.contrastText, marginTop: theme.spacing(2), "& span": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, marginLeft: theme.spacing(2), fontSize: 15, }, diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 9de61510f..082d69c17 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -115,7 +115,7 @@ const PasswordPanel = () => { value="password" sx={{ "& h1, & input": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, }} > diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 8c87a9372..57995ad5f 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -216,7 +216,7 @@ const ProfilePanel = () => { value="profile" sx={{ "& h1, & p, & input": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, }} > diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index 832411bcb..3e2d9f150 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -91,7 +91,7 @@ const TeamPanel = () => { id: idx, data: ( - + {member.firstName + " " + member.lastName} @@ -190,7 +190,7 @@ const TeamPanel = () => { value="team" sx={{ "& h1": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, "& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p": { diff --git a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx index 58f0c61e1..21256e114 100644 --- a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx +++ b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx @@ -35,12 +35,12 @@ const SunAndMoonIcon = () => { cx="12" cy="12" r="6" - fill={theme.palette.primary.contrastText.secondary} + fill={theme.palette.primary.contrastTextSecondary} mask="url(#moon-mask)" /> { tabIndex={index} sx={{ fontSize: 13, - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, textTransform: "none", minWidth: "fit-content", minHeight: 0, diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index a2097a09b..3d511f5c4 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -50,7 +50,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { "& svg": { mr: theme.spacing(4), "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }, "&:focus-visible": { @@ -77,7 +77,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { }} sx={{ "&:hover": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, }} > @@ -95,7 +95,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { }} sx={{ "&:hover": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, }, }} > diff --git a/Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx b/Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx index 4863af4f9..78b7e8d6d 100644 --- a/Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx @@ -16,7 +16,7 @@ const Empty = ({ styles, mode }) => { No incidents recorded yet. diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index b91faf353..f7403d6a5 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx @@ -159,7 +159,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { The monitor you have selected has no recorded incidents yet. diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index cd6f5970b..d2a7439f4 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -84,7 +84,7 @@ const Incidents = () => { Incidents for diff --git a/Client/src/Pages/Infrastructure/Details/empty.jsx b/Client/src/Pages/Infrastructure/Details/empty.jsx index bfec7cc0d..ee3cdb4df 100644 --- a/Client/src/Pages/Infrastructure/Details/empty.jsx +++ b/Client/src/Pages/Infrastructure/Details/empty.jsx @@ -19,7 +19,7 @@ const Empty = ({ styles }) => { Your infrastructure dashboard will show here Hang tight! Data is loading diff --git a/Client/src/Pages/Infrastructure/components/Menu/index.jsx b/Client/src/Pages/Infrastructure/components/Menu/index.jsx index 98ec859d0..f036b9d86 100644 --- a/Client/src/Pages/Infrastructure/components/Menu/index.jsx +++ b/Client/src/Pages/Infrastructure/components/Menu/index.jsx @@ -83,7 +83,7 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => { outline: "none", }, "& svg path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }} ref={anchor} diff --git a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx index 9d0945277..63a2567e6 100644 --- a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx +++ b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx @@ -98,9 +98,9 @@ function Pagination({ }, }} sx={{ - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, "& svg path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 1.3, }, "& .MuiSelect-select": { diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index b479a54ba..85a585cb4 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -156,7 +156,7 @@ function Infrastructure() { ? theme.palette.percentage.uptimeFair : monitor.uptimePercentage < 0.75 ? theme.palette.percentage.uptimeGood - : theme.palette.success.accent; + : theme.palette.success.lowContrast; return { id: monitor._id, name: monitor.name, @@ -229,7 +229,7 @@ function Infrastructure() { diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx index 7adbcfdaf..d0f75ffb4 100644 --- a/Client/src/Pages/Integrations/index.jsx +++ b/Client/src/Pages/Integrations/index.jsx @@ -126,7 +126,7 @@ const Integrations = () => { gap={theme.spacing(2)} sx={{ "& h1, & p": { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, }, }} > diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx index de8009147..f3ce7d0c2 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx +++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx @@ -394,7 +394,7 @@ const CreateMaintenance = () => { py: 0, mr: 0, "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 1.1, }, "&:hover": { backgroundColor: "transparent" }, diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx index bac6027aa..704e8c230 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx @@ -95,7 +95,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => { outline: "none", }, "& svg path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }} > diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx index d0269f3ff..775d3d954 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx @@ -329,9 +329,9 @@ const MaintenanceTable = ({ }} sx={{ mt: theme.spacing(6), - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, "& svg path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 1.3, }, "& .MuiSelect-select": { diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index e6a651d9c..0da096cf5 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -249,7 +249,7 @@ const PageSpeedConfigure = () => { width: 4, height: 4, borderRadius: "50%", - backgroundColor: theme.palette.primary.contrastText.tertiary, + backgroundColor: theme.palette.primary.contrastTextTertiary, opacity: 0.8, left: -10, top: "50%", @@ -276,7 +276,7 @@ const PageSpeedConfigure = () => { "& svg": { mr: theme.spacing(2), "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 0.1, }, }, diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index 714836bbe..dd045cf1a 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -179,7 +179,7 @@ const CreatePageSpeed = () => { className="create-monitor" sx={{ "& h1": { - color: theme.palette.primary.contrastText.main, + color: theme.palette.primary.contrastText, }, }} > @@ -207,7 +207,7 @@ const CreatePageSpeed = () => { component="span" fontSize="inherit" fontWeight="inherit" - color={theme.palette.primary.contrastText.secondary} + color={theme.palette.primary.contrastTextSecondary} > PageSpeed monitor diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx index d180431c3..36ec9cfe6 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx @@ -64,7 +64,7 @@ const CustomToolTip = ({ active, payload, label, config }) => { > { mt={theme.spacing(1)} sx={{ "& span": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, fontSize: 11, fontWeight: 500, }, @@ -186,7 +186,7 @@ const CustomTick = ({ x, y, payload, index }) => { x={x} y={y + 8} textAnchor="middle" - fill={theme.palette.primary.contrastText.tertiary} + fill={theme.palette.primary.contrastTextTertiary} fontSize={11} fontWeight={400} > diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 2d39e9d9b..357d20a85 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -151,7 +151,7 @@ const PageSpeedDetails = () => { width: 4, height: 4, borderRadius: "50%", - backgroundColor: theme.palette.primary.contrastText.tertiary, + backgroundColor: theme.palette.primary.contrastTextTertiary, opacity: 0.8, left: -9, top: "50%", @@ -175,7 +175,7 @@ const PageSpeedDetails = () => { "& svg": { mr: theme.spacing(3), "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }, }} @@ -410,7 +410,7 @@ const PageSpeedDetails = () => { component="span" fontSize={14} fontWeight={500} - color={theme.palette.primary.contrastText.main} + color={theme.palette.primary.contrastText} > {value} ({ borderBottomRightRadius: 16, backgroundColor: theme.palette.primary.main, "& h2": { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, fontSize: 15, fontWeight: 500, }, - "& p": { color: theme.palette.primary.contrastText.tertiary }, + "& p": { color: theme.palette.primary.contrastTextTertiary }, "& > :nth-of-type(1)": { gridColumn: 1, gridRow: 1, diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 55d010c98..efb1bd890 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -33,7 +33,7 @@ const CustomToolTip = ({ payload }) => { > { mt={theme.spacing(1)} sx={{ "& span": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, fontSize: 11, fontWeight: 500, }, @@ -299,7 +299,7 @@ const Card = ({ monitor }) => { {time}{" "} diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index e40df6d58..562b86b09 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -113,7 +113,7 @@ const PageSpeed = () => { { width: 4, height: 4, borderRadius: "50%", - backgroundColor: theme.palette.primary.contrastText.tertiary, + backgroundColor: theme.palette.primary.contrastTextTertiary, opacity: 0.8, left: -10, top: "50%", @@ -307,7 +307,7 @@ const Configure = () => { width: 22, height: 22, "& path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, strokeWidth: 1.7, }, }, diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx index db9698156..2c689c702 100644 --- a/Client/src/Pages/Uptime/Details/index.jsx +++ b/Client/src/Pages/Uptime/Details/index.jsx @@ -190,7 +190,7 @@ const DetailsPage = () => { width: 4, height: 4, borderRadius: "50%", - backgroundColor: theme.palette.primary.contrastText.tertiary, + backgroundColor: theme.palette.primary.contrastTextTertiary, opacity: 0.8, left: -9, top: "50%", @@ -259,7 +259,7 @@ const DetailsPage = () => { {certificateExpiry} @@ -333,7 +333,7 @@ const DetailsPage = () => { position="absolute" top="100%" fontSize={11} - color={theme.palette.primary.contrastText.tertiary} + color={theme.palette.primary.contrastTextTertiary} > {formatDateWithTz( hoveredUptimeData._id, @@ -390,7 +390,7 @@ const DetailsPage = () => { position="absolute" top="100%" fontSize={11} - color={theme.palette.primary.contrastText.tertiary} + color={theme.palette.primary.contrastTextTertiary} > {formatDateWithTz( hoveredIncidentsData._id, @@ -443,7 +443,7 @@ const DetailsPage = () => { History diff --git a/Client/src/Pages/Uptime/Details/styled.jsx b/Client/src/Pages/Uptime/Details/styled.jsx index b3f0b2191..164fee457 100644 --- a/Client/src/Pages/Uptime/Details/styled.jsx +++ b/Client/src/Pages/Uptime/Details/styled.jsx @@ -12,16 +12,16 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ borderRadius: 4, backgroundColor: theme.palette.primary.main, "& h2": { - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, fontSize: 15, fontWeight: 500, }, "& .MuiBox-root:not(.area-tooltip) p": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, fontSize: 13, }, "& .MuiBox-root > span": { - color: theme.palette.primary.contrastText.main, + color: theme.palette.primary.contrastText, fontSize: 20, "& span": { opacity: 0.8, @@ -37,7 +37,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ alignItems: "center", }, "& tspan, & text": { - fill: theme.palette.primary.contrastText.tertiary, + fill: theme.palette.primary.contrastTextTertiary, }, "& path": { transition: "fill 300ms ease, stroke-width 400ms ease", diff --git a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx index f1fbddf02..9eb7c3e08 100644 --- a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx +++ b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx @@ -30,7 +30,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) => { position: "absolute", right: 8, opacity: 0.5, - "& svg path": { stroke: theme.palette.primary.contrastText.tertiary }, + "& svg path": { stroke: theme.palette.primary.contrastTextTertiary }, }; let color; let icon; if (title === "up") { - color = theme.palette.success.accent; + color = theme.palette.success.lowContrast; icon = ( ); } else if (title === "down") { - color = theme.palette.error.accent; + color = theme.palette.error.lowContrast; icon = ( ); } else if (title === "paused") { - color = theme.palette.warning.accent; + color = theme.palette.warning.lowContrast; icon = ( @@ -58,7 +58,7 @@ const StatusBox = ({ title, value }) => { left: "5%", pointerEvents: "none", "& svg g g:last-of-type path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }} > @@ -68,7 +68,7 @@ const StatusBox = ({ title, value }) => { textTransform="uppercase" fontSize={15} letterSpacing={0.5} - color={theme.palette.primary.contrastText.tertiary} + color={theme.palette.primary.contrastTextTertiary} mb={theme.spacing(8)} > {title} @@ -88,7 +88,7 @@ const StatusBox = ({ title, value }) => { component="span" fontSize={20} fontWeight={300} - color={theme.palette.primary.contrastText.secondary} + color={theme.palette.primary.contrastTextSecondary} sx={{ opacity: 0.3 }} > # diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx index 4eeb0f3e2..ea64bdcc9 100644 --- a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx +++ b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx @@ -171,7 +171,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus > @@ -182,7 +182,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus sx={{ backgroundColor: theme.palette.primary.main, "& :is(th, td)": { - color: theme.palette.primary.contrastText.main, + color: theme.palette.primary.contrastText, }, }} > @@ -238,7 +238,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus {monitors.length > 0 ? ( monitors.map((monitor) => { let uptimePercentage = ""; - let percentageColor = theme.palette.success.accent; + let percentageColor = theme.palette.success.lowContrast; // Determine uptime percentage and color based on the monitor's uptimePercentage value if (monitor.uptimePercentage !== undefined) { diff --git a/Client/src/Pages/Uptime/Home/actionsMenu.jsx b/Client/src/Pages/Uptime/Home/actionsMenu.jsx index cd09fddab..d1dd334ec 100644 --- a/Client/src/Pages/Uptime/Home/actionsMenu.jsx +++ b/Client/src/Pages/Uptime/Home/actionsMenu.jsx @@ -90,7 +90,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => outline: "none", }, "& svg path": { - stroke: theme.palette.primary.contrastText.tertiary, + stroke: theme.palette.primary.contrastTextTertiary, }, }} > @@ -110,7 +110,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) => p: theme.spacing(2.5), backgroundColor: theme.palette.primary.main, }, - "& li": { m: 0, color: theme.palette.primary.contrastText.secondary }, + "& li": { m: 0, color: theme.palette.primary.contrastTextSecondary }, /* This should not be set automatically on the last of type "& li:last-of-type": { diff --git a/Client/src/Pages/Uptime/Home/fallback.jsx b/Client/src/Pages/Uptime/Home/fallback.jsx index 9aff95dc4..db2cc9487 100644 --- a/Client/src/Pages/Uptime/Home/fallback.jsx +++ b/Client/src/Pages/Uptime/Home/fallback.jsx @@ -21,7 +21,7 @@ const Fallback = ({ isAdmin }) => { border={1} borderRadius={theme.shape.borderRadius} borderColor={theme.palette.primary.lowContrast} - color={theme.palette.primary.contrastText.secondary} + color={theme.palette.primary.contrastTextSecondary} > {mode === "light" ? : } diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index 73e1591a9..825d862a0 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -72,6 +72,45 @@ const UptimeMonitors = () => { > Create new + + + )} diff --git a/Client/src/Pages/Uptime/utils.jsx b/Client/src/Pages/Uptime/utils.jsx index 3238a516a..8c3e678be 100644 --- a/Client/src/Pages/Uptime/utils.jsx +++ b/Client/src/Pages/Uptime/utils.jsx @@ -11,10 +11,10 @@ const useUtils = () => { const theme = useTheme(); const statusColor = { - up: theme.palette.success.accent, - down: theme.palette.error.accent, - paused: theme.palette.warning.accent, - pending: theme.palette.warning.accent, + up: theme.palette.success.lowContrast, + down: theme.palette.error.lowContrast, + paused: theme.palette.warning.lowContrast, + pending: theme.palette.warning.lowContrast, }; const statusMsg = { @@ -31,32 +31,39 @@ const useUtils = () => { /* This is used on 1) Details > Gradient card */ + /* These are rediections. We should do something that maps up to success, down to error, and get the theme by that + + */ const statusStyles = { up: { - backgroundColor: theme.palette.success.accent, - background: `linear-gradient(340deg, ${theme.palette.success.accent} -60%, ${theme.palette.success.contrastText} 35%)`, + backgroundColor: theme.palette.success.lowContrast, + background: `linear-gradient(340deg, ${theme.palette.success.lowContrast} -60%, ${theme.palette.success.contrastText} 35%)`, borderColor: theme.palette.success.contrastText, "& h2": { color: theme.palette.success.main }, }, down: { - backgroundColor: theme.palette.error.accent /* dark */, - background: `linear-gradient(340deg, ${theme.palette.error.accent} -60%, ${theme.palette.error.contrastText} 35%)`, + backgroundColor: theme.palette.error.lowContrast, + background: `linear-gradient(340deg, ${theme.palette.error.lowContrast} -60%, ${theme.palette.error.contrastText} 35%)`, borderColor: theme.palette.error.contrastText, "& 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%)`, + backgroundColor: theme.palette.warning.lowContrast, + background: `linear-gradient(340deg, ${theme.palette.warning.lowContrast} -60%, ${theme.palette.warning.contrastText} 35%)`, borderColor: theme.palette.warning.contrastText, "& 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%)`, + backgroundColor: theme.palette.warning.lowContrast, + background: `linear-gradient(340deg, ${theme.palette.warning.lowContrast} -60%, ${theme.palette.warning.contrastText} 35%)`, borderColor: theme.palette.warning.contrastText, "& h2": { color: theme.palette.warning.main }, }, }; + + /* These are rediections. We should do something that maps up to success, down to error, and get the theme by that + + */ const pagespeedStyles = { up: { bg: theme.palette.success.dark, diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index bb1bf6297..67d9a78db 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -97,22 +97,36 @@ const newColors = { green200: "#4B9B77", green400: "#079455", green700: "#026513", - orange100: "#FFE5CC", + orange100: "#CCB368", orange400: "#FD8F22", orange600: "#9B734B", - orange700: "#694016", - red100: "#F9C2C2", + orange700: "#884605" /* "#6F5404" */, + /* warning: { + main: { + light: newColors.orange700, + dark: newColors.orange100, + }, + contrastText: { + light: newColors.offWhite, + dark: newColors.offBlack, + }, + lowContrast: { + light: newColors.orange400, + dark: newColors.orange600, + }, + }, */ + red100: "#F27C7C", red400: "#D92020", red600: "#9B4B4B", - red700: "#791515", + red700: "#980303", }; /* Structure: Key: main: background color contrastText: color for main contrast text -light and dark: should be transparent (since we don't want MUI to make the light dark automatic calculations for us) -lowerContrastText: if there are any, use nested keys secondary and tertiary +contrastTextSecondary: if needed +contrastTextTertiary: if needed lowContrast: if we need some low contrast for that color (for borders, and decorative elements). This should never be usend in text */ @@ -133,18 +147,16 @@ const newSemanticColors = { dark: newColors.offBlack, }, contrastText: { - main: { - light: newColors.blueGray800, - dark: newColors.blueGray50, - }, - secondary: { - light: newColors.blueGray600, - dark: newColors.gray200, - }, - tertiary: { - light: newColors.blueGray500, - dark: newColors.gray500, - }, + light: newColors.blueGray800, + dark: newColors.blueGray50, + }, + contrastTextSecondary: { + light: newColors.blueGray600, + dark: newColors.gray200, + }, + contrastTextTertiary: { + light: newColors.blueGray500, + dark: newColors.gray500, }, lowContrast: { light: newColors.gray200, @@ -171,49 +183,48 @@ const newSemanticColors = { 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: { light: newColors.green700, dark: newColors.green100, }, contrastText: { - light: newColors.green100, - dark: newColors.green700, + light: newColors.offWhite, + dark: newColors.offBlack, }, - accent: { + lowContrast: { light: newColors.green400, dark: newColors.green200, }, }, - error: { - main: { - light: newColors.red700, - dark: newColors.red100, - }, - contrastText: { - light: newColors.red100, - dark: newColors.red700, - }, - accent: { - light: newColors.red400, - dark: newColors.red600, - }, - }, warning: { main: { light: newColors.orange700, dark: newColors.orange100, }, contrastText: { - light: newColors.orange100, - dark: newColors.orange700, + light: newColors.offWhite, + dark: newColors.offBlack, }, - accent: { + lowContrast: { light: newColors.orange400, dark: newColors.orange600, }, }, + error: { + main: { + light: newColors.red700, + dark: newColors.red100, + }, + contrastText: { + light: newColors.offWhite, + dark: newColors.offBlack, + }, + lowContrast: { + light: newColors.red400, + dark: newColors.red600, + }, + }, /* These are temporary, just for everything not to break */ gradient: { color1: { @@ -237,12 +248,6 @@ const newSemanticColors = { dark: paletteColors.gray850, }, }, - other: { - grid: { - light: paletteColors.gray300, - dark: paletteColors.gray600, - }, - }, unresolved: { main: { light: paletteColors.blue700, @@ -255,7 +260,15 @@ export { typographyLevels, semanticColors as colors, newSemanticColors }; /* TODO + + Look up for + +success.contrastText +warning.contrastText +error.contrastText + + "red" "white" { text, bg, border } @@ -263,5 +276,5 @@ Look up for .dark -theme.palette.unresolved +theme.palette.unresolved (will become tertiary) */ diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index b9941b9a5..dfac78f12 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -58,7 +58,7 @@ const baseTheme = (palette) => ({ props: (props) => props.variant === "group", style: { /* color: theme.palette.secondary.contrastText, */ - color: theme.palette.primary.contrastText.main, + color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", @@ -114,7 +114,7 @@ const baseTheme = (palette) => ({ "&.MuiLoadingButton-root": { "&:disabled": { backgroundColor: theme.palette.secondary.main, - color: theme.palette.primary.contrastText.main, + color: theme.palette.primary.contrastText, }, }, "&.MuiLoadingButton-loading": { @@ -177,7 +177,7 @@ const baseTheme = (palette) => ({ borderRadius: 4, backgroundColor: "inherit", padding: "4px 6px", - color: theme.palette.primary.contrastText.secondary, + color: theme.palette.primary.contrastTextSecondary, fontSize: 13, margin: 2, minWidth: 100, @@ -210,7 +210,7 @@ const baseTheme = (palette) => ({ borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, "& button": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.primary.contrastTextTertiary, borderRadius: 4, }, "& li:first-of-type button, & li:last-of-type button": { @@ -258,7 +258,7 @@ const baseTheme = (palette) => ({ "& .MuiInputBase-input:-webkit-autofill": { transition: "background-color 5000s ease-in-out 0s", WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.primary.main} inset`, - WebkitTextFillColor: theme.palette.primary.contrastText.main, + WebkitTextFillColor: theme.palette.primary.contrastText, }, "& .MuiInputBase-input.MuiOutlinedInput-input": { padding: "0 var(--env-var-spacing-1-minus) !important", diff --git a/Client/src/Utils/greeting.jsx b/Client/src/Utils/greeting.jsx index 5cead8eff..0193ae688 100644 --- a/Client/src/Utils/greeting.jsx +++ b/Client/src/Utils/greeting.jsx @@ -163,7 +163,7 @@ const Greeting = ({ type = "" }) => { {prepend},{" "} @@ -171,7 +171,7 @@ const Greeting = ({ type = "" }) => { component="span" fontSize="inherit" fontWeight="inherit" - color={theme.palette.primary.contrastText.secondary} + color={theme.palette.primary.contrastTextSecondary} > {firstName} {emoji} @@ -179,7 +179,7 @@ const Greeting = ({ type = "" }) => { {append} — Here’s an overview of your {type} monitors.