feat: Styled ColorPicker

editor.planx.uk/src/ui/ColorPicker.tsx

@@ -1,7 +1,7 @@
-import ButtonBase from "@mui/material/ButtonBase";
+import Box, { BoxProps } from "@mui/material/Box";
+import ButtonBase, { ButtonBaseProps } from "@mui/material/ButtonBase";
+import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import makeStyles from "@mui/styles/makeStyles";
-import classNames from "classnames";
 import React, { useState } from "react";
 import { ChromePicker } from "react-color";
 
@@ -12,66 +12,72 @@ export interface Props {
   onChange?: (newColor: string) => void;
 }
 
-const useClasses = makeStyles((theme) => ({
-  root: {
-    padding: 0,
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-  },
-  inline: {
+interface RootProps extends BoxProps {
+  inline?: boolean;
+}
+
+const Root = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "inline",
+})<RootProps>(({ inline, theme }) => ({
+  padding: 0,
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  ...(inline && {
     height: 50,
     padding: theme.spacing(2, 0),
-    "& $popover": {
+    "& .popover": {
       top: "calc(100% - 4px)",
     },
-  },
-  label: {
-    marginRight: theme.spacing(2),
-  },
-  button: {
-    fontFamily: "inherit",
-    fontSize: 15,
-    position: "relative",
-    display: "block",
-    textAlign: "left",
-    paddingLeft: theme.spacing(4),
-    paddingRight: theme.spacing(2),
-    whiteSpace: "nowrap",
-  },
-  swatch: {
-    background: "#fff",
-    display: "inline-block",
-    cursor: "pointer",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: 18,
-    height: 18,
-  },
-  popover: {
-    position: "absolute",
-    zIndex: 2,
-    top: "calc(100% + 12px)",
-  },
-  cover: {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    width: "100%",
-  },
-  focused: {
+  }),
+}));
+
+const Swatch = styled(Box)(() => ({
+  background: "#fff",
+  display: "inline-block",
+  cursor: "pointer",
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: 18,
+  height: 18,
+}));
+
+const Cover = styled(ButtonBase)(() => ({
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: "100%",
+}));
+
+const Popover = styled(Box)(() => ({
+  position: "absolute",
+  zIndex: 2,
+  top: "calc(100% + 12px)",
+}));
+
+const StyledButtonBase = styled(ButtonBase, {
+  shouldForwardProp: (prop) => prop !== "show",
+})<ButtonBaseProps & { show: boolean }>(({ theme, show }) => ({
+  fontFamily: "inherit",
+  fontSize: 15,
+  position: "relative",
+  display: "block",
+  textAlign: "left",
+  paddingLeft: theme.spacing(4),
+  paddingRight: theme.spacing(2),
+  whiteSpace: "nowrap",
+  ...(show && {
     color: theme.palette.primary.dark,
-    "& $swatch": {
+    "& .swatch": {
       boxShadow: `inset 0 0 0 2px ${theme.palette.primary.light}`,
     },
-  },
+  }),
 }));
 
 export default function ColorPicker(props: Props): FCReturn {
-  const classes = useClasses();
   const [show, setShow] = useState(false);
 
   const handleClick = () => {
@@ -87,37 +93,24 @@ export default function ColorPicker(props: Props): FCReturn {
   };
 
   return (
-    <div className={classNames(classes.root, props.inline && classes.inline)}>
-      <Typography className={classes.label} variant="body2">
+    <Root inline={props.inline}>
+      <Typography mr={2} variant="body2">
         {props.label || "Colour"}:{" "}
       </Typography>
-      <ButtonBase
-        classes={{
-          root: classNames(classes.button, show && classes.focused),
-          focusVisible: classes.focused,
-        }}
-        onClick={handleClick}
-        disableRipple
-      >
-        <div
-          className={classes.swatch}
-          style={{
-            backgroundColor: props.color,
-          }}
-        />
+      <StyledButtonBase show={show} onClick={handleClick} disableRipple>
+        <Swatch sx={{ backgroundColor: props.color }} className="swatch" />
         {props.color}
-      </ButtonBase>
+      </StyledButtonBase>
       {show ? (
-        <div className={classes.popover}>
-          <ButtonBase
-            className={classes.cover}
+        <Popover className="popover">
+          <Cover
             onClick={handleClose}
             aria-label="Close Colour Picker"
             disableRipple
           />
           <ChromePicker color={props.color} onChange={handleChange} />
-        </div>
+        </Popover>
       ) : null}
-    </div>
+    </Root>
   );
 }