From 9be77a547dae2e65ba2d7bd6ab85963389c45a9d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 24 Nov 2025 18:54:52 +0000
Subject: [PATCH] checkboxes

---
 client/src/components/inputs/Checkbox.tsx       |  9 +++++----
 client/src/components/monitors/HeaderFilter.tsx | 13 +++++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/src/components/inputs/Checkbox.tsx b/client/src/components/inputs/Checkbox.tsx
index 5cdb9dc1f..eee2ecbd9 100644
--- a/client/src/components/inputs/Checkbox.tsx
+++ b/client/src/components/inputs/Checkbox.tsx
@@ -8,7 +8,10 @@ type CheckboxInputProps = CheckboxProps & {
   label?: string;
 };
 export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
-  function CheckboxInput({ sx, ...props }: CheckboxInputProps, ref: React.Ref<HTMLInputElement>) {
+  function CheckboxInput(
+    { sx, ...props }: CheckboxInputProps,
+    ref: React.Ref<HTMLInputElement>
+  ) {
     const theme = useTheme();
     return (
       <Checkbox
@@ -35,9 +38,7 @@ export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
             stroke: "currentColor",
             fill: "none",
           },
-          "&.Mui-checked svg rect": {
-            fill: theme.palette.accent.main,
-          },
+
           ...sx,
         }}
       />
diff --git a/client/src/components/monitors/HeaderFilter.tsx b/client/src/components/monitors/HeaderFilter.tsx
index bcaab0008..8ca5c5e30 100644
--- a/client/src/components/monitors/HeaderFilter.tsx
+++ b/client/src/components/monitors/HeaderFilter.tsx
@@ -11,6 +11,7 @@ import {
   type UptimeMonitorType,
   type MonitorStatus,
 } from "@/types/monitor";
+import { ThemeContext } from "@emotion/react";
 
 type HeaderFilterProps = {
   selectedTypes: UptimeMonitorType[];
@@ -53,8 +54,10 @@ export const HeaderFilter = ({
       >
         {UptimeMonitorTypes.map((type) => (
           <MenuItem key={type} value={type}>
-            <Checkbox checked={selectedTypes.includes(type)} />
-            <Typography textTransform={"capitalize"}>{type}</Typography>
+            <Stack direction={"row"} gap={theme.spacing(2)}>
+              <Checkbox checked={selectedTypes.includes(type)} />
+              <Typography textTransform={"capitalize"}>{type}</Typography>
+            </Stack>
           </MenuItem>
         ))}
       </Select>
@@ -67,8 +70,10 @@ export const HeaderFilter = ({
       >
         {MonitorStatuses.map((status) => (
           <MenuItem key={status} value={status}>
-            <Checkbox checked={selectedStatuses.includes(status)} />
-            <Typography textTransform={"capitalize"}>{status}</Typography>
+            <Stack direction={"row"} gap={theme.spacing(2)}>
+              <Checkbox checked={selectedStatuses.includes(status)} />
+              <Typography textTransform={"capitalize"}>{status}</Typography>
+            </Stack>
           </MenuItem>
         ))}
       </Select>