feat: changing background accent for tertiary main

This commit is contained in:
Caio Cabral
2025-01-11 16:50:48 -05:00
parent 6bb38c9339
commit c0df164e46
14 changed files with 25 additions and 24 deletions

View File

@@ -32,13 +32,16 @@ const Avatar = ({ src, small, sx }) => {
return (
<MuiAvatar
alt={`${user?.firstName} ${user?.lastName}`}
/* TODO What is the /static/images/avatar/2.jpg ?*/
src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
sx={{
fontSize: small ? "16px" : "22px",
color: "white",
fontWeight: 400,
backgroundColor: theme.palette.primary.main, // Same BG color as checkmate BG in sidebar
color: theme.palette.accent.contrastText,
backgroundColor: theme.palette.accent.main, // Same BG color as checkmate BG in sidebar
display: "inline-flex",
/*
TODO not sure what this is for*/
"&::before": {
content: `""`,
position: "absolute",
@@ -54,7 +57,7 @@ const Avatar = ({ src, small, sx }) => {
}}
>
{user.firstName?.charAt(0)}
{user.lastName?.charAt(0) || ''}
{user.lastName?.charAt(0) || ""}
</MuiAvatar>
);
};

View File

@@ -50,7 +50,7 @@ const IconBox = styled(Box)(
borderStyle: "solid",
borderColor: theme.palette.primary.lowContrast,
borderRadius: borderRadius,
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
"& svg": {
position: "absolute",
top: "50%",

View File

@@ -90,7 +90,7 @@ const Checkbox = ({
mr: theme.spacing(6),
},
"&:not(:has(.Mui-disabled)):hover": {
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
},
"& span.MuiTypography-root": {
fontSize: 13,

View File

@@ -69,7 +69,7 @@ const Radio = (props) => {
m: theme.spacing(-2.5),
borderRadius: theme.shape.borderRadius,
"&:hover": {
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
},
"& .MuiButtonBase-root": {
p: 0,

View File

@@ -13,7 +13,7 @@ export const HttpAdornment = ({ https }) => {
height="100%"
sx={{
borderRight: `solid 1px ${theme.palette.primary.lowContrast}`,
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
pl: theme.spacing(6),
}}
>

View File

@@ -157,7 +157,6 @@ function Sidebar() {
}, [location]);
/* TODO refactor this, there are a some ternaries and comments in the return */
return (
<Stack
component="aside"
@@ -170,9 +169,8 @@ function Sidebar() {
borderRadius: theme.shape.borderRadius,
/* TODO selected item */
"& .selected-path": {
/* TODO lookup theme.palette.background.accent */
backgroundColor:
theme.palette.secondary.main /* theme.palette.background.accent */,
/* TODO lookup theme.palette.tertiary.main */
backgroundColor: theme.palette.secondary.main /* theme.palette.tertiary.main */,
/* TODO not working */
color: theme.palette.primary.main,
@@ -383,7 +381,7 @@ function Sidebar() {
sx={{
ml: theme.spacing(8),
"& .selected-path": {
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
},
}}
>

View File

@@ -40,7 +40,7 @@ const StatBox = ({ heading, subHeading, sx }) => {
borderColor: theme.palette.primary.lowContrast,
borderRadius: 4,
backgroundColor: theme.palette.background.main,
/* background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`, */
/* background: `linear-gradient(340deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`, */
"& h2": {
fontSize: 13,
fontWeight: 500,

View File

@@ -232,21 +232,21 @@ function Infrastructure() {
color={theme.palette.primary.contrastText.main}
border={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.background.accent}
backgroundColor={theme.palette.tertiary.main}
>
{totalMonitors}
</Box>
</Stack>
<TableContainer component={Paper}>
<Table stickyHeader>
<TableHead sx={{ backgroundColor: theme.palette.background.accent }}>
<TableHead sx={{ backgroundColor: theme.palette.tertiary.main }}>
<TableRow>
{columns.map((column, index) => (
<TableCell
key={index}
align={index === 0 ? "left" : "center"}
sx={{
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
}}
>
{column.label}
@@ -263,7 +263,7 @@ function Infrastructure() {
sx={{
cursor: "pointer",
"&:hover": {
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
},
}}
>

View File

@@ -319,7 +319,7 @@ const PageSpeedConfigure = () => {
gap={theme.spacing(20)}
sx={{
".MuiInputBase-root:has(> .Mui-disabled)": {
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
},
}}
>

View File

@@ -34,7 +34,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
borderLeftColor: theme.palette.primary.lowContrast,
borderRadius: 16,
backgroundColor: theme.palette.background.main,
background: `linear-gradient(325deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,
background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.background.main} 45%)`,
},
"& path": {
transition: "stroke-width 400ms ease",

View File

@@ -225,7 +225,7 @@ const Card = ({ monitor }) => {
gridTemplateRows: "34px 1fr 3fr",
cursor: "pointer",
"&:hover": {
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
},
"& path": {
transition: "stroke-width 400ms ease",
@@ -279,7 +279,7 @@ const Card = ({ monitor }) => {
borderTop={1}
borderRight={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.background.accent}
backgroundColor={theme.palette.tertiary.main}
sx={{
pointerEvents: "none",
userSelect: "none",

View File

@@ -116,7 +116,7 @@ const PageSpeed = () => {
color={theme.palette.primary.contrastText.main}
border={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.background.accent}
backgroundColor={theme.palette.tertiary.main}
>
{monitorCount}
</Box>

View File

@@ -33,7 +33,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) =>
color={theme.palette.primary.contrastText.main}
border={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.background.accent}
backgroundColor={theme.palette.tertiary.main}
>
{totalMonitors}
</Box>

View File

@@ -189,7 +189,7 @@ const baseTheme = (palette) => ({
MuiTableHead: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.background.accent,
backgroundColor: theme.palette.tertiary.main,
}),
},
},