diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 5f3d21979..170e31a79 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -312,7 +312,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data" }, "& .MuiSelect-select": { border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, }} diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx index 84f6f6a4f..c5a1be7da 100644 --- a/Client/src/Components/Breadcrumbs/index.jsx +++ b/Client/src/Components/Breadcrumbs/index.jsx @@ -28,12 +28,12 @@ const Breadcrumbs = ({ list }) => { px={theme.spacing(2)} py={theme.spacing(3.5)} width="fit-content" - backgroundColor={theme.palette.background.fill} + backgroundColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} lineHeight="18px" sx={{ "& .MuiBreadcrumbs-li:not(:last-of-type):hover a": { - backgroundColor: theme.palette.other.fill, + backgroundColor: theme.palette.primary.lowContrast, opacity: 1, }, }} diff --git a/Client/src/Components/Charts/AreaChart/index.jsx b/Client/src/Components/Charts/AreaChart/index.jsx index 5e239996b..e1f1832e5 100644 --- a/Client/src/Components/Charts/AreaChart/index.jsx +++ b/Client/src/Components/Charts/AreaChart/index.jsx @@ -149,7 +149,7 @@ const CustomAreaChart = ({ /> diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index fce015490..9d487bf5f 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -44,7 +44,7 @@ const BarChart = ({ checks = [] }) => { position="relative" width={theme.spacing(4.5)} height="100%" - backgroundColor={theme.palette.border.light} + backgroundColor={theme.palette.primary.lowContrast} sx={{ borderRadius: theme.spacing(1.5), }} @@ -116,7 +116,7 @@ const BarChart = ({ checks = [] }) => { "& .MuiTooltip-tooltip": { backgroundColor: theme.palette.secondary.main, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, boxShadow: theme.shape.boxShadow, px: theme.spacing(4), diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx index 44512aa60..6179a4929 100644 --- a/Client/src/Components/Charts/CustomGauge/index.jsx +++ b/Client/src/Components/Charts/CustomGauge/index.jsx @@ -70,7 +70,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = > ( diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 90aa55b81..bd2656169 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -28,7 +28,7 @@ const CustomToolTip = ({ active, payload, label }) => { sx={{ backgroundColor: theme.palette.background.main, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, py: theme.spacing(2), px: theme.spacing(4), @@ -155,7 +155,7 @@ const MonitorDetailsAreaChart = ({ checks }) => { onMouseLeave={() => setIsHovered(false)} > { } minTickGap={0} @@ -192,7 +192,7 @@ const MonitorDetailsAreaChart = ({ checks }) => { interval="equidistantPreserveStart" /> } wrapperStyle={{ pointerEvents: "none" }} /> diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx index 5b3a40f31..e0de69329 100644 --- a/Client/src/Components/Charts/Utils/chartUtils.jsx +++ b/Client/src/Components/Charts/Utils/chartUtils.jsx @@ -120,7 +120,7 @@ export const InfrastructureTooltip = ({ sx={{ backgroundColor: theme.palette.background.main, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, py: theme.spacing(2), px: theme.spacing(4), @@ -200,7 +200,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) = sx={{ backgroundColor: theme.palette.background.main, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, py: theme.spacing(2), px: theme.spacing(4), diff --git a/Client/src/Components/ConfigBox/index.jsx b/Client/src/Components/ConfigBox/index.jsx index 0cda22291..856916589 100644 --- a/Client/src/Components/ConfigBox/index.jsx +++ b/Client/src/Components/ConfigBox/index.jsx @@ -8,7 +8,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({ backgroundColor: theme.palette.background.main, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.spacing(2), "& > *": { paddingTop: theme.spacing(12), @@ -18,7 +18,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({ flex: 0.7, borderRight: 1, borderRightStyle: "solid", - borderRightColor: theme.palette.border.light, + borderRightColor: theme.palette.primary.lowContrast, paddingRight: theme.spacing(15), paddingLeft: theme.spacing(15), }, diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx index 8e7365798..3d6f2f99e 100644 --- a/Client/src/Components/Dialog/genericDialog.jsx +++ b/Client/src/Components/Dialog/genericDialog.jsx @@ -24,7 +24,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) = width: 400, bgcolor: theme.palette.background.main, border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, boxShadow: 24, p: theme.spacing(15), diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 6062c2cf1..1f43271c3 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -40,7 +40,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) => className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > diff --git a/Client/src/Components/HttpStatusLabel/index.jsx b/Client/src/Components/HttpStatusLabel/index.jsx index 4cc80fd5c..9062ed656 100644 --- a/Client/src/Components/HttpStatusLabel/index.jsx +++ b/Client/src/Components/HttpStatusLabel/index.jsx @@ -41,7 +41,7 @@ const HttpStatusLabel = ({ status, customStyles }) => { }, default: { dotColor: theme.palette.unresolved.main, - bgColor: theme.palette.unresolved.bg, + bgColor: theme.palette.primary.lowContrast, borderColor: theme.palette.unresolved.light, }, }; diff --git a/Client/src/Components/IconBox/index.jsx b/Client/src/Components/IconBox/index.jsx index a8d479430..03e2b9c64 100644 --- a/Client/src/Components/IconBox/index.jsx +++ b/Client/src/Components/IconBox/index.jsx @@ -48,7 +48,7 @@ const IconBox = styled(Box)( position: "relative", border: 1, borderStyle: "solid", - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: borderRadius, backgroundColor: theme.palette.background.accent, "& svg": { diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx index d1c7bccaa..413f3d8c8 100644 --- a/Client/src/Components/Inputs/Image/index.jsx +++ b/Client/src/Components/Inputs/Image/index.jsx @@ -39,7 +39,7 @@ const ImageField = ({ id, src, loading, onChange }) => { borderRadius: theme.shape.borderRadius, borderColor: isDragging ? theme.palette.primary.main - : theme.palette.border.light, + : theme.palette.primary.lowContrast, borderWidth: "2px", transition: "0.2s", "&:hover": { @@ -86,7 +86,7 @@ const ImageField = ({ id, src, loading, onChange }) => { sx={{ pointerEvents: "none", borderRadius: theme.shape.borderRadius, - border: `solid ${theme.shape.borderThick}px ${theme.palette.border.light}`, + border: `solid ${theme.shape.borderThick}px ${theme.palette.primary.lowContrast}`, boxShadow: theme.shape.boxShadow, }} > diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index dd60a6670..0f5e00624 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/Client/src/Components/Inputs/Search/index.jsx @@ -95,12 +95,12 @@ const Search = ({ }} sx={{ "& fieldset": { - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, "& .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset": { - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, }, "& .MuiOutlinedInput-root": { paddingY: 0, @@ -163,7 +163,7 @@ const Search = ({ }, "& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true'], & .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true'].Mui-focused, & .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true']:hover": { - backgroundColor: theme.palette.background.fill, + backgroundColor: theme.palette.primary.lowContrast, }, "& .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 0b4db330f..27085a11a 100644 --- a/Client/src/Components/Inputs/Select/index.jsx +++ b/Client/src/Components/Inputs/Select/index.jsx @@ -89,13 +89,13 @@ const Select = ({ minWidth: "125px", "& fieldset": { borderRadius: theme.shape.borderRadius, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, }, "&:not(.Mui-focused):hover fieldset": { - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, }, "& svg path": { - fill: theme.palette.other.icon, + fill: theme.palette.primary.contrastText.tertiary, }, ...sx, }} diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx index 7654ccc72..6b5920ed5 100644 --- a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx +++ b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx @@ -12,7 +12,7 @@ export const HttpAdornment = ({ https }) => { alignItems="center" height="100%" sx={{ - borderRight: `solid 1px ${theme.palette.border.dark}`, + borderRight: `solid 1px ${theme.palette.primary.lowContrast}`, backgroundColor: theme.palette.background.accent, pl: theme.spacing(6), }} @@ -41,7 +41,7 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => { aria-label="toggle password visibility" onClick={() => setFieldType(fieldType === "password" ? "text" : "password")} sx={{ - color: theme.palette.border.dark, + color: theme.palette.primary.lowContrast, padding: theme.spacing(1), "&:focus-visible": { outline: `2px solid ${theme.palette.primary.main}`, diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 771184da6..d1c572161 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -87,7 +87,7 @@ const ColoredLabel = ({ label, color }) => { const theme = useTheme(); // If an invalid color is passed, default to the labelGray color if (typeof color !== "string" || !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) { - color = theme.palette.border.light; + color = theme.palette.primary.lowContrast; } // Calculate lighter shades for border and bg @@ -143,11 +143,11 @@ const StatusLabel = ({ status, text, customStyles }) => { pending: { dotColor: theme.palette.primary.contrastText.secondary, bgColor: theme.palette.background.main, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, }, "cannot resolve": { dotColor: theme.palette.unresolved.main, - bgColor: theme.palette.unresolved.bg, + bgColor: theme.palette.primary.lowContrast, borderColor: theme.palette.unresolved.light, }, }; diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx index cea2dd0cc..875da5ada 100644 --- a/Client/src/Components/Link/index.jsx +++ b/Client/src/Components/Link/index.jsx @@ -33,7 +33,7 @@ const Link = ({ level, label, url }) => { ":hover": { color: theme.palette.primary.contrastText.tertiary, textDecorationColor: theme.palette.primary.main, - backgroundColor: theme.palette.background.fill, + backgroundColor: theme.palette.primary.lowContrast, }, }, }, diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index f99bf77ad..70c2ac5d9 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -30,8 +30,8 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => height: "fit-content", borderRadius: theme.shape.borderRadius, border: 1, - borderColor: theme.palette.border.light, - backgroundColor: theme.palette.background.fill, + borderColor: theme.palette.primary.lowContrast, + backgroundColor: theme.palette.primary.lowContrast, "&:has(.input-error)": { borderColor: theme.palette.error.main, backgroundColor: theme.palette.error.dark, @@ -60,7 +60,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => height: 30, minWidth: 30, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: 2, backgroundColor: theme.palette.background.main, "& svg": { @@ -71,7 +71,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => width: 23, height: 23, "& path": { - fill: theme.palette.other.icon, + fill: theme.palette.primary.contrastText.tertiary, }, }, }} @@ -148,7 +148,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => height: "10px", borderRadius: theme.shape.borderRadius, maxWidth: "500px", - backgroundColor: theme.palette.border.light, + backgroundColor: theme.palette.primary.lowContrast, }} /> diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 69f23ec96..d74e8ecdc 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -166,7 +166,7 @@ function Sidebar() { gap={theme.spacing(6)} sx={{ border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.background.main, "& .selected-path, & .MuiListItemButton-root:hover": { @@ -223,9 +223,9 @@ function Sidebar() { top: 60, right: 0, transform: `translate(50%, 0)`, - backgroundColor: theme.palette.background.fill, + backgroundColor: theme.palette.primary.lowContrast, border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, p: theme.spacing(2.5), "& svg": { width: theme.spacing(8), @@ -236,8 +236,8 @@ function Sidebar() { }, "&:focus": { outline: "none" }, "&:hover": { - backgroundColor: theme.palette.border.light, - borderColor: theme.palette.border.light, + backgroundColor: theme.palette.primary.lowContrast, + borderColor: theme.palette.primary.lowContrast, }, }} onClick={() => { @@ -399,7 +399,7 @@ function Sidebar() { opacity: 0.9, "& svg": { "& path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.1, }, }, @@ -474,7 +474,7 @@ function Sidebar() { left: "-7px", height: "100%", borderLeft: 1, - borderLeftColor: theme.palette.other.line, + borderLeftColor: theme.palette.primary.lowContrast, }, "&:last-child::before": { height: "50%", @@ -487,7 +487,7 @@ function Sidebar() { height: "3px", width: "3px", borderRadius: "50%", - backgroundColor: theme.palette.other.line, + backgroundColor: theme.palette.primary.lowContrast, }, "&.selected-path::after": { backgroundColor: theme.palette.primary.contrastText.tertiary, @@ -580,7 +580,7 @@ function Sidebar() { height: "22px", }, "& svg path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }} onClick={(event) => openPopup(event, "logout")} @@ -647,7 +647,7 @@ function Sidebar() { borderRadius: theme.shape.borderRadius, pl: theme.spacing(4), "& svg path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }} > diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx index 038940ab2..8035a2c6d 100644 --- a/Client/src/Components/StatBox/index.jsx +++ b/Client/src/Components/StatBox/index.jsx @@ -36,7 +36,7 @@ const StatBox = ({ heading, subHeading, sx }) => { width: 225, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + 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%)`, diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 474c28438..8c87a9372 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -360,7 +360,7 @@ const ProfilePanel = () => { aria-hidden="true" sx={{ marginY: theme.spacing(20), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, }} /> {!user.role.includes("demo") && ( diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index bb4318930..2f6908b70 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/Client/src/Pages/Account/index.jsx @@ -58,7 +58,7 @@ const Account = ({ open = "profile" }) => { px={theme.spacing(20)} py={theme.spacing(12)} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} backgroundColor={theme.palette.background.main} > @@ -66,7 +66,7 @@ const Account = ({ open = "profile" }) => { @@ -94,11 +94,11 @@ const Account = ({ open = "profile" }) => { marginRight: theme.spacing(8), borderBottom: "2px solid transparent", "&:focus": { - borderBottom: `2px solid ${theme.palette.border.light}`, + borderBottom: `2px solid ${theme.palette.primary.lowContrast}`, }, "&:hover": { - borderBottom: `2px solid ${theme.palette.border.light}`, + borderBottom: `2px solid ${theme.palette.primary.lowContrast}`, }, }} /> diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx index 70acbe72d..94691b002 100644 --- a/Client/src/Pages/Auth/CheckEmail.jsx +++ b/Client/src/Pages/Auth/CheckEmail.jsx @@ -102,7 +102,7 @@ const CheckEmail = () => { className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > @@ -129,7 +129,7 @@ const CheckEmail = () => { "& > .MuiStack-root": { border: 1, borderRadius: theme.spacing(5), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, backgroundColor: theme.palette.background.main, padding: { xs: theme.spacing(12), diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx index 7fcc19531..aba178714 100644 --- a/Client/src/Pages/Auth/ForgotPassword.jsx +++ b/Client/src/Pages/Auth/ForgotPassword.jsx @@ -104,7 +104,7 @@ const ForgotPassword = () => { className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > @@ -131,7 +131,7 @@ const ForgotPassword = () => { "& > .MuiStack-root": { border: 1, borderRadius: theme.spacing(5), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, backgroundColor: theme.palette.background.main, padding: { xs: theme.spacing(12), diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx index 890c87eb7..c85d74847 100644 --- a/Client/src/Pages/Auth/Login/Login.jsx +++ b/Client/src/Pages/Auth/Login/Login.jsx @@ -153,7 +153,7 @@ const Login = () => { className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > @@ -181,7 +181,7 @@ const Login = () => { "& > .MuiStack-root": { border: 1, borderRadius: theme.spacing(5), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, backgroundColor: theme.palette.background.main, padding: { xs: theme.spacing(12), diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx index 2c4ef0106..800ff4354 100644 --- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -38,7 +38,7 @@ const NewPasswordConfirmed = () => { className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > @@ -65,7 +65,7 @@ const NewPasswordConfirmed = () => { "& > .MuiStack-root": { border: 1, borderRadius: theme.spacing(5), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, backgroundColor: theme.palette.background.main, padding: { xs: theme.spacing(12), diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index f3aa6252d..939618f90 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.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }, "&:focus-visible": { @@ -293,7 +293,7 @@ const Register = ({ isSuperAdmin }) => { className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > @@ -320,7 +320,7 @@ const Register = ({ isSuperAdmin }) => { "& > .MuiStack-root": { border: 1, borderRadius: theme.spacing(5), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, backgroundColor: theme.palette.background.main, padding: { xs: theme.spacing(12), diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx index 2d374662d..033fac047 100644 --- a/Client/src/Pages/Auth/SetNewPassword.jsx +++ b/Client/src/Pages/Auth/SetNewPassword.jsx @@ -83,7 +83,7 @@ const SetNewPassword = () => { className="background-pattern-svg" sx={{ "& svg g g:last-of-type path": { - stroke: theme.palette.border.light, + stroke: theme.palette.primary.lowContrast, }, }} > @@ -110,7 +110,7 @@ const SetNewPassword = () => { "& > .MuiStack-root": { border: 1, borderRadius: theme.spacing(5), - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, backgroundColor: theme.palette.background.main, padding: { xs: theme.spacing(12), diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index 91e5d87fa..838882644 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx @@ -130,7 +130,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { let sharedStyles = { border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, backgroundColor: theme.palette.background.main, p: theme.spacing(30), diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 08ef99527..9a7f28dc0 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -102,7 +102,7 @@ const Incidents = () => { sx={{ ml: "auto", "& .MuiButtonBase-root, & .MuiButtonBase-root:hover": { - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, }, }} > diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx index 29eddb9fc..bd47ae5a0 100644 --- a/Client/src/Pages/Infrastructure/Details/index.jsx +++ b/Client/src/Pages/Infrastructure/Details/index.jsx @@ -112,7 +112,7 @@ const BaseBox = ({ children, sx = {} }) => { backgroundColor: theme.palette.background.main, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, ...sx, }} > @@ -156,7 +156,7 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo }) { { outline: "none", }, "& svg path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }} ref={anchor} diff --git a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx index a51a7e9ba..5ea7020dd 100644 --- a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx +++ b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx @@ -105,7 +105,7 @@ function Pagination({ }, "& .MuiSelect-select": { border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, }} diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index b9fe96afd..806e85bbd 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.percentage.uptimeExcellent; + : theme.palette.success.accent; return { id: monitor._id, name: monitor.name, @@ -179,7 +179,7 @@ function Infrastructure() { ':has(> [class*="fallback__"])': { position: "relative", border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", backgroundColor: theme.palette.background.main, @@ -231,7 +231,7 @@ function Infrastructure() { className="current-monitors-counter" color={theme.palette.primary.contrastText.main} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} backgroundColor={theme.palette.background.accent} > {totalMonitors} @@ -313,7 +313,7 @@ function Infrastructure() { diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx index 280492612..5b1bb49ae 100644 --- a/Client/src/Pages/Integrations/index.jsx +++ b/Client/src/Pages/Integrations/index.jsx @@ -33,7 +33,7 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => { pl={theme.spacing(12)} height="100%" border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} backgroundColor={theme.palette.background.main} > diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx index c832d463a..de8009147 100644 --- a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx +++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx @@ -379,12 +379,12 @@ const CreateMaintenance = () => { pr: theme.spacing(5), }, "& fieldset": { - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, "&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset": { - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, }, }, }, @@ -394,7 +394,7 @@ const CreateMaintenance = () => { py: 0, mr: 0, "& path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.1, }, "&:hover": { backgroundColor: "transparent" }, @@ -444,12 +444,12 @@ const CreateMaintenance = () => { pl: theme.spacing(5), }, "& fieldset": { - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, "&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset": { - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, }, }, }, diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx index 347929ae5..bac6027aa 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.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }} > diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx index 0cc245e97..2c4a7af2a 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx @@ -336,7 +336,7 @@ const MaintenanceTable = ({ }, "& .MuiSelect-select": { border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, }} diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx index 5c2930294..4fd33ac20 100644 --- a/Client/src/Pages/Maintenance/index.jsx +++ b/Client/src/Pages/Maintenance/index.jsx @@ -51,7 +51,7 @@ const Maintenance = () => { ':has(> [class*="fallback__"])': { position: "relative", border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", backgroundColor: theme.palette.background.main, diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 7de7f18de..a8d8d2017 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -276,7 +276,7 @@ const PageSpeedConfigure = () => { "& svg": { mr: theme.spacing(2), "& path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 0.1, }, }, diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx index f4a627dd7..998a9dead 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx @@ -56,7 +56,7 @@ const CustomToolTip = ({ active, payload, label, config }) => { sx={{ backgroundColor: theme.palette.background.main, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, py: theme.spacing(2), px: theme.spacing(4), @@ -238,14 +238,14 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => { onMouseLeave={() => setIsHovered(false)} > } axisLine={false} @@ -255,7 +255,7 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => { interval="equidistantPreserveStart" /> } /> diff --git a/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx index 0ab92bb2e..fa5b64a4b 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx @@ -148,7 +148,7 @@ const PieChart = ({ audits }) => { stroke: theme.palette.unresolved.main, strokeBg: theme.palette.unresolved.light, text: theme.palette.unresolved.main, - bg: theme.palette.unresolved.bg, + bg: theme.palette.primary.lowContrast, }; }; diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index fc5e21ef8..2d39e9d9b 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -175,7 +175,7 @@ const PageSpeedDetails = () => { "& svg": { mr: theme.spacing(3), "& path": { - stroke: theme.palette.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }, }} @@ -393,7 +393,7 @@ const PageSpeedDetails = () => { gap={theme.spacing(4)} p={theme.spacing(3)} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} borderRadius={4} > diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx index 2cc96346c..642a8c095 100644 --- a/Client/src/Pages/PageSpeed/Details/styled.jsx +++ b/Client/src/Pages/PageSpeed/Details/styled.jsx @@ -6,7 +6,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ minWidth: 250, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: 4, borderTopRightRadius: 16, borderBottomRightRadius: 16, @@ -31,7 +31,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ padding: theme.spacing(8), borderLeft: 1, borderLeftStyle: "solid", - borderLeftColor: theme.palette.border.light, + borderLeftColor: theme.palette.primary.lowContrast, borderRadius: 16, backgroundColor: theme.palette.background.main, background: `linear-gradient(325deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`, diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 24205fb94..db5428080 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -25,7 +25,7 @@ const CustomToolTip = ({ payload }) => { sx={{ backgroundColor: theme.palette.background.main, border: 1, - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, py: theme.spacing(2), px: theme.spacing(4), @@ -134,14 +134,14 @@ const PagespeedAreaChart = ({ data, status }) => { onMouseLeave={() => setIsHovered(false)} > } /> @@ -215,7 +215,7 @@ const Card = ({ monitor }) => { p={theme.spacing(8)} onClick={() => navigate(`/pagespeed/${monitor._id}`)} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} backgroundColor={theme.palette.background.main} sx={{ @@ -278,7 +278,7 @@ const Card = ({ monitor }) => { px={theme.spacing(4)} borderTop={1} borderRight={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} backgroundColor={theme.palette.background.accent} sx={{ pointerEvents: "none", diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index d799ba878..a8fe6eca1 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -68,7 +68,7 @@ const PageSpeed = () => { ':has(> [class*="fallback__"])': { position: "relative", border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", backgroundColor: theme.palette.background.main, @@ -115,7 +115,7 @@ const PageSpeed = () => { className="current-monitors-counter" color={theme.palette.primary.contrastText.main} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} backgroundColor={theme.palette.background.accent} > {monitorCount} diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx index 6827834ac..41ab20bfe 100644 --- a/Client/src/Pages/Status/index.jsx +++ b/Client/src/Pages/Status/index.jsx @@ -12,7 +12,7 @@ const Status = () => { ':has(> [class*="fallback__"])': { position: "relative", border: 1, - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", backgroundColor: theme.palette.background.main, diff --git a/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx b/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx index a851a93ea..0ee05ddcf 100644 --- a/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx +++ b/Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx @@ -31,7 +31,7 @@ const DownBarChart = memo(({ stats, type, onBarHover }) => { }} > { }} > ({ padding: theme.spacing(8), border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: 4, backgroundColor: theme.palette.background.main, "& h2": { diff --git a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx index 16f9c11a7..b3c90130b 100644 --- a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx +++ b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx @@ -32,7 +32,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) => className="current-monitors-counter" color={theme.palette.primary.contrastText.main} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} backgroundColor={theme.palette.background.accent} > {totalMonitors} diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx index 061cbbcd1..cd4254435 100644 --- a/Client/src/Pages/Uptime/Home/StatusBox.jsx +++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx @@ -12,7 +12,7 @@ const StatusBox = ({ title, value }) => { position: "absolute", right: 8, opacity: 0.5, - "& svg path": { stroke: theme.palette.other.icon }, + "& svg path": { stroke: theme.palette.primary.contrastText.tertiary }, }; let color; @@ -45,7 +45,7 @@ const StatusBox = ({ title, value }) => { position="relative" flex={1} border={1} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} backgroundColor={theme.palette.background.main} p={theme.spacing(8)} diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx index a19da2a43..842e6c199 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 > @@ -231,7 +231,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus {monitors.length > 0 ? ( monitors.map((monitor) => { let uptimePercentage = ""; - let percentageColor = theme.palette.percentage.uptimeExcellent; + let percentageColor = theme.palette.success.accent; // Determine uptime percentage and color based on the monitor's uptimePercentage value if (monitor.uptimePercentage !== undefined) { @@ -247,7 +247,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus ? theme.palette.percentage.uptimeFair : monitor.uptimePercentage < 0.75 ? theme.palette.percentage.uptimeGood - : theme.palette.percentage.uptimeExcellent; + : theme.palette.success.accent; } const params = { diff --git a/Client/src/Pages/Uptime/Home/actionsMenu.jsx b/Client/src/Pages/Uptime/Home/actionsMenu.jsx index 01452b718..34a54fff7 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.other.icon, + stroke: theme.palette.primary.contrastText.tertiary, }, }} > diff --git a/Client/src/Pages/Uptime/Home/fallback.jsx b/Client/src/Pages/Uptime/Home/fallback.jsx index 658fd8771..8913d0478 100644 --- a/Client/src/Pages/Uptime/Home/fallback.jsx +++ b/Client/src/Pages/Uptime/Home/fallback.jsx @@ -20,7 +20,7 @@ const Fallback = ({ isAdmin }) => { gap={theme.spacing(2)} border={1} borderRadius={theme.shape.borderRadius} - borderColor={theme.palette.border.light} + borderColor={theme.palette.primary.lowContrast} color={theme.palette.primary.contrastText.secondary} > diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 5c39011cc..38ad0d4a5 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -1,3 +1,5 @@ +import { light } from "@mui/material/styles/createPalette"; + const typographyBase = 14; /* TODO @@ -257,14 +259,12 @@ const semanticColors = { const newColors = { offWhite: "#FEFEFE", offBlack: "#131315", - gray300: "#E3E3E3", - gray600: "#A2A3A3", + gray200: "#E3E3E3", + gray500: "#A2A3A3", blueGray50: "#E8F0FE", blueGray500: "#475467", blueGray600: "#344054", blueGray800: "#1C2130", - gray200: "#E3E3E3", - gray500: "#A2A3A3", blueBlueWave: "#1570EF", green100: "#8CFFCB", green200: "#4B9B77", @@ -303,13 +303,17 @@ const newSemanticColors = { }, secondary: { light: newColors.blueGray600, - dark: newColors.gray300, + dark: newColors.gray200, }, tertiary: { light: newColors.blueGray500, dark: newColors.gray500, }, }, + lowContrast: { + light: newColors.gray200, + dark: newColors.blueGray600, + }, }, /* 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: { @@ -376,6 +380,18 @@ const newSemanticColors = { dark: paletteColors.gray850, }, }, + other: { + grid: { + light: paletteColors.gray300, + dark: paletteColors.gray600, + }, + }, + unresolved: { + main: { + light: paletteColors.blue700, + dark: paletteColors.purple300, + }, + }, }; /* TODO proximo passo: quebrar o projeto */ diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index b7bb822af..84385a492 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -57,7 +57,7 @@ export default darkTheme; // const palette = { // action: { -// disabled: border.dark.disabled, +// disabled: primary.lowContrast.disabled, // }, // primary: { main: primary.main.dark }, // secondary: { @@ -128,7 +128,7 @@ export default darkTheme; // }, // border: { // light: border.light.dark, -// dark: border.dark.dark, +// dark: primary.lowContrast.dark, // }, // info: { // text: text.primary.dark, diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 0dcdc70be..8719f8483 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -48,11 +48,11 @@ const baseTheme = (palette) => ({ props: (props) => props.variant === "group", style: { /* color: theme.palette.secondary.contrastText, */ - color: theme.palette.neutral.contrastText, - backgroundColor: theme.palette.background.main, + color: theme.palette.primary.contrastText.main, + backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, }, }, { @@ -67,7 +67,7 @@ const baseTheme = (palette) => ({ style: { border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, }, }, { @@ -118,7 +118,7 @@ const baseTheme = (palette) => ({ padding: 4, transition: "none", "&:hover": { - backgroundColor: theme.palette.background.fill, + backgroundColor: theme.palette.primary.lowContrast, }, }), }, @@ -131,7 +131,7 @@ const baseTheme = (palette) => ({ padding: 0, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, borderRadius: 4, boxShadow: shadow, backgroundColor: theme.palette.background.main, @@ -166,7 +166,7 @@ const baseTheme = (palette) => ({ minWidth: 100, "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible": { - backgroundColor: theme.palette.background.fill, + backgroundColor: theme.palette.primary.lowContrast, }, }), }, @@ -174,7 +174,7 @@ const baseTheme = (palette) => ({ MuiTableCell: { styleOverrides: { root: ({ theme }) => ({ - borderBottomColor: theme.palette.border.light, + borderBottomColor: theme.palette.primary.lowContrast, }), }, }, @@ -191,7 +191,7 @@ const baseTheme = (palette) => ({ backgroundColor: theme.palette.background.main, border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, "& button": { color: theme.palette.primary.contrastText.tertiary, borderRadius: 4, @@ -199,7 +199,7 @@ const baseTheme = (palette) => ({ "& li:first-of-type button, & li:last-of-type button": { border: 1, borderStyle: "solid", - borderColor: theme.palette.border.light, + borderColor: theme.palette.primary.lowContrast, }, }), }, @@ -208,7 +208,7 @@ const baseTheme = (palette) => ({ styleOverrides: { root: ({ theme }) => ({ "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": { - backgroundColor: theme.palette.background.fill, + backgroundColor: theme.palette.primary.lowContrast, }, }), }, @@ -216,7 +216,7 @@ const baseTheme = (palette) => ({ MuiSkeleton: { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: theme.palette.unresolved.bg, + backgroundColor: theme.palette.primary.lowContrast, }), }, }, @@ -224,7 +224,7 @@ const baseTheme = (palette) => ({ styleOverrides: { root: ({ theme }) => ({ "& fieldset": { - borderColor: theme.palette.border.dark, + borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, }, "& .MuiInputBase-input": { diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index c1f22013a..f71807765 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -134,13 +134,13 @@ Next step: check if all keys here are being used in the codebase. e.g.: Search c // }, // border: { // light: border.light.light, -// dark: border.dark.light, +// dark: primary.lowContrast.light, // }, // info: { // text: text.primary.light, // main: text.tertiary.light, // bg: background.main.light, // light: background.main.light, -// border: border.dark.light, +// border: primary.lowContrast.light, // }, // };