From 4caa095d529eb41d6396212fe74c45a22be640a4 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Tue, 27 Aug 2024 04:29:09 +0530
Subject: [PATCH] fix: color restrictions issue (#16360)

* fix: color restrictions issue

* Update EventAdvancedTab.tsx
---
 .../components/eventtype/EventAdvancedTab.tsx | 24 +++++++++----------
 .../pages/settings/my-account/appearance.tsx  |  4 ++--
 .../ee/components/BrandColorsForm.tsx         |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 1e4f8af1dd..a35486141b 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -582,14 +582,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 <ColorPicker
                   defaultValue={eventTypeColorState.lightEventTypeColor}
                   onChange={(value) => {
+                    const newVal = {
+                      ...eventTypeColorState,
+                      lightEventTypeColor: value,
+                    };
+                    formMethods.setValue("eventTypeColor", newVal, { shouldDirty: true });
+                    setEventTypeColorState(newVal);
                     if (checkWCAGContrastColor("#ffffff", value)) {
-                      const newVal = {
-                        ...eventTypeColorState,
-                        lightEventTypeColor: value,
-                      };
                       setLightModeError(false);
-                      formMethods.setValue("eventTypeColor", newVal, { shouldDirty: true });
-                      setEventTypeColorState(newVal);
                     } else {
                       setLightModeError(true);
                     }
@@ -607,14 +607,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 <ColorPicker
                   defaultValue={eventTypeColorState.darkEventTypeColor}
                   onChange={(value) => {
+                    const newVal = {
+                      ...eventTypeColorState,
+                      darkEventTypeColor: value,
+                    };
+                    formMethods.setValue("eventTypeColor", newVal, { shouldDirty: true });
+                    setEventTypeColorState(newVal);
                     if (checkWCAGContrastColor("#101010", value)) {
-                      const newVal = {
-                        ...eventTypeColorState,
-                        darkEventTypeColor: value,
-                      };
                       setDarkModeError(false);
-                      formMethods.setValue("eventTypeColor", newVal, { shouldDirty: true });
-                      setEventTypeColorState(newVal);
                     } else {
                       setDarkModeError(true);
                     }
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 9fe645435b..b290489c0c 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -350,10 +350,10 @@ const AppearanceView = ({
                           onChange={(value) => {
                             if (checkWCAGContrastColor("#ffffff", value)) {
                               setLightModeError(false);
-                              brandColorsFormMethods.setValue("brandColor", value, { shouldDirty: true });
                             } else {
                               setLightModeError(true);
                             }
+                            brandColorsFormMethods.setValue("brandColor", value, { shouldDirty: true });
                           }}
                         />
                         {lightModeError ? (
@@ -378,10 +378,10 @@ const AppearanceView = ({
                           onChange={(value) => {
                             if (checkWCAGContrastColor("#101010", value)) {
                               setDarkModeError(false);
-                              brandColorsFormMethods.setValue("darkBrandColor", value, { shouldDirty: true });
                             } else {
                               setDarkModeError(true);
                             }
+                            brandColorsFormMethods.setValue("darkBrandColor", value, { shouldDirty: true });
                           }}
                         />
                         {darkModeError ? (
diff --git a/packages/features/ee/components/BrandColorsForm.tsx b/packages/features/ee/components/BrandColorsForm.tsx
index 4651e6faef..a51f21e39d 100644
--- a/packages/features/ee/components/BrandColorsForm.tsx
+++ b/packages/features/ee/components/BrandColorsForm.tsx
@@ -68,10 +68,10 @@ const BrandColorsForm = ({
                   onChange={(value) => {
                     if (checkWCAGContrastColor("#ffffff", value)) {
                       setLightModeError(false);
-                      brandColorsFormMethods.setValue("brandColor", value, { shouldDirty: true });
                     } else {
                       setLightModeError(true);
                     }
+                    brandColorsFormMethods.setValue("brandColor", value, { shouldDirty: true });
                   }}
                 />
                 {lightModeError ? (
@@ -96,10 +96,10 @@ const BrandColorsForm = ({
                   onChange={(value) => {
                     if (checkWCAGContrastColor("#101010", value)) {
                       setDarkModeError(false);
-                      brandColorsFormMethods.setValue("darkBrandColor", value, { shouldDirty: true });
                     } else {
                       setDarkModeError(true);
                     }
+                    brandColorsFormMethods.setValue("darkBrandColor", value, { shouldDirty: true });
                   }}
                 />
                 {darkModeError ? (