mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-30 13:49:25 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: fixing lots of colors

Browse Source
This commit is contained in:
Caio Cabral
2025-01-12 12:28:13 -05:00
parent 61aaa8489a
commit 541a5b3f12
33 changed files with 194 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Client/src/App.jsx
View File

@@ -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,
},
};
}}

9
Client/src/Components/Alert/index.jsx
View File

@@ -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 (

10
Client/src/Components/Animated/PulseDot.jsx
View File

@@ -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 (
<Stack
width="26px"
@@ -44,7 +50,7 @@ const PulseDot = ({ color }) => {
width: "7px",
height: "7px",
borderRadius: "50%",
backgroundColor: "white",
backgroundColor: theme.palette.accent.contrastText,
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",

5
Client/src/Components/Heading/index.jsx
View File

@@ -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 (
<Typography
component={component}
variant="h2"
fontWeight={600}
style={style}
>
{children}
</Typography>
@@ -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 };

20
Client/src/Components/HttpStatusLabel/index.jsx
View File

@@ -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 (
<BaseLabel
label={String(statusCode)}
styles={{
color: dotColor,
backgroundColor: bgColor,
color: color,
borderColor: borderColor,
...customStyles,
}}

32
Client/src/Components/Label/index.jsx
View File

@@ -132,48 +132,22 @@ const statusToTheme = {
const StatusLabel = ({ status, text, customStyles }) => {
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 (
<BaseLabel
label={text}
styles={{
color: theme.palette[themeColor].main /* dotColor */,
/*backgroundColor: bgColor, */
borderColor: theme.palette[themeColor].lowContrast /* borderColor */,
color: theme.palette[themeColor].main,
borderColor: theme.palette[themeColor].lowContrast,
...customStyles,
}}
>
<Box
width={7}
height={7}
bgcolor={theme.palette[themeColor].lowContrast /* dotColor */}
bgcolor={theme.palette[themeColor].lowContrast}
borderRadius="50%"
marginRight="5px"
/>

2
Client/src/Components/ProgressBars/index.jsx
View File

@@ -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": {

2
Client/src/Components/Sidebar/index.jsx
View File

@@ -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,

59
Client/src/Components/StatBox/index.jsx
View File

@@ -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 (
<Box
sx={{
@@ -37,25 +78,19 @@ const StatBox = ({ heading, subHeading, sx }) => {
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,
};

4
Client/src/Pages/Auth/CheckEmail.jsx
View File

@@ -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" },
}}
>

4
Client/src/Pages/Auth/ForgotPassword.jsx
View File

@@ -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,
},
}}
>

3
Client/src/Pages/Auth/Login/Login.jsx
View File

@@ -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" },
}}
>

4
Client/src/Pages/Auth/NewPasswordConfirmed.jsx
View File

@@ -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 },
}}
>
<Box

4
Client/src/Pages/Auth/Register/Register.jsx
View File

@@ -285,8 +285,8 @@ const Register = ({ isSuperAdmin }) => {
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" },
}}
>

2
Client/src/Pages/Auth/Register/StepThree/index.jsx
View File

@@ -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",
},
}}

4
Client/src/Pages/Auth/SetNewPassword.jsx
View File

@@ -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,
},
}}
>

2
Client/src/Pages/Infrastructure/index.jsx
View File

