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

finish nuking theme

Browse Source
This commit is contained in:
Alex Holliday committed 2025-12-08 21:10:29 +00:00
1 parent dd463bb60b
commit b6c699c141
10 files changed
+92 -105
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/common/HeaderRange.tsx
+5 -6
View File
@@ -29,12 +29,11 @@ export const HeaderRange = ({
<ButtonGroup
orientation={isSmall ? "vertical" : "horizontal"}
fullWidth={isSmall}
variant="contained"
color="secondary"
>
{all && (
<Button
variant={range === "all" ? "contained" : "outlined"}
variant="contained"
onClick={() => setRange("all")}
loading={loading}
>
@@ -42,28 +41,28 @@ export const HeaderRange = ({
</Button>
)}
<Button
variant={range === "2h" ? "contained" : "outlined"}
variant="contained"
onClick={() => setRange("2h")}
loading={loading}
>
Recent
</Button>
<Button
variant={range === "24h" ? "contained" : "outlined"}
variant="contained"
onClick={() => setRange("24h")}
loading={loading}
>
Day
</Button>
<Button
variant={range === "7d" ? "contained" : "outlined"}
variant="contained"
onClick={() => setRange("7d")}
loading={loading}
>
7 days
</Button>
<Button
variant={range === "30d" ? "contained" : "outlined"}
variant="contained"
onClick={() => setRange("30d")}
loading={loading}
>
client/src/components/common/HeatmapResponseTime.tsx
+30 -6
View File
@@ -1,5 +1,4 @@
import Box from "@mui/material/Box";
// Using strip + square; icons removed
import { useTheme } from "@mui/material/styles";
import type { ICheck } from "@/types/check";
import { getResponseColor } from "@/utils/DataUtils";
@@ -20,7 +19,6 @@ export const HeatmapResponseTime = ({
responseCellSx,
}: HeatmapResponseTimeProps) => {
const theme = useTheme();
if (!gap) {
gap = theme.spacing(0.5);
}
@@ -66,7 +64,11 @@ export const HeatmapResponseTime = ({
end: theme.palette.error.main,
});
const statusBorder =
check.status === "placeholder" ? theme.palette.divider : 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}>
@@ -83,9 +85,31 @@ export const HeatmapResponseTime = ({
gap: theme.spacing(2),
}}
>
<Box sx={{ position: "relative", width: "100%", aspectRatio: "10" }}>
<Box sx={{ position: "absolute", inset: 0, bgcolor: statusBg, borderRadius: theme.spacing(0.5), ...availabilityCellSx }} />
<Box sx={{ position: "absolute", inset: 0, pointerEvents: "none", borderRadius: theme.spacing(0.5), boxShadow: `inset 0 0 0 2px ${statusBorder}` }} />
<Box
sx={{
position: "relative",
width: "100%",
aspectRatio: "10",
}}
>
<Box
sx={{
position: "absolute",
inset: 0,
bgcolor: statusBg,
borderRadius: theme.spacing(0.5),
...availabilityCellSx,
}}
/>
<Box
sx={{
position: "absolute",
inset: 0,
pointerEvents: "none",
borderRadius: theme.spacing(0.5),
boxShadow: `inset 0 0 0 2px ${statusBorder}`,
}}
/>
</Box>
<Box
sx={{
client/src/components/inputs/Button.tsx
+11
View File
@@ -4,6 +4,16 @@ import { useTheme } from "@mui/material/styles";
export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
const theme = useTheme();
const outlinedSx =
props.variant === "outlined"
? {
color: theme.palette.text.primary,
borderColor: theme.palette.divider,
"&:hover": {
borderColor: theme.palette.text.secondary,
},
}
: {};
return (
<Button
{...props}
@@ -19,6 +29,7 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
"&:hover": {
boxShadow: "none",
},
...outlinedSx,
...sx,
}}
/>
client/src/components/inputs/ButtonGroup.tsx
-3
View File
@@ -65,9 +65,6 @@ export const ButtonGroupInput: React.FC<ButtonGroupProps> = ({
sx={{
boxShadow: "none",
width: "100%",
"& .MuiButtonGroup-grouped": {
borderColor: theme.palette.divider,
},
...sx,
}}
>
client/src/components/layouts/sidebar/NavItem.tsx
-1
View File
@@ -102,7 +102,6 @@ export const NavItem = ({
>
<Typography
variant="body1"
color={theme.palette.primary.contrastText}
sx={{
fontWeight: fontWeight,
opacity: 0.9,
client/src/pages/uptime/UptimeDetails.tsx
+4 -4
View File
@@ -29,7 +29,7 @@ const UptimeDetailsPage = () => {
// Local state
const [range, setRange] = useState("2h");
const { response, isValidating, error, refetch } = useGet<
const { response, loading, error, refetch } = useGet<
ApiResponse<IMonitorWithMonitorStats>
>(
`/monitors/${id}?embedChecks=true&range=${range}`,
@@ -40,7 +40,7 @@ const UptimeDetailsPage = () => {
const {
response: upResponse,
isValidating: upIsValidating,
loading: upIsLoading,
error: upError,
} = useGet<ApiResponse<IMonitorWithMonitorStats>>(
`/monitors/${id}?embedChecks=true&range=${range}&status=up`,
@@ -51,7 +51,7 @@ const UptimeDetailsPage = () => {
const {
response: downResponse,
error: downError,
isValidating: downIsValidating,
loading: downIsLoading,
} = useGet<ApiResponse<IMonitorWithMonitorStats>>(
`/monitors/${id}?embedChecks=true&range=${range}&status=down`,
{},
@@ -144,7 +144,7 @@ const UptimeDetailsPage = () => {
/>
</Stack>
<HeaderRange
loading={isValidating || upIsValidating || downIsValidating}
loading={loading || upIsLoading || downIsLoading}
range={range}
setRange={setRange}
/>
client/src/theme/palette.ts
-77
View File
@@ -1,5 +1,3 @@
import { lighten, darken } from "@mui/material/styles";
const typographyBase = 13;
export const typographyLevels = {
@@ -12,100 +10,25 @@ export const typographyLevels = {
};
export const colors = {
offWhite: "#FEFEFE",
offBlack: "#131315",
gray0: "#FDFDFD",
gray10: "#F4F4FF",
gray50: "#F9F9F9",
gray100: "#F3F3F3",
gray200: "#EFEFEF",
gray250: "#DADADA",
gray500: "#A2A3A3",
gray700: "#313131",
gray900: "#1c1c1c",
blueGray50: "#E8F0FE",
blueGray400: "#8b9dc3",
blueGray450: "#7C8BA1",
blueGray500: "#475467",
blueGray600: "#344054",
blueGray800: "#1C2130",
blueGray900: "#515151",
blueBlueWave: "#1570EF",
lightBlueWave: "#CDE2FF",
green100: "#67cd78",
green200: "#4B9B77",
green400: "#079455",
green700: "#026513",
orange100: "#FD8F22",
orange200: "#D69A5D",
orange600: "#9B734B",
orange700: "#884605",
red100: "#F27C7C",
red400: "#D92020",
red600: "#9B4B4B",
red700: "#980303",
};
export const lightPalette = {
primary: {
main: colors.blueBlueWave,
light: lighten(colors.blueBlueWave, 0.4),
dark: darken(colors.blueBlueWave, 0.2),
},
secondary: {
main: colors.gray200,
light: colors.lightBlueWave,
dark: lighten(colors.gray200, 0.1),
},
// Tertiary is a custom helper palette
success: {
main: colors.green700,
contrastText: colors.offWhite,
light: lighten(colors.green700, 0.35),
dark: darken(colors.green700, 0.2),
},
warning: {
main: colors.orange700,
contrastText: colors.offWhite,
light: lighten(colors.orange700, 0.4),
dark: darken(colors.orange700, 0.2),
},
error: {
main: colors.red700,
contrastText: colors.offWhite,
light: lighten(colors.red700, 0.35),
dark: darken(colors.red700, 0.2),
},
};
export const darkPalette = {
primary: {
main: colors.blueBlueWave,
light: lighten(colors.blueBlueWave, 0.4),
dark: darken(colors.blueBlueWave, 0.2),
},
secondary: {
main: colors.gray700,
light: colors.lightBlueWave,
dark: lighten(colors.gray700, 0.1),
},
// Tertiary is a custom helper palette
success: {
main: colors.green100,
contrastText: colors.offBlack,
light: lighten(colors.green100, 0.25),
dark: darken(colors.green100, 0.15),
},
warning: {
main: colors.orange200,
contrastText: colors.offBlack,
light: lighten(colors.orange200, 0.25),
dark: darken(colors.orange200, 0.15),
},
error: {
main: colors.red100,
contrastText: colors.offBlack,
light: lighten(colors.red100, 0.25),
dark: darken(colors.red100, 0.15),
},
};
client/src/theme/theme.ts
+3
View File
@@ -104,6 +104,9 @@ export const theme = (mode: string, palette: any) =>
},
},
},
MuiButton: {
styleOverrides: {},
},
},
shape: {
borderRadius: 2,
client/src/types/mui.d.ts
Vendored
+7 -2
View File
@@ -1,9 +1,14 @@
import "@mui/material/Button";
declare module "@mui/material/styles" {}
declare module "@mui/material/styles" {
interface Palette {}
interface PaletteOptions {}
}
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {}
interface ButtonPropsColorOverrides {
neutral: true;
}
}
declare module "@mui/material/CircularProgress" {
client/src/utils/DataUtils.ts
+32 -6
View File
@@ -59,20 +59,46 @@ export const getResponseColor = (
if (!safe.mid) safe.mid = "#ff9800"; // fallback orange
if (!safe.end) safe.end = "#f44336"; // fallback red
const toHex = (c: number) => c.toString(16).padStart(2, "0");
const clamp = (n: number) => Math.min(255, Math.max(0, Math.round(n)));
const rgbToHex = (r: number, g: number, b: number) => `#${toHex(clamp(r))}${toHex(clamp(g))}${toHex(clamp(b))}`;
const normalizeToHex = (value: string) => {
const v = value.trim();
if (v.startsWith("#")) {
const h = v.slice(1);
const full =
h.length === 3
? h.split("").map((c) => c + c).join("")
: h.substring(0, 6);
return `#${full.toLowerCase()}`;
}
const m = v
.replace(/\s+/g, "")
.match(/^rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(?:,(0|0?\.\d+|1))?\)$/i);
if (m) {
const r = parseInt(m[1], 10);
const g = parseInt(m[2], 10);
const b = parseInt(m[3], 10);
return rgbToHex(r, g, b);
}
// Fallback neutral
return "#7f7f7f";
};
const parseHex = (hex: string) => {
const h = hex.replace("#", "");
const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
const n = parseInt(full, 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
const toHex = (c: number) => c.toString(16).padStart(2, "0");
const mix = (a: number, b: number, t: number) => Math.round(a + (b - a) * t);
const v = Math.max(0, ms);
if (v <= 300) {
const t = v / 300; // 0..1 from start->mid
const s = parseHex(safe.start);
const m = parseHex(safe.mid);
const s = parseHex(normalizeToHex(safe.start));
const m = parseHex(normalizeToHex(safe.mid));
const r = mix(s.r, m.r, t);
const g = mix(s.g, m.g, t);
const b = mix(s.b, m.b, t);
@@ -80,12 +106,12 @@ export const getResponseColor = (
}
if (v <= 600) {
const t = (v - 300) / 300; // 0..1 from mid->end
const m = parseHex(safe.mid);
const e = parseHex(safe.end);
const m = parseHex(normalizeToHex(safe.mid));
const e = parseHex(normalizeToHex(safe.end));
const r = mix(m.r, e.r, t);
const g = mix(m.g, e.g, t);
const b = mix(m.b, e.b, t);
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
return safe.end;
return normalizeToHex(safe.end);
};