From 1beab9cb4d8ec981027f93ff473867cd995c7673 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:13:46 -0600
Subject: [PATCH] add custom account colors option

---
 src/components/form/ColorPicker.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/form/ColorPicker.tsx b/src/components/form/ColorPicker.tsx
index ae323156..ba26ff55 100644
--- a/src/components/form/ColorPicker.tsx
+++ b/src/components/form/ColorPicker.tsx
@@ -34,6 +34,31 @@ export function ColorPicker(props: {
             </button>
           );
         })}
+        <div className="relative w-full h-10">
+          <input
+            type="color"
+            value={props.value}
+            onChange={(e) => props.onInput(e.target.value)}
+            className="absolute opacity-0 cursor-pointer w-full h-10"
+          />
+          <button
+            type="button"
+            tabIndex={0}
+            className={classNames(
+              "w-full h-10 rounded flex justify-center items-center text-white pointer border-2 border-opacity-10 cursor-pointer",
+              !colors.includes(props.value)
+                ? "border-white"
+                : "border-transparent",
+            )}
+            style={{
+              backgroundColor: !colors.includes(props.value)
+                ? props.value
+                : "#333",
+            }}
+          >
+            <Icon icon={Icons.BRUSH} />
+          </button>
+        </div>
       </div>
     </div>
   );