From 27b83fc633c34b866a3f9868b2d441c9b19f5747 Mon Sep 17 00:00:00 2001
From: valid <valid@zgen.hu>
Date: Tue, 9 Jul 2024 16:33:27 +0200
Subject: [PATCH] feat(ColorPicker): add Palette icon to indicate clickableness

---
 .../[guild]/EditGuild/components/ColorPicker.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/[guild]/EditGuild/components/ColorPicker.tsx b/src/components/[guild]/EditGuild/components/ColorPicker.tsx
index f212ba62a3..3f462ff8ef 100644
--- a/src/components/[guild]/EditGuild/components/ColorPicker.tsx
+++ b/src/components/[guild]/EditGuild/components/ColorPicker.tsx
@@ -3,14 +3,17 @@ import {
   FormControl,
   FormLabel,
   HStack,
+  Icon,
   Input,
   useColorModeValue,
   VStack,
 } from "@chakra-ui/react"
+import { Palette } from "@phosphor-icons/react"
+import Color from "color"
 import { useThemeContext } from "components/[guild]/ThemeContext"
 import FormErrorMessage from "components/common/FormErrorMessage"
 import useDebouncedState from "hooks/useDebouncedState"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { Controller, useFormContext, useWatch } from "react-hook-form"
 
 type Props = {
@@ -23,6 +26,7 @@ const ColorPicker = ({ fieldName }: Props): JSX.Element => {
     setValue,
     formState: { errors },
   } = useFormContext()
+  const [isIconLight, setIsIconLight] = useState(false)
 
   const pickedColor = useWatch({ name: fieldName })
   const debouncedPickedColor = useDebouncedState(pickedColor, 300)
@@ -32,6 +36,8 @@ const ColorPicker = ({ fieldName }: Props): JSX.Element => {
   useEffect(() => {
     if (!CSS.supports("color", debouncedPickedColor)) return
     setLocalThemeColor(debouncedPickedColor)
+    const color = Color(pickedColor)
+    setIsIconLight(color.isDark())
   }, [debouncedPickedColor, setLocalThemeColor])
 
   const borderColor = useColorModeValue("gray.300", "whiteAlpha.300")
@@ -75,6 +81,12 @@ const ColorPicker = ({ fieldName }: Props): JSX.Element => {
                 />
               )}
             />
+            <Icon
+              as={Palette}
+              pos="absolute"
+              pointerEvents={"none"}
+              color={isIconLight ? "whiteAlpha.800" : "blackAlpha.800"}
+            />
           </Flex>
           <Input
             maxWidth={40}