From f6418f69e4f8c73b8ac5b7fe8abde87086706279 Mon Sep 17 00:00:00 2001
From: Peter Klingelhofer <peterklingelhofer@users.noreply.github.com>
Date: Mon, 2 Sep 2024 11:38:46 -0500
Subject: [PATCH 1/3] Show color invalid error, improve color validation regex

---
 client/src/components/ManageArtist/ColorInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ManageArtist/ColorInput.tsx b/client/src/components/ManageArtist/ColorInput.tsx
index a5ebad11..189860b6 100644
--- a/client/src/components/ManageArtist/ColorInput.tsx
+++ b/client/src/components/ManageArtist/ColorInput.tsx
@@ -15,7 +15,7 @@ const generateColor = (name: string) => {
 };
 
 const isValidColor = (val: string) => {
-  const matcher = val.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
+  const matcher = val.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/);
   return matcher;
 };
 
@@ -50,7 +50,7 @@ export const ColorInput: React.FC<{ name: string; title: string }> = ({
   React.useEffect(() => {
     clearErrors(name);
     if (!isValidColor(color)) {
-      setError(name, { message: "Not a valid color" });
+      setError(name, { message: "Not a valid color code. Please use #RRGGBB, #RGB, #RRGGBBAA, or #RGBA format." });
     }
     setValue(name, color, { shouldDirty: true });
   }, [color]);

From 2c3d3d8b608cabcd2367062447ac82b55739a471 Mon Sep 17 00:00:00 2001
From: peterklingelhofer <peterklingelhofer@gmail.com>
Date: Mon, 2 Sep 2024 11:56:30 -0500
Subject: [PATCH 2/3] Revert regex update

---
 client/src/components/ManageArtist/ColorInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ManageArtist/ColorInput.tsx b/client/src/components/ManageArtist/ColorInput.tsx
index 189860b6..22cb88df 100644
--- a/client/src/components/ManageArtist/ColorInput.tsx
+++ b/client/src/components/ManageArtist/ColorInput.tsx
@@ -15,7 +15,7 @@ const generateColor = (name: string) => {
 };
 
 const isValidColor = (val: string) => {
-  const matcher = val.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/);
+  const matcher = val.match(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
   return matcher;
 };
 

From 0decc5c9698f11e0a02209952661c9c288b16359 Mon Sep 17 00:00:00 2001
From: peterklingelhofer <peterklingelhofer@gmail.com>
Date: Mon, 2 Sep 2024 11:58:04 -0500
Subject: [PATCH 3/3] Specify valid color code formats

---
 client/src/components/ManageArtist/ColorInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ManageArtist/ColorInput.tsx b/client/src/components/ManageArtist/ColorInput.tsx
index 22cb88df..ccb0cae8 100644
--- a/client/src/components/ManageArtist/ColorInput.tsx
+++ b/client/src/components/ManageArtist/ColorInput.tsx
@@ -50,7 +50,7 @@ export const ColorInput: React.FC<{ name: string; title: string }> = ({
   React.useEffect(() => {
     clearErrors(name);
     if (!isValidColor(color)) {
-      setError(name, { message: "Not a valid color code. Please use #RRGGBB, #RGB, #RRGGBBAA, or #RGBA format." });
+      setError(name, { message: "Not a valid color code. Please use #RRGGBB or #RGB format." });
     }
     setValue(name, color, { shouldDirty: true });
   }, [color]);