replace native colorpicker with custom

package.json

@@ -40,6 +40,7 @@
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-colorful": "^5.6.1",
     "react-cytoscapejs": "^2.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

src/ui_kit/CircleColorPicker.tsx

@@ -1,5 +1,6 @@
-import { ButtonBase } from "@mui/material";
-import { startTransition, useRef } from "react";
+import { ButtonBase, Popover } from "@mui/material";
+import { startTransition, useState } from "react";
+import { HexAlphaColorPicker } from "react-colorful";
 
 interface Props {
   color: string;
@@ -7,35 +8,43 @@ interface Props {
 }
 
 export default function CircleColorPicker({ color, onChange }: Props) {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
   return (
-    <ButtonBase
-      onClick={() => inputRef.current?.click()}
-      sx={{
-        aspectRatio: 1,
-        height: "22px",
-        width: "22px",
-        minWidth: "22px",
-        borderRadius: "50%",
-        backgroundColor: color,
-        border: "1px solid #4D4D4D",
-      }}
-    >
-      <input
-        ref={inputRef}
-        type="color"
-        value={color}
-        onChange={(e) => {
-          startTransition(() => {
-            onChange(e.target.value);
-          });
-        }}
-        style={{
-          opacity: 0,
-          cursor: "pointer",
+    <>
+      <ButtonBase
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        sx={{
+          aspectRatio: 1,
+          height: "22px",
+          width: "22px",
+          minWidth: "22px",
+          borderRadius: "50%",
+          backgroundColor: color,
+          border: "1px solid #4D4D4D",
         }}
       />
-    </ButtonBase>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        slotProps={{
+          paper: {
+            sx: {
+              p: "20px",
+            },
+            style: {
+              backgroundColor: color,
+            },
+          },
+        }}
+      >
+        <HexAlphaColorPicker color={color} onChange={(color) => startTransition(() => onChange(color))} />
+      </Popover>
+    </>
   );
 }

yarn.lock

@@ -9486,6 +9486,11 @@ react-beautiful-dnd@^13.1.1:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-cytoscapejs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-2.0.0.tgz#fdc2547626df0678acfbb48e73a437ddc1687b01"