mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-22 01:29:57 -06:00
feat: changing background accent for tertiary main
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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%",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -189,7 +189,7 @@ const baseTheme = (palette) => ({
|
||||
MuiTableHead: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.accent,
|
||||
backgroundColor: theme.palette.tertiary.main,
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user