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

nuke theme

Browse Source
This commit is contained in:
Alex Holliday committed 2025-12-08 19:55:29 +00:00
1 parent 32fbb8f434
commit dd463bb60b
83 files changed
+225 -349
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/common/HeaderCreate.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ export const HeaderCreate = ({
<Button
loading={isLoading}
variant="contained"
color="accent"
color="primary"
disabled={limitReached}
onClick={() => navigate(path)}
>
client/src/components/common/HeatmapResponseTime.tsx
+8 -12
View File
@@ -53,24 +53,20 @@ export const HeatmapResponseTime = ({
{data.map((check, index) => {
const statusBg =
check.status === "placeholder"
? theme.palette.primary.lowContrast
? theme.palette.action.hover
: check.status === "up"
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast;
? theme.palette.success.light
: theme.palette.error.light;
const respBg =
check.status === "placeholder"
? theme.palette.primary.lowContrast
? theme.palette.action.hover
: getResponseColor(check.responseTime, {
start: theme.palette.success.lowContrast,
mid: theme.palette.warning.lowContrast,
end: theme.palette.error.lowContrast,
start: theme.palette.success.main,
mid: theme.palette.warning.main,
end: theme.palette.error.main,
});
const statusBorder =
check.status === "placeholder"
? theme.palette.primary.lowContrast
: check.status === "up"
? theme.palette.success.main
: theme.palette.error.main;
check.status === "placeholder" ? theme.palette.divider : check.status === "up" ? theme.palette.success.main : theme.palette.error.main;
return (
<HeatmapResponseTimeTooltip key={`${check}-${index}`} check={check}>
client/src/components/common/HeatmapResponseTimeTooltip.tsx
+3 -3
View File
@@ -14,8 +14,8 @@ export const HeatmapResponseTimeTooltip: React.FC<{
const theme = useTheme();
const getColor = (status: string) => {
if (status === "up") return theme.palette.success.lowContrast;
if (status === "down") return theme.palette.error.lowContrast;
if (status === "up") return theme.palette.success.light;
if (status === "down") return theme.palette.error.light;
};
if (check.status === "placeholder") {
@@ -37,7 +37,7 @@ export const HeatmapResponseTimeTooltip: React.FC<{
sx={{
backgroundColor: theme.palette.secondary.main,
border: 1,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
p: theme.spacing(4),
}}
client/src/components/common/HistogramResponseTime.tsx
+3 -3
View File
@@ -57,8 +57,8 @@ export const HistogramResponseTime = ({
const heightPct = `${Math.max(0, Math.min(100, (check as any).normalResponseTime ?? 0))}%`;
const barColor =
check.status === "up"
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast;
? theme.palette.success.light
: theme.palette.error.light;
const bar = (
<Box
sx={{
@@ -66,7 +66,7 @@ export const HistogramResponseTime = ({
width: "100%",
height: "100%",
borderRadius: theme.spacing(1),
bgcolor: theme.palette.primary.lowContrast,
bgcolor: theme.palette.action.hover,
overflow: "hidden",
}}
>
client/src/components/design-elements/BaseBox.tsx
+2 -2
View File
@@ -7,10 +7,10 @@ export const BaseBox = ({ sx, ...rest }: BoxProps) => {
<Box
{...rest}
sx={{
backgroundColor: theme.palette.primary.main,
backgroundColor: theme.palette.background.paper,
border: 1,
borderStyle: "solid",
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
...sx,
}}
client/src/components/design-elements/Breadcrumb.tsx
+7 -7
View File
@@ -49,7 +49,7 @@ export const Breadcrumb = ({
fontSize: "14px",
marginBottom: theme.spacing(6),
"& .MuiBreadcrumbs-separator": {
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
},
}}
>
@@ -60,16 +60,16 @@ export const Breadcrumb = ({
alignItems: "center",
gap: theme.spacing(2),
textDecoration: "none",
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
}}
>
<Home size={16} strokeWidth={1.5} />
<Typography
sx={{
fontSize: "14px",
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
"&:hover": {
color: theme.palette.accent.main,
color: theme.palette.primary.main,
},
}}
>
@@ -94,7 +94,7 @@ export const Breadcrumb = ({
sx={{
fontSize: "14px",
fontWeight: 600,
color: theme.palette.accent.main,
color: theme.palette.primary.main,
}}
>
{displayName}
@@ -110,9 +110,9 @@ export const Breadcrumb = ({
<Typography
sx={{
fontSize: "14px",
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
"&:hover": {
color: theme.palette.accent.main,
color: theme.palette.primary.main,
},
}}
>
client/src/components/design-elements/BulletPointCheck.tsx
+2 -6
View File
@@ -15,7 +15,7 @@ export const BulletPointCheck = ({
const colors: Record<string, string | undefined> = {
success: theme.palette.success.main,
error: theme.palette.error.main,
info: theme.palette.primary.contrastTextSecondary,
info: theme.palette.text.secondary,
};
return (
@@ -29,11 +29,7 @@ export const BulletPointCheck = ({
/>
<Typography
component="span"
color={
variant === "info"
? theme.palette.primary.contrastTextSecondary
: colors[variant]
}
color={variant === "info" ? theme.palette.text.secondary : colors[variant]}
fontWeight={450}
sx={{
opacity: 0.9,
client/src/components/design-elements/Fallback.tsx
+5 -5
View File
@@ -32,9 +32,9 @@ export const BaseFallback: React.FC<BaseFallbackProps> = ({
xl: "40%",
}}
padding={{ xs: theme.spacing(8), md: theme.spacing(16) }}
bgcolor={theme.palette.primary.main}
bgcolor={theme.palette.background.paper}
border={1}
borderColor={theme.palette.primary.lowContrast}
borderColor={theme.palette.divider}
borderRadius={theme.shape.borderRadius}
sx={{
borderStyle: "dashed",
@@ -60,7 +60,7 @@ export const ErrorFallback = ({
<Typography
variant="h1"
marginY={theme.spacing(4)}
color={theme.palette.primary.contrastTextTertiary}
color={theme.palette.text.secondary}
>
{title}
</Typography>
@@ -106,7 +106,7 @@ export const EmptyFallback = ({
<Stack>
<Button
variant="contained"
color="accent"
color="primary"
onClick={() => navigate(actionLink)}
>
{actionButtonText}
@@ -158,7 +158,7 @@ export const EmptyMonitorFallback = ({
<Stack>
<Button
variant="contained"
color="accent"
color="primary"
onClick={() => navigate(actionLink)}
disabled={monitorLimitReached}
>
client/src/components/design-elements/Gauge.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export const Gauge = ({
position={"relative"}
width={radius}
height={radius}
bgcolor={theme.palette.primary.main}
bgcolor={theme.palette.background.paper}
borderRadius={"50%"}
>
<svg
client/src/components/design-elements/InfoBox.tsx
+4 -4
View File
@@ -22,27 +22,27 @@ export const InfoBox: React.FC<InfoBoxProps> = ({ title, description }) => {
? "rgba(59, 130, 246, 0.1)"
: "rgba(59, 130, 246, 0.05)",
borderRadius: theme.shape.borderRadius,
borderLeft: `4px solid ${theme.palette.accent.main}`,
borderLeft: `4px solid ${theme.palette.primary.main}`,
}}
>
<Info
size={24}
strokeWidth={1.5}
style={{
color: theme.palette.accent.main,
color: theme.palette.primary.main,
flexShrink: 0,
marginTop: theme.spacing(1),
}}
/>
<Stack spacing={theme.spacing(4)}>
<Typography variant="h2" sx={{ color: theme.palette.accent.main }}>
<Typography variant="h2" sx={{ color: theme.palette.primary.main }}>
{title}
</Typography>
<Typography
variant="body1"
sx={{
lineHeight: 1.7,
color: theme.palette.primary.contrastTextSecondary,
color: theme.palette.text.secondary,
}}
>
{description}
client/src/components/design-elements/PlanCard.tsx
+5 -5
View File
@@ -34,7 +34,7 @@ export const PlanCard = ({
? theme.palette.success.main
: plan.plan === "free"
? theme.palette.text.secondary
: theme.palette.accent.main;
: theme.palette.primary.main;
const Icon = (() => {
switch (plan.plan) {
case "free":
@@ -98,7 +98,7 @@ export const PlanCard = ({
flexDirection: "column",
height: "100%",
border: selected ? 2 : 1,
borderColor: selected ? theme.palette.accent.main : "divider",
borderColor: selected ? theme.palette.primary.main : "divider",
transition:
"transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease",
...(selected
@@ -130,9 +130,9 @@ export const PlanCard = ({
size="small"
label="Most popular"
sx={{
bgcolor: theme.palette.accent.main,
bgcolor: theme.palette.primary.main,
color: theme.palette.getContrastText(
theme.palette.accent.main
theme.palette.primary.main
),
}}
/>
@@ -171,7 +171,7 @@ export const PlanCard = ({
<Button
loading={loading}
variant="contained"
color="accent"
color="primary"
onClick={(e) => {
e.stopPropagation();
onClick?.(plan.plan);
client/src/components/design-elements/PulseDot.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export const PulseDot = ({ color }: { color: string }) => {
width: "7px",
height: "7px",
borderRadius: "50%",
backgroundColor: theme.palette.accent.contrastText,
backgroundColor: theme.palette.getContrastText(theme.palette.primary.main),
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
client/src/components/design-elements/ResolutionCard.tsx
+1 -3
View File
@@ -22,9 +22,7 @@ export const ResolutionCard = ({
durationLabel,
}: ResolutionCardProps) => {
const theme = useTheme();
const bg = resolved
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast;
const bg = resolved ? theme.palette.success.light : theme.palette.error.light;
return (
<BaseBox sx={{ width: "100%", maxWidth: 420 }}>
client/src/components/design-elements/SkeletonCard.tsx
+2 -2
View File
@@ -51,7 +51,7 @@ const SkeletonCard: React.FC<SkeletonCardProps> = ({
height: 34,
borderRadius: theme.shape.borderRadius,
background: theme.palette.secondary.main,
border: `1px solid ${theme.palette.primary.lowContrast}`,
border: `1px solid ${theme.palette.divider}`,
animation: "pulse 1.6s ease-in-out infinite",
...pulseAnimation,
};
@@ -60,7 +60,7 @@ const SkeletonCard: React.FC<SkeletonCardProps> = ({
height: 7,
borderRadius: theme.shape.borderRadius,
background: theme.palette.secondary.main,
border: `1px solid ${theme.palette.primary.lowContrast}`,
border: `1px solid ${theme.palette.divider}`,
animation: "pulse 1.6s ease-in-out infinite",
...pulseAnimation,
};
client/src/components/design-elements/SplitBox.tsx
+3 -3
View File
@@ -15,16 +15,16 @@ export const SplitBox = ({
return (
<Stack
direction={isSmall ? "column" : "row"}
bgcolor={theme.palette.primary.main}
bgcolor={theme.palette.background.paper}
border={1}
borderColor={theme.palette.primary.lowContrast}
borderColor={theme.palette.divider}
borderRadius={theme.spacing(2)}
>
<Box
padding={theme.spacing(15)}
borderRight={isSmall ? 0 : 1}
borderBottom={isSmall ? 1 : 0}
borderColor={theme.palette.primary.lowContrast}
borderColor={theme.palette.divider}
flex={0.7}
sx={{
background:
client/src/components/design-elements/StatBox.tsx
+4 -8
View File
@@ -20,16 +20,14 @@ export const GradientBox: React.FC<GradientBox> = ({
const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
const bg = palette
? `linear-gradient(to bottom right, ${theme.palette[palette].main} 30%, ${theme.palette[palette].lowContrast} 70%)`
: `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`;
? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
: theme.palette.background.paper;
return (
<BaseBox
sx={{
padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
width: isSmall
? `100%`
: `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
background: bg,
...sx,
@@ -66,9 +64,7 @@ export const StatBox: React.FC<StatBoxProps> = ({
palette={palette}
sx={{
...(sx as object),
...(onClick
? { cursor: "pointer", '&:hover': { opacity: 0.95 } }
: {}),
...(onClick ? { cursor: "pointer", "&:hover": { opacity: 0.95 } } : {}),
}}
>
<Stack onClick={onClick}>
client/src/components/design-elements/StatusBox.tsx
+5 -33
View File
@@ -41,11 +41,7 @@ const StatusBox = ({
return (
<BGBox>
<Stack spacing={theme.spacing(4)}>
<Typography
variant={"h2"}
textTransform="uppercase"
color={theme.palette.primary.contrastTextTertiary}
>
<Typography variant={"h2"} textTransform="uppercase" color={theme.palette.text.secondary}>
{label}
</Typography>
<Typography variant="h1" color={color}>
@@ -59,47 +55,23 @@ const StatusBox = ({
export const UpStatusBox = ({ n }: { n: number }) => {
const theme = useTheme();
const { t } = useTranslation();
return (
<StatusBox
label={t("monitorStatus.up")}
n={n}
color={theme.palette.success.lowContrast}
/>
);
return <StatusBox label={t("monitorStatus.up")} n={n} color={theme.palette.success.light} />;
};
export const DownStatusBox = ({ n }: { n: number }) => {
const theme = useTheme();
const { t } = useTranslation();
return (
<StatusBox
label={t("monitorStatus.down")}
n={n}
color={theme.palette.error.lowContrast}
/>
);
return <StatusBox label={t("monitorStatus.down")} n={n} color={theme.palette.error.light} />;
};
export const PausedStatusBox = ({ n }: { n: number }) => {
const theme = useTheme();
const { t } = useTranslation();
return (
<StatusBox
label={t("monitorStatus.paused")}
n={n}
color={theme.palette.warning.lowContrast}
/>
);
return <StatusBox label={t("monitorStatus.paused")} n={n} color={theme.palette.warning.light} />;
};
export const InitializingStatusBox = ({ n }: { n: number }) => {
const theme = useTheme();
const { t } = useTranslation();
return (
<StatusBox
label={t("monitorStatus.initializing")}
n={n}
color={theme.palette.warning.lowContrast}
/>
);
return <StatusBox label={t("monitorStatus.initializing")} n={n} color={theme.palette.warning.light} />;
};
client/src/components/design-elements/StatusLabel.tsx
+2 -14
View File
@@ -37,13 +37,7 @@ export const StatusLabel = ({
...sx,
}}
>
<Box
width={7}
height={7}
bgcolor={theme.palette[palette].lowContrast}
borderRadius="50%"
marginRight="5px"
/>
<Box width={7} height={7} bgcolor={theme.palette[palette].light} borderRadius="50%" marginRight="5px" />
{transformedText}
</BaseBox>
);
@@ -76,13 +70,7 @@ export const ValueLabel = ({
: "rgba(0, 0, 0, 0.08)",
}}
>
<Box
width={7}
height={7}
bgcolor={theme.palette[palette].lowContrast}
borderRadius="50%"
marginRight="5px"
/>
<Box width={7} height={7} bgcolor={theme.palette[palette].light} borderRadius="50%" marginRight="5px" />
{transformedText}
</BaseBox>
);
client/src/components/design-elements/Tab.tsx
+3 -3
View File
@@ -18,13 +18,13 @@ export const Tab = (props: CustomTabProps) => {
paddingBottom: 0,
minWidth: "auto",
alignItems: "flex-start",
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
"&.Mui-selected": {
color: theme.palette.accent.main,
color: theme.palette.primary.main,
fontWeight: 600,
},
"&:hover": {
color: theme.palette.primary.contrastTextSecondary,
color: theme.palette.text.secondary,
},
"& .MuiTab-iconWrapper": {
marginRight: theme.spacing(2),
client/src/components/design-elements/Table.tsx
+10 -7
View File
@@ -85,7 +85,7 @@ export function DataTable<
sx={{
borderStyle: "solid",
borderWidth: 1,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(4),
cursor: onRowClick ? "pointer" : "default",
@@ -126,20 +126,23 @@ export function DataTable<
{
paddingLeft: theme.spacing(8),
},
"& .MuiTableCell-root": {
borderBottom: `1px solid ${theme.palette.divider}`,
},
"& .MuiTableHead-root .MuiTableRow-root": {
height: "28px",
},
"& :is(th)": {
backgroundColor: theme.palette.tertiary.main,
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary,
fontWeight: 500,
textTransform: "uppercase",
padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
fontSize: theme.typography.fontSize,
},
"& :is(td)": {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastTextSecondary,
backgroundColor: theme.palette.background.paper,
color: theme.palette.text.secondary,
padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
fontSize: theme.typography.fontSize,
},
@@ -346,7 +349,7 @@ export const Pagination: React.FC<TablePaginationProps> = ({ ...props }) => {
},
"& .MuiSelect-select": {
border: 1,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
},
}}
@@ -363,7 +366,7 @@ const EmptyView = () => {
p: theme.spacing(4),
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
}}
>
client/src/components/design-elements/Tabs.tsx
+2 -2
View File
@@ -9,9 +9,9 @@ export const Tabs = (props: CustomTabsProps) => {
<MuiTabs
sx={{
minHeight: 34,
borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
borderBottom: `1px solid ${theme.palette.divider}`,
"& .MuiTabs-indicator": {
backgroundColor: theme.palette.accent.main,
backgroundColor: theme.palette.primary.main,
height: 2,
bottom: 0,
},
client/src/components/design-elements/Tooltip.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export const TooltipWithInfo: React.FC<TooltipWithInfoProps> = ({
}) => {
const theme = useTheme();
const defaultColor = theme.palette.primary.contrastTextTertiary;
const defaultColor = theme.palette.text.secondary;
return (
<Tooltip {...props}>
client/src/components/inputs/Button.tsx
-3
View File
@@ -18,9 +18,6 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
boxShadow: "none",
"&:hover": {
boxShadow: "none",
backgroundColor: props.color === "primary"
? theme.palette.tertiary.main
: undefined,
},
...sx,
}}
client/src/components/inputs/Checkbox.tsx
+2 -2
View File
@@ -26,9 +26,9 @@ export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
checkedIcon={<SquareCheck size={16} strokeWidth={1.5} />}
sx={{
padding: 0,
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
"&.Mui-checked": {
color: theme.palette.accent.main,
color: theme.palette.primary.main,
},
"&:hover": { backgroundColor: "transparent" },
"& svg": {
client/src/components/inputs/DateTimePicker.tsx
+4 -4
View File
@@ -29,17 +29,17 @@ export const DateTimePicker = forwardRef<HTMLDivElement, CustomDateTimePickerPro
"& .MuiPickersOutlinedInput-root ": {
height: 34,
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
"& .MuiPickersOutlinedInput-notchedOutline": {
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
"&:hover .MuiPickersOutlinedInput-notchedOutline": {
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
"& .MuiPickersInputBase-root.MuiPickersOutlinedInput-root.Mui-focused:not(.Mui-error) .MuiPickersOutlinedInput-notchedOutline":
{
borderColor: theme.palette.accent.main,
borderColor: theme.palette.primary.main,
},
"& .MuiFormHelperText-root": {
marginLeft: 0,
client/src/components/inputs/Dialog.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ export const DialogInput = ({
content,
onConfirm,
onCancel,
confirmColor = "accent",
confirmColor = "primary",
cancelColor = "error",
loading = false,
}: {
@@ -21,8 +21,8 @@ export const DialogInput = ({
content?: string;
onConfirm?(item: any): any;
onCancel?(item: any): any;
confirmColor?: "error" | "accent";
cancelColor?: "error" | "accent";
confirmColor?: "error" | "primary";
cancelColor?: "error" | "primary";
loading?: boolean;
}) => {
return (
client/src/components/inputs/FieldLabel.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const FieldLabel: React.FC<FieldLabelProps> = ({
sx={{
fontSize: "14px",
fontWeight: 500,
color: theme.palette.primary.contrastTextSecondary,
color: theme.palette.text.secondary,
marginBottom: theme.spacing(2),
display: "block",
}}
client/src/components/inputs/RadioInput.tsx
+5 -5
View File
@@ -17,11 +17,11 @@ export const RadioInput: React.FC<RadioInputProps> = ({ ...props }) => {
sx={{
padding: 0,
mt: theme.spacing(0.5),
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
"&.Mui-checked": {
color: theme.palette.accent.main,
color: theme.palette.primary.main,
"& svg circle": {
fill: theme.palette.accent.main,
fill: theme.palette.primary.main,
},
},
"& .MuiSvgIcon-root": {
@@ -51,7 +51,7 @@ export const RadioWithDescription: React.FC<
<Typography component="p">{label}</Typography>
<Typography
component="h6"
color={theme.palette.primary.contrastTextSecondary}
color={theme.palette.text.secondary}
>
{description}
</Typography>
@@ -64,7 +64,7 @@ export const RadioWithDescription: React.FC<
borderRadius: theme.shape.borderRadius,
"&:hover": {
backgroundColor: theme.palette.tertiary.main,
backgroundColor: theme.palette.background.paper,
},
"& .MuiButtonBase-root": {
p: 0,
client/src/components/inputs/Select.tsx
+2 -2
View File
@@ -83,10 +83,10 @@ export const SelectInput = <T,>({
},
"& .MuiOutlinedInput-notchedOutline": {
borderRadius: theme.shape.borderRadius,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
...props.sx,
}}
client/src/components/inputs/Switch.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export const SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>(
"&.Mui-checked": {
color: "#E0E0E0",
"& + .MuiSwitch-track": {
backgroundColor: theme.palette.accent.main,
backgroundColor: theme.palette.primary.main,
opacity: 1,
border: 0,
},
client/src/components/inputs/SwitchLogout.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const LogoutSwitch = () => {
},
"&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
{
stroke: theme.palette.accent.main,
stroke: theme.palette.primary.main,
},
}}
>
client/src/components/inputs/SwitchSettings.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export const SettingsSwitch = () => {
},
"&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
{
stroke: theme.palette.accent.main,
stroke: theme.palette.primary.main,
},
}}
>
client/src/components/inputs/SwitchTeam.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export const TeamSwitch = () => {
},
"&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
{
stroke: theme.palette.accent.main,
stroke: theme.palette.primary.main,
},
}}
>
client/src/components/inputs/SwitchTheme.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const ThemeSwitch = () => {
},
"&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
{
stroke: theme.palette.accent.main,
stroke: theme.palette.primary.main,
},
}}
>
client/src/components/inputs/TextInput.tsx
+2 -2
View File
@@ -26,10 +26,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
fontSize: typographyLevels.base,
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
},
"& .MuiFormHelperText-root": {
marginLeft: 0,
client/src/components/inputs/TextLink.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const TextLink = ({
return (
<Stack direction="row" gap={theme.spacing(4)}>
<Typography>{text}</Typography>
<Link color="accent" to={href} component={RouterLink} target={target}>
<Link color="primary" to={href} component={RouterLink} target={target}>
{linkText}
</Link>
</Stack>
client/src/components/layouts/sidebar/CollapseButton.tsx
+6 -6
View File
@@ -12,13 +12,13 @@ export const CollapseButton = ({ sidebarOpen }: { sidebarOpen: boolean }) => {
<ArrowLeft
height={theme.spacing(8)}
width={theme.spacing(8)}
color={theme.palette.primary.contrastTextSecondary}
color={theme.palette.text.secondary}
/>
) : (
<ArrowRight
height={theme.spacing(8)}
width={theme.spacing(8)}
color={theme.palette.primary.contrastTextSecondary}
color={theme.palette.text.secondary}
/>
);
@@ -30,14 +30,14 @@ export const CollapseButton = ({ sidebarOpen }: { sidebarOpen: boolean }) => {
top: 60,
right: 0,
transform: `translate(50%, 0)`,
backgroundColor: theme.palette.tertiary.main,
border: `1px solid ${theme.palette.primary.lowContrast}`,
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
p: theme.spacing(2.5),
"&:focus": { outline: "none" },
"&:hover": {
backgroundColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.primary.lowContrast,
backgroundColor: theme.palette.action.hover,
borderColor: theme.palette.divider,
},
}}
onClick={() => {
client/src/components/layouts/sidebar/Logo.tsx
+2 -2
View File
@@ -28,9 +28,9 @@ export const Logo = ({ sidebarOpen }: { sidebarOpen: boolean }) => {
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
bgcolor={theme.palette.accent.main}
bgcolor={theme.palette.primary.main}
borderRadius={theme.shape.borderRadius}
color={theme.palette.accent.contrastText}
color={theme.palette.getContrastText(theme.palette.primary.main)}
fontSize={18}
>
C
client/src/components/layouts/sidebar/NavItem.tsx
+18 -18
View File
@@ -23,13 +23,15 @@ export const NavItem = ({
}) => {
const theme = useTheme();
const iconStroke = selected
? theme.palette.accent.main
: theme.palette.primary.contrastTextTertiary;
? theme.palette.primary.main
: theme.palette.text.secondary;
const buttonBgColor = selected ? theme.palette.secondary.main : "transparent";
const buttonBgColor = selected
? theme.palette.action.selected
: "transparent";
const buttonBgHoverColor = selected
? theme.palette.secondary.main
: theme.palette.tertiary.main;
? theme.palette.action.selected
: theme.palette.action.hover;
const fontWeight = selected ? 600 : 400;
return (
<Tooltip
@@ -52,16 +54,12 @@ export const NavItem = ({
<ListItemButton
sx={{
backgroundColor: buttonBgColor,
backgroundImage: selected
? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.dark} 100%)`
: "none",
backgroundImage: "none",
border: 1,
borderColor: selected ? theme.palette.primary.veryLowContrast : "transparent",
borderColor: "transparent",
"&:hover": {
backgroundColor: buttonBgHoverColor,
backgroundImage: selected
? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.secondary.dark} 100%)`
: "none",
backgroundImage: "none",
},
height: 32,
gap: theme.spacing(4),
@@ -80,13 +78,15 @@ export const NavItem = ({
opacity: 0.81,
transition: "stroke 0.2s ease",
},
"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
stroke: iconStroke,
},
".MuiListItemButton-root:hover &": {
"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
stroke: theme.palette.accent.main,
"& svg path, & svg line, & svg polyline, & svg rect, & svg circle":
{
stroke: iconStroke,
},
".MuiListItemButton-root:hover &": {
"& svg path, & svg line, & svg polyline, & svg rect, & svg circle":
{
stroke: theme.palette.primary.main,
},
},
}}
>
client/src/components/layouts/sidebar/index.tsx
+2 -2
View File
@@ -45,7 +45,7 @@ export const SideBar = () => {
paddingTop={theme.spacing(6)}
paddingBottom={theme.spacing(6)}
gap={theme.spacing(6)}
borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
borderRight={`1px solid ${theme.palette.divider}`}
width={sideBarOpen ? EXPANDED_WIDTH : COLLAPSED_WIDTH}
sx={{
transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
@@ -103,7 +103,7 @@ export const SideBar = () => {
})}
</List>
<Divider
sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }}
sx={{ mt: "auto", borderColor: theme.palette.divider }}
/>
<BottomControls />
</Stack>
client/src/components/monitors/Chart.tsx
+2 -2
View File
@@ -41,12 +41,12 @@ export const BaseChart: React.FC<BaseChartProps> = ({
justifyContent: "center",
width: 34,
height: 34,
backgroundColor: theme.palette.primary.veryLowContrast,
backgroundColor: theme.palette.action.hover,
"& svg": {
width: 20,
height: 20,
"& path": {
stroke: theme.palette.primary.contrastTextTertiary,
stroke: theme.palette.text.secondary,
},
},
}}
client/src/components/monitors/ChartAvgResponse.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const ChartAvgResponse = ({
>
<RadialBar
dataKey="value"
background={{ fill: theme.palette[palette].lowContrast }}
background={{ fill: theme.palette[palette].light }}
>
<Cell visibility={"hidden"} />
<Cell fill={theme.palette[palette].main} />
client/src/components/monitors/ChartPageSpeedReport.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export const ChartPageSpeedReport = ({ latestCheck }: { latestCheck: any }) => {
{
value: 100,
fill: alpha(
theme.palette[pageSpeedPalette].lowContrast || "#ffffff",
theme.palette[pageSpeedPalette].light || "#ffffff",
0.6
),
stroke: "none",
client/src/components/monitors/ChartPageSpeedReportLegend.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ const MetricBox = ({
sx={{
border: 1,
borderStyle: "solid",
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
}}
>
@@ -37,7 +37,7 @@ const MetricBox = ({
</Stack>
<Box
width={4}
bgcolor={theme.palette[palette].lowContrast}
bgcolor={theme.palette[palette].light}
sx={{
borderTopRightRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
client/src/components/monitors/ChartResponseTime.tsx
+5 -5
View File
@@ -38,7 +38,7 @@ export const XTick: React.FC<XTickProps> = ({ x, y, payload, range }) => {
x={x}
y={y + 10}
textAnchor="middle"
fill={theme.palette.primary.contrastTextTertiary}
fill={theme.palette.text.secondary}
fontSize={11}
fontWeight={400}
>
@@ -98,7 +98,7 @@ export const ChartResponseTime = ({
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={normalized?.slice().reverse()}>
<CartesianGrid
stroke={theme.palette.primary.lowContrast}
stroke={theme.palette.divider}
strokeWidth={1}
strokeOpacity={1}
fill="transparent"
@@ -108,12 +108,12 @@ export const ChartResponseTime = ({
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop
offset="0%"
stopColor={theme.palette.accent.main}
stopColor={theme.palette.primary.main}
stopOpacity={0.8}
/>
<stop
offset="100%"
stopColor={theme.palette.accent.light}
stopColor={theme.palette.primary.light}
stopOpacity={0}
/>
</linearGradient>
@@ -138,7 +138,7 @@ export const ChartResponseTime = ({
<Area
type="monotone"
dataKey="normalResponseTime"
stroke={theme.palette.accent.main}
stroke={theme.palette.primary.main}
fill="url(#colorUv)"
/>
</AreaChart>
client/src/components/monitors/HistogramInfrastructure.tsx
+1 -1
View File
@@ -145,7 +145,7 @@ export const HistogramInfrastructure = ({
<YAxis domain={title === "temp" ? tempYDomain : yDomain} />
<CartesianGrid
stroke={theme.palette.primary.lowContrast}
stroke={theme.palette.divider}
strokeWidth={1}
strokeOpacity={1}
fill="transparent"
client/src/components/monitors/HistogramPageSpeed.tsx
+2 -2
View File
@@ -68,14 +68,14 @@ export const HistogramPageSpeed = ({
style={{ cursor: "pointer" }}
>
<CartesianGrid
stroke={theme.palette.primary.lowContrast}
stroke={theme.palette.divider}
strokeWidth={1}
strokeOpacity={1}
fill="transparent"
vertical={false}
/>
<Tooltip
cursor={{ stroke: theme.palette.primary.lowContrast }}
cursor={{ stroke: theme.palette.divider }}
content={<HistogramPageSpeedTooltip />}
/>
<defs>
client/src/components/monitors/HistogramPageSpeedScores.tsx
+5 -8
View File
@@ -12,10 +12,7 @@ import { HistogramPageSpeedScoresTooltip } from "./HistogramPageSpeedScoresToolt
import { useTheme } from "@mui/material/styles";
import type { GroupedCheck } from "@/types/check";
import type { Palette } from "@mui/material/styles";
type PaletteColorKey = Extract<
keyof Palette,
"primary" | "secondary" | "success" | "warning" | "accent"
>;
type PaletteColorKey = Extract<keyof Palette, "primary" | "secondary" | "success" | "warning">;
export interface ConfigItem {
id: string;
@@ -42,7 +39,7 @@ const config: Record<string, ConfigItem> = {
accessibility: {
id: "accessibility",
text: "accessibility",
palette: "accent",
palette: "secondary",
},
};
@@ -57,20 +54,20 @@ export const HistogramPageSpeedScores = ({
<ResponsiveContainer width="100%" minWidth={25} height={215}>
<AreaChart data={checks}>
<CartesianGrid
stroke={theme.palette.primary.lowContrast}
stroke={theme.palette.divider}
strokeWidth={1}
strokeOpacity={1}
fill="transparent"
vertical={false}
/>
<Tooltip
cursor={{ stroke: theme.palette.primary.lowContrast }}
cursor={{ stroke: theme.palette.divider }}
content={<HistogramPageSpeedScoresTooltip config={config} />}
/>
<defs>
{Object.values(config).map(({ id, palette }) => {
const startColor = theme.palette[palette].main;
const endColor = theme.palette[palette].lowContrast;
const endColor = theme.palette[palette].light;
return (
<linearGradient id={id} x1="0" y1="0" x2="0" y2="1" key={id}>
client/src/components/monitors/HistogramPageSpeedScoresTooltip.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ export const HistogramPageSpeedScoresTooltip = ({
sx={{
backgroundColor: theme.palette.primary.main,
border: 1,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
py: theme.spacing(2),
px: theme.spacing(4),
@@ -34,7 +34,7 @@ export const HistogramPageSpeedScoresTooltip = ({
>
<Typography
sx={{
color: theme.palette.primary.contrastTextTertiary,
color: theme.palette.text.secondary,
fontSize: 12,
fontWeight: 500,
}}
client/src/components/monitors/HistogramPageSpeedTooltip.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const HistogramPageSpeedTooltip = ({
sx={{
backgroundColor: theme.palette.secondary.main,
border: 1,
borderColor: theme.palette.primary.lowContrast,
borderColor: theme.palette.divider,
borderRadius: theme.shape.borderRadius,
p: theme.spacing(4),
}}
client/src/components/monitors/HistogramStatus.tsx
+3 -3
View File
@@ -34,7 +34,7 @@ const XLabel = ({
dy={-3}
textAnchor="start"
fontSize={11}
fill={theme.palette.primary.contrastTextTertiary}
fill={theme.palette.text.secondary}
>
{formatDateWithTz(p1._id, dateFormat, uiTimezone)}
</text>
@@ -44,7 +44,7 @@ const XLabel = ({
dy={-3}
textAnchor="end"
fontSize={11}
fill={theme.palette.primary.contrastTextTertiary}
fill={theme.palette.text.secondary}
>
{formatDateWithTz(p2._id, dateFormat, uiTimezone)}
</text>
@@ -118,7 +118,7 @@ export const HistogramStatus = ({
<ResponsiveContainer width="100%" height={155}>
<BarChart data={normalChecks}>
<XAxis
stroke={theme.palette.primary.lowContrast}
stroke={theme.palette.divider}
height={15}
tick={false}
label={
client/src/components/monitors/MonitorStatus.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export const MonitorStatus = ({ monitor }: { monitor: IMonitor }) => {
<Stack direction="row" alignItems={"center"} gap={theme.spacing(4)}>
<PulseDot color={getStatusColor(monitor.status, theme)} />
<Typography
color={theme.palette.primary.contrastTextSecondary}
color={theme.palette.text.secondary}
fontSize={typographyLevels.l}
fontWeight={"bolder"}
fontFamily={"monospace"}
client/src/components/status-pages/HistogramStatusPage.tsx
+3 -3
View File
@@ -42,7 +42,7 @@ export const HistogramStatusPage = ({ checks }: { checks: ICheck[] }) => {
xs: theme.spacing(2),
sm: theme.spacing(6),
}}
bgcolor={theme.palette.primary.lowContrast}
bgcolor={theme.palette.action.hover}
sx={{
borderRadius: theme.spacing(1.5),
}}
@@ -54,8 +54,8 @@ export const HistogramStatusPage = ({ checks }: { checks: ICheck[] }) => {
height={`${check.normalResponseTime}%`}
bgcolor={
check.status === "up"
? theme.palette.success.lowContrast
: theme.palette.error.lowContrast
? theme.palette.success.light
: theme.palette.error.light
}
sx={{
borderRadius: theme.spacing(1.5),
client/src/components/status-pages/StatusHeader.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export const StatusHeader = ({
return (
<Stack
width={"100%"}
bgcolor={theme.palette[headerConfig.paletteKey].lowContrast}
bgcolor={theme.palette[headerConfig.paletteKey].light}
borderRadius={theme.shape.borderRadius}
padding={theme.spacing(4)}
>