frontPanel/src/ui_kit/CustomCheckbox.tsx

import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material";
import React from "react";

import type { SxProps } from "@mui/material";

interface Props {
  label: string;
  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  checked?: boolean;
  sx?: SxProps;
  dataCy?: string;
}

export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy }: Props) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));

  return (
    <FormControlLabel
      control={
        <Checkbox
          sx={{ padding: "0px 13px 1px 11px" }}
          disableRipple
          icon={<Icon />}
          checkedIcon={<CheckedIcon />}
          onChange={handleChange}
          checked={checked}
          data-cy={dataCy}
        />
      }
      label={label}
      sx={{
        color: theme.palette.grey2.main,
        height: "26px",
        ...sx,
      }}
    />
  );
}

function Icon() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "24px",
        width: "24px",
        borderRadius: "6px",
        backgroundColor: theme.palette.background.default,
        border: `1px solid ${theme.palette.grey2.main}`,
      }}
    />
  );
}

function CheckedIcon() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        height: "24px",
        width: "24px",
        borderRadius: "6px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: theme.palette.brightPurple.main,
        border: `1px solid ${theme.palette.grey2.main}`,
      }}
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
        <path d="M2 9L10 16.5L22.5 1.5" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" />
      </svg>
    </Box>
  );
}