TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: changing green for light mode

Browse Source
This commit is contained in:
Caio Cabral committed 2025-01-11 11:49:02 -05:00
1 parent 78340ce63b
commit 059927cc20
4 files changed
+65 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Components/Sidebar/index.css
+1
View File
@@ -1,3 +1,4 @@
/* TODO */
aside .MuiList-root svg {
width: 20px;
height: 20px;
Client/src/Components/Sidebar/index.jsx
+52 -37
View File
@@ -168,9 +168,19 @@ function Sidebar() {
border: 1,
borderColor: theme.palette.primary.lowContrast,
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.main,
"& .selected-path, & .MuiListItemButton-root:hover": {
backgroundColor: theme.palette.background.accent,
/* TODO selected item */
"& .selected-path": {
/* TODO lookup theme.palette.background.accent */
backgroundColor:
theme.palette.secondary.main /* theme.palette.background.accent */,
/* TODO not working */
color: theme.palette.primary.main,
},
" & .MuiListItemButton-root:hover": {
backgroundColor: theme.palette.tertiary.main,
/* TODO try and change color */
color: theme.palette.secondary.main,
},
"& .MuiList-root svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
@@ -180,12 +190,48 @@ function Sidebar() {
},
}}
>
{/* TODO change for link */}
<IconButton
sx={{
position: "absolute",
/* TODO 60 is a magic number. if logo chnges size this might break */
top: 60,
right: 0,
transform: `translate(50%, 0)`,
backgroundColor: theme.palette.tertiary.main,
border: 1,
borderColor: theme.palette.primary.lowContrast,
p: theme.spacing(2.5),
"& svg": {
width: theme.spacing(8),
height: theme.spacing(8),
"& path": {
stroke: theme.palette.primary.contrastText.secondary,
},
},
"&:focus": { outline: "none" },
"&:hover": {
backgroundColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.primary.lowContrast,
},
}}
onClick={() => {
setOpen((prev) =>
Object.fromEntries(Object.keys(prev).map((key) => [key, false]))
);
dispatch(toggleSidebar());
}}
>
{collapsed ? <ArrowRight /> : <ArrowLeft />}
</IconButton>
{/* TODO Alignment done using padding. Use single source of truth to that*/}
<Stack
pt={theme.spacing(6)}
pb={theme.spacing(12)}
pl={theme.spacing(8)}
>
{/* TODO Abstract logo into component */}
{/* TODO Turn logo into a link */}
<Stack
direction="row"
alignItems="center"
@@ -219,38 +265,6 @@ function Sidebar() {
Checkmate
</Typography>
</Stack>
<IconButton
sx={{
position: "absolute",
top: 60,
right: 0,
transform: `translate(50%, 0)`,
backgroundColor: theme.palette.primary.lowContrast,
border: 1,
borderColor: theme.palette.primary.lowContrast,
p: theme.spacing(2.5),
"& svg": {
width: theme.spacing(8),
height: theme.spacing(8),
"& path": {
stroke: theme.palette.primary.contrastText.secondary,
},
},
"&:focus": { outline: "none" },
"&:hover": {
backgroundColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.primary.lowContrast,
},
}}
onClick={() => {
setOpen((prev) =>
Object.fromEntries(Object.keys(prev).map((key) => [key, false]))
);
dispatch(toggleSidebar());
}}
>
{collapsed ? <ArrowRight /> : <ArrowLeft />}
</IconButton>
</Stack>
{/* menu */}
<List
@@ -258,6 +272,7 @@ function Sidebar() {
aria-labelledby="nested-menu-subheader"
disablePadding
subheader={
/* TODO Increase Menu bottom spacing */
<ListSubheader
component="div"
id="nested-menu-subheader"
@@ -300,7 +315,7 @@ function Sidebar() {
className={location.pathname.includes(item.path) ? "selected-path" : ""}
onClick={() => navigate(`/${item.path}`)}
sx={{
height: "37px",
/* TODO fixed height */ height: "37px",
gap: theme.spacing(4),
borderRadius: theme.shape.borderRadius,
px: theme.spacing(4),
Client/src/Pages/Uptime/utils.jsx
+11 -24
View File
@@ -28,47 +28,34 @@ const useUtils = () => {
down: "Inactive",
paused: "Paused",
};
/* This is used on
1) Details > Gradient card */
const statusStyles = {
up: {
backgroundColor: theme.palette.success.accent /* dark */,
backgroundColor: theme.palette.success.accent,
background: `linear-gradient(340deg, ${theme.palette.success.accent} -60%, ${theme.palette.success.contrastText} 35%)`,
borderColor: theme.palette.success.light,
borderColor: theme.palette.success.contrastText,
"& h2": { color: theme.palette.success.main },
},
/* TODO solve remaining gradients */
down: {
backgroundColor: theme.palette.error.accent /* dark */,
background: `linear-gradient(340deg, ${theme.palette.error.accent} -60%, ${theme.palette.error.contrastText} 35%)`,
borderColor: theme.palette.error.light,
borderColor: theme.palette.error.contrastText,
"& h2": { color: theme.palette.error.main },
} /* {
backgroundColor: theme.palette.error.dark,
background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.dark} 35%)`,
borderColor: theme.palette.error.light,
"& h2": { color: theme.palette.error.main },
}, */,
},
paused: {
backgroundColor: theme.palette.warning.accent /* dark */,
background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`,
borderColor: theme.palette.warning.light,
borderColor: theme.palette.warning.contrastText,
"& h2": { color: theme.palette.warning.main },
} /* {
backgroundColor: theme.palette.warning.dark,
background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.dark} 35%)`,
borderColor: theme.palette.warning.light,
"& h2": { color: theme.palette.warning.main },
} */,
},
pending: {
backgroundColor: theme.palette.warning.accent /* dark */,
background: `linear-gradient(340deg, ${theme.palette.warning.accent} -60%, ${theme.palette.warning.contrastText} 35%)`,
borderColor: theme.palette.warning.light,
borderColor: theme.palette.warning.contrastText,
"& h2": { color: theme.palette.warning.main },
} /* {
backgroundColor: theme.palette.warning.light,
background: `linear-gradient(340deg, ${theme.palette.warning.dark} -60%, ${theme.palette.warning.light} 35%)`,
borderColor: theme.palette.warning.dark,
"& h2": { color: theme.palette.warning.main },
}, */,
},
};
const pagespeedStyles = {
up: {
Client/src/Utils/Theme/constants.js
+1 -1
View File
@@ -270,7 +270,7 @@ const newColors = {
green100: "#8CFFCB",
green200: "#4B9B77",
green400: "#079455",
green700: "#19543A",
green700: "#026513",
orange100: "#FFE5CC",
orange400: "#FD8F22",
orange600: "#9B734B",