mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-04-27 03:59:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: changed a whole bunch of colors

Browse Source
This commit is contained in:
Caio Cabral
2025-01-11 17:21:10 -05:00
parent 3b1657c415
commit 74c598e191
13 changed files with 43 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/src/Components/TabPanels/Account/TeamPanel.jsx
+3 -2
View File
@@ -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 */,
},
}}
>
Client/src/Pages/Auth/CheckEmail.jsx
+2 -1
View File
@@ -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" },
}}
>
Client/src/Pages/Auth/ForgotPassword.jsx
+2 -1
View File
@@ -96,7 +96,8 @@ const ForgotPassword = () => {
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
/* TODO set color */
color: "red" /* theme.palette.text.accent */,
},
}}
>
Client/src/Pages/Auth/Login/Login.jsx
+1 -1
View File
@@ -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" },
}}
>
Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+2 -1
View File
@@ -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 */ },
}}
>
<Box
Client/src/Pages/Auth/Register/Register.jsx
+2 -1
View File
@@ -285,7 +285,8 @@ const Register = ({ isSuperAdmin }) => {
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" },
}}
>
Client/src/Pages/Auth/SetNewPassword.jsx
+2 -1
View File
@@ -75,7 +75,8 @@ const SetNewPassword = () => {
},
"& p": {
fontSize: 14,
color: theme.palette.text.accent,
/* TODO set color */
color: "red" /* theme.palette.text.accent */,
},
}}
>
Client/src/Pages/PageSpeed/card.jsx
+1 -1
View File
@@ -289,7 +289,7 @@ const Card = ({ monitor }) => {
>
<Typography
fontSize={11}
color={theme.palette.text.accent}
color={"red" /* theme.palette.text.accent */}
>
Checking every{" "}
{(() => {
Client/src/Pages/Uptime/Home/StatusBox.jsx
+15 -13
View File
@@ -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}
</Box>
@@ -84,15 +83,18 @@ const StatusBox = ({ title, value }) => {
gap="2px"
>
{value}
{/*
TODO check with team if this is needed
<Typography
component="span"
fontSize={20}
fontWeight={300}
color={theme.palette.primary.contrastText.secondary}
sx={{ opacity: 0.3 }}
>
#
</Typography>
component="span"
fontSize={20}
fontWeight={300}
color={theme.palette.primary.contrastText.secondary}
sx={{ opacity: 0.3 }}
>
#
</Typography> */}
</Stack>
</Box>
);
Client/src/Utils/Theme/constants.js
+11 -175
View File
@@ -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
*/
Client/src/Utils/Theme/darkTheme.js
-50
View File
@@ -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,
Client/src/Utils/Theme/lightTheme.js
-52
View File
@@ -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,
Client/src/Utils/greeting.jsx
+2 -1
View File
@@ -163,6 +163,7 @@ const Greeting = ({ type = "" }) => {
<Typography
component="span"
fontSize="inherit"
color={theme.palette.primary.contrastText.tertiary}
>
{prepend},{" "}
</Typography>
@@ -178,7 +179,7 @@ const Greeting = ({ type = "" }) => {
<Typography
variant="h2"
lineHeight={1}
color={theme.palette.text.accent}
color={theme.palette.primary.contrastText.tertiary}
>
{append} — Here’s an overview of your {type} monitors.
</Typography>