From ccac7ec07be7f163bebb6e621a0a67e844aff2bb Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Tue, 29 Aug 2023 18:23:24 +0200
Subject: [PATCH] Fix bug tag colors

---
 front/src/modules/ui/tag/components/Tag.tsx | 33 +++++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/front/src/modules/ui/tag/components/Tag.tsx b/front/src/modules/ui/tag/components/Tag.tsx
index 1bc1fc28d..95c508cbf 100644
--- a/front/src/modules/ui/tag/components/Tag.tsx
+++ b/front/src/modules/ui/tag/components/Tag.tsx
@@ -1,16 +1,23 @@
 import styled from '@emotion/styled';
 
-export type TagColor =
-  | 'green'
-  | 'turquoise'
-  | 'sky'
-  | 'blue'
-  | 'purple'
-  | 'pink'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'gray';
+const tagColors = [
+  'green',
+  'turquoise',
+  'sky',
+  'blue',
+  'purple',
+  'pink',
+  'red',
+  'orange',
+  'yellow',
+  'gray',
+];
+
+export type TagColor = (typeof tagColors)[number];
+
+export function castToTagColor(color: string): TagColor {
+  return tagColors.find((tagColor) => tagColor === color) ?? 'gray';
+}
 
 const StyledTag = styled.h3<{
   color: TagColor;
@@ -33,14 +40,14 @@ const StyledTag = styled.h3<{
 `;
 
 export type TagProps = {
-  color: TagColor;
+  color: string;
   text: string;
   onClick?: () => void;
 };
 
 export function Tag({ color, text, onClick }: TagProps) {
   return (
-    <StyledTag color={color} onClick={onClick}>
+    <StyledTag color={castToTagColor(color)} onClick={onClick}>
       {text}
     </StyledTag>
   );