From 541a5b3f12869c213d205ac9d172adee5a56ca01 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 12 Jan 2025 12:28:13 -0500 Subject: [PATCH] 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 && (