From db867537014d730b6a624d8c978e8806cefbd0b1 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 7 Jan 2025 21:27:52 -0500 Subject: [PATCH] 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}