From edb5e3a64b125b1c3e5fdc59ac060b6148e78df9 Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Thu, 24 Aug 2023 13:04:38 +0300
Subject: [PATCH] feat: create custom color picker component

---
 .../General/ColorPicker/ColorPicker.css       | 37 ++++++++++++
 .../General/ColorPicker/ColorPicker.tsx       | 56 ++++++++++---------
 2 files changed, 68 insertions(+), 25 deletions(-)
 create mode 100644 src/components/General/ColorPicker/ColorPicker.css

diff --git a/src/components/General/ColorPicker/ColorPicker.css b/src/components/General/ColorPicker/ColorPicker.css
new file mode 100644
index 00000000..edfabd34
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/General/ColorPicker/ColorPicker.tsx b/src/components/General/ColorPicker/ColorPicker.tsx
index 80d5afed..b0a8b676 100644
--- a/src/components/General/ColorPicker/ColorPicker.tsx
+++ b/src/components/General/ColorPicker/ColorPicker.tsx
@@ -1,33 +1,39 @@
 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')
+  const colors = [
+    '#2A4AF5',
+    '#F6B03C',
+    '#7140FD',
+    '#2A799B',
+    '#EC266C',
+    '#1992D7',
+    '#FF7D46',
+    '#216266',
+    '#F66F8F',
+    '#C78F67',
+    '#CB6256',
+  ]
+
   return (
-    <XStack my={10}>
-      <CirclePicker
-        width="80%"
-        circleSize={40}
-        circleSpacing={12}
-        colors={[
-          '#2A4AF5',
-          '#F6B03C',
-          '#7140FD',
-          '#2A799B',
-          '#EC266C',
-          '#1992D7',
-          '#FF7D46',
-          '#216266',
-          '#F66F8F',
-          '#C78F67',
-          '#CB6256',
-        ]}
-        color={chosenColor}
-        onChange={color => setChosenColor(color.hex)}
-      />
-    </XStack>
+    <>
+      <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)