From b6c699c14149e2dbc6632d7c9e1509cb918a77f8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 8 Dec 2025 21:10:29 +0000
Subject: [PATCH] finish nuking theme

---
 client/src/components/common/HeaderRange.tsx  | 11 ++-
 .../components/common/HeatmapResponseTime.tsx | 36 +++++++--
 client/src/components/inputs/Button.tsx       | 11 +++
 client/src/components/inputs/ButtonGroup.tsx  |  3 -
 .../components/layouts/sidebar/NavItem.tsx    |  1 -
 client/src/pages/uptime/UptimeDetails.tsx     |  8 +-
 client/src/theme/palette.ts                   | 77 -------------------
 client/src/theme/theme.ts                     |  3 +
 client/src/types/mui.d.ts                     |  9 ++-
 client/src/utils/DataUtils.ts                 | 38 +++++++--
 10 files changed, 92 insertions(+), 105 deletions(-)

diff --git a/client/src/components/common/HeaderRange.tsx b/client/src/components/common/HeaderRange.tsx
index 225da2b07..3113d6af9 100644
--- a/client/src/components/common/HeaderRange.tsx
+++ b/client/src/components/common/HeaderRange.tsx
@@ -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}
         >
diff --git a/client/src/components/common/HeatmapResponseTime.tsx b/client/src/components/common/HeatmapResponseTime.tsx
index 548bd2b6d..abb5d1f03 100644
--- a/client/src/components/common/HeatmapResponseTime.tsx
+++ b/client/src/components/common/HeatmapResponseTime.tsx
@@ -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={{
diff --git a/client/src/components/inputs/Button.tsx b/client/src/components/inputs/Button.tsx
index f674e8294..56f79d789 100644
--- a/client/src/components/inputs/Button.tsx
+++ b/client/src/components/inputs/Button.tsx
@@ -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,
       }}
     />
diff --git a/client/src/components/inputs/ButtonGroup.tsx b/client/src/components/inputs/ButtonGroup.tsx
index 5d4c116a8..c2afeb769 100644
--- a/client/src/components/inputs/ButtonGroup.tsx
+++ b/client/src/components/inputs/ButtonGroup.tsx
@@ -65,9 +65,6 @@ export const ButtonGroupInput: React.FC<ButtonGroupProps> = ({
         sx={{
           boxShadow: "none",
           width: "100%",
-          "& .MuiButtonGroup-grouped": {
-            borderColor: theme.palette.divider,
-          },
           ...sx,
         }}
       >
diff --git a/client/src/components/layouts/sidebar/NavItem.tsx b/client/src/components/layouts/sidebar/NavItem.tsx
index 2bf2f596a..955de4e00 100644
--- a/client/src/components/layouts/sidebar/NavItem.tsx
+++ b/client/src/components/layouts/sidebar/NavItem.tsx
@@ -102,7 +102,6 @@ export const NavItem = ({
         >
           <Typography
             variant="body1"
-            color={theme.palette.primary.contrastText}
             sx={{
               fontWeight: fontWeight,
               opacity: 0.9,
diff --git a/client/src/pages/uptime/UptimeDetails.tsx b/client/src/pages/uptime/UptimeDetails.tsx
index 362a74dd5..cb796de54 100644
--- a/client/src/pages/uptime/UptimeDetails.tsx
+++ b/client/src/pages/uptime/UptimeDetails.tsx
@@ -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}
       />
diff --git a/client/src/theme/palette.ts b/client/src/theme/palette.ts
index ef312b29b..57f15c1fa 100644
--- a/client/src/theme/palette.ts
+++ b/client/src/theme/palette.ts
@@ -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),
   },
 };
diff --git a/client/src/theme/theme.ts b/client/src/theme/theme.ts
index b6a57067c..b374f512e 100644
--- a/client/src/theme/theme.ts
+++ b/client/src/theme/theme.ts
@@ -104,6 +104,9 @@ export const theme = (mode: string, palette: any) =>
           },
         },
       },
+      MuiButton: {
+        styleOverrides: {},
+      },
     },
     shape: {
       borderRadius: 2,
diff --git a/client/src/types/mui.d.ts b/client/src/types/mui.d.ts
index 6bcdfdbc8..2f1d07d54 100644
--- a/client/src/types/mui.d.ts
+++ b/client/src/types/mui.d.ts
@@ -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" {
diff --git a/client/src/utils/DataUtils.ts b/client/src/utils/DataUtils.ts
index 96c4d5bb1..c777d4c9e 100644
--- a/client/src/utils/DataUtils.ts
+++ b/client/src/utils/DataUtils.ts
@@ -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);
 };