feat: create custom color picker component

src/components/General/ColorPicker/ColorPicker.css

@@ -0,0 +1,37 @@
+.color-picker-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    position: relative;
+}
+
+.color-picker-button::before ,
+.color-picker-button::after { 
+    display: block;
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    transform-origin: center;
+    opacity: 0;
+    transition: 120ms opacity ease-in-out;
+}
+.color-picker-button::before {
+    width: 0.65em;
+    height: 0.65em;
+    box-shadow: inset 1em 1em white;
+}
+.color-picker-button::after {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid white;
+}
+
+.color-picker-button:focus::before,   
+.color-picker-button:hover::after {
+    opacity: 1;
+}

src/components/General/ColorPicker/ColorPicker.tsx

@@ -1,16 +1,11 @@
 import { useState } from 'react'
-import { CirclePicker } from 'react-color'
 import { XStack } from 'tamagui'
+import { CustomPicker } from 'react-color'
+import './ColorPicker.css'
 
 const ColorPicker = () => {
-  const [chosenColor, setChosenColor] = useState('#FFFFFF')
+  const [chosenColor, setChosenColor] = useState('#2A4AF5')
-  return (
+  const colors = [
-    <XStack my={10}>
-      <CirclePicker
-        width="80%"
-        circleSize={40}
-        circleSpacing={12}
-        colors={[
     '#2A4AF5',
     '#F6B03C',
     '#7140FD',
@@ -22,12 +17,23 @@ const ColorPicker = () => {
     '#F66F8F',
     '#C78F67',
     '#CB6256',
-        ]}
+  ]
-        color={chosenColor}
+
-        onChange={color => setChosenColor(color.hex)}
+  return (
-      />
+    <>
+      <XStack my={10} width="80%" flexWrap="wrap">
+        {colors.map((color, i) => (
+          <button
+            key={i}
+            type="button"
+            className="color-picker-button"
+            onClick={_e => setChosenColor(color)}
+            style={{ background: color, color: color }}
+          ></button>
+        ))}
       </XStack>
+    </>
   )
 }
 
-export default ColorPicker
+export default CustomPicker(ColorPicker)