From db867537014d730b6a624d8c978e8806cefbd0b1 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 7 Jan 2025 21:27:52 -0500 Subject: [PATCH 01/48] feat: updating texts --- Client/src/Components/BasicTable/index.jsx | 6 +- Client/src/Components/Breadcrumbs/index.jsx | 2 +- .../src/Components/Charts/BarChart/index.jsx | 4 +- .../Charts/MonitorDetailsAreaChart/index.jsx | 6 +- .../Components/Charts/Utils/chartUtils.jsx | 12 +- Client/src/Components/Check/Check.jsx | 5 +- 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 | 6 +- 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 | 6 +- Client/src/Components/Link/index.jsx | 8 +- Client/src/Components/ProgressBars/index.jsx | 2 +- Client/src/Components/Sidebar/index.jsx | 10 +- Client/src/Components/StatBox/index.jsx | 6 +- .../TabPanels/Account/PasswordPanel.jsx | 16 +- .../TabPanels/Account/ProfilePanel.jsx | 26 +- .../TabPanels/Account/TeamPanel.jsx | 4 +- .../Components/ThemeSwitch/SunAndMoonIcon.jsx | 4 +- Client/src/Pages/Account/index.jsx | 2 +- Client/src/Pages/Auth/Register/Register.jsx | 4 +- .../Incidents/IncidentTable/Empty/Empty.jsx | 2 +- .../Pages/Incidents/IncidentTable/index.jsx | 4 +- Client/src/Pages/Incidents/index.jsx | 2 +- .../Pages/Infrastructure/Details/empty.jsx | 2 +- .../components/TablePagination/index.jsx | 4 +- Client/src/Pages/Infrastructure/index.jsx | 2 +- Client/src/Pages/Integrations/index.jsx | 2 +- .../Maintenance/MaintenanceTable/index.jsx | 4 +- .../src/Pages/PageSpeed/Configure/index.jsx | 2 +- .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 4 +- .../PageSpeed/Details/Charts/AreaChart.jsx | 6 +- Client/src/Pages/PageSpeed/Details/index.jsx | 4 +- 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 | 12 +- Client/src/Pages/Uptime/Details/styled.jsx | 8 +- .../Uptime/Home/CurrentMonitoring/index.jsx | 2 +- Client/src/Pages/Uptime/Home/StatusBox.jsx | 4 +- Client/src/Pages/Uptime/Home/fallback.jsx | 2 +- Client/src/Utils/Theme/constants.js | 129 +++++++++- Client/src/Utils/Theme/darkTheme.js | 233 +++++++++-------- Client/src/Utils/Theme/globalTheme.js | 18 +- Client/src/Utils/Theme/lightTheme.js | 242 ++++++++++-------- Client/src/Utils/greeting.jsx | 2 +- 54 files changed, 530 insertions(+), 341 deletions(-) diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index cfc3030b0..5f3d21979 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.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, }} > @@ -305,9 +305,9 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data" }} sx={{ mt: theme.spacing(6), - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, "& svg path": { - stroke: theme.palette.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.3, }, "& .MuiSelect-select": { diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx index d2c8e4019..84f6f6a4f 100644 --- a/Client/src/Components/Breadcrumbs/index.jsx +++ b/Client/src/Components/Breadcrumbs/index.jsx @@ -52,7 +52,7 @@ const Breadcrumbs = ({ list }) => { opacity: 0.8, textTransform: "capitalize", "&, &:hover": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, }} > diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index a49fbc37d..fce015490 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -124,12 +124,12 @@ const BarChart = ({ checks = [] }) => { }, "& .MuiTooltip-tooltip p": { fontSize: 12, - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, fontWeight: 500, }, "& .MuiTooltip-tooltip span": { fontSize: 11, - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, fontWeight: 600, }, }, diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index 2fefd3daa..90aa55b81 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.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, fontSize: 11, fontWeight: 500, }, @@ -114,7 +114,7 @@ const CustomTick = ({ x, y, payload, index }) => { x={x} y={y + 10} textAnchor="middle" - fill={theme.palette.text.tertiary} + fill={theme.palette.primary.contrastText.tertiary} fontSize={11} fontWeight={400} > diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx index 1d82f10b4..5b3a40f31 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.text.tertiary} + fill={theme.palette.primary.contrastText.tertiary} 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.text.tertiary} + fill={theme.palette.primary.contrastText.tertiary} fontSize={11} fontWeight={400} > @@ -128,7 +128,7 @@ export const InfrastructureTooltip = ({ > diff --git a/Client/src/Components/ConfigBox/index.jsx b/Client/src/Components/ConfigBox/index.jsx index 7650dd47f..0cda22291 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.text.secondary, + color: theme.palette.primary.contrastText.secondary, }, "& p": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, })); diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx index e3ebd51b1..8e7365798 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.text.primary} + color={theme.palette.primary.contrastText.main} 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 1af38c052..6062c2cf1 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 8000fbd64..a8d479430 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.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, }, }, }) diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx index 054f43b92..ce7a07dea 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.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, ".MuiFormControlLabel-label.Mui-disabled": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, opacity: 0.25, }, }} diff --git a/Client/src/Components/Inputs/Image/index.jsx b/Client/src/Components/Inputs/Image/index.jsx index 26c48eb12..d1c7bccaa 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 6291485f0..1741be5c6 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.text.primary}70`, // Use theme text color for the outline + boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText.main}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 9a1995726..dd60a6670 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.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.2, }, }, @@ -80,7 +80,7 @@ const Search = ({ {label} @@ -157,7 +157,7 @@ const Search = ({ sx: { "& ul": { p: 2 }, "& li.MuiAutocomplete-option": { - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, px: 4, borderRadius: theme.shape.borderRadius, }, diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx index ea9509c87..0b4db330f 100644 --- a/Client/src/Components/Inputs/Select/index.jsx +++ b/Client/src/Components/Inputs/Select/index.jsx @@ -54,11 +54,11 @@ const Select = ({ const theme = useTheme(); const itemStyles = { fontSize: "var(--env-var-font-size-medium)", - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, borderRadius: theme.shape.borderRadius, margin: theme.spacing(2), }; - + return ( diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx index 686db183b..7654ccc72 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 26f051c06..4b65285bf 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 19d7998d0..771184da6 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.text.tertiary}`, - color: theme.palette.text.tertiary, + border: `1px solid ${theme.palette.primary.contrastText.tertiary}`, + color: theme.palette.primary.contrastText.tertiary, padding: padding, ...styles, }} @@ -141,7 +141,7 @@ const StatusLabel = ({ status, text, customStyles }) => { borderColor: theme.palette.warning.light, }, pending: { - dotColor: theme.palette.text.secondary, + dotColor: theme.palette.primary.contrastText.secondary, bgColor: theme.palette.background.main, borderColor: theme.palette.border.dark, }, diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx index e280cf0cc..cea2dd0cc 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.text.secondary, + color: theme.palette.primary.contrastText.secondary, sx: { ":hover": { - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, }, }, }, tertiary: { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, sx: { textDecoration: "underline", textDecorationStyle: "dashed", textDecorationColor: theme.palette.primary.main, textUnderlineOffset: "1px", ":hover": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, textDecorationColor: theme.palette.primary.main, backgroundColor: theme.palette.background.fill, }, diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 198f740aa..f99bf77ad 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -90,7 +90,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => {error} ) : ( - + @@ -231,7 +231,7 @@ function Sidebar() { width: theme.spacing(8), height: theme.spacing(8), "& path": { - stroke: theme.palette.text.secondary, + stroke: theme.palette.primary.contrastText.secondary, }, }, "&:focus": { outline: "none" }, @@ -490,7 +490,7 @@ function Sidebar() { backgroundColor: theme.palette.other.line, }, "&.selected-path::after": { - backgroundColor: theme.palette.text.tertiary, + backgroundColor: theme.palette.primary.contrastText.tertiary, transform: "scale(1.2)", }, }} @@ -573,7 +573,7 @@ function Sidebar() { mr: "-8px", "&:focus": { outline: "none" }, alignSelf: "center", - padding: '10px', + padding: "10px", "& svg": { width: "22px", diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx index 41d6fd4ed..038940ab2 100644 --- a/Client/src/Components/StatBox/index.jsx +++ b/Client/src/Components/StatBox/index.jsx @@ -43,15 +43,15 @@ const StatBox = ({ heading, subHeading, sx }) => { "& h2": { fontSize: 13, fontWeight: 500, - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, textTransform: "uppercase", }, "& p": { fontSize: 18, - color: theme.palette.text.primary, + color: theme.palette.primary.contrastText.main, marginTop: theme.spacing(2), "& span": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, 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 e5274f76a..9de61510f 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -28,8 +28,7 @@ const PasswordPanel = () => { const theme = useTheme(); const dispatch = useDispatch(); - - const SPACING_GAP = theme.spacing(12); + const SPACING_GAP = theme.spacing(12); //redux state const { authToken, isLoading } = useSelector((state) => state.auth); @@ -116,7 +115,7 @@ const PasswordPanel = () => { value="password" sx={{ "& h1, & input": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, }} > @@ -126,8 +125,7 @@ const PasswordPanel = () => { noValidate spellCheck="false" gap={theme.spacing(26)} - maxWidth={"80ch"} // Keep maxWidth - + maxWidth={"80ch"} // Keep maxWidth > { direction="row" justifyContent={"flex-start"} alignItems={"center"} - gap={SPACING_GAP} + gap={SPACING_GAP} flexWrap={"wrap"} > { { { const theme = useTheme(); const dispatch = useDispatch(); - + const SPACING_GAP = theme.spacing(12); //redux state @@ -216,7 +216,7 @@ const ProfilePanel = () => { value="profile" sx={{ "& h1, & p, & input": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, }} > @@ -225,9 +225,12 @@ const ProfilePanel = () => { className="edit-profile-form" noValidate spellCheck="false" - gap={SPACING_GAP} + gap={SPACING_GAP} > - + First name @@ -242,7 +245,10 @@ const ProfilePanel = () => { flex={1} /> - + Last name @@ -257,7 +263,10 @@ const ProfilePanel = () => { flex={1} /> - + Email { flex={1} /> - + Your photo { id: idx, data: ( - + {member.firstName + " " + member.lastName} @@ -190,7 +190,7 @@ const TeamPanel = () => { value="team" sx={{ "& h1": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, "& .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 820daeb3f..58f0c61e1 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.text.secondary} + fill={theme.palette.primary.contrastText.secondary} mask="url(#moon-mask)" /> { tabIndex={index} sx={{ fontSize: 13, - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, 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 65c20ca40..f3aa6252d 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -77,7 +77,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { }} sx={{ "&:hover": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, }} > @@ -95,7 +95,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => { }} sx={{ "&:hover": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, }, }} > diff --git a/Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx b/Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx index b8f6a0986..4863af4f9 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 1d0be7666..91e5d87fa 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. @@ -185,7 +185,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { "YYYY-MM-DD HH:mm:ss A", uiTimezone ); - + return ( {monitors[check.monitorId]?.name} diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 31f853e34..08ef99527 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 ad3ed2505..bfec7cc0d 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/TablePagination/index.jsx b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx index bb618add8..a51a7e9ba 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.text.secondary, + color: theme.palette.primary.contrastText.secondary, "& svg path": { - stroke: theme.palette.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.3, }, "& .MuiSelect-select": { diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index aba4369e6..b9fe96afd 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -229,7 +229,7 @@ function Infrastructure() { { gap={theme.spacing(2)} sx={{ "& h1, & p": { - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, }, }} > diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/index.jsx index f52c05abc..0cc245e97 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.text.secondary, + color: theme.palette.primary.contrastText.secondary, "& svg path": { - stroke: theme.palette.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.3, }, "& .MuiSelect-select": { diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 3cb40f8d2..7de7f18de 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.text.tertiary, + backgroundColor: theme.palette.primary.contrastText.tertiary, opacity: 0.8, left: -10, top: "50%", diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index e5d4a6d79..714836bbe 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.text.primary, + color: theme.palette.primary.contrastText.main, }, }} > @@ -207,7 +207,7 @@ const CreatePageSpeed = () => { component="span" fontSize="inherit" fontWeight="inherit" - color={theme.palette.text.secondary} + color={theme.palette.primary.contrastText.secondary} > PageSpeed monitor diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx index 18f45c783..f4a627dd7 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.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, fontSize: 11, fontWeight: 500, }, @@ -186,7 +186,7 @@ const CustomTick = ({ x, y, payload, index }) => { x={x} y={y + 8} textAnchor="middle" - fill={theme.palette.text.tertiary} + fill={theme.palette.primary.contrastText.tertiary} fontSize={11} fontWeight={400} > diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 838da21a9..fc5e21ef8 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.text.tertiary, + backgroundColor: theme.palette.primary.contrastText.tertiary, opacity: 0.8, left: -9, top: "50%", @@ -410,7 +410,7 @@ const PageSpeedDetails = () => { component="span" fontSize={14} fontWeight={500} - color={theme.palette.text.primary} + color={theme.palette.primary.contrastText.main} > {value} ({ borderBottomRightRadius: 16, backgroundColor: theme.palette.background.main, "& h2": { - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, fontSize: 15, fontWeight: 500, }, - "& p": { color: theme.palette.text.tertiary }, + "& p": { color: theme.palette.primary.contrastText.tertiary }, "& > :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 a08a4fcd1..24205fb94 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.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, 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 b18148aa8..d799ba878 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.text.tertiary, + backgroundColor: theme.palette.primary.contrastText.tertiary, opacity: 0.8, left: -10, top: "50%", @@ -307,7 +307,7 @@ const Configure = () => { width: 22, height: 22, "& path": { - stroke: theme.palette.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, strokeWidth: 1.7, }, }, diff --git a/Client/src/Pages/Uptime/Details/index.jsx b/Client/src/Pages/Uptime/Details/index.jsx index 7a2aa6756..c24d7cd60 100644 --- a/Client/src/Pages/Uptime/Details/index.jsx +++ b/Client/src/Pages/Uptime/Details/index.jsx @@ -174,7 +174,7 @@ const DetailsPage = () => { width: 4, height: 4, borderRadius: "50%", - backgroundColor: theme.palette.text.tertiary, + backgroundColor: theme.palette.primary.contrastText.tertiary, opacity: 0.8, left: -9, top: "50%", @@ -204,7 +204,7 @@ const DetailsPage = () => { "& svg": { mr: theme.spacing(3), "& path": { - stroke: theme.palette.text.tertiary, + stroke: theme.palette.primary.contrastText.tertiary, }, }, }} @@ -242,7 +242,7 @@ const DetailsPage = () => { {certificateExpiry} @@ -316,7 +316,7 @@ const DetailsPage = () => { position="absolute" top="100%" fontSize={11} - color={theme.palette.text.tertiary} + color={theme.palette.primary.contrastText.tertiary} > {formatDateWithTz( hoveredUptimeData._id, @@ -373,7 +373,7 @@ const DetailsPage = () => { position="absolute" top="100%" fontSize={11} - color={theme.palette.text.tertiary} + color={theme.palette.primary.contrastText.tertiary} > {formatDateWithTz( hoveredIncidentsData._id, @@ -426,7 +426,7 @@ const DetailsPage = () => { History diff --git a/Client/src/Pages/Uptime/Details/styled.jsx b/Client/src/Pages/Uptime/Details/styled.jsx index 68aea0ec2..86e754637 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.background.main, "& h2": { - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, fontSize: 15, fontWeight: 500, }, "& .MuiBox-root:not(.area-tooltip) p": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, fontSize: 13, }, "& .MuiBox-root > span": { - color: theme.palette.text.primary, + color: theme.palette.primary.contrastText.main, fontSize: 20, "& span": { opacity: 0.8, @@ -37,7 +37,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ alignItems: "center", }, "& tspan, & text": { - fill: theme.palette.text.tertiary, + fill: theme.palette.primary.contrastText.tertiary, }, "& 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 2d9426137..16f9c11a7 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 }) => { textTransform="uppercase" fontSize={15} letterSpacing={0.5} - color={theme.palette.text.secondary} + color={theme.palette.primary.contrastText.secondary} mb={theme.spacing(8)} sx={{ opacity: 0.6 }} > @@ -93,7 +93,7 @@ const StatusBox = ({ title, value }) => { component="span" fontSize={20} fontWeight={300} - color={theme.palette.text.secondary} + color={theme.palette.primary.contrastText.secondary} sx={{ opacity: 0.3 }} > # diff --git a/Client/src/Pages/Uptime/Home/fallback.jsx b/Client/src/Pages/Uptime/Home/fallback.jsx index 163921501..658fd8771 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.border.light} - color={theme.palette.text.secondary} + color={theme.palette.primary.contrastText.secondary} > {mode === "light" ? : } diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 170def996..5c39011cc 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -253,4 +253,131 @@ const semanticColors = { }, }, }; -export { typographyLevels, semanticColors as colors }; + +const newColors = { + offWhite: "#FEFEFE", + offBlack: "#131315", + gray300: "#E3E3E3", + gray600: "#A2A3A3", + blueGray50: "#E8F0FE", + blueGray500: "#475467", + blueGray600: "#344054", + blueGray800: "#1C2130", + gray200: "#E3E3E3", + gray500: "#A2A3A3", + blueBlueWave: "#1570EF", + green100: "#8CFFCB", + green200: "#4B9B77", + green400: "#079455", + green700: "#19543A", + orange100: "#FFE5CC", + orange400: "#FD8F22", + orange600: "#9B734B", + orange700: "#694016", + red100: "#F9C2C2", + red400: "#D92020", + red600: "#9B4B4B", + red700: "#791515", +}; + +const newSemanticColors = { + accent: { + main: { + light: newColors.blueBlueWave, + dark: newColors.blueBlueWave, + }, + contrastText: { + light: newColors.offWhite, + dark: newColors.offWhite, + }, + }, + primary: { + main: { + light: newColors.offWhite, + dark: newColors.offBlack, + }, + contrastText: { + main: { + light: newColors.blueGray800, + dark: newColors.blueGray50, + }, + secondary: { + light: newColors.blueGray600, + dark: newColors.gray300, + }, + tertiary: { + light: newColors.blueGray500, + dark: newColors.gray500, + }, + }, + }, + /* 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, + }, + accent: { + 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, + }, + accent: { + light: newColors.orange400, + dark: newColors.orange600, + }, + }, + gradient: { + color1: { + light: paletteColors.gray90, + dark: paletteColors.gray890, + }, + color2: { + light: paletteColors.gray80, + dark: paletteColors.gray880, + }, + color3: { + light: paletteColors.gray70, + dark: paletteColors.gray870, + }, + color4: { + light: paletteColors.gray60, + dark: paletteColors.gray860, + }, + color5: { + light: paletteColors.gray50, + dark: paletteColors.gray850, + }, + }, +}; + +/* TODO proximo passo: quebrar o projeto */ + +export { typographyLevels, semanticColors as colors, newSemanticColors }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 360d795d6..b7bb822af 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -1,111 +1,31 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; -import { colors } from "./constants"; +import { colors, newSemanticColors } from "./constants"; -const { - primary, - secondary, - success, - error, - warning, - neutral, - gradient: { - color1: { dark: color1 }, - color2: { dark: color2 }, - color3: { dark: color3 }, - color4: { dark: color4 }, - color5: { dark: color5 }, - }, - background, - text, - border, - unresolved, - other, -} = colors; +function extractThemeColors(themeType, colorObject) { + if (!["light", "dark"].includes(themeType)) { + throw new Error('Invalid theme type. Use "light" or "dark".'); + } -const palette = { - action: { - disabled: border.dark.disabled, - }, - primary: { main: primary.main.dark }, - secondary: { - main: secondary.main.dark, - contrastText: secondary.contrastText.dark, - light: secondary.dark.dark, - dark: secondary.dark.dark, - }, - success: { - main: success.main.dark, - contrastText: success.contrastText.dark, - light: success.light.dark, - dark: success.dark.dark, - }, - error: { - main: error.main.dark, - contrastText: error.contrastText.dark, - light: error.light.dark, - dark: error.dark.dark, - }, - warning: { - main: warning.main.dark, - light: warning.light.dark, - contrastText: warning.contrastText.dark, - dark: warning.dark.dark, - }, - neutral: { - contrastText: neutral.contrastText.dark, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - percentage: { - uptimePoor: error.main.dark, - uptimeFair: warning.contrastText.dark, - uptimeGood: warning.main.dark /* Change for a success color? ?*/, - uptimeExcellent: success.main.dark, - }, - unresolved: { - main: unresolved.main.dark, - light: unresolved.light.dark, - bg: unresolved.bg.dark, - }, - divider: border.light.dark, - other: { - icon: text.secondary.dark, - line: border.light.dark, - fill: background.accent.dark, - grid: other.grid.dark, - autofill: secondary.main.dark, - }, - gradient: { - color1, - color2, - color3, - color4, - color5, - }, - text: { - primary: text.primary.dark, - secondary: text.secondary.dark, - tertiary: text.tertiary.dark, - accent: text.accent.dark, - }, - background: { - main: background.main.dark, - alt: background.alt.dark, - fill: background.fill.dark, - accent: background.accent.dark, - }, - border: { - light: border.light.dark, - dark: border.dark.dark, - }, - info: { - text: text.primary.dark, - main: text.secondary.dark, - bg: background.main.dark, - light: background.main.dark, - border: border.light.dark, - }, -}; + const extract = (obj) => { + if (typeof obj !== "object" || obj === null) { + return obj; + } + + if ("light" in obj && "dark" in obj) { + return obj[themeType]; // Return the value for the specified theme + } + + // Reduce the object, keeping only the extracted themeType values + return Object.keys(obj).reduce((acc, key) => { + acc[key] = extract(obj[key]); + return acc; + }, {}); + }; + + return extract(colorObject); +} +const palette = extractThemeColors("dark", newSemanticColors); const darkTheme = createTheme({ palette, @@ -113,3 +33,108 @@ const darkTheme = createTheme({ }); export default darkTheme; + +// const { +// primary, +// secondary, +// success, +// error, +// warning, +// neutral, +// gradient: { +// color1: { dark: color1 }, +// color2: { dark: color2 }, +// color3: { dark: color3 }, +// color4: { dark: color4 }, +// color5: { dark: color5 }, +// }, +// background, +// text, +// border, +// unresolved, +// other, +// } = colors; + +// const palette = { +// action: { +// disabled: border.dark.disabled, +// }, +// primary: { main: primary.main.dark }, +// secondary: { +// main: secondary.main.dark, +// contrastText: secondary.contrastText.dark, +// light: secondary.dark.dark, +// dark: secondary.dark.dark, +// }, +// success: { +// main: success.main.dark, +// contrastText: success.contrastText.dark, +// light: success.light.dark, +// dark: success.dark.dark, +// }, +// error: { +// main: error.main.dark, +// contrastText: error.contrastText.dark, +// light: error.light.dark, +// dark: error.dark.dark, +// }, +// warning: { +// main: warning.main.dark, +// light: warning.light.dark, +// contrastText: warning.contrastText.dark, +// dark: warning.dark.dark, +// }, +// neutral: { +// contrastText: neutral.contrastText.dark, +// }, +// /* From this part on, try to create semantic structure, not feature based structure */ +// percentage: { +// uptimePoor: error.main.dark, +// uptimeFair: warning.contrastText.dark, +// uptimeGood: warning.main.dark /* Change for a success color? ?*/, +// uptimeExcellent: success.main.dark, +// }, +// unresolved: { +// main: unresolved.main.dark, +// light: unresolved.light.dark, +// bg: unresolved.bg.dark, +// }, +// divider: border.light.dark, +// other: { +// icon: text.secondary.dark, +// line: border.light.dark, +// fill: background.accent.dark, +// grid: other.grid.dark, +// autofill: secondary.main.dark, +// }, +// gradient: { +// color1, +// color2, +// color3, +// color4, +// color5, +// }, +// text: { +// primary: text.primary.dark, +// secondary: text.secondary.dark, +// tertiary: text.tertiary.dark, +// accent: text.accent.dark, +// }, +// background: { +// main: background.main.dark, +// alt: background.alt.dark, +// fill: background.fill.dark, +// accent: background.accent.dark, +// }, +// border: { +// light: border.light.dark, +// dark: border.dark.dark, +// }, +// info: { +// text: text.primary.dark, +// main: text.secondary.dark, +// bg: background.main.dark, +// light: background.main.dark, +// border: border.light.dark, +// }, +// }; diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 78ce800d8..0dcdc70be 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -13,22 +13,22 @@ const baseTheme = (palette) => ({ fontSize: 14, h1: { fontSize: typographyLevels.xl, - color: palette.text.primary, + color: palette.primary.contrastText.main, fontWeight: 500, }, h2: { fontSize: typographyLevels.l, - color: palette.text.secondary, + color: palette.primary.contrastText.secondary, fontWeight: 400, }, body1: { fontSize: typographyLevels.m, - color: palette.text.tertiary, + color: palette.primary.contrastText.tertiary, fontWeight: 400, }, body2: { fontSize: typographyLevels.s, - color: palette.text.tertiary, + color: palette.primary.contrastText.tertiary, fontWeight: 400, }, }, @@ -97,7 +97,7 @@ const baseTheme = (palette) => ({ "&.MuiLoadingButton-root": { "&:disabled": { backgroundColor: theme.palette.secondary.main, - color: theme.palette.text.primary, + color: theme.palette.primary.contrastText.main, }, }, "&.MuiLoadingButton-loading": { @@ -160,7 +160,7 @@ const baseTheme = (palette) => ({ borderRadius: 4, backgroundColor: "inherit", padding: "4px 6px", - color: theme.palette.text.secondary, + color: theme.palette.primary.contrastText.secondary, fontSize: 13, margin: 2, minWidth: 100, @@ -193,7 +193,7 @@ const baseTheme = (palette) => ({ borderStyle: "solid", borderColor: theme.palette.border.light, "& button": { - color: theme.palette.text.tertiary, + color: theme.palette.primary.contrastText.tertiary, borderRadius: 4, }, "& li:first-of-type button, & li:last-of-type button": { @@ -232,7 +232,7 @@ const baseTheme = (palette) => ({ minHeight: "var(--env-var-height-2)", fontSize: "var(--env-var-font-size-medium)", fontWeight: 400, - color: palette.text.secondary, + color: palette.primary.contrastText.secondary, "&.Mui-disabled": { opacity: 0.3, WebkitTextFillColor: "unset", @@ -241,7 +241,7 @@ const baseTheme = (palette) => ({ "& .MuiInputBase-input:-webkit-autofill": { transition: "background-color 5000s ease-in-out 0s", WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`, - WebkitTextFillColor: theme.palette.text.primary, + WebkitTextFillColor: theme.palette.primary.contrastText.main, }, "& .MuiInputBase-input.MuiOutlinedInput-input": { padding: "0 var(--env-var-spacing-1-minus) !important", diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index c232ac007..c1f22013a 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -1,118 +1,31 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; -import { colors } from "./constants"; +import { colors, newSemanticColors } from "./constants"; -/* -TODO -Next step: check if all keys here are being used in the codebase. e.g.: Search codebase for palette.primary; also check for destructuring palette ('= theme.palette') -*/ +function extractThemeColors(themeType, colorObject) { + if (!["light", "dark"].includes(themeType)) { + throw new Error('Invalid theme type. Use "light" or "dark".'); + } -const { - primary, - secondary, - success, - error, - warning, - neutral, - gradient: { - color1: { light: color1 }, - color2: { light: color2 }, - color3: { light: color3 }, - color4: { light: color4 }, - color5: { light: color5 }, - }, - background, - text, - border, - unresolved, - other, -} = colors; + const extract = (obj) => { + if (typeof obj !== "object" || obj === null) { + return obj; + } -const palette = { - /* TODO check if we need the addition of a new color gray150 for this. Also, this color would probably fit for primary contrastText */ - action: { - disabled: border.light.disabled, - }, - primary: { main: primary.main.light }, - secondary: { - main: secondary.main.light, - contrastText: secondary.contrastText.light, - light: secondary.dark.light, - dark: secondary.dark.light, - }, - success: { - main: success.main.light, - contrastText: success.contrastText.light, - light: success.light.light, - dark: success.dark.light, - }, - error: { - main: error.main.light, - contrastText: error.contrastText.light, - light: error.light.light, - dark: error.dark.light, - }, - warning: { - main: warning.main.light, - light: warning.light.light, - contrastText: warning.contrastText.light, - dark: warning.dark.light, - }, - neutral: { - contrastText: neutral.contrastText.light, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - percentage: { - uptimePoor: error.main.light, - uptimeFair: warning.contrastText.light, - uptimeGood: warning.main.light /* Change for a success color? */, - uptimeExcellent: success.main.light, - }, - unresolved: { - main: unresolved.main.light, - light: unresolved.light.light, - bg: unresolved.bg.light, - }, - divider: border.light.light, - other: { - icon: other.icon.light, - line: other.line.light, - fill: secondary.dark.light, - grid: other.grid.light, - autofill: other.autofill.light, - }, - gradient: { - color1, - color2, - color3, - color4, - color5, - }, - text: { - primary: text.primary.light, - secondary: text.secondary.light, - tertiary: text.tertiary.light, - accent: text.accent.light, - }, - background: { - main: background.main.light, - alt: background.alt.light, - fill: background.fill.light, - accent: background.accent.light, - }, - border: { - light: border.light.light, - dark: border.dark.light, - }, - info: { - text: text.primary.light, - main: text.tertiary.light, - bg: background.main.light, - light: background.main.light, - border: border.dark.light, - }, -}; + if ("light" in obj && "dark" in obj) { + return obj[themeType]; // Return the value for the specified theme + } + // Reduce the object, keeping only the extracted themeType values + return Object.keys(obj).reduce((acc, key) => { + acc[key] = extract(obj[key]); + return acc; + }, {}); + }; + + return extract(colorObject); +} +const palette = extractThemeColors("light", newSemanticColors); /* TODO I figured out we could have just one theme by passing mode as parameter for theme function. Implement later */ const lightTheme = createTheme({ palette, @@ -120,3 +33,114 @@ const lightTheme = createTheme({ }); export default lightTheme; + +/* +TODO +Next step: check if all keys here are being used in the codebase. e.g.: Search codebase for palette.primary; also check for destructuring palette ('= theme.palette') +*/ + +// const { +// primary, +// secondary, +// success, +// error, +// warning, +// neutral, +// gradient: { +// color1: { light: color1 }, +// color2: { light: color2 }, +// color3: { light: color3 }, +// color4: { light: color4 }, +// color5: { light: color5 }, +// }, +// background, +// text, +// border, +// unresolved, +// other, +// } = colors; + +// const palette = { +// /* TODO check if we need the addition of a new color gray150 for this. Also, this color would probably fit for primary contrastText */ +// action: { +// disabled: border.light.disabled, +// }, +// primary: { main: primary.main.light }, +// secondary: { +// main: secondary.main.light, +// contrastText: secondary.contrastText.light, +// light: secondary.dark.light, +// dark: secondary.dark.light, +// }, +// success: { +// main: success.main.light, +// contrastText: success.contrastText.light, +// light: success.light.light, +// dark: success.dark.light, +// }, +// error: { +// main: error.main.light, +// contrastText: error.contrastText.light, +// light: error.light.light, +// dark: error.dark.light, +// }, +// warning: { +// main: warning.main.light, +// light: warning.light.light, +// contrastText: warning.contrastText.light, +// dark: warning.dark.light, +// }, +// neutral: { +// contrastText: neutral.contrastText.light, +// }, +// /* From this part on, try to create semantic structure, not feature based structure */ +// percentage: { +// uptimePoor: error.main.light, +// uptimeFair: warning.contrastText.light, +// uptimeGood: warning.main.light /* Change for a success color? */, +// uptimeExcellent: success.main.light, +// }, +// unresolved: { +// main: unresolved.main.light, +// light: unresolved.light.light, +// bg: unresolved.bg.light, +// }, +// divider: border.light.light, +// other: { +// icon: other.icon.light, +// line: other.line.light, +// fill: secondary.dark.light, +// grid: other.grid.light, +// autofill: other.autofill.light, +// }, +// gradient: { +// color1, +// color2, +// color3, +// color4, +// color5, +// }, +// text: { +// primary: text.primary.light, +// secondary: text.secondary.light, +// tertiary: text.tertiary.light, +// accent: text.accent.light, +// }, +// background: { +// main: background.main.light, +// alt: background.alt.light, +// fill: background.fill.light, +// accent: background.accent.light, +// }, +// border: { +// light: border.light.light, +// dark: border.dark.light, +// }, +// info: { +// text: text.primary.light, +// main: text.tertiary.light, +// bg: background.main.light, +// light: background.main.light, +// border: border.dark.light, +// }, +// }; diff --git a/Client/src/Utils/greeting.jsx b/Client/src/Utils/greeting.jsx index 5b45812a5..64e911c59 100644 --- a/Client/src/Utils/greeting.jsx +++ b/Client/src/Utils/greeting.jsx @@ -170,7 +170,7 @@ const Greeting = ({ type = "" }) => { component="span" fontSize="inherit" fontWeight="inherit" - color={theme.palette.text.secondary} + color={theme.palette.primary.contrastText.secondary} > {firstName} {emoji} From 3ffcadc06ed2a4d05a0077387430e7533a13a3ec Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 8 Jan 2025 21:41:59 -0500 Subject: [PATCH 02/48] feat: setting new colors --- Client/src/Components/BasicTable/index.jsx | 2 +- Client/src/Components/Breadcrumbs/index.jsx | 4 +-- .../src/Components/Charts/AreaChart/index.jsx | 4 +-- .../src/Components/Charts/BarChart/index.jsx | 4 +-- .../Components/Charts/CustomGauge/index.jsx | 2 +- Client/src/Components/Charts/Gauge/index.jsx | 2 +- .../Charts/MonitorDetailsAreaChart/index.jsx | 8 +++--- .../Components/Charts/Utils/chartUtils.jsx | 4 +-- Client/src/Components/ConfigBox/index.jsx | 4 +-- .../src/Components/Dialog/genericDialog.jsx | 2 +- Client/src/Components/Fallback/index.jsx | 2 +- .../src/Components/HttpStatusLabel/index.jsx | 2 +- Client/src/Components/IconBox/index.jsx | 2 +- Client/src/Components/Inputs/Image/index.jsx | 4 +-- Client/src/Components/Inputs/Search/index.jsx | 6 ++--- Client/src/Components/Inputs/Select/index.jsx | 6 ++--- .../Inputs/TextInput/Adornments/index.jsx | 4 +-- Client/src/Components/Label/index.jsx | 6 ++--- Client/src/Components/Link/index.jsx | 2 +- Client/src/Components/ProgressBars/index.jsx | 10 +++---- Client/src/Components/Sidebar/index.jsx | 20 +++++++------- Client/src/Components/StatBox/index.jsx | 2 +- .../TabPanels/Account/ProfilePanel.jsx | 2 +- Client/src/Pages/Account/index.jsx | 8 +++--- Client/src/Pages/Auth/CheckEmail.jsx | 4 +-- Client/src/Pages/Auth/ForgotPassword.jsx | 4 +-- Client/src/Pages/Auth/Login/Login.jsx | 4 +-- .../src/Pages/Auth/NewPasswordConfirmed.jsx | 4 +-- Client/src/Pages/Auth/Register/Register.jsx | 6 ++--- Client/src/Pages/Auth/SetNewPassword.jsx | 4 +-- .../Pages/Incidents/IncidentTable/index.jsx | 2 +- Client/src/Pages/Incidents/index.jsx | 2 +- .../Pages/Infrastructure/Details/index.jsx | 6 ++--- .../Infrastructure/components/Menu/index.jsx | 2 +- .../components/TablePagination/index.jsx | 2 +- Client/src/Pages/Infrastructure/index.jsx | 8 +++--- Client/src/Pages/Integrations/index.jsx | 2 +- .../Maintenance/CreateMaintenance/index.jsx | 10 +++---- .../MaintenanceTable/ActionsMenu/index.jsx | 2 +- .../Maintenance/MaintenanceTable/index.jsx | 2 +- Client/src/Pages/Maintenance/index.jsx | 2 +- .../src/Pages/PageSpeed/Configure/index.jsx | 2 +- .../PageSpeed/Details/Charts/AreaChart.jsx | 8 +++--- .../PageSpeed/Details/Charts/PieChart.jsx | 2 +- Client/src/Pages/PageSpeed/Details/index.jsx | 4 +-- Client/src/Pages/PageSpeed/Details/styled.jsx | 4 +-- Client/src/Pages/PageSpeed/card.jsx | 10 +++---- Client/src/Pages/PageSpeed/index.jsx | 4 +-- Client/src/Pages/Status/index.jsx | 2 +- .../Uptime/Details/Charts/DownBarChart.jsx | 2 +- .../Uptime/Details/Charts/UpBarChart.jsx | 2 +- Client/src/Pages/Uptime/Details/styled.jsx | 2 +- .../Uptime/Home/CurrentMonitoring/index.jsx | 2 +- Client/src/Pages/Uptime/Home/StatusBox.jsx | 4 +-- .../Pages/Uptime/Home/UptimeTable/index.jsx | 6 ++--- Client/src/Pages/Uptime/Home/actionsMenu.jsx | 2 +- Client/src/Pages/Uptime/Home/fallback.jsx | 2 +- Client/src/Utils/Theme/constants.js | 26 +++++++++++++++---- Client/src/Utils/Theme/darkTheme.js | 4 +-- Client/src/Utils/Theme/globalTheme.js | 26 +++++++++---------- Client/src/Utils/Theme/lightTheme.js | 4 +-- 61 files changed, 156 insertions(+), 140 deletions(-) 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, // }, // }; From 7686b1ecf5b98dfde1d8b4d90f0f3d5a4ced0d34 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 9 Jan 2025 08:40:25 -0500 Subject: [PATCH 03/48] fix: breadcrumbs --- Client/src/Components/Breadcrumbs/index.jsx | 6 ++++-- Client/src/Pages/Uptime/Home/StatusBox.jsx | 11 +++-------- Client/src/Utils/Theme/constants.js | 16 +++++++++++++--- Client/src/Utils/Theme/darkTheme.js | 2 +- Client/src/Utils/Theme/lightTheme.js | 2 +- 5 files changed, 22 insertions(+), 15 deletions(-) diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx index c5a1be7da..80fc4b3fe 100644 --- a/Client/src/Components/Breadcrumbs/index.jsx +++ b/Client/src/Components/Breadcrumbs/index.jsx @@ -28,7 +28,9 @@ const Breadcrumbs = ({ list }) => { px={theme.spacing(2)} py={theme.spacing(3.5)} width="fit-content" - backgroundColor={theme.palette.primary.lowContrast} + backgroundColor={ + theme.palette.secondary.main /* theme.palette.primary.lowContrast */ + } borderRadius={theme.shape.borderRadius} lineHeight="18px" sx={{ @@ -52,7 +54,7 @@ const Breadcrumbs = ({ list }) => { opacity: 0.8, textTransform: "capitalize", "&, &:hover": { - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.secondary.contrastText, }, }} > diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx index cd4254435..b39fb877d 100644 --- a/Client/src/Pages/Uptime/Home/StatusBox.jsx +++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx @@ -18,21 +18,21 @@ const StatusBox = ({ title, value }) => { let color; let icon; if (title === "up") { - color = theme.palette.success.main; + color = theme.palette.success.accent; icon = ( ); } else if (title === "down") { - color = theme.palette.error.main; + color = theme.palette.error.accent; icon = ( ); } else if (title === "paused") { - color = theme.palette.warning.main; + color = theme.palette.warning.accent; icon = ( @@ -50,11 +50,6 @@ const StatusBox = ({ title, value }) => { backgroundColor={theme.palette.background.main} p={theme.spacing(8)} overflow="hidden" - sx={{ - "&:hover": { - backgroundColor: theme.palette.background.accent, - }, - }} > Date: Thu, 9 Jan 2025 12:19:28 -0500 Subject: [PATCH 04/48] feat: fixing table --- Client/src/Components/Breadcrumbs/index.jsx | 11 +++++----- .../src/Components/Charts/BarChart/index.jsx | 21 ++++++++++++------- .../Pages/Uptime/Home/UptimeTable/index.jsx | 12 +++++++++-- Client/src/Pages/Uptime/Home/host.jsx | 1 + Client/src/Pages/Uptime/Home/index.jsx | 9 +++++++- Client/src/Utils/Theme/constants.js | 2 +- Client/src/Utils/Theme/globalTheme.js | 8 +++++++ 7 files changed, 47 insertions(+), 17 deletions(-) diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx index 80fc4b3fe..0ebd8dab1 100644 --- a/Client/src/Components/Breadcrumbs/index.jsx +++ b/Client/src/Components/Breadcrumbs/index.jsx @@ -28,15 +28,16 @@ const Breadcrumbs = ({ list }) => { px={theme.spacing(2)} py={theme.spacing(3.5)} width="fit-content" - backgroundColor={ - theme.palette.secondary.main /* theme.palette.primary.lowContrast */ - } + backgroundColor={theme.palette.secondary.main} borderRadius={theme.shape.borderRadius} lineHeight="18px" sx={{ + "& .MuiBreadcrumbs-li a": { + transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out", + }, "& .MuiBreadcrumbs-li:not(:last-of-type):hover a": { - backgroundColor: theme.palette.primary.lowContrast, - opacity: 1, + backgroundColor: theme.palette.secondary.contrastText, + color: theme.palette.secondary.main, }, }} > diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 9d487bf5f..5e01d74b8 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -39,6 +39,7 @@ const BarChart = ({ checks = [] }) => { > {checks.map((check, index) => check === "placeholder" ? ( + /* TODO what is the purpose of this box? */ { height={theme.spacing(4)} backgroundColor={ check.status - ? theme.palette.success.main - : theme.palette.error.contrastText + ? theme.palette.success.accent + : theme.palette.error.accent } sx={{ borderRadius: "50%" }} /> @@ -120,16 +121,18 @@ const BarChart = ({ checks = [] }) => { borderRadius: theme.shape.borderRadius, boxShadow: theme.shape.boxShadow, px: theme.spacing(4), - py: theme.spacing(2), + py: theme.spacing(3), }, "& .MuiTooltip-tooltip p": { + /* TODO Font size should point to theme */ fontSize: 12, - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.secondary.contrastText, fontWeight: 500, }, "& .MuiTooltip-tooltip span": { + /* TODO Font size should point to theme */ fontSize: 11, - color: theme.palette.primary.contrastText.tertiary, + color: theme.palette.secondary.contrastText, fontWeight: 600, }, }, @@ -143,13 +146,15 @@ const BarChart = ({ checks = [] }) => { backgroundColor={ check.status ? theme.palette.success.contrastText - : theme.palette.error.dark + : theme.palette.error.contrastText } sx={{ borderRadius: theme.spacing(1.5), + /* + TODO this doesn't seem to be used "&:hover > .MuiBox-root": { filter: "brightness(0.8)", - }, + }, */ }} > { width="100%" height={`${animate ? check.responseTime : 0}%`} backgroundColor={ - check.status ? theme.palette.success.main : theme.palette.error.main + check.status ? theme.palette.success.accent : theme.palette.error.accent } sx={{ borderRadius: theme.spacing(1.5), diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx index 842e6c199..4853f5a94 100644 --- a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx +++ b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx @@ -178,7 +178,14 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus )} - +
{ sx={{ color: percentageColor, fontWeight: 500, + /* TODO point font weight to theme */ ml: "15px", }} > diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index 4fc57a7a0..1a60325f0 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -64,7 +64,14 @@ const UptimeMonitors = () => { onClick={() => { navigate("/uptime/create"); }} - sx={{ fontWeight: 500, whiteSpace: "nowrap" }} + sx={{ + fontWeight: 500, + whiteSpace: "nowrap", + /* + TODO Problem, could not make button mui work + backgroundColor: theme.palette.accent.main, + color: theme.palette.accent.contrastText, */ + }} > Create new diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 933dd61d0..61c84f4fc 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -319,7 +319,7 @@ const newSemanticColors = { secondary: { main: { light: newColors.gray100, - dark: newColors.gray100, + dark: newColors.blueGray600, }, contrastText: { light: newColors.blueGray600, diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 8719f8483..7d7a7ba0a 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -41,6 +41,7 @@ const baseTheme = (palette) => ({ defaultProps: { disableRipple: true, }, + styleOverrides: { root: ({ theme }) => ({ variants: [ @@ -61,6 +62,13 @@ const baseTheme = (palette) => ({ backgroundColor: theme.palette.secondary.main, }, }, + /* { + props: (props) => props.variant === "contained", + style: { + backgroundColor: `${theme.palette.accent.main} !important`, + }, + }, */ + { props: (props) => props.variant === "contained" && props.color === "secondary", From be144c5ed2bfca23238a1a462d98049feeb8cf9e Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 9 Jan 2025 12:32:54 -0500 Subject: [PATCH 05/48] feat: search and actions --- Client/src/Components/Inputs/Search/index.jsx | 7 ++++++- Client/src/Pages/Uptime/Home/index.jsx | 6 +----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index 0f5e00624..d85e8e7d4 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/Client/src/Components/Inputs/Search/index.jsx @@ -155,16 +155,21 @@ const Search = ({ popper: { keepMounted: true, sx: { - "& ul": { p: 2 }, + "& ul": { p: 2, backgroundColor: theme.palette.primary.main }, "& li.MuiAutocomplete-option": { color: theme.palette.primary.contrastText.secondary, px: 4, borderRadius: theme.shape.borderRadius, }, + "& .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.primary.lowContrast, }, + "& li.MuiAutocomplete-option:hover:not([aria-selected='true'])": { + color: theme.palette.primary.main, + backgroundColor: theme.palette.primary.contrastText.secondary, + }, "& .MuiAutocomplete-noOptions": { px: theme.spacing(6), py: theme.spacing(5), diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index 1a60325f0..8ff7d55a3 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -60,17 +60,13 @@ const UptimeMonitors = () => { {canAddMonitor && ( + <> + + )} diff --git a/Client/src/Pages/Uptime/utils.jsx b/Client/src/Pages/Uptime/utils.jsx index 122c916c4..c4d50cbc4 100644 --- a/Client/src/Pages/Uptime/utils.jsx +++ b/Client/src/Pages/Uptime/utils.jsx @@ -37,23 +37,38 @@ const useUtils = () => { }, /* TODO solve remaining gradients */ down: { + backgroundColor: theme.palette.error.accent /* dark */, + background: `linear-gradient(340deg, ${theme.palette.error.accent} -60%, ${theme.palette.error.contrastText} 35%)`, + borderColor: theme.palette.error.light, + "& h2": { color: theme.palette.error.main }, + } /* { backgroundColor: theme.palette.error.dark, background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.dark} 35%)`, borderColor: theme.palette.error.light, "& h2": { color: theme.palette.error.main }, - }, + }, */, paused: { + backgroundColor: theme.palette.warning.accent /* dark */, + background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`, + borderColor: theme.palette.warning.light, + "& h2": { color: theme.palette.warning.main }, + } /* { backgroundColor: theme.palette.warning.dark, background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.dark} 35%)`, borderColor: theme.palette.warning.light, "& h2": { color: theme.palette.warning.main }, - }, + } */, pending: { + backgroundColor: theme.palette.warning.accent /* dark */, + background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`, + borderColor: theme.palette.warning.light, + "& h2": { color: theme.palette.warning.main }, + } /* { backgroundColor: theme.palette.warning.light, background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`, borderColor: theme.palette.warning.dark, "& h2": { color: theme.palette.warning.main }, - }, + }, */, }; const pagespeedStyles = { up: { diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 61c84f4fc..633c5b842 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -318,7 +318,7 @@ const newSemanticColors = { }, secondary: { main: { - light: newColors.gray100, + light: newColors.gray200, dark: newColors.blueGray600, }, contrastText: { @@ -326,6 +326,16 @@ const newSemanticColors = { dark: newColors.gray200, }, }, + tertiary: { + main: { + light: newColors.gray100, + dark: newColors.blueGray800, + }, + contrastText: { + light: newColors.blueGray800, + dark: newColors.gray100, + }, + }, /* For success, warning and error, contrastText works wll with main, and with the theme primary main color. Accent is to be used in graphs */ success: { main: { From d027407562e99bdcfd985c025b6f7168bcdfef32 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 09:54:11 -0500 Subject: [PATCH 08/48] fix percentage uptimePoor --- Client/src/Components/Charts/CustomGauge/index.jsx | 2 +- Client/src/Components/Charts/Gauge/index.jsx | 4 ++-- Client/src/Pages/Infrastructure/index.jsx | 2 +- Client/src/Pages/Uptime/Home/UptimeTable/index.jsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx index 6179a4929..255b32067 100644 --- a/Client/src/Components/Charts/CustomGauge/index.jsx +++ b/Client/src/Components/Charts/CustomGauge/index.jsx @@ -54,7 +54,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = const fillColor = progressWithinRange > threshold - ? theme.palette.percentage.uptimePoor + ? theme.palette.error.main : theme.palette.primary.main; return ( diff --git a/Client/src/Components/Charts/Gauge/index.jsx b/Client/src/Components/Charts/Gauge/index.jsx index 96d047a53..ffe552a05 100644 --- a/Client/src/Components/Charts/Gauge/index.jsx +++ b/Client/src/Components/Charts/Gauge/index.jsx @@ -58,7 +58,7 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) { const chartColor = progressValue > PROGRESS_THRESHOLD ? theme.palette.primary.main - : theme.palette.percentage.uptimePoor; + : theme.palette.error.main; const chartData = [ CHART_MAXIMUM_DATA, { @@ -82,7 +82,7 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) { fill={ progressValue > PROGRESS_THRESHOLD ? theme.palette.primary.main - : theme.palette.percentage.uptimePoor + : theme.palette.error.main } background={{ fill: theme.palette.primary.lowContrast }} label={{ diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 806e85bbd..6179007fc 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -151,7 +151,7 @@ function Infrastructure() { .toString(); const percentageColor = monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.uptimePoor + ? theme.palette.error.main : monitor.uptimePercentage < 0.5 ? theme.palette.percentage.uptimeFair : monitor.uptimePercentage < 0.75 diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx index 4853f5a94..552c8ec19 100644 --- a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx +++ b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx @@ -250,7 +250,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus percentageColor = /* TODO colors update */ monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.uptimePoor + ? theme.palette.error.main : monitor.uptimePercentage < 0.5 ? theme.palette.percentage.uptimeFair : monitor.uptimePercentage < 0.75 From 8cf28fe9476cbb787891592a6b45f285d86455eb Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 10:03:11 -0500 Subject: [PATCH 09/48] fix: label background color --- Client/src/Components/Label/index.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index d1c572161..37ec91e26 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -127,17 +127,18 @@ const StatusLabel = ({ status, text, customStyles }) => { const colors = { up: { dotColor: theme.palette.success.main, - bgColor: theme.palette.success.contrastText /* dark */, + /* bgColor: theme.palette.success.contrastText */ /* dark */ borderColor: theme.palette.success.main /* light */, }, down: { dotColor: theme.palette.error.main, - bgColor: theme.palette.error.dark, + /* 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, + /* bgColor: theme.palette.warning.dark, */ borderColor: theme.palette.warning.light, }, pending: { From 78340ce63b22f55bf989e6692c2ce5ebc5165d9f Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 10:06:31 -0500 Subject: [PATCH 10/48] fix: logo --- Client/src/Components/Label/index.jsx | 1 + Client/src/Components/Sidebar/index.jsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 37ec91e26..3041dbe02 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -122,6 +122,7 @@ ColoredLabel.propTypes = { * */ +/* TODO check design aspect with Gorkem */ const StatusLabel = ({ status, text, customStyles }) => { const theme = useTheme(); const colors = { diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index d74e8ecdc..74d94ac42 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -180,6 +180,7 @@ function Sidebar() { }, }} > + {/* TODO change for link */} Date: Sat, 11 Jan 2025 11:49:02 -0500 Subject: [PATCH 11/48] feat: changing green for light mode --- Client/src/Components/Sidebar/index.css | 1 + Client/src/Components/Sidebar/index.jsx | 89 +++++++++++++++---------- Client/src/Pages/Uptime/utils.jsx | 35 +++------- Client/src/Utils/Theme/constants.js | 2 +- 4 files changed, 65 insertions(+), 62 deletions(-) diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 049591e0c..58805c7f8 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -1,3 +1,4 @@ +/* TODO */ aside .MuiList-root svg { width: 20px; height: 20px; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 74d94ac42..ed98011dc 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -168,9 +168,19 @@ function Sidebar() { border: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.main, - "& .selected-path, & .MuiListItemButton-root:hover": { - backgroundColor: theme.palette.background.accent, + /* TODO selected item */ + "& .selected-path": { + /* TODO lookup theme.palette.background.accent */ + backgroundColor: + theme.palette.secondary.main /* theme.palette.background.accent */, + + /* TODO not working */ + color: theme.palette.primary.main, + }, + " & .MuiListItemButton-root:hover": { + backgroundColor: theme.palette.tertiary.main, + /* TODO try and change color */ + color: theme.palette.secondary.main, }, "& .MuiList-root svg path": { stroke: theme.palette.primary.contrastText.tertiary, @@ -180,12 +190,48 @@ function Sidebar() { }, }} > - {/* TODO change for link */} + { + setOpen((prev) => + Object.fromEntries(Object.keys(prev).map((key) => [key, false])) + ); + dispatch(toggleSidebar()); + }} + > + {collapsed ? : } + + + {/* TODO Alignment done using padding. Use single source of truth to that*/} + {/* TODO Abstract logo into component */} + {/* TODO Turn logo into a link */} - { - setOpen((prev) => - Object.fromEntries(Object.keys(prev).map((key) => [key, false])) - ); - dispatch(toggleSidebar()); - }} - > - {collapsed ? : } - {/* menu */} navigate(`/${item.path}`)} sx={{ - height: "37px", + /* TODO fixed height */ height: "37px", gap: theme.spacing(4), borderRadius: theme.shape.borderRadius, px: theme.spacing(4), diff --git a/Client/src/Pages/Uptime/utils.jsx b/Client/src/Pages/Uptime/utils.jsx index c4d50cbc4..3238a516a 100644 --- a/Client/src/Pages/Uptime/utils.jsx +++ b/Client/src/Pages/Uptime/utils.jsx @@ -28,47 +28,34 @@ const useUtils = () => { down: "Inactive", paused: "Paused", }; + + /* This is used on + 1) Details > Gradient card */ const statusStyles = { up: { - backgroundColor: theme.palette.success.accent /* dark */, + backgroundColor: theme.palette.success.accent, background: `linear-gradient(340deg, ${theme.palette.success.accent} -60%, ${theme.palette.success.contrastText} 35%)`, - borderColor: theme.palette.success.light, + borderColor: theme.palette.success.contrastText, "& h2": { color: theme.palette.success.main }, }, - /* TODO solve remaining gradients */ down: { backgroundColor: theme.palette.error.accent /* dark */, background: `linear-gradient(340deg, ${theme.palette.error.accent} -60%, ${theme.palette.error.contrastText} 35%)`, - borderColor: theme.palette.error.light, + borderColor: theme.palette.error.contrastText, "& h2": { color: theme.palette.error.main }, - } /* { - backgroundColor: theme.palette.error.dark, - background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.dark} 35%)`, - borderColor: theme.palette.error.light, - "& h2": { color: theme.palette.error.main }, - }, */, + }, paused: { backgroundColor: theme.palette.warning.accent /* dark */, background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`, - borderColor: theme.palette.warning.light, + borderColor: theme.palette.warning.contrastText, "& h2": { color: theme.palette.warning.main }, - } /* { - backgroundColor: theme.palette.warning.dark, - background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.dark} 35%)`, - borderColor: theme.palette.warning.light, - "& h2": { color: theme.palette.warning.main }, - } */, + }, pending: { backgroundColor: theme.palette.warning.accent /* dark */, background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`, - borderColor: theme.palette.warning.light, + borderColor: theme.palette.warning.contrastText, "& h2": { color: theme.palette.warning.main }, - } /* { - backgroundColor: theme.palette.warning.light, - background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`, - borderColor: theme.palette.warning.dark, - "& h2": { color: theme.palette.warning.main }, - }, */, + }, }; const pagespeedStyles = { up: { diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 633c5b842..6dd23572f 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -270,7 +270,7 @@ const newColors = { green100: "#8CFFCB", green200: "#4B9B77", green400: "#079455", - green700: "#19543A", + green700: "#026513", orange100: "#FFE5CC", orange400: "#FD8F22", orange600: "#9B734B", From b0aa5e64f44bccd716f36b17512dfd372675174d Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 11:53:35 -0500 Subject: [PATCH 12/48] feat: changing green for dark mode --- Client/src/Utils/Theme/constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 6dd23572f..1992e0e75 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -267,7 +267,7 @@ const newColors = { blueGray600: "#344054", blueGray800: "#1C2130", blueBlueWave: "#1570EF", - green100: "#8CFFCB", + green100: "#67cd78", green200: "#4B9B77", green400: "#079455", green700: "#026513", From 6bb38c9339da6410a4b4436336162466d158c74e Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 16:40:07 -0500 Subject: [PATCH 13/48] feat: extract function --- Client/src/Utils/Theme/constants.js | 10 ++++++++ Client/src/Utils/Theme/darkTheme.js | 24 +------------------ Client/src/Utils/Theme/extractColorObject.js | 24 +++++++++++++++++++ Client/src/Utils/Theme/lightTheme.js | 25 ++------------------ 4 files changed, 37 insertions(+), 46 deletions(-) create mode 100644 Client/src/Utils/Theme/extractColorObject.js diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 1992e0e75..52222e4de 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -267,6 +267,7 @@ const newColors = { blueGray600: "#344054", blueGray800: "#1C2130", blueBlueWave: "#1570EF", + /* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */ green100: "#67cd78", green200: "#4B9B77", green400: "#079455", @@ -281,6 +282,15 @@ const newColors = { red700: "#791515", }; +/* 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 +lowContrast: if we need some low contrast for that color (for borders, and decorative elements). This should never be usend in text + +*/ const newSemanticColors = { accent: { main: { diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index c0a5eb95f..8813adb54 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -1,30 +1,8 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; import { /* colors, */ newSemanticColors } from "./constants"; +import { extractThemeColors } from "./extractColorObject"; -function extractThemeColors(themeType, colorObject) { - if (!["light", "dark"].includes(themeType)) { - throw new Error('Invalid theme type. Use "light" or "dark".'); - } - - const extract = (obj) => { - if (typeof obj !== "object" || obj === null) { - return obj; - } - - if ("light" in obj && "dark" in obj) { - return obj[themeType]; // Return the value for the specified theme - } - - // Reduce the object, keeping only the extracted themeType values - return Object.keys(obj).reduce((acc, key) => { - acc[key] = extract(obj[key]); - return acc; - }, {}); - }; - - return extract(colorObject); -} const palette = extractThemeColors("dark", newSemanticColors); const darkTheme = createTheme({ diff --git a/Client/src/Utils/Theme/extractColorObject.js b/Client/src/Utils/Theme/extractColorObject.js new file mode 100644 index 000000000..09b6d66dc --- /dev/null +++ b/Client/src/Utils/Theme/extractColorObject.js @@ -0,0 +1,24 @@ +function extractThemeColors(themeType, colorObject) { + if (!["light", "dark"].includes(themeType)) { + throw new Error('Invalid theme type. Use "light" or "dark".'); + } + + const extract = (obj) => { + if (typeof obj !== "object" || obj === null) { + return obj; + } + + if ("light" in obj && "dark" in obj) { + return obj[themeType]; // Return the value for the specified theme + } + + // Reduce the object, keeping only the extracted themeType values + return Object.keys(obj).reduce((acc, key) => { + acc[key] = extract(obj[key]); + return acc; + }, {}); + }; + return extract(colorObject); +} + +export { extractThemeColors }; diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index ab9c1dc78..d4cfa4ffd 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -1,31 +1,10 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; import { /* colors, */ newSemanticColors } from "./constants"; +import { extractThemeColors } from "./extractColorObject"; -function extractThemeColors(themeType, colorObject) { - if (!["light", "dark"].includes(themeType)) { - throw new Error('Invalid theme type. Use "light" or "dark".'); - } - - const extract = (obj) => { - if (typeof obj !== "object" || obj === null) { - return obj; - } - - if ("light" in obj && "dark" in obj) { - return obj[themeType]; // Return the value for the specified theme - } - - // Reduce the object, keeping only the extracted themeType values - return Object.keys(obj).reduce((acc, key) => { - acc[key] = extract(obj[key]); - return acc; - }, {}); - }; - - return extract(colorObject); -} const palette = extractThemeColors("light", newSemanticColors); + /* TODO I figured out we could have just one theme by passing mode as parameter for theme function. Implement later */ const lightTheme = createTheme({ palette, From c0df164e466c82cfa7209eab74b224b6a249a79a Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 16:50:48 -0500 Subject: [PATCH 14/48] feat: changing background accent for tertiary main --- Client/src/Components/Avatar/index.jsx | 9 ++++++--- Client/src/Components/IconBox/index.jsx | 2 +- Client/src/Components/Inputs/Checkbox/index.jsx | 2 +- Client/src/Components/Inputs/Radio/index.jsx | 2 +- .../src/Components/Inputs/TextInput/Adornments/index.jsx | 2 +- Client/src/Components/Sidebar/index.jsx | 8 +++----- Client/src/Components/StatBox/index.jsx | 2 +- Client/src/Pages/Infrastructure/index.jsx | 8 ++++---- Client/src/Pages/PageSpeed/Configure/index.jsx | 2 +- Client/src/Pages/PageSpeed/Details/styled.jsx | 2 +- Client/src/Pages/PageSpeed/card.jsx | 4 ++-- Client/src/Pages/PageSpeed/index.jsx | 2 +- Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx | 2 +- Client/src/Utils/Theme/globalTheme.js | 2 +- 14 files changed, 25 insertions(+), 24 deletions(-) diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx index 39e8a3f42..aa2050827 100644 --- a/Client/src/Components/Avatar/index.jsx +++ b/Client/src/Components/Avatar/index.jsx @@ -32,13 +32,16 @@ const Avatar = ({ src, small, sx }) => { return ( { }} > {user.firstName?.charAt(0)} - {user.lastName?.charAt(0) || ''} + {user.lastName?.charAt(0) || ""} ); }; diff --git a/Client/src/Components/IconBox/index.jsx b/Client/src/Components/IconBox/index.jsx index 03e2b9c64..0b67b56d1 100644 --- a/Client/src/Components/IconBox/index.jsx +++ b/Client/src/Components/IconBox/index.jsx @@ -50,7 +50,7 @@ const IconBox = styled(Box)( borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, borderRadius: borderRadius, - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, "& svg": { position: "absolute", top: "50%", diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx index ce7a07dea..1da433caa 100644 --- a/Client/src/Components/Inputs/Checkbox/index.jsx +++ b/Client/src/Components/Inputs/Checkbox/index.jsx @@ -90,7 +90,7 @@ const Checkbox = ({ mr: theme.spacing(6), }, "&:not(:has(.Mui-disabled)):hover": { - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, }, "& span.MuiTypography-root": { fontSize: 13, diff --git a/Client/src/Components/Inputs/Radio/index.jsx b/Client/src/Components/Inputs/Radio/index.jsx index 1741be5c6..b1f970722 100644 --- a/Client/src/Components/Inputs/Radio/index.jsx +++ b/Client/src/Components/Inputs/Radio/index.jsx @@ -69,7 +69,7 @@ const Radio = (props) => { m: theme.spacing(-2.5), borderRadius: theme.shape.borderRadius, "&:hover": { - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, }, "& .MuiButtonBase-root": { p: 0, diff --git a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx index 6b5920ed5..a112f2f7f 100644 --- a/Client/src/Components/Inputs/TextInput/Adornments/index.jsx +++ b/Client/src/Components/Inputs/TextInput/Adornments/index.jsx @@ -13,7 +13,7 @@ export const HttpAdornment = ({ https }) => { height="100%" sx={{ borderRight: `solid 1px ${theme.palette.primary.lowContrast}`, - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, pl: theme.spacing(6), }} > diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index ed98011dc..d2329acd2 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -157,7 +157,6 @@ function Sidebar() { }, [location]); /* TODO refactor this, there are a some ternaries and comments in the return */ - return ( diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx index 1a6148475..303fe733f 100644 --- a/Client/src/Components/StatBox/index.jsx +++ b/Client/src/Components/StatBox/index.jsx @@ -40,7 +40,7 @@ const StatBox = ({ heading, subHeading, sx }) => { borderColor: theme.palette.primary.lowContrast, borderRadius: 4, backgroundColor: theme.palette.background.main, - /* background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`, */ + /* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, */ "& h2": { fontSize: 13, fontWeight: 500, diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 6179007fc..5d09b222b 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -232,21 +232,21 @@ function Infrastructure() { color={theme.palette.primary.contrastText.main} border={1} borderColor={theme.palette.primary.lowContrast} - backgroundColor={theme.palette.background.accent} + backgroundColor={theme.palette.tertiary.main} > {totalMonitors}
- + {columns.map((column, index) => ( {column.label} @@ -263,7 +263,7 @@ function Infrastructure() { sx={{ cursor: "pointer", "&:hover": { - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, }, }} > diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index a8d8d2017..e6a651d9c 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -319,7 +319,7 @@ const PageSpeedConfigure = () => { gap={theme.spacing(20)} sx={{ ".MuiInputBase-root:has(> .Mui-disabled)": { - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, }, }} > diff --git a/Client/src/Pages/PageSpeed/Details/styled.jsx b/Client/src/Pages/PageSpeed/Details/styled.jsx index 642a8c095..cb3fd5c98 100644 --- a/Client/src/Pages/PageSpeed/Details/styled.jsx +++ b/Client/src/Pages/PageSpeed/Details/styled.jsx @@ -34,7 +34,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ 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%)`, + background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, }, "& path": { transition: "stroke-width 400ms ease", diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index db5428080..6d141d6b7 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -225,7 +225,7 @@ const Card = ({ monitor }) => { gridTemplateRows: "34px 1fr 3fr", cursor: "pointer", "&:hover": { - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, }, "& path": { transition: "stroke-width 400ms ease", @@ -279,7 +279,7 @@ const Card = ({ monitor }) => { borderTop={1} borderRight={1} borderColor={theme.palette.primary.lowContrast} - backgroundColor={theme.palette.background.accent} + backgroundColor={theme.palette.tertiary.main} sx={{ pointerEvents: "none", userSelect: "none", diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index a8fe6eca1..7d671e136 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -116,7 +116,7 @@ const PageSpeed = () => { color={theme.palette.primary.contrastText.main} border={1} borderColor={theme.palette.primary.lowContrast} - backgroundColor={theme.palette.background.accent} + backgroundColor={theme.palette.tertiary.main} > {monitorCount} diff --git a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx index b3c90130b..f1fbddf02 100644 --- a/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx +++ b/Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx @@ -33,7 +33,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) => color={theme.palette.primary.contrastText.main} border={1} borderColor={theme.palette.primary.lowContrast} - backgroundColor={theme.palette.background.accent} + backgroundColor={theme.palette.tertiary.main} > {totalMonitors} diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 7d7a7ba0a..a0de41397 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -189,7 +189,7 @@ const baseTheme = (palette) => ({ MuiTableHead: { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: theme.palette.background.accent, + backgroundColor: theme.palette.tertiary.main, }), }, }, From 3b1657c415d2747111bb320bcda5c238e5bc8bda Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 16:53:00 -0500 Subject: [PATCH 15/48] feat: changing background main for primary main --- Client/src/Components/BasicTable/index.jsx | 2 +- .../src/Components/Charts/MonitorDetailsAreaChart/index.jsx | 4 ++-- Client/src/Components/Charts/Utils/chartUtils.jsx | 4 ++-- Client/src/Components/ConfigBox/index.jsx | 2 +- Client/src/Components/Dialog/genericDialog.jsx | 2 +- Client/src/Components/Inputs/Search/index.jsx | 2 +- Client/src/Components/Label/index.jsx | 2 +- Client/src/Components/ProgressBars/index.jsx | 2 +- Client/src/Components/StatBox/index.jsx | 4 ++-- Client/src/Pages/Account/index.jsx | 2 +- Client/src/Pages/Auth/CheckEmail.jsx | 2 +- Client/src/Pages/Auth/ForgotPassword.jsx | 2 +- Client/src/Pages/Auth/Login/Login.jsx | 2 +- Client/src/Pages/Auth/NewPasswordConfirmed.jsx | 2 +- Client/src/Pages/Auth/Register/Register.jsx | 2 +- Client/src/Pages/Auth/SetNewPassword.jsx | 2 +- Client/src/Pages/Incidents/IncidentTable/index.jsx | 2 +- Client/src/Pages/Incidents/index.jsx | 2 +- Client/src/Pages/Infrastructure/Details/index.jsx | 4 ++-- .../Infrastructure/components/TablePagination/index.jsx | 2 +- Client/src/Pages/Infrastructure/index.jsx | 2 +- Client/src/Pages/Integrations/index.jsx | 2 +- Client/src/Pages/Maintenance/MaintenanceTable/index.jsx | 2 +- Client/src/Pages/Maintenance/index.jsx | 2 +- Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx | 4 ++-- Client/src/Pages/PageSpeed/Details/styled.jsx | 6 +++--- Client/src/Pages/PageSpeed/card.jsx | 4 ++-- Client/src/Pages/PageSpeed/index.jsx | 2 +- Client/src/Pages/Status/index.jsx | 2 +- Client/src/Pages/Uptime/Details/styled.jsx | 2 +- Client/src/Pages/Uptime/Home/StatusBox.jsx | 2 +- Client/src/Pages/Uptime/Home/UptimeTable/index.jsx | 2 +- Client/src/Pages/Uptime/Home/fallback.jsx | 2 +- Client/src/Utils/Theme/globalTheme.js | 6 +++--- 34 files changed, 44 insertions(+), 44 deletions(-) diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 170e31a79..da053db14 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -298,7 +298,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data" minWidth: theme.spacing(20), textAlign: "left", "&.Mui-focused > div": { - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, }, }, }, diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx index bd2656169..b60230008 100644 --- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx @@ -26,7 +26,7 @@ const CustomToolTip = ({ active, payload, label }) => { { stroke={theme.palette.primary.main} fill="url(#colorUv)" strokeWidth={isHovered ? 2.5 : 1.5} - activeDot={{ stroke: theme.palette.background.main, r: 5 }} + activeDot={{ stroke: theme.palette.primary.main, r: 5 }} /> diff --git a/Client/src/Components/Charts/Utils/chartUtils.jsx b/Client/src/Components/Charts/Utils/chartUtils.jsx index e0de69329..7dc9df6de 100644 --- a/Client/src/Components/Charts/Utils/chartUtils.jsx +++ b/Client/src/Components/Charts/Utils/chartUtils.jsx @@ -118,7 +118,7 @@ export const InfrastructureTooltip = ({ ({ flexDirection: "row", justifyContent: "space-between", gap: theme.spacing(20), - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, diff --git a/Client/src/Components/Dialog/genericDialog.jsx b/Client/src/Components/Dialog/genericDialog.jsx index 3d6f2f99e..5adabc231 100644 --- a/Client/src/Components/Dialog/genericDialog.jsx +++ b/Client/src/Components/Dialog/genericDialog.jsx @@ -22,7 +22,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) = left: "50%", transform: "translate(-50%, -50%)", width: 400, - bgcolor: theme.palette.background.main, + bgcolor: theme.palette.primary.main, border: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx index d85e8e7d4..8fab78d79 100644 --- a/Client/src/Components/Inputs/Search/index.jsx +++ b/Client/src/Components/Inputs/Search/index.jsx @@ -142,7 +142,7 @@ const Search = ({ option.noOptions ? { pointerEvents: "none", - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, } : {} } diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 3041dbe02..d27a7bee0 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -144,7 +144,7 @@ const StatusLabel = ({ status, text, customStyles }) => { }, pending: { dotColor: theme.palette.primary.contrastText.secondary, - bgColor: theme.palette.background.main, + bgColor: theme.palette.primary.main, borderColor: theme.palette.primary.lowContrast, }, "cannot resolve": { diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 70c2ac5d9..9ff6c0ad0 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -62,7 +62,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => border: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: 2, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, "& svg": { position: "absolute", top: "50%", diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx index 303fe733f..ea7667864 100644 --- a/Client/src/Components/StatBox/index.jsx +++ b/Client/src/Components/StatBox/index.jsx @@ -39,8 +39,8 @@ const StatBox = ({ heading, subHeading, sx }) => { borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, borderRadius: 4, - backgroundColor: theme.palette.background.main, - /* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, */ + backgroundColor: theme.palette.primary.main, + /* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, */ "& h2": { fontSize: 13, fontWeight: 500, diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index 2f6908b70..f95f74d72 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/Client/src/Pages/Account/index.jsx @@ -60,7 +60,7 @@ const Account = ({ open = "profile" }) => { border={1} borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} - backgroundColor={theme.palette.background.main} + backgroundColor={theme.palette.primary.main} > { border: 1, borderRadius: theme.spacing(5), borderColor: theme.palette.primary.lowContrast, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, padding: { xs: theme.spacing(12), sm: theme.spacing(20), diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx index aba178714..e8fa4cfc0 100644 --- a/Client/src/Pages/Auth/ForgotPassword.jsx +++ b/Client/src/Pages/Auth/ForgotPassword.jsx @@ -132,7 +132,7 @@ const ForgotPassword = () => { border: 1, borderRadius: theme.spacing(5), borderColor: theme.palette.primary.lowContrast, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, padding: { xs: theme.spacing(12), sm: theme.spacing(20), diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx index c85d74847..0da2c49d3 100644 --- a/Client/src/Pages/Auth/Login/Login.jsx +++ b/Client/src/Pages/Auth/Login/Login.jsx @@ -182,7 +182,7 @@ const Login = () => { border: 1, borderRadius: theme.spacing(5), borderColor: theme.palette.primary.lowContrast, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, padding: { xs: theme.spacing(12), sm: theme.spacing(20), diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx index 800ff4354..aa131e268 100644 --- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -66,7 +66,7 @@ const NewPasswordConfirmed = () => { border: 1, borderRadius: theme.spacing(5), borderColor: theme.palette.primary.lowContrast, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, padding: { xs: theme.spacing(12), sm: theme.spacing(20), diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index 939618f90..3e68297d8 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -321,7 +321,7 @@ const Register = ({ isSuperAdmin }) => { border: 1, borderRadius: theme.spacing(5), borderColor: theme.palette.primary.lowContrast, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, padding: { xs: theme.spacing(12), sm: theme.spacing(20), diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx index 033fac047..eae595e2c 100644 --- a/Client/src/Pages/Auth/SetNewPassword.jsx +++ b/Client/src/Pages/Auth/SetNewPassword.jsx @@ -111,7 +111,7 @@ const SetNewPassword = () => { border: 1, borderRadius: theme.spacing(5), borderColor: theme.palette.primary.lowContrast, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, padding: { xs: theme.spacing(12), sm: theme.spacing(20), diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index 838882644..b91faf353 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx @@ -132,7 +132,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { border: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, p: theme.spacing(30), }; diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 9a7f28dc0..cd6f5970b 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -95,7 +95,7 @@ const Incidents = () => { onChange={handleSelect} items={Object.values(monitors)} sx={{ - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, }} /> { padding: `${theme.spacing(BASE_BOX_PADDING_VERTICAL)} ${theme.spacing(BASE_BOX_PADDING_HORIZONTAL)}`, minWidth: 200, width: 225, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, @@ -667,7 +667,7 @@ const InfrastructureDetails = () => { border: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, p: theme.spacing(30), }} /> diff --git a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx index 5ea7020dd..9d0945277 100644 --- a/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx +++ b/Client/src/Pages/Infrastructure/components/TablePagination/index.jsx @@ -92,7 +92,7 @@ function Pagination({ minWidth: theme.spacing(20), textAlign: "left", "&.Mui-focused > div": { - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, }, }, }, diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 5d09b222b..b479a54ba 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -182,7 +182,7 @@ function Infrastructure() { borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, overflow: "hidden", }, }} diff --git a/Client/src/Pages/Integrations/index.jsx b/Client/src/Pages/Integrations/index.jsx index 5b1bb49ae..7adbcfdaf 100644 --- a/Client/src/Pages/Integrations/index.jsx +++ b/Client/src/Pages/Integrations/index.jsx @@ -35,7 +35,7 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => { border={1} borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} - backgroundColor={theme.palette.background.main} + backgroundColor={theme.palette.primary.main} > {icon} div": { - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, }, }, }, diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx index 4fd33ac20..5e36ac7b0 100644 --- a/Client/src/Pages/Maintenance/index.jsx +++ b/Client/src/Pages/Maintenance/index.jsx @@ -54,7 +54,7 @@ const Maintenance = () => { borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, overflow: "hidden", }, }} diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx index 998a9dead..d180431c3 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx @@ -54,7 +54,7 @@ const CustomToolTip = ({ active, payload, label, config }) => { return ( { {Object.keys(filteredConfig).map((key) => { const { color } = filteredConfig[key]; const strokeColor = theme.palette[color].main; - const bgColor = theme.palette.background.main; + const bgColor = theme.palette.primary.main; return ( ({ borderRadius: 4, borderTopRightRadius: 16, borderBottomRightRadius: 16, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, "& h2": { color: theme.palette.primary.contrastText.secondary, fontSize: 15, @@ -33,8 +33,8 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ borderLeftStyle: "solid", borderLeftColor: theme.palette.primary.lowContrast, borderRadius: 16, - backgroundColor: theme.palette.background.main, - background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, + backgroundColor: theme.palette.primary.main, + background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, }, "& path": { transition: "stroke-width 400ms ease", diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 6d141d6b7..49e9804f9 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -23,7 +23,7 @@ const CustomToolTip = ({ payload }) => { return ( { border={1} borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} - backgroundColor={theme.palette.background.main} + backgroundColor={theme.palette.primary.main} sx={{ display: "grid", gridTemplateColumns: "34px 2fr 1fr", diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 7d671e136..e40df6d58 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -71,7 +71,7 @@ const PageSpeed = () => { borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, overflow: "hidden", }, }} diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx index 41ab20bfe..7ba2c0a8d 100644 --- a/Client/src/Pages/Status/index.jsx +++ b/Client/src/Pages/Status/index.jsx @@ -15,7 +15,7 @@ const Status = () => { borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, borderStyle: "dashed", - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, overflow: "hidden", }, }} diff --git a/Client/src/Pages/Uptime/Details/styled.jsx b/Client/src/Pages/Uptime/Details/styled.jsx index ab14c6c52..b3f0b2191 100644 --- a/Client/src/Pages/Uptime/Details/styled.jsx +++ b/Client/src/Pages/Uptime/Details/styled.jsx @@ -10,7 +10,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({ borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, borderRadius: 4, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, "& h2": { color: theme.palette.primary.contrastText.secondary, fontSize: 15, diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx index b39fb877d..2a6f909d2 100644 --- a/Client/src/Pages/Uptime/Home/StatusBox.jsx +++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx @@ -47,7 +47,7 @@ const StatusBox = ({ title, value }) => { border={1} borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} - backgroundColor={theme.palette.background.main} + backgroundColor={theme.palette.primary.main} p={theme.spacing(8)} overflow="hidden" > diff --git a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx index 552c8ec19..4eeb0f3e2 100644 --- a/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx +++ b/Client/src/Pages/Uptime/Home/UptimeTable/index.jsx @@ -154,7 +154,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus height="100%" position="absolute" sx={{ - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, opacity: 0.8, zIndex: 100, }} diff --git a/Client/src/Pages/Uptime/Home/fallback.jsx b/Client/src/Pages/Uptime/Home/fallback.jsx index 8913d0478..9aff95dc4 100644 --- a/Client/src/Pages/Uptime/Home/fallback.jsx +++ b/Client/src/Pages/Uptime/Home/fallback.jsx @@ -14,7 +14,7 @@ const Fallback = ({ isAdmin }) => { return ( ({ borderColor: theme.palette.primary.lowContrast, borderRadius: 4, boxShadow: shadow, - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, backgroundImage: "none", }; }, @@ -196,7 +196,7 @@ const baseTheme = (palette) => ({ MuiPagination: { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.primary.main, border: 1, borderStyle: "solid", borderColor: theme.palette.primary.lowContrast, @@ -248,7 +248,7 @@ const baseTheme = (palette) => ({ }, "& .MuiInputBase-input:-webkit-autofill": { transition: "background-color 5000s ease-in-out 0s", - WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.background.main} inset`, + WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.primary.main} inset`, WebkitTextFillColor: theme.palette.primary.contrastText.main, }, "& .MuiInputBase-input.MuiOutlinedInput-input": { From 74c598e1913a7ad83065952ec9a244c7c980d816 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 17:21:10 -0500 Subject: [PATCH 16/48] feat: changed a whole bunch of colors --- .../TabPanels/Account/TeamPanel.jsx | 5 +- Client/src/Pages/Auth/CheckEmail.jsx | 3 +- Client/src/Pages/Auth/ForgotPassword.jsx | 3 +- Client/src/Pages/Auth/Login/Login.jsx | 2 +- .../src/Pages/Auth/NewPasswordConfirmed.jsx | 3 +- Client/src/Pages/Auth/Register/Register.jsx | 3 +- Client/src/Pages/Auth/SetNewPassword.jsx | 3 +- Client/src/Pages/PageSpeed/card.jsx | 2 +- Client/src/Pages/Uptime/Home/StatusBox.jsx | 28 +-- Client/src/Utils/Theme/constants.js | 186 ++---------------- Client/src/Utils/Theme/darkTheme.js | 50 ----- Client/src/Utils/Theme/lightTheme.js | 52 ----- Client/src/Utils/greeting.jsx | 3 +- 13 files changed, 43 insertions(+), 300 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index d00b26367..832411bcb 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -32,7 +32,7 @@ const TeamPanel = () => { const SPACING_GAP = theme.spacing(12); - const { authToken, user } = useSelector((state) => state.auth); + const { authToken /* , user */ } = useSelector((state) => state.auth); //TODO // const [orgStates, setOrgStates] = useState({ // name: "Bluewave Labs", @@ -194,7 +194,8 @@ const TeamPanel = () => { }, "& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p": { - color: theme.palette.text.accent, + /* TODO set color */ + color: "red" /* theme.palette.text.accent */, }, }} > diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx index e08eaf6cf..75b4bd81a 100644 --- a/Client/src/Pages/Auth/CheckEmail.jsx +++ b/Client/src/Pages/Auth/CheckEmail.jsx @@ -94,7 +94,8 @@ const CheckEmail = () => { fontWeight: 600, fontSize: 22, }, - "& p": { color: theme.palette.text.accent, fontSize: 13.5 }, + /* TODO set color */ + "& p": { color: "red" /* theme.palette.text.accent */, fontSize: 13.5 }, "& span": { fontSize: "inherit" }, }} > diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx index e8fa4cfc0..0999f9835 100644 --- a/Client/src/Pages/Auth/ForgotPassword.jsx +++ b/Client/src/Pages/Auth/ForgotPassword.jsx @@ -96,7 +96,8 @@ const ForgotPassword = () => { }, "& p": { fontSize: 14, - color: theme.palette.text.accent, + /* TODO set color */ + color: "red" /* theme.palette.text.accent */, }, }} > diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx index 0da2c49d3..60507ba59 100644 --- a/Client/src/Pages/Auth/Login/Login.jsx +++ b/Client/src/Pages/Auth/Login/Login.jsx @@ -145,7 +145,7 @@ const Login = () => { fontWeight: 600, fontSize: 28, }, - "& p": { fontSize: 14, color: theme.palette.text.accent }, + "& p": { fontSize: 14, color: "red" /* theme.palette.text.accent */ }, "& span": { fontSize: "inherit" }, }} > diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx index aa131e268..0b40c3023 100644 --- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -31,7 +31,8 @@ const NewPasswordConfirmed = () => { fontWeight: 600, fontSize: 21, }, - "& p": { fontSize: 13.5, color: theme.palette.text.accent }, + /* TODO set color and font size*/ + "& p": { fontSize: 13.5, color: "red" /* theme.palette.text.accent */ }, }} > { fontWeight: 600, fontSize: 28, }, - "& p": { fontSize: 14, color: theme.palette.text.accent }, + /* TODO set color */ + "& p": { fontSize: 14, color: "red" /* theme.palette.text.accent */ }, "& span": { fontSize: "inherit" }, }} > diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx index eae595e2c..ca3f5e613 100644 --- a/Client/src/Pages/Auth/SetNewPassword.jsx +++ b/Client/src/Pages/Auth/SetNewPassword.jsx @@ -75,7 +75,8 @@ const SetNewPassword = () => { }, "& p": { fontSize: 14, - color: theme.palette.text.accent, + /* TODO set color */ + color: "red" /* theme.palette.text.accent */, }, }} > diff --git a/Client/src/Pages/PageSpeed/card.jsx b/Client/src/Pages/PageSpeed/card.jsx index 49e9804f9..55d010c98 100644 --- a/Client/src/Pages/PageSpeed/card.jsx +++ b/Client/src/Pages/PageSpeed/card.jsx @@ -289,7 +289,7 @@ const Card = ({ monitor }) => { > Checking every{" "} {(() => { diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx index 2a6f909d2..291d43f83 100644 --- a/Client/src/Pages/Uptime/Home/StatusBox.jsx +++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Stack /* , Typography */ } from "@mui/material"; import Arrow from "../../../assets/icons/top-right-arrow.svg?react"; import Background from "../../../assets/Images/background-grid.svg?react"; import ClockSnooze from "../../../assets/icons/clock-snooze.svg?react"; @@ -45,9 +45,9 @@ const StatusBox = ({ title, value }) => { position="relative" flex={1} border={1} + backgroundColor={theme.palette.primary.main} borderColor={theme.palette.primary.lowContrast} borderRadius={theme.shape.borderRadius} - backgroundColor={theme.palette.primary.main} p={theme.spacing(8)} overflow="hidden" > @@ -58,7 +58,7 @@ const StatusBox = ({ title, value }) => { left: "5%", pointerEvents: "none", "& svg g g:last-of-type path": { - stroke: theme.palette.other.grid, + stroke: theme.palette.primary.contrastText.tertiary, }, }} > @@ -68,9 +68,8 @@ const StatusBox = ({ title, value }) => { textTransform="uppercase" fontSize={15} letterSpacing={0.5} - color={theme.palette.primary.contrastText.secondary} + color={theme.palette.primary.contrastText.tertiary} mb={theme.spacing(8)} - sx={{ opacity: 0.6 }} > {title} @@ -84,15 +83,18 @@ const StatusBox = ({ title, value }) => { gap="2px" > {value} + + {/* + TODO check with team if this is needed - # - + component="span" + fontSize={20} + fontWeight={300} + color={theme.palette.primary.contrastText.secondary} + sx={{ opacity: 0.3 }} + > + # + */} ); diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 52222e4de..f7e77008e 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -1,5 +1,3 @@ -/* import { light } from "@mui/material/styles/createPalette"; */ - const typographyBase = 14; /* TODO @@ -67,164 +65,6 @@ const paletteColors = { }; const semanticColors = { - primary: { - main: { - light: paletteColors.blueBlueWave, - dark: paletteColors.blueBlueWave, - }, - // TODO we dont have primary light, dark or contrast text - }, - secondary: { - main: { - light: paletteColors.gray100, - dark: paletteColors.gray800, - }, - contrastText: { - light: paletteColors.blueGray200, - dark: paletteColors.blueGray200, - }, - light: { - light: paletteColors.gray200, - dark: paletteColors.gray200, - }, - dark: { - light: paletteColors.gray200, - dark: paletteColors.gray200, - }, - }, - success: { - main: { - light: paletteColors.green400, - dark: paletteColors.green400, - }, - contrastText: { - light: paletteColors.green50, - dark: paletteColors.green50, - }, - light: { - light: paletteColors.green500, - dark: paletteColors.green800, - }, - dark: { - light: paletteColors.green400, - dark: paletteColors.green900, - }, - }, - neutral: { - contrastText: { - light: paletteColors.blueGray900, - dark: paletteColors.gray100, - }, - }, - error: { - main: { - light: paletteColors.red300, - dark: paletteColors.red300, - }, - contrastText: { - light: paletteColors.gray50, - dark: paletteColors.gray50, - }, - light: { - light: paletteColors.red100, - dark: paletteColors.red700, - }, - dark: { - light: paletteColors.red800, - dark: paletteColors.red800, - }, - }, - warning: { - main: { - light: paletteColors.orange300, - dark: paletteColors.orange400, - }, - contrastText: { - light: paletteColors.orange600, - dark: paletteColors.orange500, - }, - light: { - light: paletteColors.orange100, - dark: paletteColors.orange800, - }, - dark: { - light: paletteColors.orange50, - dark: paletteColors.gray800, - }, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - gradient: { - color1: { - light: paletteColors.gray90, - dark: paletteColors.gray890, - }, - color2: { - light: paletteColors.gray80, - dark: paletteColors.gray880, - }, - color3: { - light: paletteColors.gray70, - dark: paletteColors.gray870, - }, - color4: { - light: paletteColors.gray60, - dark: paletteColors.gray860, - }, - color5: { - light: paletteColors.gray50, - dark: paletteColors.gray850, - }, - }, - background: { - main: { - light: paletteColors.white, - dark: paletteColors.gray890, - }, - alt: { - light: paletteColors.gray90, - dark: paletteColors.gray890, - }, - fill: { - light: paletteColors.gray100, - dark: paletteColors.gray800, - }, - accent: { - light: paletteColors.gray100, - dark: paletteColors.gray850, - }, - }, - text: { - primary: { - light: paletteColors.blueGray900, - dark: paletteColors.gray100, - }, - secondary: { - light: paletteColors.blueGray400, - dark: paletteColors.gray200, - }, - tertiary: { - light: paletteColors.blueGray200, - dark: paletteColors.gray300, - }, - accent: { - light: paletteColors.gray500, - dark: paletteColors.gray500, - }, - }, - border: { - light: { - light: paletteColors.gray200, - dark: paletteColors.gray800, - /* TODO this should live in a different key (border.disabled.light and .dark) */ - disabled: paletteColors.gray150, - }, - dark: { - light: paletteColors.gray200, - dark: paletteColors.gray750, - /* TODO this should live in a different key (border.disabled.light and .dark) */ - disabled: paletteColors.gray150, - }, - }, unresolved: { main: { light: paletteColors.blue700, @@ -239,21 +79,6 @@ const semanticColors = { dark: paletteColors.gray100, }, }, - other: { - icon: { - light: paletteColors.blueGray150, - }, - line: { - light: paletteColors.gray200, - }, - grid: { - light: paletteColors.gray300, - dark: paletteColors.gray600, - }, - autofill: { - light: paletteColors.blueGray20, - }, - }, }; const newColors = { @@ -427,3 +252,14 @@ const newSemanticColors = { }; export { typographyLevels, semanticColors as colors, newSemanticColors }; + +/* TODO + +Look up for +"red" +"white" +{ text, bg, border } + + +theme.palette.unresolved +*/ diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 8813adb54..4d806b9bb 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -12,59 +12,9 @@ const darkTheme = createTheme({ export default darkTheme; -// const { -// primary, -// secondary, -// success, -// error, -// warning, -// neutral, -// gradient: { -// color1: { dark: color1 }, -// color2: { dark: color2 }, -// color3: { dark: color3 }, -// color4: { dark: color4 }, -// color5: { dark: color5 }, -// }, -// background, -// text, -// border, -// unresolved, -// other, -// } = colors; - -// const palette = { // action: { // disabled: primary.lowContrast.disabled, // }, -// primary: { main: primary.main.dark }, -// secondary: { -// main: secondary.main.dark, -// contrastText: secondary.contrastText.dark, -// light: secondary.dark.dark, -// dark: secondary.dark.dark, -// }, -// success: { -// main: success.main.dark, -// contrastText: success.contrastText.dark, -// light: success.light.dark, -// dark: success.dark.dark, -// }, -// error: { -// main: error.main.dark, -// contrastText: error.contrastText.dark, -// light: error.light.dark, -// dark: error.dark.dark, -// }, -// warning: { -// main: warning.main.dark, -// light: warning.light.dark, -// contrastText: warning.contrastText.dark, -// dark: warning.dark.dark, -// }, -// neutral: { -// contrastText: neutral.contrastText.dark, -// }, // /* From this part on, try to create semantic structure, not feature based structure */ // percentage: { // uptimePoor: error.main.dark, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index d4cfa4ffd..035d7254d 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -18,61 +18,9 @@ TODO Next step: check if all keys here are being used in the codebase. e.g.: Search codebase for palette.primary; also check for destructuring palette ('= theme.palette') */ -// const { -// primary, -// secondary, -// success, -// error, -// warning, -// neutral, -// gradient: { -// color1: { light: color1 }, -// color2: { light: color2 }, -// color3: { light: color3 }, -// color4: { light: color4 }, -// color5: { light: color5 }, -// }, -// background, -// text, -// border, -// unresolved, -// other, -// } = colors; - -// const palette = { -// /* TODO check if we need the addition of a new color gray150 for this. Also, this color would probably fit for primary contrastText */ // action: { // disabled: border.light.disabled, // }, -// primary: { main: primary.main.light }, -// secondary: { -// main: secondary.main.light, -// contrastText: secondary.contrastText.light, -// light: secondary.dark.light, -// dark: secondary.dark.light, -// }, -// success: { -// main: success.main.light, -// contrastText: success.contrastText.light, -// light: success.light.light, -// dark: success.dark.light, -// }, -// error: { -// main: error.main.light, -// contrastText: error.contrastText.light, -// light: error.light.light, -// dark: error.dark.light, -// }, -// warning: { -// main: warning.main.light, -// light: warning.light.light, -// contrastText: warning.contrastText.light, -// dark: warning.dark.light, -// }, -// neutral: { -// contrastText: neutral.contrastText.light, -// }, -// /* From this part on, try to create semantic structure, not feature based structure */ // percentage: { // uptimePoor: error.main.light, // uptimeFair: warning.contrastText.light, diff --git a/Client/src/Utils/greeting.jsx b/Client/src/Utils/greeting.jsx index 64e911c59..5cead8eff 100644 --- a/Client/src/Utils/greeting.jsx +++ b/Client/src/Utils/greeting.jsx @@ -163,6 +163,7 @@ const Greeting = ({ type = "" }) => { {prepend},{" "} @@ -178,7 +179,7 @@ const Greeting = ({ type = "" }) => { {append} — Here’s an overview of your {type} monitors. From 5fcc87dab4745ab0fa92a3090517dca6df29317c Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 11 Jan 2025 18:06:47 -0500 Subject: [PATCH 17/48] feat: all colors inside of sideBar --- Client/src/Components/Sidebar/index.jsx | 30 ++++++++++++++------- Client/src/Components/ThemeSwitch/index.jsx | 6 ++++- Client/src/Pages/Uptime/Home/StatusBox.jsx | 20 +++++++------- 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index d2329acd2..4f8b79f39 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -156,11 +156,14 @@ function Sidebar() { } }, [location]); + const iconColor = theme.palette.primary.contrastText.tertiary; + /* TODO refactor this, there are a some ternaries and comments in the return */ return ( - {/* menu */} {menu.map((item) => @@ -313,10 +316,12 @@ function Sidebar() { className={location.pathname.includes(item.path) ? "selected-path" : ""} onClick={() => navigate(`/${item.path}`)} sx={{ - /* TODO fixed height */ height: "37px", + /* + TODO we do not need this height + minHeight: "37px", */ + p: theme.spacing(5), gap: theme.spacing(4), borderRadius: theme.shape.borderRadius, - px: theme.spacing(4), }} > {item.icon} @@ -380,6 +385,7 @@ function Sidebar() { MenuListProps={{ sx: { px: 1, py: 2 } }} sx={{ ml: theme.spacing(8), + /* TODO what is this selection? */ "& .selected-path": { backgroundColor: theme.palette.tertiary.main, }, @@ -412,6 +418,7 @@ function Sidebar() { sx={{ gap: theme.spacing(4), opacity: 0.9, + /* TODO this has no effect? */ "& svg": { "& path": { stroke: theme.palette.primary.contrastText.tertiary, @@ -505,6 +512,7 @@ function Sidebar() { backgroundColor: theme.palette.primary.lowContrast, }, "&.selected-path::after": { + /* TODO what is this selector doing? */ backgroundColor: theme.palette.primary.contrastText.tertiary, transform: "scale(1.2)", }, @@ -577,7 +585,7 @@ function Sidebar() { marginLeft={"auto"} columnGap={theme.spacing(2)} > - + openPopup(event, "logout")} @@ -653,6 +662,7 @@ function Sidebar() { )} + {/* TODO Do we need two dividers? */} {collapsed && } diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx index b751f542a..6c879b289 100644 --- a/Client/src/Components/ThemeSwitch/index.jsx +++ b/Client/src/Components/ThemeSwitch/index.jsx @@ -15,7 +15,7 @@ import { useDispatch, useSelector } from "react-redux"; import { setMode } from "../../Features/UI/uiSlice"; import "./index.css"; -const ThemeSwitch = ({ width = 48, height = 48 }) => { +const ThemeSwitch = ({ width = 48, height = 48, color }) => { const mode = useSelector((state) => state.ui.mode); const dispatch = useDispatch(); @@ -37,6 +37,10 @@ const ThemeSwitch = ({ width = 48, height = 48 }) => { display: "flex", alignItems: "center", justifyContent: "center", + "& svg >:is(circle, g)": { + fill: color, + stroke: color, + }, }} > diff --git a/Client/src/Pages/Uptime/Home/StatusBox.jsx b/Client/src/Pages/Uptime/Home/StatusBox.jsx index 291d43f83..c7accf3f2 100644 --- a/Client/src/Pages/Uptime/Home/StatusBox.jsx +++ b/Client/src/Pages/Uptime/Home/StatusBox.jsx @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import { Box, Stack /* , Typography */ } from "@mui/material"; +import { Box, Stack, Typography } from "@mui/material"; import Arrow from "../../../assets/icons/top-right-arrow.svg?react"; import Background from "../../../assets/Images/background-grid.svg?react"; import ClockSnooze from "../../../assets/icons/clock-snooze.svg?react"; @@ -84,17 +84,15 @@ const StatusBox = ({ title, value }) => { > {value} - {/* - TODO check with team if this is needed - # - */} + component="span" + fontSize={20} + fontWeight={300} + color={theme.palette.primary.contrastText.secondary} + sx={{ opacity: 0.3 }} + > + # + ); From 46af783ce60e99e998bd41fe0bf75c630cb41299 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 08:19:29 -0500 Subject: [PATCH 18/48] feat: colors for sidebar --- Client/src/Components/Sidebar/index.jsx | 50 +++++++++++++++++-------- 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 4f8b79f39..a4fe4238d 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -166,29 +166,46 @@ function Sidebar() { /* TODO general padding should be here */ py={theme.spacing(6)} gap={theme.spacing(6)} + /* TODO set all style in this sx if possible (when general) + This is the top lever for styles + */ sx={{ border: 1, borderColor: theme.palette.primary.lowContrast, borderRadius: theme.shape.borderRadius, - /* TODO selected item */ - "& .selected-path": { - /* TODO lookup theme.palette.tertiary.main */ - backgroundColor: theme.palette.secondary.main /* theme.palette.tertiary.main */, - - /* TODO not working */ - color: theme.palette.primary.main, - }, - " & .MuiListItemButton-root:hover": { - backgroundColor: theme.palette.tertiary.main, - /* TODO try and change color */ - color: theme.palette.secondary.main, + "& :is(p, span, .MuiListSubheader-root)": { + /* + Text color for unselected menu items and menu headings + Secondary contrast text against main background + */ + color: theme.palette.primary.contrastText.secondary, }, "& .MuiList-root svg path": { /* Menu Icons */ stroke: iconColor, }, - "& p, & span, & .MuiListSubheader-root": { - color: theme.palette.primary.contrastText.secondary, + "& .selected-path": { + /* Selected menu item */ + backgroundColor: theme.palette.secondary.main, + "& .MuiListItemIcon-root svg path": { + /* Selected menu item icon */ + stroke: theme.palette.secondary.contrastText, + }, + "& .MuiListItemText-root :is(p, span)": { + /* Selected menu item text */ + color: theme.palette.secondary.contrastText, + }, + }, + "& .MuiListItemButton-root": { + transition: "background-color .3s", + " &:hover": { + /* Hovered menu item bg color */ + backgroundColor: theme.palette.tertiary.main, + "& :is(p, span)": { + /* Hovered menu item text color */ + color: theme.palette.tertiary.contrastText, + }, + }, }, }} > @@ -207,6 +224,7 @@ function Sidebar() { width: theme.spacing(8), height: theme.spacing(8), "& path": { + /* TODO this should be set at the top level if possible */ stroke: theme.palette.primary.contrastText.secondary, }, }, @@ -294,6 +312,7 @@ function Sidebar() { > {menu.map((item) => item.path ? ( + /* If item has a path */ ) : collapsed ? ( - /* TODO Do we ever get here? */ + /* TODO Do we ever get here? If item does not have a path and collapsed state is true */ ) : ( + /* TODO Do we ever get here? If item does not have a path and collapsed state is false */ From 9fb6db6921a83537d5338f689467d134b6e3e73f Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 08:24:09 -0500 Subject: [PATCH 19/48] feat: excluding selected path from hover changes --- Client/src/Components/Sidebar/index.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index a4fe4238d..e6e958de6 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -187,6 +187,9 @@ function Sidebar() { "& .selected-path": { /* Selected menu item */ backgroundColor: theme.palette.secondary.main, + "&:hover": { + backgroundColor: theme.palette.secondary.main, + }, "& .MuiListItemIcon-root svg path": { /* Selected menu item icon */ stroke: theme.palette.secondary.contrastText, @@ -196,7 +199,7 @@ function Sidebar() { color: theme.palette.secondary.contrastText, }, }, - "& .MuiListItemButton-root": { + "& .MuiListItemButton-root:not(.selected-path)": { transition: "background-color .3s", " &:hover": { /* Hovered menu item bg color */ From 5eca39cd048063459411fa22ec1169188f2a578c Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 08:33:33 -0500 Subject: [PATCH 20/48] feat: set accent color buttons hover colors --- Client/src/Utils/Theme/constants.js | 2 ++ Client/src/Utils/Theme/globalTheme.js | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index f7e77008e..bb1bf6297 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -259,6 +259,8 @@ Look up for "red" "white" { text, bg, border } + .light + .dark theme.palette.unresolved diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 199cbf2b2..b9941b9a5 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -45,6 +45,15 @@ const baseTheme = (palette) => ({ styleOverrides: { root: ({ theme }) => ({ variants: [ + { + props: (props) => props.color === "accent", + style: { + "&:hover": { + color: theme.palette.accent.main, + backgroundColor: theme.palette.accent.contrastText, + }, + }, + }, { props: (props) => props.variant === "group", style: { From 61aaa8489a4592247f7cce81b22a926033ec0eef Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 09:39:31 -0500 Subject: [PATCH 21/48] 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. From 541a5b3f12869c213d205ac9d172adee5a56ca01 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 12:28:13 -0500 Subject: [PATCH 22/48] feat: fixing lots of colors --- Client/src/App.jsx | 1 + Client/src/Components/Alert/index.jsx | 9 ++- Client/src/Components/Animated/PulseDot.jsx | 10 +++- Client/src/Components/Heading/index.jsx | 5 +- .../src/Components/HttpStatusLabel/index.jsx | 20 +++---- Client/src/Components/Label/index.jsx | 32 +--------- Client/src/Components/ProgressBars/index.jsx | 2 +- Client/src/Components/Sidebar/index.jsx | 2 +- Client/src/Components/StatBox/index.jsx | 59 ++++++++++++++---- Client/src/Pages/Auth/CheckEmail.jsx | 4 +- Client/src/Pages/Auth/ForgotPassword.jsx | 4 +- Client/src/Pages/Auth/Login/Login.jsx | 3 +- .../src/Pages/Auth/NewPasswordConfirmed.jsx | 4 +- Client/src/Pages/Auth/Register/Register.jsx | 4 +- .../Pages/Auth/Register/StepThree/index.jsx | 2 +- Client/src/Pages/Auth/SetNewPassword.jsx | 4 +- Client/src/Pages/Infrastructure/index.jsx | 2 +- .../PageSpeed/Details/Charts/AreaChart.jsx | 3 +- .../PageSpeed/Details/Charts/PieChart.jsx | 20 +++---- Client/src/Pages/PageSpeed/Details/index.jsx | 2 +- Client/src/Pages/PageSpeed/card.jsx | 19 +++--- Client/src/Pages/PageSpeed/index.jsx | 2 +- .../Uptime/Details/Charts/DownBarChart.jsx | 2 +- .../Details/Charts/ResponseGaugeChart.jsx | 4 +- .../Uptime/Details/Charts/UpBarChart.jsx | 26 ++++++-- Client/src/Pages/Uptime/Details/index.jsx | 7 ++- .../Uptime/Home/CurrentMonitoring/index.jsx | 7 ++- Client/src/Pages/Uptime/Home/index.jsx | 39 ------------ Client/src/Pages/Uptime/utils.jsx | 53 ++++++++-------- Client/src/Utils/Theme/constants.js | 55 +++-------------- Client/src/Utils/Theme/darkTheme.js | 55 ----------------- Client/src/Utils/Theme/globalTheme.js | 4 +- Client/src/Utils/Theme/lightTheme.js | 60 ------------------- 33 files changed, 194 insertions(+), 331 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 3b28e285a..05822a5f5 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -40,6 +40,7 @@ function App() { return { body: { backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`, + color: palette.primary.contrastText, }, }; }} diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index bf941368a..a52761ca4 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -32,9 +32,12 @@ const icons = { const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { const theme = useTheme(); /* TODO - This needs fixing. text bg and border not necessarilly exist. Probably text becomes contrastText. border becomes contrastText. bg becomes dark. - Check possible variants, see implementation in light and dark theme, and adjust */ - const { text, bg, border } = theme.palette[variant]; + Do we need other variants for alert? + */ + + const text = theme.palette.secondary.contrastText; + const bg = theme.palette.secondary.main; + const border = theme.palette.secondary.contrastText; const icon = icons[variant]; return ( diff --git a/Client/src/Components/Animated/PulseDot.jsx b/Client/src/Components/Animated/PulseDot.jsx index fc38ba7d9..83513d56e 100644 --- a/Client/src/Components/Animated/PulseDot.jsx +++ b/Client/src/Components/Animated/PulseDot.jsx @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; -import { Box, Stack } from "@mui/material"; +import { Box, Stack, useTheme } from "@mui/material"; +// import useUtils from "../../Pages/Uptime/utils"; /** * A component that renders a pulsating dot with a specified color. @@ -15,6 +16,11 @@ import { Box, Stack } from "@mui/material"; */ const PulseDot = ({ color }) => { + const theme = useTheme(); + // const { statusToTheme } = useUtils(); + /* TODO refactor so it gets status and gets theme color. Then uses theme.palette.[themeColor].lowContrast */ + /* const themeColor = statusToTheme[status]; */ + return ( { width: "7px", height: "7px", borderRadius: "50%", - backgroundColor: "white", + backgroundColor: theme.palette.accent.contrastText, top: "50%", left: "50%", transform: "translate(-50%, -50%)", diff --git a/Client/src/Components/Heading/index.jsx b/Client/src/Components/Heading/index.jsx index a82165e61..1a5f1a53b 100644 --- a/Client/src/Components/Heading/index.jsx +++ b/Client/src/Components/Heading/index.jsx @@ -6,16 +6,18 @@ import PropTypes from "prop-types"; * * @param {Object} props - The properties passed to the Heading component. * @param {('h1'|'h2'|'h3')} props.component - The heading level for the component. + * @param {Object} props.style - Custom styles to apply to the heading. * @param {string} props.children - The content to display inside the heading. * @returns {JSX.Element} The Typography component with specified heading properties. */ -function Heading({ component, children }) { +function Heading({ component, style, children }) { return ( {children} @@ -24,6 +26,7 @@ function Heading({ component, children }) { Heading.propTypes = { component: PropTypes.oneOf(["h1", "h2", "h3"]).isRequired, + style: PropTypes.object, children: PropTypes.string.isRequired, }; export { Heading }; diff --git a/Client/src/Components/HttpStatusLabel/index.jsx b/Client/src/Components/HttpStatusLabel/index.jsx index 9062ed656..d7e1064b7 100644 --- a/Client/src/Components/HttpStatusLabel/index.jsx +++ b/Client/src/Components/HttpStatusLabel/index.jsx @@ -30,32 +30,28 @@ const HttpStatusLabel = ({ status, customStyles }) => { const theme = useTheme(); const colors = { 400: { - dotColor: theme.palette.warning.main, - bgColor: theme.palette.warning.dark, - borderColor: theme.palette.warning.light, + color: theme.palette.warning.main, + borderColor: theme.palette.warning.lowContrast, }, 500: { - dotColor: theme.palette.error.main, - bgColor: theme.palette.error.dark, - borderColor: theme.palette.error.light, + color: theme.palette.error.main, + borderColor: theme.palette.error.lowContrast, }, default: { - dotColor: theme.palette.unresolved.main, - bgColor: theme.palette.primary.lowContrast, - borderColor: theme.palette.unresolved.light, + color: theme.palette.primary.contrastText, + borderColor: theme.palette.primary.lowContrast, }, }; const statusCode = handleStatusCode(status); - const { borderColor, bgColor, dotColor } = + const { borderColor, color } = colors[getRoundedStatusCode(statusCode)] || colors.default; return ( { const theme = useTheme(); - /* const colors = { - up: { - dotColor: theme.palette.success.main, - borderColor: theme.palette.success.main , - }, - down: { - dotColor: theme.palette.error.main, - borderColor: theme.palette.error.light, - }, - paused: { - dotColor: theme.palette.warning.main, - borderColor: theme.palette.warning.light, - }, - pending: { - dotColor: theme.palette.primary.contrastTextSecondary, - borderColor: theme.palette.primary.lowContrast, - }, - "cannot resolve": { - dotColor: theme.palette.unresolved.main, - borderColor: theme.palette.unresolved.light, - }, - }; */ const themeColor = statusToTheme[status]; - // Look up the color for the status - /* const { borderColor, bgColor, dotColor } = colors[status]; */ - return ( diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 8a284ccd5..3ad35d53b 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -34,7 +34,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => backgroundColor: theme.palette.primary.lowContrast, "&:has(.input-error)": { borderColor: theme.palette.error.main, - backgroundColor: theme.palette.error.dark, + backgroundColor: theme.palette.error.lowContrast, py: theme.spacing(4), px: theme.spacing(8), "& > .MuiStack-root > svg": { diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index bf77e3fd8..3821306ad 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -269,7 +269,7 @@ function Sidebar() { minHeight={theme.spacing(16)} pl="1px" fontSize={18} - color="white" + color={theme.palette.accent.contrastText} sx={{ position: "relative", backgroundColor: theme.palette.accent.main, diff --git a/Client/src/Components/StatBox/index.jsx b/Client/src/Components/StatBox/index.jsx index f5cc88391..953d378ec 100644 --- a/Client/src/Components/StatBox/index.jsx +++ b/Client/src/Components/StatBox/index.jsx @@ -1,6 +1,7 @@ import { Box, Typography } from "@mui/material"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; +import useUtils from "../../Pages/Uptime/utils"; /** * StatBox Component @@ -12,6 +13,8 @@ import PropTypes from "prop-types"; * @param {Object} props - The component props * @param {string} props.heading - The primary heading/title of the statistic * @param {string|React.ReactNode} props.subHeading - The value or description of the statistic + * @param {boolean} [props.gradient=false] - Determines if the box should have a gradient background + * @param {string} [props.status] - The status of the statistic * @param {Object} [props.sx] - Additional custom styling to be applied to the box * * @example @@ -26,8 +29,46 @@ import PropTypes from "prop-types"; * @returns {React.ReactElement} A styled box containing the statistic */ -const StatBox = ({ heading, subHeading, sx }) => { +const StatBox = ({ heading, subHeading, gradient = false, status = "", sx }) => { const theme = useTheme(); + const { statusToTheme } = useUtils(); + const themeColor = statusToTheme[status]; + + const statusBoxStyles = gradient + ? { + background: `linear-gradient(to bottom right, ${theme.palette[themeColor].main} 30%, ${theme.palette[themeColor].lowContrast} 70%)`, + borderColor: theme.palette[themeColor].lowContrast, + } + : { + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, + borderColor: theme.palette.primary.lowContrast, + }; + + const headingStyles = gradient + ? { + color: theme.palette[themeColor].contrastText, + } + : { + color: theme.palette.primary.contrastTextSecondary, + }; + + const spanFixedStyles = { marginLeft: theme.spacing(2), fontSize: 15 }; + const detailTextStyles = gradient + ? { + color: theme.palette[themeColor].contrastText, + "& span": { + color: theme.palette[themeColor].contrastText, + ...spanFixedStyles, + }, + } + : { + color: theme.palette.primary.contrastText, + "& span": { + color: theme.palette.primary.contrastTextTertiary, + ...spanFixedStyles, + }, + }; + return ( { width: 225, border: 1, borderStyle: "solid", - borderColor: theme.palette.primary.lowContrast, borderRadius: 4, - backgroundColor: theme.palette.primary.main, - /* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`, */ + ...statusBoxStyles, "& h2": { + /* TODO font size should come from theme */ fontSize: 13, fontWeight: 500, - color: theme.palette.primary.contrastTextSecondary, textTransform: "uppercase", + ...headingStyles, }, "& p": { fontSize: 18, - color: theme.palette.primary.contrastText, marginTop: theme.spacing(2), - "& span": { - color: theme.palette.primary.contrastTextTertiary, - marginLeft: theme.spacing(2), - fontSize: 15, - }, + ...detailTextStyles, }, ...sx, }} @@ -69,6 +104,8 @@ const StatBox = ({ heading, subHeading, sx }) => { StatBox.propTypes = { heading: PropTypes.string.isRequired, subHeading: PropTypes.node.isRequired, + gradient: PropTypes.bool, + status: PropTypes.string, sx: PropTypes.object, }; diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx index 75b4bd81a..ad5d3f0e0 100644 --- a/Client/src/Pages/Auth/CheckEmail.jsx +++ b/Client/src/Pages/Auth/CheckEmail.jsx @@ -94,8 +94,8 @@ const CheckEmail = () => { fontWeight: 600, fontSize: 22, }, - /* TODO set color */ - "& p": { color: "red" /* theme.palette.text.accent */, fontSize: 13.5 }, + /* TODO font size from theme */ + "& p": { color: theme.palette.primary.contrastTextSecondary, fontSize: 13.5 }, "& span": { fontSize: "inherit" }, }} > diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx index 0999f9835..c56ed9ffd 100644 --- a/Client/src/Pages/Auth/ForgotPassword.jsx +++ b/Client/src/Pages/Auth/ForgotPassword.jsx @@ -95,9 +95,9 @@ const ForgotPassword = () => { fontSize: 21, }, "& p": { + /* TODO font size from theme */ fontSize: 14, - /* TODO set color */ - color: "red" /* theme.palette.text.accent */, + color: theme.palette.primary.contrastTextSecondary, }, }} > diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx index 60507ba59..59703bb0e 100644 --- a/Client/src/Pages/Auth/Login/Login.jsx +++ b/Client/src/Pages/Auth/Login/Login.jsx @@ -145,7 +145,8 @@ const Login = () => { fontWeight: 600, fontSize: 28, }, - "& p": { fontSize: 14, color: "red" /* theme.palette.text.accent */ }, + /* TODO set font size from theme */ + "& p": { fontSize: 14, color: theme.palette.primary.contrastTextSecondary }, "& span": { fontSize: "inherit" }, }} > diff --git a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx index 0b40c3023..9eb40b9f0 100644 --- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx +++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx @@ -31,8 +31,8 @@ const NewPasswordConfirmed = () => { fontWeight: 600, fontSize: 21, }, - /* TODO set color and font size*/ - "& p": { fontSize: 13.5, color: "red" /* theme.palette.text.accent */ }, + /* TODO font size from theme*/ + "& p": { fontSize: 13.5, color: theme.palette.primary.contrastTextSecondary }, }} > { fontWeight: 600, fontSize: 28, }, - /* TODO set color */ - "& p": { fontSize: 14, color: "red" /* theme.palette.text.accent */ }, + /* TODO set fontsize from theme */ + "& p": { fontSize: 14, color: theme.palette.primary.contrastTextSecondary }, "& span": { fontSize: "inherit" }, }} > diff --git a/Client/src/Pages/Auth/Register/StepThree/index.jsx b/Client/src/Pages/Auth/Register/StepThree/index.jsx index 4f565c528..698cfa3a2 100644 --- a/Client/src/Pages/Auth/Register/StepThree/index.jsx +++ b/Client/src/Pages/Auth/Register/StepThree/index.jsx @@ -134,7 +134,7 @@ function StepThree({ onSubmit, onBack }) { mr: theme.spacing(3), }, ":focus-visible": { - outline: `2px solid ${theme.palette.primary.dark}`, + outline: `2px solid ${theme.palette.primary.lowContrast}`, outlineOffset: "4px", }, }} diff --git a/Client/src/Pages/Auth/SetNewPassword.jsx b/Client/src/Pages/Auth/SetNewPassword.jsx index ca3f5e613..6bd42a711 100644 --- a/Client/src/Pages/Auth/SetNewPassword.jsx +++ b/Client/src/Pages/Auth/SetNewPassword.jsx @@ -74,9 +74,9 @@ const SetNewPassword = () => { fontSize: 24, }, "& p": { + /* TODO font size from theme */ fontSize: 14, - /* TODO set color */ - color: "red" /* theme.palette.text.accent */, + color: theme.palette.primary.contrastTextSecondary, }, }} > diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 85a585cb4..99ac77afa 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -202,7 +202,7 @@ function Infrastructure() { {isAdmin && (
+
Monitor Name diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index d2a7439f4..baac880f1 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -96,6 +96,7 @@ const Incidents = () => { items={Object.values(monitors)} sx={{ backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastTextSecondary, }} /> Date: Sun, 12 Jan 2025 13:03:09 -0500 Subject: [PATCH 24/48] feat: finishing adjusting colors --- Client/src/Components/BasicTable/index.jsx | 22 ++++++++++++++++++- .../TabPanels/Account/PasswordPanel.jsx | 2 +- .../TabPanels/Account/ProfilePanel.jsx | 2 +- .../TabPanels/Account/TeamPanel.jsx | 2 +- Client/src/Pages/Account/index.jsx | 19 ++++++++-------- 5 files changed, 34 insertions(+), 13 deletions(-) diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index f4d343b0a..98e30a116 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -201,7 +201,27 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data" return ( <> -
+
{data.cols.map((col) => ( diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 082d69c17..3c11affa6 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -228,7 +228,7 @@ const PasswordPanel = () => { > { { setIsOpen(true)} > Invite a team member diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index 29b936af0..4ec785c98 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/Client/src/Pages/Account/index.jsx @@ -57,10 +57,10 @@ const Account = ({ open = "profile" }) => { className="account" px={theme.spacing(20)} py={theme.spacing(12)} - border={1} - borderColor={theme.palette.primary.lowContrast} - borderRadius={theme.shape.borderRadius} backgroundColor={theme.palette.primary.main} + borderColor={theme.palette.primary.lowContrast} + border={1} + borderRadius={theme.shape.borderRadius} > { textTransform: "none", minWidth: "fit-content", minHeight: 0, - paddingLeft: 0, paddingY: theme.spacing(4), fontWeight: 400, - marginRight: theme.spacing(8), + /* marginRight: theme.spacing(8), */ borderBottom: "2px solid transparent", - "&:focus": { - borderBottom: `2px solid ${theme.palette.primary.lowContrast}`, + "&:focus, &.Mui-selected": { + /* TODO this appears and disapears. Investigate */ + color: theme.palette.primary.contrastText, + borderColor: theme.palette.primary.contrastText, + fontWeight: 700, }, - "&:hover": { - borderBottom: `2px solid ${theme.palette.primary.lowContrast}`, + borderColor: theme.palette.primary.lowContrast, }, }} /> From 921fb6e4587565fa170677819c1ac5e9a8ef2999 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 14 Jan 2025 07:59:08 -0500 Subject: [PATCH 25/48] spotted errors nd marked to be solved after merge --- Client/src/Components/Table/index.jsx | 3 ++- Client/src/Pages/Infrastructure/index.jsx | 5 +++-- .../Pages/Uptime/Home/UptimeDataTable/index.jsx | 17 +++++++++++------ Client/src/Pages/Uptime/Home/index.jsx | 10 +++++----- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/Client/src/Components/Table/index.jsx b/Client/src/Components/Table/index.jsx index 9f5dbc5cb..be74de884 100644 --- a/Client/src/Components/Table/index.jsx +++ b/Client/src/Components/Table/index.jsx @@ -47,7 +47,8 @@ const DataTable = ({ headers, data, config = { emptyView: "No data" } }) => { "& :is(td)": { color: theme.palette.primary.contrastTextSecondary }, }} > - + {/* TODO Check */} + {headers.map((header, index) => ( @@ -258,7 +259,7 @@ function Infrastructure() { rowSX: { cursor: "pointer", "&:hover": { - backgroundColor: theme.palette.background.accent, + backgroundColor: "red" /* theme.palette.background.accent */, }, }, onRowClick: (row) => openDetails(row.id), diff --git a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx index a184eb09f..df31361ec 100644 --- a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx +++ b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx @@ -227,10 +227,12 @@ const UptimeDataTable = ({ {monitorCount} @@ -250,7 +252,8 @@ const UptimeDataTable = ({ height="100%" position="absolute" sx={{ - backgroundColor: theme.palette.background.main, + /* TODO check */ + backgroundColor: "red" /* theme.palette.background.main */, opacity: 0.8, zIndex: 100, }} @@ -267,7 +270,8 @@ const UptimeDataTable = ({ > @@ -280,7 +284,8 @@ const UptimeDataTable = ({ rowSX: { cursor: "pointer", "&:hover": { - backgroundColor: theme.palette.background.accent, + /* TODO check */ + backgroundColor: "red" /* theme.palette.background.accent */, }, }, onRowClick: (row) => { diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index edfd62537..55bc047b0 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -57,7 +57,7 @@ const UptimeMonitors = () => { const getMonitorWithPercentage = useCallback((monitor, theme) => { let uptimePercentage = ""; - let percentageColor = theme.palette.percentage.uptimeExcellent; + let percentageColor = "red"; /* theme.palette.percentage.uptimeExcellent */ if (monitor.uptimePercentage !== undefined) { uptimePercentage = @@ -67,12 +67,12 @@ const UptimeMonitors = () => { percentageColor = monitor.uptimePercentage < 0.25 - ? theme.palette.percentage.uptimePoor + ? "red" /* theme.palette.percentage.uptimePoor */ : monitor.uptimePercentage < 0.5 - ? theme.palette.percentage.uptimeFair + ? "red" /* theme.palette.percentage.uptimeFair */ : monitor.uptimePercentage < 0.75 - ? theme.palette.percentage.uptimeGood - : theme.palette.percentage.uptimeExcellent; + ? /* theme.palette.percentage.uptimeGood */ "red" + : "red" /* theme.palette.percentage.uptimeExcellent */; } return { From 5e9629ee293b553241a0957d1c5b769d3c32dbcf Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 14 Jan 2025 08:09:03 -0500 Subject: [PATCH 26/48] fix: primary buttons --- Client/src/Components/Fallback/index.jsx | 2 +- Client/src/Components/ProgressStepper/index.jsx | 4 ++-- Client/src/Components/TabPanels/Account/ProfilePanel.jsx | 4 ++-- Client/src/Components/TabPanels/Account/TeamPanel.jsx | 2 +- Client/src/Pages/Auth/CheckEmail.jsx | 2 +- Client/src/Pages/Auth/ForgotPassword.jsx | 2 +- Client/src/Pages/Auth/Login/Components/EmailStep.jsx | 2 +- Client/src/Pages/Auth/Login/Components/PasswordStep.jsx | 2 +- Client/src/Pages/Auth/NewPasswordConfirmed.jsx | 2 +- Client/src/Pages/Auth/Register/StepOne/index.jsx | 2 +- Client/src/Pages/Auth/Register/StepThree/index.jsx | 2 +- Client/src/Pages/Auth/Register/StepTwo/index.jsx | 2 +- Client/src/Pages/Auth/SetNewPassword.jsx | 2 +- Client/src/Pages/Infrastructure/CreateMonitor/index.jsx | 2 +- Client/src/Pages/Integrations/index.jsx | 2 +- Client/src/Pages/Maintenance/CreateMaintenance/index.jsx | 2 +- Client/src/Pages/Maintenance/index.jsx | 2 +- Client/src/Pages/NotFound/index.jsx | 2 +- Client/src/Pages/PageSpeed/Configure/index.jsx | 2 +- Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx | 2 +- Client/src/Pages/Settings/index.jsx | 4 ++-- Client/src/Pages/Uptime/Configure/index.jsx | 2 +- Client/src/Pages/Uptime/CreateUptime/index.jsx | 2 +- Client/src/Pages/Uptime/Home/fallback.jsx | 2 +- 24 files changed, 27 insertions(+), 27 deletions(-) diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 0354dbe65..61840452f 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -70,7 +70,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) => {isAdmin && ( {
- {/* TODO Check */} - + {headers.map((header, index) => ( handleSort("status")} > {" "} @@ -168,9 +168,9 @@ const UptimeDataTable = ({ }} > {sort.order === "asc" ? ( - + ) : ( - + )} @@ -222,17 +222,22 @@ const UptimeDataTable = ({ direction="row" alignItems="center" mb={theme.spacing(8)} + gap={theme.spacing(2)} > Uptime monitors {monitorCount} @@ -252,8 +257,7 @@ const UptimeDataTable = ({ height="100%" position="absolute" sx={{ - /* TODO check */ - backgroundColor: "red" /* theme.palette.background.main */, + backgroundColor: theme.palette.accent.contrastText, opacity: 0.8, zIndex: 100, }} @@ -270,8 +274,7 @@ const UptimeDataTable = ({ > @@ -283,9 +286,8 @@ const UptimeDataTable = ({ config={{ rowSX: { cursor: "pointer", - "&:hover": { - /* TODO check */ - backgroundColor: "red" /* theme.palette.background.accent */, + "&:hover td": { + backgroundColor: theme.palette.tertiary.main, }, }, onRowClick: (row) => { diff --git a/Client/src/Pages/Uptime/Home/index.css b/Client/src/Pages/Uptime/Home/index.css index 80916dce8..adb1d8674 100644 --- a/Client/src/Pages/Uptime/Home/index.css +++ b/Client/src/Pages/Uptime/Home/index.css @@ -4,17 +4,3 @@ height: var(--env-var-height-2); min-width: fit-content; } - -.current-monitors-counter { - display: flex; - justify-content: center; - align-items: center; - padding: 5px; - min-width: 25px; - min-height: 25px; - border-radius: 50%; - font-size: var(--env-var-font-size-medium); - font-weight: 500; - margin-left: 10px; - line-height: 0.8; -} diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index ff287a2c9..8fa9a54c9 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -58,7 +58,7 @@ const UptimeMonitors = () => { const getMonitorWithPercentage = useCallback((monitor, theme) => { let uptimePercentage = ""; - let percentageColor = "red"; /* theme.palette.percentage.uptimeExcellent */ + let percentageColor = ""; if (monitor.uptimePercentage !== undefined) { uptimePercentage = @@ -66,15 +66,14 @@ const UptimeMonitors = () => { ? "0" : (monitor.uptimePercentage * 100).toFixed(2); - /* TODO check */ percentageColor = monitor.uptimePercentage < 0.25 - ? "red" /* theme.palette.percentage.uptimePoor */ + ? theme.palette.error.main : monitor.uptimePercentage < 0.5 - ? "red" /* theme.palette.percentage.uptimeFair */ + ? theme.palette.warning.main : monitor.uptimePercentage < 0.75 - ? /* theme.palette.percentage.uptimeGood */ "red" - : "red" /* theme.palette.percentage.uptimeExcellent */; + ? theme.palette.success.main + : theme.palette.success.main; } return { diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index ca8ab457f..96b8bc206 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -84,8 +84,8 @@ const semanticColors = { const newColors = { offWhite: "#FEFEFE", offBlack: "#131315", - gray100: "#EFEFEF", - gray200: "#E3E3E3", + gray100: "#F3F3F3", + gray200: "#EFEFEF", gray500: "#A2A3A3", blueGray50: "#E8F0FE", blueGray500: "#475467", From 8fe200fb8ba937bc23280a786b63f11f6ede7fcf Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 14 Jan 2025 19:19:36 -0500 Subject: [PATCH 29/48] feat: finished --- Client/src/Components/BasicTable/index.jsx | 5 +++++ Client/src/Components/HttpStatusLabel/index.jsx | 2 +- Client/src/Components/Label/index.jsx | 8 ++++---- Client/src/Pages/Infrastructure/index.jsx | 16 +++++----------- .../Pages/Uptime/Home/UptimeDataTable/index.jsx | 3 ++- Client/src/Pages/Uptime/Home/index.jsx | 5 +++++ Client/src/Utils/Theme/globalTheme.js | 1 + 7 files changed, 23 insertions(+), 17 deletions(-) diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 98e30a116..b93c584da 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -1,3 +1,8 @@ +/* TODO + +Should we delete this? +*/ + import PropTypes from "prop-types"; import { useState, useEffect } from "react"; import { useTheme } from "@emotion/react"; diff --git a/Client/src/Components/HttpStatusLabel/index.jsx b/Client/src/Components/HttpStatusLabel/index.jsx index d7e1064b7..ca9f70fe8 100644 --- a/Client/src/Components/HttpStatusLabel/index.jsx +++ b/Client/src/Components/HttpStatusLabel/index.jsx @@ -39,7 +39,7 @@ const HttpStatusLabel = ({ status, customStyles }) => { }, default: { color: theme.palette.primary.contrastText, - borderColor: theme.palette.primary.lowContrast, + borderColor: theme.palette.primary.contrastText, }, }; diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 55726546a..c651b93e7 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.contrastTextTertiary}`, - color: theme.palette.primary.contrastTextTertiary, + border: `1px solid ${theme.palette.primary.lowContrast}`, + color: theme.palette.primary.contrastText, padding: padding, ...styles, }} @@ -126,8 +126,8 @@ const statusToTheme = { up: "success", down: "error", paused: "warning", - pending: "secondary", - "cannot resolve": "tertiary", + pending: "warning", + "cannot resolve": "error", }; const StatusLabel = ({ status, text, customStyles }) => { diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index fbbda23ac..dd5a75be3 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -137,14 +137,7 @@ function Infrastructure() { id: "actions", content: "Actions", render: (row) => ( - + openDetails(row.id), diff --git a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx index 7a0f257db..bd4b73aa4 100644 --- a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx +++ b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx @@ -257,7 +257,7 @@ const UptimeDataTable = ({ height="100%" position="absolute" sx={{ - backgroundColor: theme.palette.accent.contrastText, + backgroundColor: theme.palette.primary.main, opacity: 0.8, zIndex: 100, }} @@ -288,6 +288,7 @@ const UptimeDataTable = ({ cursor: "pointer", "&:hover td": { backgroundColor: theme.palette.tertiary.main, + transition: "background-color .3s ease", }, }, onRowClick: (row) => { diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx index 8fa9a54c9..c2e818d50 100644 --- a/Client/src/Pages/Uptime/Home/index.jsx +++ b/Client/src/Pages/Uptime/Home/index.jsx @@ -169,6 +169,11 @@ const UptimeMonitors = () => { sx={{ fontWeight: 500, whiteSpace: "nowrap", + /* TODO IMPORTANT this should be applied to all buttons */ + "&:focus-visible": { + outline: `2px solid ${theme.palette.primary.contrastText}`, + outlineOffset: 4, + }, }} > Create new diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index f57300929..6f17e6ec5 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -264,6 +264,7 @@ const baseTheme = (palette) => ({ padding: "0 var(--env-var-spacing-1-minus) !important", }, "& .MuiOutlinedInput-root": { + color: theme.palette.primary.contrastTextSecondary, borderRadius: 4, }, "& .MuiOutlinedInput-notchedOutline": { From d09382bc71f9282dcca4e0f3c54ca66439d79773 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 14 Jan 2025 20:25:20 -0500 Subject: [PATCH 30/48] fix: toast --- Client/src/Utils/toastUtils.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Utils/toastUtils.jsx b/Client/src/Utils/toastUtils.jsx index dbec9117e..5920d06a7 100644 --- a/Client/src/Utils/toastUtils.jsx +++ b/Client/src/Utils/toastUtils.jsx @@ -12,7 +12,7 @@ import Alert from "../Components/Alert"; */ export const createToast = ({ - variant = "info", + variant = "secondary", title, body, hasIcon = false, From b4ba9efd45166b828a8b48d24a5f07fe09aea2c9 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 14 Jan 2025 22:58:46 -0500 Subject: [PATCH 31/48] fix: table header color --- Client/src/Utils/Theme/constants.js | 2 +- Client/src/Utils/Theme/globalTheme.js | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 96b8bc206..0b9bb76a9 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -152,7 +152,7 @@ const newSemanticColors = { secondary: { main: { light: newColors.gray200, - dark: newColors.blueGray600, + dark: "#313131" /* newColors.blueGray600 */, }, contrastText: { light: newColors.blueGray600, diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 6f17e6ec5..8878588e7 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -13,22 +13,22 @@ const baseTheme = (palette) => ({ fontSize: 14, h1: { fontSize: typographyLevels.xl, - color: palette.primary.contrastText.main, + color: palette.primary.contrastText, fontWeight: 500, }, h2: { fontSize: typographyLevels.l, - color: palette.primary.contrastText.secondary, + color: palette.primary.contrastTextSecondary, fontWeight: 400, }, body1: { fontSize: typographyLevels.m, - color: palette.primary.contrastText.tertiary, + color: palette.primary.contrastTextTertiary, fontWeight: 400, }, body2: { fontSize: typographyLevels.s, - color: palette.primary.contrastText.tertiary, + color: palette.primary.contrastTextTertiary, fontWeight: 400, }, }, @@ -249,11 +249,15 @@ const baseTheme = (palette) => ({ minHeight: "var(--env-var-height-2)", fontSize: "var(--env-var-font-size-medium)", fontWeight: 400, - color: palette.primary.contrastText.secondary, + color: palette.primary.contrastTextSecondary, "&.Mui-disabled": { opacity: 0.3, WebkitTextFillColor: "unset", }, + "& .Mui-focused": { + /* color: "#ff0000", */ + /* borderColor: theme.palette.primary.contrastText, */ + }, }, "& .MuiInputBase-input:-webkit-autofill": { transition: "background-color 5000s ease-in-out 0s", From 59f60d2184c9e5f33b1af6c06379d04d416d7c99 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 15 Jan 2025 07:55:22 -0500 Subject: [PATCH 32/48] fix inputs --- Client/src/Components/Inputs/TextInput/index.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 022d286d8..3ffc592bf 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -6,6 +6,14 @@ import PropTypes from "prop-types"; const getSx = (theme, type, maxWidth) => { const sx = { maxWidth: maxWidth, + "& .MuiOutlinedInput-root ": { + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: theme.palette.primary.contrastText, // Adjust hover border color + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: theme.palette.accent.main, // Adjust focus border color + }, + }, "& .MuiFormHelperText-root": { position: "absolute", bottom: `-${theme.spacing(24)}`, @@ -129,6 +137,7 @@ const TextInput = forwardRef( }, }} disabled={disabled} + color="secondary" /> ); From 53fcd5acc7e2d3b8af87867c6c40641488c5194a Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 15 Jan 2025 08:07:48 -0500 Subject: [PATCH 33/48] fix: pagespeed details --- Client/src/Components/Inputs/TextInput/index.jsx | 1 - Client/src/Pages/Account/index.jsx | 3 +++ Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx | 4 ++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Inputs/TextInput/index.jsx b/Client/src/Components/Inputs/TextInput/index.jsx index 3ffc592bf..64d8e27aa 100644 --- a/Client/src/Components/Inputs/TextInput/index.jsx +++ b/Client/src/Components/Inputs/TextInput/index.jsx @@ -137,7 +137,6 @@ const TextInput = forwardRef( }, }} disabled={disabled} - color="secondary" /> ); diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx index 4ec785c98..9b9a23d55 100644 --- a/Client/src/Pages/Account/index.jsx +++ b/Client/src/Pages/Account/index.jsx @@ -85,6 +85,9 @@ const Account = ({ open = "profile" }) => { sx={{ fontSize: 13, color: theme.palette.primary.contrastTextTertiary, + /* + TODO implement bg color and styling for tabs + backgroundColor: theme.palette.tertiary.main, */ textTransform: "none", minWidth: "fit-content", minHeight: 0, diff --git a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx index fbf5be85e..a854eb094 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx @@ -18,7 +18,7 @@ const config = { seo: { id: "seo", text: "SEO", - color: "unresolved", + color: "secondary", }, performance: { id: "performance", @@ -33,7 +33,7 @@ const config = { accessibility: { id: "accessibility", text: "accessibility", - color: "primary", + color: "accent", }, }; From 851ad48b3e0167fd42bd99d8bce034d28955f80c Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 15 Jan 2025 17:51:13 -0500 Subject: [PATCH 34/48] feat: Profile Panel buttons --- .../src/Components/TabPanels/Account/ProfilePanel.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index 615d7df5b..5eccd0569 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -231,6 +231,7 @@ const ProfilePanel = () => { direction="row" gap={SPACING_GAP} > + {/* This 0.9 is a bit magic numbering, refactor */} First name @@ -303,6 +304,7 @@ const ProfilePanel = () => { direction="row" alignItems="center" flex={1} + gap={"8px"} > { ? localData.file : "" } - sx={{ mr: "8px" }} + sx={{ marginRight: "8px" }} />
+
Status diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 0b9bb76a9..6e962dfef 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -1,3 +1,5 @@ +import { lighten } from "@mui/material/styles"; // CAIO_REVIEW + const typographyBase = 14; /* TODO @@ -122,6 +124,10 @@ const newSemanticColors = { light: newColors.blueBlueWave, dark: newColors.blueBlueWave, }, + light: { + light: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW + dark: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW + }, contrastText: { light: newColors.offWhite, dark: newColors.offWhite, From f68e885c882004676868e8803c3eaa07c79dbaad Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 21 Jan 2025 10:20:43 -0800 Subject: [PATCH 42/48] status box fix --- Client/src/Pages/Uptime/utils.jsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/Client/src/Pages/Uptime/utils.jsx b/Client/src/Pages/Uptime/utils.jsx index 550b50555..0e5fc62ec 100644 --- a/Client/src/Pages/Uptime/utils.jsx +++ b/Client/src/Pages/Uptime/utils.jsx @@ -65,27 +65,29 @@ const useUtils = () => { const statusStyles = { up: { backgroundColor: theme.palette.success.lowContrast, - background: `linear-gradient(340deg, ${theme.palette.success.lowContrast} -60%, ${theme.palette.success.contrastText} 35%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} -60%, ${theme.palette.success.lowContrast} 35%)`, // CAIO_REVIEW borderColor: theme.palette.success.contrastText, - "& h2": { color: theme.palette.success.main }, + // "& h2": { color: theme.palette.success.contrastText }, // CAIO_REVIEW }, down: { backgroundColor: theme.palette.error.lowContrast, - background: `linear-gradient(340deg, ${theme.palette.error.lowContrast} -60%, ${theme.palette.error.contrastText} 35%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} -60%, ${theme.palette.error.lowContrast} 35%)`, // CAIO_REVIEW borderColor: theme.palette.error.contrastText, - "& h2": { color: theme.palette.error.main }, + "& h2": { color: theme.palette.error.contrastText }, // CAIO_REVIEW + "& .MuiTypography-root": { color: theme.palette.error.contrastText }, // CAIO_REVIEW }, paused: { backgroundColor: theme.palette.warning.lowContrast, - background: `linear-gradient(340deg, ${theme.palette.warning.lowContrast} -60%, ${theme.palette.warning.contrastText} 35%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} -60%, ${theme.palette.warning.lowContrast} 35%)`, // CAIO_REVIEW borderColor: theme.palette.warning.contrastText, - "& h2": { color: theme.palette.warning.main }, + "& h2": { color: theme.palette.warning.contrastText }, // CAIO_REVIEW + "& .MuiTypography-root": { color: theme.palette.warning.contrastText }, // CAIO_REVIEW }, pending: { backgroundColor: theme.palette.warning.lowContrast, - background: `linear-gradient(340deg, ${theme.palette.warning.lowContrast} -60%, ${theme.palette.warning.contrastText} 35%)`, + background: `linear-gradient(340deg, ${theme.palette.tertiary.main} -60%, ${theme.palette.warning.lowContrast} 35%)`, // CAIO_REVIEW borderColor: theme.palette.warning.contrastText, - "& h2": { color: theme.palette.warning.main }, + "& h2": { color: theme.palette.warning.contrastText }, // CAIO_REVIEW }, }; From 8021786d0c01471e11e8c1df2829814b20be219b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 21 Jan 2025 10:24:09 -0800 Subject: [PATCH 43/48] fix gauge colors --- .../Components/Charts/CustomGauge/index.jsx | 4 +- Client/src/Components/Charts/Gauge/index.jsx | 111 ------------------ 2 files changed, 2 insertions(+), 113 deletions(-) delete mode 100644 Client/src/Components/Charts/Gauge/index.jsx diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx index 255b32067..64d2e5c73 100644 --- a/Client/src/Components/Charts/CustomGauge/index.jsx +++ b/Client/src/Components/Charts/CustomGauge/index.jsx @@ -54,8 +54,8 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = const fillColor = progressWithinRange > threshold - ? theme.palette.error.main - : theme.palette.primary.main; + ? theme.palette.error.lowContrast + : theme.palette.accent.main; return ( - */ - -function Gauge({ progressValue, width = DEFAULT_WIDTH }) { - const theme = useTheme(); - const myProgressValue = Math.max(MINIMUM_VALUE, Math.min(progressValue, MAXIMUM_VALUE)); - const chartColor = - progressValue > PROGRESS_THRESHOLD - ? theme.palette.primary.main - : theme.palette.error.main; - const chartData = [ - CHART_MAXIMUM_DATA, - { - value: myProgressValue, - fill: chartColor, - }, - ]; - - return ( - - - PROGRESS_THRESHOLD - ? theme.palette.primary.main - : theme.palette.error.main - } - background={{ fill: theme.palette.primary.lowContrast }} - label={{ - position: "center", - content: () => ( - - {`${myProgressValue}%`} - - ), - }} - /> - - - ); -} - -export { Gauge }; From 2070e248291cc9c6524197b9437803502394037e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 21 Jan 2025 10:57:34 -0800 Subject: [PATCH 44/48] Fix gauge colors --- Client/src/Components/Charts/CustomGauge/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Client/src/Components/Charts/CustomGauge/index.jsx b/Client/src/Components/Charts/CustomGauge/index.jsx index 64d2e5c73..d29663004 100644 --- a/Client/src/Components/Charts/CustomGauge/index.jsx +++ b/Client/src/Components/Charts/CustomGauge/index.jsx @@ -54,8 +54,8 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold = const fillColor = progressWithinRange > threshold - ? theme.palette.error.lowContrast - : theme.palette.accent.main; + ? theme.palette.error.lowContrast // CAIO_REVIEW + : theme.palette.accent.main; // CAIO_REVIEW return ( Date: Tue, 21 Jan 2025 10:57:53 -0800 Subject: [PATCH 45/48] Fixed invisible text on login page --- Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx b/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx index 0a5fa8153..d7a80e5f5 100644 --- a/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx +++ b/Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx @@ -24,7 +24,7 @@ const ForgotPasswordLabel = ({ email, errorEmail }) => { Date: Tue, 21 Jan 2025 10:58:08 -0800 Subject: [PATCH 46/48] various infra details page color fixes --- Client/src/Pages/Infrastructure/Details/index.jsx | 4 ++-- Client/src/Utils/Theme/constants.js | 2 +- Client/src/Utils/Theme/globalTheme.js | 3 +++ 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/Client/src/Pages/Infrastructure/Details/index.jsx b/Client/src/Pages/Infrastructure/Details/index.jsx index d38be8098..acd1bafb1 100644 --- a/Client/src/Pages/Infrastructure/Details/index.jsx +++ b/Client/src/Pages/Infrastructure/Details/index.jsx @@ -408,8 +408,8 @@ const InfrastructureDetails = () => { data: checks, dataKeys: ["avgMemoryUsage"], heading: "Memory usage", - strokeColor: theme.palette.primary.main, - gradientStartColor: theme.palette.primary.main, + strokeColor: theme.palette.accent.main, // CAIO_REVIEW + gradientStartColor: theme.palette.accent.main, // CAIO_REVIEW yLabel: "Memory usage", yDomain: [0, 1], yTick: , diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 6e962dfef..7d9f8c8b2 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -1,4 +1,4 @@ -import { lighten } from "@mui/material/styles"; // CAIO_REVIEW +import { lighten, darken } from "@mui/material/styles"; // CAIO_REVIEW const typographyBase = 14; diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index e8ced6677..ff523ae9a 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -116,6 +116,9 @@ const baseTheme = (palette) => ({ backgroundColor: theme.palette.secondary.main, color: theme.palette.primary.contrastText, }, + "&.MuiButton-colorAccent:hover": { + boxShadow: `0 0 0 1px ${theme.palette.accent.main}`, // CAIO_REVIEW, this should really have a solid BG color + }, }, "&.MuiLoadingButton-loading": { "& .MuiLoadingButton-label": { From d92a4778929c6b9f0742ca648c652b436dffb8ea Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 21 Jan 2025 11:38:32 -0800 Subject: [PATCH 47/48] Add darker color to accent --- Client/src/Utils/Theme/constants.js | 6 ++++++ Client/src/Utils/Theme/extractColorObject.js | 1 + Client/src/Utils/Theme/globalTheme.js | 3 +-- Client/src/Utils/Theme/lightTheme.js | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 7d9f8c8b2..11357e06d 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -128,6 +128,12 @@ const newSemanticColors = { light: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW dark: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW }, + darker: { + // CAIO_REVIEW + light: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW + dark: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW + }, + contrastText: { light: newColors.offWhite, dark: newColors.offWhite, diff --git a/Client/src/Utils/Theme/extractColorObject.js b/Client/src/Utils/Theme/extractColorObject.js index 09b6d66dc..bfd1a5aff 100644 --- a/Client/src/Utils/Theme/extractColorObject.js +++ b/Client/src/Utils/Theme/extractColorObject.js @@ -9,6 +9,7 @@ function extractThemeColors(themeType, colorObject) { } if ("light" in obj && "dark" in obj) { + // CAIO_REVIEW: This will break if the root object has light and dark properties return obj[themeType]; // Return the value for the specified theme } diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index ff523ae9a..12c377b3e 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -49,8 +49,7 @@ const baseTheme = (palette) => ({ props: (props) => props.color === "accent", style: { "&:hover": { - color: theme.palette.accent.main, - backgroundColor: theme.palette.accent.contrastText, + backgroundColor: theme.palette.accent.darker, }, }, }, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index f44c2f5b8..1cbc3eb9b 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -4,7 +4,7 @@ import { /* colors, */ newSemanticColors } from "./constants"; import { extractThemeColors } from "./extractColorObject"; const palette = extractThemeColors("light", newSemanticColors); - +console.log(palette); const lightTheme = createTheme({ palette, ...baseTheme(palette), From f8b38475776f163d5bea8334858f95914b35b252 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 21 Jan 2025 13:22:29 -0800 Subject: [PATCH 48/48] Remove console log --- Client/src/Utils/Theme/lightTheme.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 1cbc3eb9b..94e8d3d4a 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -4,7 +4,6 @@ import { /* colors, */ newSemanticColors } from "./constants"; import { extractThemeColors } from "./extractColorObject"; const palette = extractThemeColors("light", newSemanticColors); -console.log(palette); const lightTheme = createTheme({ palette, ...baseTheme(palette),