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

feat: simplify and adjust status label

Browse Source
This commit is contained in:
Caio Cabral
2025-01-12 09:39:31 -05:00
parent 5eca39cd04
commit 61aaa8489a
58 changed files with 266 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Client/src/Components/BasicTable/index.jsx
View File

@@ -251,7 +251,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
px={theme.spacing(4)}
sx={{
"& p": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>
@@ -305,9 +305,9 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
}}
sx={{
mt: theme.spacing(6),
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.3,
},
"& .MuiSelect-select": {

8
Client/src/Components/Charts/BarChart/index.jsx
View File

@@ -68,8 +68,8 @@ const BarChart = ({ checks = [] }) => {
height={theme.spacing(4)}
backgroundColor={
check.status
? theme.palette.success.accent
: theme.palette.error.accent
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast
}
sx={{ borderRadius: "50%" }}
/>
@@ -159,7 +159,9 @@ const BarChart = ({ checks = [] }) => {
width="100%"
height={`${animate ? check.responseTime : 0}%`}
backgroundColor={
check.status ? theme.palette.success.accent : theme.palette.error.accent
check.status
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast
}
sx={{
borderRadius: theme.spacing(1.5),

6
Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
View File

@@ -36,7 +36,7 @@ const CustomToolTip = ({ active, payload, label }) => {
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -58,7 +58,7 @@ const CustomToolTip = ({ active, payload, label }) => {
ml={theme.spacing(3)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
@@ -114,7 +114,7 @@ const CustomTick = ({ x, y, payload, index }) => {
x={x}
y={y + 10}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>

12
Client/src/Components/Charts/Utils/chartUtils.jsx
View File

@@ -23,7 +23,7 @@ export const TzTick = ({ x, y, payload, index }) => {
x={x}
y={y + 10}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>
@@ -57,7 +57,7 @@ export const PercentTick = ({ x, y, payload, index }) => {
x={x - 20}
y={y}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>
@@ -128,7 +128,7 @@ export const InfrastructureTooltip = ({
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -150,7 +150,7 @@ export const InfrastructureTooltip = ({
ml={theme.spacing(3)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
@@ -208,7 +208,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -227,7 +227,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
ml={theme.spacing(3)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},

2
Client/src/Components/Check/Check.jsx
View File

@@ -51,7 +51,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
sx={{
color:
variant === "info"
? theme.palette.primary.contrastText.tertiary
? theme.palette.primary.contrastTextTertiary
: colors[variant],
opacity: 0.8,
}}

4
Client/src/Components/ConfigBox/index.jsx
View File

@@ -28,10 +28,10 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
paddingLeft: theme.spacing(18),
},
"& h1, & h2": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
"& p": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}));

4
Client/src/Components/Dialog/genericDialog.jsx
View File

@@ -37,7 +37,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
id={titleId}
component="h2"
fontSize={16}
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
fontWeight={600}
>
{title}
@@ -45,7 +45,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
{description && (
<Typography
id={descriptionId}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{description}
</Typography>

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

@@ -54,7 +54,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
<Typography
component="h1"
marginY={theme.spacing(4)}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{vowelStart ? "An" : "A"} {title} is used to:
</Typography>

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

@@ -59,7 +59,7 @@ const IconBox = styled(Box)(
width: svgWidth,
height: svgHeight,
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
},
})

4
Client/src/Components/Inputs/Checkbox/index.jsx
View File

@@ -94,10 +94,10 @@ const Checkbox = ({
},
"& span.MuiTypography-root": {
fontSize: 13,
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
".MuiFormControlLabel-label.Mui-disabled": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
opacity: 0.25,
},
}}

6
Client/src/Components/Inputs/Image/index.jsx
View File

@@ -94,7 +94,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
</IconButton>
<Typography
component="h2"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
<Typography
component="span"
@@ -108,7 +108,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
</Typography>
<Typography
component="p"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
sx={{ opacity: 0.6 }}
>
(maximum size: 3MB)
@@ -117,7 +117,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
</Box>
<Typography
component="p"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
sx={{ opacity: 0.6 }}
>
Supported formats: JPG, PNG

4
Client/src/Components/Inputs/Radio/index.jsx
View File

@@ -43,7 +43,7 @@ const Radio = (props) => {
height: 16,
boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.main}`,
"&:not(.Mui-checked)": {
boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText.main}70`, // Use theme text color for the outline
boxShadow: `inset 0 0 0 1px ${theme.palette.primary.contrastText}70`, // Use theme text color for the outline
},
mt: theme.spacing(0.5),
}}
@@ -56,7 +56,7 @@ const Radio = (props) => {
<Typography
component="h6"
mt={theme.spacing(1)}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
{props.desc}
</Typography>

8
Client/src/Components/Inputs/Search/index.jsx
View File

@@ -27,7 +27,7 @@ const SearchAdornment = () => {
width: 16,
height: 16,
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.2,
},
},
@@ -80,7 +80,7 @@ const Search = ({
<Typography
component="h3"
fontSize={"var(--env-var-font-size-medium)"}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
fontWeight={500}
>
{label}
@@ -157,7 +157,7 @@ const Search = ({
sx: {
"& ul": { p: 2, backgroundColor: theme.palette.primary.main },
"& li.MuiAutocomplete-option": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
px: 4,
borderRadius: theme.shape.borderRadius,
},
@@ -168,7 +168,7 @@ const Search = ({
},
"& li.MuiAutocomplete-option:hover:not([aria-selected='true'])": {
color: theme.palette.primary.main,
backgroundColor: theme.palette.primary.contrastText.secondary,
backgroundColor: theme.palette.primary.contrastTextSecondary,
},
"& .MuiAutocomplete-noOptions": {
px: theme.spacing(6),

6
Client/src/Components/Inputs/Select/index.jsx
View File

@@ -54,7 +54,7 @@ const Select = ({
const theme = useTheme();
const itemStyles = {
fontSize: "var(--env-var-font-size-medium)",
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
borderRadius: theme.shape.borderRadius,
margin: theme.spacing(2),
};
@@ -67,7 +67,7 @@ const Select = ({
{label && (
<Typography
component="h3"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
fontWeight={500}
fontSize={13}
>
@@ -95,7 +95,7 @@ const Select = ({
borderColor: theme.palette.primary.lowContrast,
},
"& svg path": {
fill: theme.palette.primary.contrastText.tertiary,
fill: theme.palette.primary.contrastTextTertiary,
},
...sx,
}}

2
Client/src/Components/Inputs/TextInput/Adornments/index.jsx
View File

@@ -20,7 +20,7 @@ export const HttpAdornment = ({ https }) => {
<Typography
component="h5"
paddingRight={"var(--env-var-spacing-1-minus)"}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
sx={{ lineHeight: 1, opacity: 0.8 }}
>
{https ? "https" : "http"}://

2
Client/src/Components/Inputs/TextInput/index.jsx
View File

@@ -101,7 +101,7 @@ const TextInput = forwardRef(
<Typography
component="h3"
fontSize={"var(--env-var-font-size-medium)"}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
fontWeight={500}
>
{label}

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

@@ -31,8 +31,8 @@ const BaseLabel = ({ label, styles, children }) => {
className="label"
sx={{
borderRadius: borderRadius,
border: `1px solid ${theme.palette.primary.contrastText.tertiary}`,
color: theme.palette.primary.contrastText.tertiary,
border: `1px solid ${theme.palette.primary.contrastTextTertiary}`,
color: theme.palette.primary.contrastTextTertiary,
padding: padding,
...styles,
}}
@@ -122,55 +122,58 @@ ColoredLabel.propTypes = {
* <StatusLabel status="up" text="Active" />
*/
/* TODO check design aspect with Gorkem */
const statusToTheme = {
up: "success",
down: "error",
paused: "warning",
pending: "secondary",
"cannot resolve": "tertiary",
};
const StatusLabel = ({ status, text, customStyles }) => {
const theme = useTheme();
const colors = {
/* const colors = {
up: {
dotColor: theme.palette.success.main,
/* bgColor: theme.palette.success.contrastText */ /* dark */
borderColor: theme.palette.success.main /* light */,
borderColor: theme.palette.success.main ,
},
down: {
dotColor: theme.palette.error.main,
/* TODO Look for dark and light, they still work */
/* bgColor: theme.palette.primary.lowContrast, */
borderColor: theme.palette.error.light,
},
paused: {
dotColor: theme.palette.warning.main,
/* bgColor: theme.palette.warning.dark, */
borderColor: theme.palette.warning.light,
},
pending: {
dotColor: theme.palette.primary.contrastText.secondary,
bgColor: theme.palette.primary.main,
dotColor: theme.palette.primary.contrastTextSecondary,
borderColor: theme.palette.primary.lowContrast,
},
"cannot resolve": {
dotColor: theme.palette.unresolved.main,
bgColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.unresolved.light,
},
};
}; */
const themeColor = statusToTheme[status];
// Look up the color for the status
const { borderColor, bgColor, dotColor } = colors[status];
/* const { borderColor, bgColor, dotColor } = colors[status]; */
return (
<BaseLabel
label={text}
styles={{
color: dotColor,
backgroundColor: bgColor,
borderColor: borderColor,
color: theme.palette[themeColor].main /* dotColor */,
/*backgroundColor: bgColor, */
borderColor: theme.palette[themeColor].lowContrast /* borderColor */,
...customStyles,
}}
>
<Box
width={7}
height={7}
bgcolor={dotColor}
bgcolor={theme.palette[themeColor].lowContrast /* dotColor */}
borderRadius="50%"
marginRight="5px"
/>

8
Client/src/Components/Link/index.jsx
View File

@@ -16,22 +16,22 @@ const Link = ({ level, label, url }) => {
const levelConfig = {
primary: {},
secondary: {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
sx: {
":hover": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
},
},
tertiary: {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
sx: {
textDecoration: "underline",
textDecorationStyle: "dashed",
textDecorationColor: theme.palette.primary.main,
textUnderlineOffset: "1px",
":hover": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
textDecorationColor: theme.palette.primary.main,
backgroundColor: theme.palette.primary.lowContrast,
},

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

@@ -71,7 +71,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
width: 23,
height: 23,
"& path": {
fill: theme.palette.primary.contrastText.tertiary,
fill: theme.palette.primary.contrastTextTertiary,
},
},
}}
@@ -90,7 +90,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
{error}
</Typography>
) : (
<Box color={theme.palette.primary.contrastText.tertiary}>
<Box color={theme.palette.primary.contrastTextTertiary}>
<Typography
component="h2"
mb={theme.spacing(1.5)}

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

@@ -156,7 +156,7 @@ function Sidebar() {
}
}, [location]);
const iconColor = theme.palette.primary.contrastText.tertiary;
const iconColor = theme.palette.primary.contrastTextTertiary;
/* TODO refactor this, there are a some ternaries and comments in the return */
return (
@@ -178,7 +178,7 @@ function Sidebar() {
Text color for unselected menu items and menu headings
Secondary contrast text against main background
*/
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
"& .MuiList-root svg path": {
/* Menu Icons */
@@ -228,7 +228,7 @@ function Sidebar() {
height: theme.spacing(8),
"& path": {
/* TODO this should be set at the top level if possible */
stroke: theme.palette.primary.contrastText.secondary,
stroke: theme.palette.primary.contrastTextSecondary,
},
},
"&:focus": { outline: "none" },
@@ -443,7 +443,7 @@ function Sidebar() {
/* TODO this has no effect? */
"& svg": {
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.1,
},
},
@@ -536,7 +536,7 @@ function Sidebar() {
},
"&.selected-path::after": {
/* TODO what is this selector doing? */
backgroundColor: theme.palette.primary.contrastText.tertiary,
backgroundColor: theme.palette.primary.contrastTextTertiary,
transform: "scale(1.2)",
},
}}

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

@@ -44,15 +44,15 @@ const StatBox = ({ heading, subHeading, sx }) => {
"& h2": {
fontSize: 13,
fontWeight: 500,
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
textTransform: "uppercase",
},
"& p": {
fontSize: 18,
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
marginTop: theme.spacing(2),
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
marginLeft: theme.spacing(2),
fontSize: 15,
},

2
Client/src/Components/TabPanels/Account/PasswordPanel.jsx
View File

@@ -115,7 +115,7 @@ const PasswordPanel = () => {
value="password"
sx={{
"& h1, & input": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>

2
Client/src/Components/TabPanels/Account/ProfilePanel.jsx
View File

@@ -216,7 +216,7 @@ const ProfilePanel = () => {
value="profile"
sx={{
"& h1, & p, & input": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>

4
Client/src/Components/TabPanels/Account/TeamPanel.jsx
View File

@@ -91,7 +91,7 @@ const TeamPanel = () => {
id: idx,
data: (
<Stack>
<Typography color={theme.palette.primary.contrastText.secondary}>
<Typography color={theme.palette.primary.contrastTextSecondary}>
{member.firstName + " " + member.lastName}
</Typography>
<Typography>
@@ -190,7 +190,7 @@ const TeamPanel = () => {
value="team"
sx={{
"& h1": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
"& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p":
{

4
Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx
View File

@@ -35,12 +35,12 @@ const SunAndMoonIcon = () => {
cx="12"
cy="12"
r="6"
fill={theme.palette.primary.contrastText.secondary}
fill={theme.palette.primary.contrastTextSecondary}
mask="url(#moon-mask)"
/>
<g
className="sun-beams"
stroke={theme.palette.primary.contrastText.secondary}
stroke={theme.palette.primary.contrastTextSecondary}
>
<line
x1="12"

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

@@ -84,7 +84,7 @@ const Account = ({ open = "profile" }) => {
tabIndex={index}
sx={{
fontSize: 13,
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
textTransform: "none",
minWidth: "fit-content",
minHeight: 0,

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

@@ -50,7 +50,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
"& svg": {
mr: theme.spacing(4),
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
},
"&:focus-visible": {
@@ -77,7 +77,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
}}
sx={{
"&:hover": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>
@@ -95,7 +95,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
}}
sx={{
"&:hover": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
},
}}
>

2
Client/src/Pages/Incidents/IncidentTable/Empty/Empty.jsx
View File

@@ -16,7 +16,7 @@ const Empty = ({ styles, mode }) => {
</Box>
<Typography
textAlign="center"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
No incidents recorded yet.
</Typography>

2
Client/src/Pages/Incidents/IncidentTable/index.jsx
View File

@@ -159,7 +159,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
</Box>
<Typography
textAlign="center"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
The monitor you have selected has no recorded incidents yet.
</Typography>

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

@@ -84,7 +84,7 @@ const Incidents = () => {
<Typography
display="inline-block"
component="h1"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
Incidents for
</Typography>

2
Client/src/Pages/Infrastructure/Details/empty.jsx
View File

@@ -19,7 +19,7 @@ const Empty = ({ styles }) => {
<Typography variant="h2">Your infrastructure dashboard will show here</Typography>
<Typography
textAlign="center"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
Hang tight! Data is loading
</Typography>

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

@@ -83,7 +83,7 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
outline: "none",
},
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
}}
ref={anchor}

4
Client/src/Pages/Infrastructure/components/TablePagination/index.jsx
View File

@@ -98,9 +98,9 @@ function Pagination({
},
}}
sx={{
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.3,
},
"& .MuiSelect-select": {

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

@@ -156,7 +156,7 @@ function Infrastructure() {
? theme.palette.percentage.uptimeFair
: monitor.uptimePercentage < 0.75
? theme.palette.percentage.uptimeGood
: theme.palette.success.accent;
: theme.palette.success.lowContrast;
return {
id: monitor._id,
name: monitor.name,
@@ -229,7 +229,7 @@ function Infrastructure() {
<Box
component="span"
className="current-monitors-counter"
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
border={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.tertiary.main}
@@ -313,7 +313,7 @@ function Infrastructure() {
<IconButton
sx={{
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
}}
>

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

@@ -126,7 +126,7 @@ const Integrations = () => {
gap={theme.spacing(2)}
sx={{
"& h1, & p": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
},
}}
>

2
Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
View File

@@ -394,7 +394,7 @@ const CreateMaintenance = () => {
py: 0,
mr: 0,
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.1,
},
"&:hover": { backgroundColor: "transparent" },

2
Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx
View File

@@ -95,7 +95,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
outline: "none",
},
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
}}
>

4
Client/src/Pages/Maintenance/MaintenanceTable/index.jsx
View File

@@ -329,9 +329,9 @@ const MaintenanceTable = ({
}}
sx={{
mt: theme.spacing(6),
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.3,
},
"& .MuiSelect-select": {

4
Client/src/Pages/PageSpeed/Configure/index.jsx
View File

@@ -249,7 +249,7 @@ const PageSpeedConfigure = () => {
width: 4,
height: 4,
borderRadius: "50%",
backgroundColor: theme.palette.primary.contrastText.tertiary,
backgroundColor: theme.palette.primary.contrastTextTertiary,
opacity: 0.8,
left: -10,
top: "50%",
@@ -276,7 +276,7 @@ const PageSpeedConfigure = () => {
"& svg": {
mr: theme.spacing(2),
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 0.1,
},
},

4
Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
View File

@@ -179,7 +179,7 @@ const CreatePageSpeed = () => {
className="create-monitor"
sx={{
"& h1": {
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
},
}}
>
@@ -207,7 +207,7 @@ const CreatePageSpeed = () => {
component="span"
fontSize="inherit"
fontWeight="inherit"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
PageSpeed monitor
</Typography>

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

@@ -64,7 +64,7 @@ const CustomToolTip = ({ active, payload, label, config }) => {
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -86,7 +86,7 @@ const CustomToolTip = ({ active, payload, label, config }) => {
mt={theme.spacing(1)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
@@ -186,7 +186,7 @@ const CustomTick = ({ x, y, payload, index }) => {
x={x}
y={y + 8}
textAnchor="middle"
fill={theme.palette.primary.contrastText.tertiary}
fill={theme.palette.primary.contrastTextTertiary}
fontSize={11}
fontWeight={400}
>

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

@@ -151,7 +151,7 @@ const PageSpeedDetails = () => {
width: 4,
height: 4,
borderRadius: "50%",
backgroundColor: theme.palette.primary.contrastText.tertiary,
backgroundColor: theme.palette.primary.contrastTextTertiary,
opacity: 0.8,
left: -9,
top: "50%",
@@ -175,7 +175,7 @@ const PageSpeedDetails = () => {
"& svg": {
mr: theme.spacing(3),
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
},
}}
@@ -410,7 +410,7 @@ const PageSpeedDetails = () => {
component="span"
fontSize={14}
fontWeight={500}
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
>
{value}
<Typography

4
Client/src/Pages/PageSpeed/Details/styled.jsx
View File

@@ -12,11 +12,11 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
borderBottomRightRadius: 16,
backgroundColor: theme.palette.primary.main,
"& h2": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
fontSize: 15,
fontWeight: 500,
},
"& p": { color: theme.palette.primary.contrastText.tertiary },
"& p": { color: theme.palette.primary.contrastTextTertiary },
"& > :nth-of-type(1)": {
gridColumn: 1,
gridRow: 1,

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

@@ -33,7 +33,7 @@ const CustomToolTip = ({ payload }) => {
>
<Typography
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 12,
fontWeight: 500,
}}
@@ -52,7 +52,7 @@ const CustomToolTip = ({ payload }) => {
mt={theme.spacing(1)}
sx={{
"& span": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 11,
fontWeight: 500,
},
@@ -299,7 +299,7 @@ const Card = ({ monitor }) => {
<Typography
component="span"
fontSize={12}
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
>
{time}{" "}
</Typography>

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

@@ -113,7 +113,7 @@ const PageSpeed = () => {
<Box
component="span"
className="current-monitors-counter"
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
border={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.tertiary.main}

4
Client/src/Pages/Uptime/Configure/index.jsx
View File

@@ -276,7 +276,7 @@ const Configure = () => {
width: 4,
height: 4,
borderRadius: "50%",
backgroundColor: theme.palette.primary.contrastText.tertiary,
backgroundColor: theme.palette.primary.contrastTextTertiary,
opacity: 0.8,
left: -10,
top: "50%",
@@ -307,7 +307,7 @@ const Configure = () => {
width: 22,
height: 22,
"& path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
strokeWidth: 1.7,
},
},

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

@@ -190,7 +190,7 @@ const DetailsPage = () => {
width: 4,
height: 4,
borderRadius: "50%",
backgroundColor: theme.palette.primary.contrastText.tertiary,
backgroundColor: theme.palette.primary.contrastTextTertiary,
opacity: 0.8,
left: -9,
top: "50%",
@@ -259,7 +259,7 @@ const DetailsPage = () => {
<Typography
component="span"
fontSize={13}
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
>
{certificateExpiry}
</Typography>
@@ -333,7 +333,7 @@ const DetailsPage = () => {
position="absolute"
top="100%"
fontSize={11}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{formatDateWithTz(
hoveredUptimeData._id,
@@ -390,7 +390,7 @@ const DetailsPage = () => {
position="absolute"
top="100%"
fontSize={11}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{formatDateWithTz(
hoveredIncidentsData._id,
@@ -443,7 +443,7 @@ const DetailsPage = () => {
</IconBox>
<Typography
component="h2"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
History
</Typography>

8
Client/src/Pages/Uptime/Details/styled.jsx
View File

@@ -12,16 +12,16 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
borderRadius: 4,
backgroundColor: theme.palette.primary.main,
"& h2": {
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
fontSize: 15,
fontWeight: 500,
},
"& .MuiBox-root:not(.area-tooltip) p": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
fontSize: 13,
},
"& .MuiBox-root > span": {
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
fontSize: 20,
"& span": {
opacity: 0.8,
@@ -37,7 +37,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
alignItems: "center",
},
"& tspan, & text": {
fill: theme.palette.primary.contrastText.tertiary,
fill: theme.palette.primary.contrastTextTertiary,
},
"& path": {
transition: "fill 300ms ease, stroke-width 400ms ease",

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

@@ -30,7 +30,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) =>
<Box
className="current-monitors-counter"
color={theme.palette.primary.contrastText.main}
color={theme.palette.primary.contrastText}
border={1}
borderColor={theme.palette.primary.lowContrast}
backgroundColor={theme.palette.tertiary.main}

14
Client/src/Pages/Uptime/Home/StatusBox.jsx
View File

@@ -12,27 +12,27 @@ const StatusBox = ({ title, value }) => {
position: "absolute",
right: 8,
opacity: 0.5,
"& svg path": { stroke: theme.palette.primary.contrastText.tertiary },
"& svg path": { stroke: theme.palette.primary.contrastTextTertiary },
};
let color;
let icon;
if (title === "up") {
color = theme.palette.success.accent;
color = theme.palette.success.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: 8 }}>
<Arrow />
</Box>
);
} else if (title === "down") {
color = theme.palette.error.accent;
color = theme.palette.error.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
<Arrow />
</Box>
);
} else if (title === "paused") {
color = theme.palette.warning.accent;
color = theme.palette.warning.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: 12, right: 12 }}>
<ClockSnooze />
@@ -58,7 +58,7 @@ const StatusBox = ({ title, value }) => {
left: "5%",
pointerEvents: "none",
"& svg g g:last-of-type path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
}}
>
@@ -68,7 +68,7 @@ const StatusBox = ({ title, value }) => {
textTransform="uppercase"
fontSize={15}
letterSpacing={0.5}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
mb={theme.spacing(8)}
>
{title}
@@ -88,7 +88,7 @@ const StatusBox = ({ title, value }) => {
component="span"
fontSize={20}
fontWeight={300}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
sx={{ opacity: 0.3 }}
>
#

6
Client/src/Pages/Uptime/Home/UptimeTable/index.jsx
View File

@@ -171,7 +171,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
>
<CircularProgress
sx={{
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
}}
/>
</Box>
@@ -182,7 +182,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
sx={{
backgroundColor: theme.palette.primary.main,
"& :is(th, td)": {
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
},
}}
>
@@ -238,7 +238,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
{monitors.length > 0 ? (
monitors.map((monitor) => {
let uptimePercentage = "";
let percentageColor = theme.palette.success.accent;
let percentageColor = theme.palette.success.lowContrast;
// Determine uptime percentage and color based on the monitor's uptimePercentage value
if (monitor.uptimePercentage !== undefined) {

4
Client/src/Pages/Uptime/Home/actionsMenu.jsx
View File

@@ -90,7 +90,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) =>
outline: "none",
},
"& svg path": {
stroke: theme.palette.primary.contrastText.tertiary,
stroke: theme.palette.primary.contrastTextTertiary,
},
}}
>
@@ -110,7 +110,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) =>
p: theme.spacing(2.5),
backgroundColor: theme.palette.primary.main,
},
"& li": { m: 0, color: theme.palette.primary.contrastText.secondary },
"& li": { m: 0, color: theme.palette.primary.contrastTextSecondary },
/*
This should not be set automatically on the last of type
"& li:last-of-type": {

2
Client/src/Pages/Uptime/Home/fallback.jsx
View File

@@ -21,7 +21,7 @@ const Fallback = ({ isAdmin }) => {
border={1}
borderRadius={theme.shape.borderRadius}
borderColor={theme.palette.primary.lowContrast}
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
<Box pb={theme.spacing(20)}>
{mode === "light" ? <PlaceholderLight /> : <PlaceholderDark />}

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

@@ -72,6 +72,45 @@ 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>

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

@@ -11,10 +11,10 @@ const useUtils = () => {
const theme = useTheme();
const statusColor = {
up: theme.palette.success.accent,
down: theme.palette.error.accent,
paused: theme.palette.warning.accent,
pending: theme.palette.warning.accent,
up: theme.palette.success.lowContrast,
down: theme.palette.error.lowContrast,
paused: theme.palette.warning.lowContrast,
pending: theme.palette.warning.lowContrast,
};
const statusMsg = {
@@ -31,32 +31,39 @@ 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
*/
const statusStyles = {
up: {
backgroundColor: theme.palette.success.accent,
background: `linear-gradient(340deg, ${theme.palette.success.accent} -60%, ${theme.palette.success.contrastText} 35%)`,
backgroundColor: theme.palette.success.lowContrast,
background: `linear-gradient(340deg, ${theme.palette.success.lowContrast} -60%, ${theme.palette.success.contrastText} 35%)`,
borderColor: theme.palette.success.contrastText,
"& h2": { color: theme.palette.success.main },
},
down: {
backgroundColor: theme.palette.error.accent /* dark */,
background: `linear-gradient(340deg, ${theme.palette.error.accent} -60%, ${theme.palette.error.contrastText} 35%)`,
backgroundColor: theme.palette.error.lowContrast,
background: `linear-gradient(340deg, ${theme.palette.error.lowContrast} -60%, ${theme.palette.error.contrastText} 35%)`,
borderColor: theme.palette.error.contrastText,
"& 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%)`,
backgroundColor: theme.palette.warning.lowContrast,
background: `linear-gradient(340deg, ${theme.palette.warning.lowContrast} -60%, ${theme.palette.warning.contrastText} 35%)`,
borderColor: theme.palette.warning.contrastText,
"& 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%)`,
backgroundColor: theme.palette.warning.lowContrast,
background: `linear-gradient(340deg, ${theme.palette.warning.lowContrast} -60%, ${theme.palette.warning.contrastText} 35%)`,
borderColor: theme.palette.warning.contrastText,
"& h2": { color: theme.palette.warning.main },
},
};
/* 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,

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

@@ -97,22 +97,36 @@ const newColors = {
green200: "#4B9B77",
green400: "#079455",
green700: "#026513",
orange100: "#FFE5CC",
orange100: "#CCB368",
orange400: "#FD8F22",
orange600: "#9B734B",
orange700: "#694016",
red100: "#F9C2C2",
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,
},
}, */
red100: "#F27C7C",
red400: "#D92020",
red600: "#9B4B4B",
red700: "#791515",
red700: "#980303",
};
/* Structure:
Key:
main: background color
contrastText: color for main contrast text
light and dark: should be transparent (since we don't want MUI to make the light dark automatic calculations for us)
lowerContrastText: if there are any, use nested keys secondary and tertiary
contrastTextSecondary: if needed
contrastTextTertiary: if needed
lowContrast: if we need some low contrast for that color (for borders, and decorative elements). This should never be usend in text
*/
@@ -133,18 +147,16 @@ const newSemanticColors = {
dark: newColors.offBlack,
},
contrastText: {
main: {
light: newColors.blueGray800,
dark: newColors.blueGray50,
},
secondary: {
light: newColors.blueGray600,
dark: newColors.gray200,
},
tertiary: {
light: newColors.blueGray500,
dark: newColors.gray500,
},
light: newColors.blueGray800,
dark: newColors.blueGray50,
},
contrastTextSecondary: {
light: newColors.blueGray600,
dark: newColors.gray200,
},
contrastTextTertiary: {
light: newColors.blueGray500,
dark: newColors.gray500,
},
lowContrast: {
light: newColors.gray200,
@@ -171,49 +183,48 @@ const newSemanticColors = {
dark: newColors.gray100,
},
},
/* For success, warning and error, contrastText works wll with main, and with the theme primary main color. Accent is to be used in graphs */
success: {
main: {
light: newColors.green700,
dark: newColors.green100,
},
contrastText: {
light: newColors.green100,
dark: newColors.green700,
light: newColors.offWhite,
dark: newColors.offBlack,
},
accent: {
lowContrast: {
light: newColors.green400,
dark: newColors.green200,
},
},
error: {
main: {
light: newColors.red700,
dark: newColors.red100,
},
contrastText: {
light: newColors.red100,
dark: newColors.red700,
},
accent: {
light: newColors.red400,
dark: newColors.red600,
},
},
warning: {
main: {
light: newColors.orange700,
dark: newColors.orange100,
},
contrastText: {
light: newColors.orange100,
dark: newColors.orange700,
light: newColors.offWhite,
dark: newColors.offBlack,
},
accent: {
lowContrast: {
light: newColors.orange400,
dark: newColors.orange600,
},
},
error: {
main: {
light: newColors.red700,
dark: newColors.red100,
},
contrastText: {
light: newColors.offWhite,
dark: newColors.offBlack,
},
lowContrast: {
light: newColors.red400,
dark: newColors.red600,
},
},
/* These are temporary, just for everything not to break */
gradient: {
color1: {
@@ -237,12 +248,6 @@ const newSemanticColors = {
dark: paletteColors.gray850,
},
},
other: {
grid: {
light: paletteColors.gray300,
dark: paletteColors.gray600,
},
},
unresolved: {
main: {
light: paletteColors.blue700,
@@ -255,7 +260,15 @@ export { typographyLevels, semanticColors as colors, newSemanticColors };
/* TODO
Look up for
success.contrastText
warning.contrastText
error.contrastText
"red"
"white"
{ text, bg, border }
@@ -263,5 +276,5 @@ Look up for
.dark
theme.palette.unresolved
theme.palette.unresolved (will become tertiary)
*/

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

@@ -58,7 +58,7 @@ const baseTheme = (palette) => ({
props: (props) => props.variant === "group",
style: {
/* color: theme.palette.secondary.contrastText, */
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
border: 1,
borderStyle: "solid",
@@ -114,7 +114,7 @@ const baseTheme = (palette) => ({
"&.MuiLoadingButton-root": {
"&:disabled": {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.primary.contrastText.main,
color: theme.palette.primary.contrastText,
},
},
"&.MuiLoadingButton-loading": {
@@ -177,7 +177,7 @@ const baseTheme = (palette) => ({
borderRadius: 4,
backgroundColor: "inherit",
padding: "4px 6px",
color: theme.palette.primary.contrastText.secondary,
color: theme.palette.primary.contrastTextSecondary,
fontSize: 13,
margin: 2,
minWidth: 100,
@@ -210,7 +210,7 @@ const baseTheme = (palette) => ({
borderStyle: "solid",
borderColor: theme.palette.primary.lowContrast,
"& button": {
color: theme.palette.primary.contrastText.tertiary,
color: theme.palette.primary.contrastTextTertiary,
borderRadius: 4,
},
"& li:first-of-type button, & li:last-of-type button": {
@@ -258,7 +258,7 @@ const baseTheme = (palette) => ({
"& .MuiInputBase-input:-webkit-autofill": {
transition: "background-color 5000s ease-in-out 0s",
WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.primary.main} inset`,
WebkitTextFillColor: theme.palette.primary.contrastText.main,
WebkitTextFillColor: theme.palette.primary.contrastText,
},
"& .MuiInputBase-input.MuiOutlinedInput-input": {
padding: "0 var(--env-var-spacing-1-minus) !important",

6
Client/src/Utils/greeting.jsx
View File

@@ -163,7 +163,7 @@ const Greeting = ({ type = "" }) => {
<Typography
component="span"
fontSize="inherit"
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{prepend},{" "}
</Typography>
@@ -171,7 +171,7 @@ const Greeting = ({ type = "" }) => {
component="span"
fontSize="inherit"
fontWeight="inherit"
color={theme.palette.primary.contrastText.secondary}
color={theme.palette.primary.contrastTextSecondary}
>
{firstName} {emoji}
</Typography>
@@ -179,7 +179,7 @@ const Greeting = ({ type = "" }) => {
<Typography
variant="h2"
lineHeight={1}
color={theme.palette.primary.contrastText.tertiary}
color={theme.palette.primary.contrastTextTertiary}
>
{append} — Here’s an overview of your {type} monitors.
</Typography>