From 45319d81db4ecb6602f11078d905d5f11c61d054 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 17 Feb 2023 17:06:30 +0530
Subject: [PATCH] fix: default label color (#295)

* fix: colors of old labels can now be changed

* fix: black color for labels with no color
---
 apps/app/components/issues/select/label.tsx           |  5 +++--
 apps/app/components/issues/sidebar.tsx                | 11 +++++++----
 apps/app/components/labels/create-label-modal.tsx     |  2 +-
 .../components/labels/create-update-label-inline.tsx  |  7 +++++--
 apps/app/components/labels/single-label.tsx           |  2 +-
 apps/app/components/project/settings/single-label.tsx |  2 +-
 apps/app/components/states/create-state-modal.tsx     |  2 +-
 .../components/states/create-update-state-inline.tsx  |  2 +-
 8 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index f0a1d2d64..2b810b30a 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -102,7 +102,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                 <span
                                   className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                                   style={{
-                                    backgroundColor: label?.color ?? "green",
+                                    backgroundColor:
+                                      label.color && label.color !== "" ? label.color : "#000",
                                   }}
                                 />
                                 {label.name}
@@ -128,7 +129,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                     <span
                                       className="h-2 w-2 flex-shrink-0 rounded-full"
                                       style={{
-                                        backgroundColor: child?.color ?? "green",
+                                        backgroundColor: child?.color ?? "black",
                                       }}
                                     />
                                     {child.name}
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 3ab331244..22c98ebc6 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -324,7 +324,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                       >
                         <span
                           className="h-2 w-2 flex-shrink-0 rounded-full"
-                          style={{ backgroundColor: label?.color ?? "green" }}
+                          style={{ backgroundColor: label?.color ?? "black" }}
                         />
                         {label.name}
                         <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
@@ -386,7 +386,10 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                               <span
                                                 className="h-2 w-2 flex-shrink-0 rounded-full"
                                                 style={{
-                                                  backgroundColor: label?.color ?? "green",
+                                                  backgroundColor:
+                                                    label.color && label.color !== ""
+                                                      ? label.color
+                                                      : "#000",
                                                 }}
                                               />
                                               {label.name}
@@ -413,7 +416,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                                                   <span
                                                     className="h-2 w-2 flex-shrink-0 rounded-full"
                                                     style={{
-                                                      backgroundColor: child?.color ?? "green",
+                                                      backgroundColor: child?.color ?? "black",
                                                     }}
                                                   />
                                                   {child.name}
@@ -472,7 +475,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                           <span
                             className="h-5 w-5 rounded"
                             style={{
-                              backgroundColor: watch("color") ?? "green",
+                              backgroundColor: watch("color") ?? "black",
                             }}
                           />
                         )}
diff --git a/apps/app/components/labels/create-label-modal.tsx b/apps/app/components/labels/create-label-modal.tsx
index 89c286012..58967d6d4 100644
--- a/apps/app/components/labels/create-label-modal.tsx
+++ b/apps/app/components/labels/create-label-modal.tsx
@@ -118,7 +118,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                 <span
                                   className="ml-2 h-4 w-4 rounded"
                                   style={{
-                                    backgroundColor: watch("color") ?? "green",
+                                    backgroundColor: watch("color") ?? "black",
                                   }}
                                 />
                               )}
diff --git a/apps/app/components/labels/create-update-label-inline.tsx b/apps/app/components/labels/create-update-label-inline.tsx
index 3b7fe614c..6c61d6d5a 100644
--- a/apps/app/components/labels/create-update-label-inline.tsx
+++ b/apps/app/components/labels/create-update-label-inline.tsx
@@ -100,7 +100,10 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
   useEffect(() => {
     if (!labelToUpdate) return;
 
-    setValue("color", labelToUpdate.color);
+    setValue(
+      "color",
+      labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
+    );
     setValue("name", labelToUpdate.name);
   }, [labelToUpdate, setValue]);
 
@@ -123,7 +126,7 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
                   <span
                     className="h-4 w-4 rounded"
                     style={{
-                      backgroundColor: watch("color") ?? "green",
+                      backgroundColor: watch("color") ?? "#000",
                     }}
                   />
                 )}
diff --git a/apps/app/components/labels/single-label.tsx b/apps/app/components/labels/single-label.tsx
index 927a30d5a..9c311518e 100644
--- a/apps/app/components/labels/single-label.tsx
+++ b/apps/app/components/labels/single-label.tsx
@@ -24,7 +24,7 @@ export const SingleLabel: React.FC<Props> = ({
         <span
           className="h-3 w-3 flex-shrink-0 rounded-full"
           style={{
-            backgroundColor: label.color,
+            backgroundColor: label.color && label.color !== "" ? label.color : "#000",
           }}
         />
         <h6 className="text-sm">{label.name}</h6>
diff --git a/apps/app/components/project/settings/single-label.tsx b/apps/app/components/project/settings/single-label.tsx
index c58fb608f..24f5e6af4 100644
--- a/apps/app/components/project/settings/single-label.tsx
+++ b/apps/app/components/project/settings/single-label.tsx
@@ -72,7 +72,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                         <span
                           className="h-4 w-4 rounded"
                           style={{
-                            backgroundColor: watch("color") ?? "green",
+                            backgroundColor: watch("color") ?? "black",
                           }}
                         />
                       )}
diff --git a/apps/app/components/states/create-state-modal.tsx b/apps/app/components/states/create-state-modal.tsx
index 5986b4e53..c3bdd5526 100644
--- a/apps/app/components/states/create-state-modal.tsx
+++ b/apps/app/components/states/create-state-modal.tsx
@@ -158,7 +158,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                   <span
                                     className="ml-2 h-4 w-4 rounded"
                                     style={{
-                                      backgroundColor: watch("color") ?? "green",
+                                      backgroundColor: watch("color") ?? "black",
                                     }}
                                   />
                                 )}
diff --git a/apps/app/components/states/create-update-state-inline.tsx b/apps/app/components/states/create-update-state-inline.tsx
index 7d67f8fcd..76082f16c 100644
--- a/apps/app/components/states/create-update-state-inline.tsx
+++ b/apps/app/components/states/create-update-state-inline.tsx
@@ -141,7 +141,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, select
                   <span
                     className="h-4 w-4 rounded"
                     style={{
-                      backgroundColor: watch("color") ?? "green",
+                      backgroundColor: watch("color") ?? "black",
                     }}
                   />
                 )}