@@ -202,7 +202,7 @@ function Infrastructure() {
{isAdmin && (
<Button
variant="contained"
color="primary"
color="accent"
onClick={navigateToCreate}
sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
>

3
Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx
View File

@@ -260,8 +260,9 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
/>
<defs>
{Object.values(filteredConfig).map(({ id, color }) => {
/* TODO not working? */
const startColor = theme.palette[color].main;
const endColor = theme.palette[color].light;
const endColor = theme.palette[color].lowContrast;
return (
<linearGradient

20
Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx
View File

@@ -126,29 +126,29 @@ const PieChart = ({ audits }) => {
if (value >= 90 && value <= 100)
return {
stroke: theme.palette.success.main,
strokeBg: theme.palette.success.light,
strokeBg: theme.palette.success.lowContrast,
text: theme.palette.success.contrastText,
bg: theme.palette.success.light,
bg: theme.palette.success.lowContrast,
};
else if (value >= 50 && value < 90)
return {
stroke: theme.palette.warning.main,
strokeBg: theme.palette.warning.light,
strokeBg: theme.palette.warning.lowContrast,
text: theme.palette.warning.contrastText,
bg: theme.palette.warning.dark,
bg: theme.palette.warning.lowContrast,
};
else if (value >= 0 && value < 50)
return {
stroke: theme.palette.error.contrastText,
strokeBg: theme.palette.error.light,
strokeBg: theme.palette.error.lowContrast,
text: theme.palette.error.contrastText,
bg: theme.palette.error.dark,
bg: theme.palette.error.lowContrast,
};
return {
stroke: theme.palette.unresolved.main,
strokeBg: theme.palette.unresolved.light,
text: theme.palette.unresolved.main,
bg: theme.palette.primary.lowContrast,
stroke: theme.palette.tertiary.contrastText,
strokeBg: theme.palette.tertiary.contrastText,
text: theme.palette.tertiary.contrastText,
bg: theme.palette.tertiary.main,
};
};

2
Client/src/Pages/PageSpeed/Details/index.jsx
View File

@@ -372,7 +372,7 @@ const PageSpeedDetails = () => {
? theme.palette.warning.main
: score >= 0
? theme.palette.error.contrastText
: theme.palette.unresolved.main;
: theme.palette.tertiary.main;
// Find the position where the number ends and the unit begins
const match = audit.displayValue.match(/(\d+\.?\d*)\s*([a-zA-Z]+)/);

19
Client/src/Pages/PageSpeed/card.jsx
View File

@@ -81,6 +81,7 @@ CustomToolTip.propTypes = {
payload: PropTypes.array,
};
/* TODO separate utils in folder*/
/**
* Processes the raw data to include a score for each entry.
* @param {Array<Object>} data - The raw data array.
@@ -104,6 +105,7 @@ const processData = (data) => {
return formattedData;
};
/* TODO separate component*/
/**
* Renders an area chart displaying page speed scores.
* @param {Object} props
@@ -114,7 +116,9 @@ const processData = (data) => {
const PagespeedAreaChart = ({ data, status }) => {
const theme = useTheme();
const [isHovered, setIsHovered] = useState(false);
const { pagespeedStyles } = useUtils();
const { statusToTheme } = useUtils();
const themeColor = statusToTheme[status];
const formattedData = processData(data);
@@ -154,24 +158,24 @@ const PagespeedAreaChart = ({ data, status }) => {
>
<stop
offset="0%"
stopColor={pagespeedStyles[status].stroke}
stopColor={theme.palette[themeColor].lowContrast}
stopOpacity={0.8}
/>
<stop
offset="100%"
stopColor={pagespeedStyles[status].light}
stopColor={theme.palette[themeColor].main}
stopOpacity={0}
/>
</linearGradient>
</defs>
<Area
dataKey="score"
stroke={pagespeedStyles[status].stroke}
stroke={theme.palette[themeColor].lowContrast}
strokeWidth={isHovered ? 2.5 : 1.5}
fill={`url(#pagespeed-chart-${status})`}
activeDot={{
stroke: pagespeedStyles[status].light,
fill: pagespeedStyles[status].stroke,
stroke: theme.palette[themeColor].main,
fill: theme.palette[themeColor].lowContrast,
r: 4.5,
}}
/>
@@ -192,6 +196,7 @@ PagespeedAreaChart.propTypes = {
status: PropTypes.string.isRequired,
};
/* TODO separate component */
/**
* Renders a card displaying monitor details and an area chart.
* @param {Object} props
@@ -289,7 +294,7 @@ const Card = ({ monitor }) => {
>
<Typography
fontSize={11}
color={"red" /* theme.palette.text.accent */}
color={theme.palette.primary.contrastTextSecondary}
>
Checking every{" "}
{(() => {

2
Client/src/Pages/PageSpeed/index.jsx
View File

@@ -91,7 +91,7 @@ const PageSpeed = () => {
{isAdmin && (
<Button
variant="contained"
color="primary"
color="accent"
onClick={() => navigate("/pagespeed/create")}
sx={{ fontWeight: 500, whiteSpace: "nowrap" }}
>

2
Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx
View File

@@ -58,7 +58,7 @@ const DownBarChart = memo(({ stats, type, onBarHover }) => {
hoveredBarIndex === index
? theme.palette.error.main
: chartHovered
? theme.palette.error.light
? theme.palette.error.contrastText
: theme.palette.error.main
}
onMouseEnter={() => {

4
Client/src/Pages/Uptime/Details/Charts/ResponseGaugeChart.jsx
View File

@@ -29,12 +29,12 @@ const ResponseGaugeChart = ({ avgResponseTime }) => {
? {
category: "Acceptable",
main: theme.palette.warning.main,
bg: theme.palette.warning.dark,
bg: theme.palette.warning.lowContrast,
}
: {
category: "Poor",
main: theme.palette.error.main,
bg: theme.palette.error.light,
bg: theme.palette.error.contrastText,
};
return (

26
Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx
View File

@@ -4,18 +4,28 @@ import { ResponsiveContainer, BarChart, XAxis, Bar, Cell } from "recharts";
import PropTypes from "prop-types";
import CustomLabels from "./CustomLabels";
const getThemeColor = (responseTime) => {
if (responseTime < 200) {
return "success";
} else if (responseTime < 300) {
return "warning";
} else {
return "error";
}
};
const UpBarChart = memo(({ stats, type, onBarHover }) => {
const theme = useTheme();
const [chartHovered, setChartHovered] = useState(false);
const [hoveredBarIndex, setHoveredBarIndex] = useState(null);
const getColorRange = (responseTime) => {
/* const getColorRange = (responseTime) => {
return responseTime < 200
? { main: theme.palette.success.main, light: theme.palette.success.light }
: responseTime < 300
? { main: theme.palette.warning.main, light: theme.palette.warning.light }
: { main: theme.palette.error.main, light: theme.palette.error.light };
};
}; */
return (
<ResponsiveContainer
@@ -59,11 +69,19 @@ const UpBarChart = memo(({ stats, type, onBarHover }) => {
background={{ fill: "transparent" }}
>
{stats.upChecks.map((entry, index) => {
let { main, light } = getColorRange(entry.avgResponseTime);
/* let { main, light } = getColorRange(entry.avgResponseTime); */
const themeColor = getThemeColor(entry.avgResponseTime);
console.log(themeColor);
return (
<Cell
key={`cell-${entry.time}`}
fill={hoveredBarIndex === index ? main : chartHovered ? light : main}
fill={
hoveredBarIndex === index
? theme.palette[themeColor].main
: chartHovered
? theme.palette[themeColor].accent
: theme.palette[themeColor].main
}
onMouseEnter={() => {
setHoveredBarIndex(index);
onBarHover(entry);

7
Client/src/Pages/Uptime/Details/index.jsx
View File

@@ -33,7 +33,7 @@ import ResponseGaugeChart from "./Charts/ResponseGaugeChart";
*/
const DetailsPage = () => {
const theme = useTheme();
const { statusColor, statusStyles, statusMsg, determineState } = useUtils();
const { statusColor, statusMsg, determineState } = useUtils();
const isAdmin = useIsAdmin();
const [monitor, setMonitor] = useState({});
const { monitorId } = useParams();
@@ -236,7 +236,10 @@ const DetailsPage = () => {
gap={theme.spacing(8)}
>
<StatBox
sx={statusStyles[determineState(monitor)]}
/* sx={getStatusStyles(determineState(monitor))} */
/* statusStyles[determineState(monitor)] */
gradient={true}
status={determineState(monitor)}
heading={"active for"}
subHeading={splitDuration(monitor?.stats?.timeSinceLastFalseCheck)}
/>

7
Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx
View File

@@ -26,7 +26,12 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) =>
alignItems="center"
mb={theme.spacing(8)}
>
<Heading component="h2">Uptime monitors</Heading>
<Heading
component="h2"
style={{ color: theme.palette.primary.contrastTextSecondary }}
>
Uptime monitors
</Heading>
<Box
className="current-monitors-counter"

39
Client/src/Pages/Uptime/Home/index.jsx
View File

@@ -72,45 +72,6 @@ const UptimeMonitors = () => {
>
Create new
</Button>
<Button
variant="contained"
color="success"
onClick={() => {
navigate("/uptime/create");
}}
sx={{
fontWeight: 500,
whiteSpace: "nowrap",
}}
>
Create new
</Button>
<Button
variant="contained"
color="warning"
onClick={() => {
navigate("/uptime/create");
}}
sx={{
fontWeight: 500,
whiteSpace: "nowrap",
}}
>
Create new
</Button>
<Button
variant="contained"
color="error"
onClick={() => {
navigate("/uptime/create");
}}
sx={{
fontWeight: 500,
whiteSpace: "nowrap",
}}
>
Create new
</Button>
</>
)}
</Stack>

53
Client/src/Pages/Uptime/utils.jsx
View File

@@ -32,8 +32,34 @@ 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
See Client\src\Components\Label\index.jsx
*/
const statusToTheme = {
up: "success",
down: "error",
paused: "warning",
pending: "secondary",
"cannot resolve": "tertiary",
};
const getStatusStyles = (status) => {
const themeColor = statusToTheme[status];
return {
backgroundColor: theme.palette[themeColor].lowContrast,
background: `linear-gradient(340deg, ${theme.palette[themeColor].main} -60%, ${theme.palette[themeColor].lowContrast} 35%)`,
borderColor: theme.palette[themeColor].lowContrast,
"& h2": {
color: theme.palette[themeColor].contrastText,
textTransform: "uppercase",
},
"& p": {
color: theme.palette[themeColor].contrastText,
},
};
};
const statusStyles = {
up: {
backgroundColor: theme.palette.success.lowContrast,
@@ -64,36 +90,15 @@ const useUtils = () => {
/* 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,
light: theme.palette.success.light,
stroke: theme.palette.success.main,
},
down: {
bg: theme.palette.error.dark,
light: theme.palette.error.light,
stroke: theme.palette.error.main,
},
paused: {
bg: theme.palette.warning.dark,
light: theme.palette.warning.light,
stroke: theme.palette.warning.main,
},
pending: {
bg: theme.palette.warning.dark,
light: theme.palette.warning.light,
stroke: theme.palette.warning.main,
},
};
return {
determineState,
statusColor,
statusMsg,
pagespeedStatusMsg,
pagespeedStyles,
statusStyles,
statusToTheme,
getStatusStyles,
};
};

55
Client/src/Utils/Theme/constants.js
View File

@@ -97,32 +97,18 @@ const newColors = {
green200: "#4B9B77",
green400: "#079455",
green700: "#026513",
orange100: "#CCB368",
orange400: "#FD8F22",
orange100: "#FD8F22",
orange200: "#D69A5D",
orange600: "#9B734B",
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,
},
}, */
orange700: "#884605",
red100: "#F27C7C",
red400: "#D92020",
red600: "#9B4B4B",
red700: "#980303",
};
/* Structure:
Key:
/*
Structure:
main: background color
contrastText: color for main contrast text
contrastTextSecondary: if needed
@@ -200,14 +186,14 @@ const newSemanticColors = {
warning: {
main: {
light: newColors.orange700,
dark: newColors.orange100,
dark: newColors.orange200,
},
contrastText: {
light: newColors.offWhite,
dark: newColors.offBlack,
},
lowContrast: {
light: newColors.orange400,
light: newColors.orange100,
dark: newColors.orange600,
},
},
@@ -248,33 +234,6 @@ const newSemanticColors = {
dark: paletteColors.gray850,
},
},
unresolved: {
main: {
light: paletteColors.blue700,
dark: paletteColors.purple300,
},
},
};
export { typographyLevels, semanticColors as colors, newSemanticColors };
/* TODO
Look up for
success.contrastText
warning.contrastText
error.contrastText
"red"
"white"
{ text, bg, border }
.light
.dark
theme.palette.unresolved (will become tertiary)
*/

55
Client/src/Utils/Theme/darkTheme.js
View File

@@ -11,58 +11,3 @@ const darkTheme = createTheme({
});
export default darkTheme;
// action: {
// disabled: primary.lowContrast.disabled,
// },
// /* 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: primary.lowContrast.dark,
// },
// info: {
// text: text.primary.dark,
// main: text.secondary.dark,
// bg: background.main.dark,
// light: background.main.dark,
// border: border.light.dark,
// },
// };

4
Client/src/Utils/Theme/globalTheme.js
View File

@@ -32,9 +32,9 @@ const baseTheme = (palette) => ({
fontWeight: 400,
},
},
/* TODO we can skip using the callback functions on the next lines since we are already accessing it on line 10. That was the last thing I managed to do, so we are sort of doing it twice*/
/* TODO change to 4 */
spacing: 2,
/* TODO we can skip using the callback functions on the next lines since we are already accessing it on line 10. That was the last thing I managed to do, so we are sort of doing it twice*/
/* TODO All these should live inside of a component*/
components: {
MuiButton: {

60
Client/src/Utils/Theme/lightTheme.js
View File

@@ -5,69 +5,9 @@ import { extractThemeColors } from "./extractColorObject";
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,
...baseTheme(palette),
});
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')
*/
// action: {
// disabled: border.light.disabled,
// },
// 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: primary.lowContrast.light,
// },
// info: {
// text: text.primary.light,
// main: text.tertiary.light,
// bg: background.main.light,
// light: background.main.light,
// border: primary.lowContrast.light,
// },
// };