From 8c7ae9e07fddf02f16121bc6255d9f1211d77bb6 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:59:05 +0530
Subject: [PATCH] Adjusted empty tag style (#6465)

Fixed Issue #6307

corrected
- border style
- font color
- font weight

added
- Empty Tag story
---
 .../components/RecordBoardColumnHeader.tsx          |  5 +++++
 .../twenty-ui/src/display/tag/components/Tag.tsx    |  6 ++++--
 .../tag/components/__stories__/Tag.stories.tsx      | 13 +++++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
index 62d90625e..89ea3debc 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
@@ -88,6 +88,11 @@ export const RecordBoardColumnHeader = () => {
               : 'transparent'
           }
           text={columnDefinition.title}
+          weight={
+            columnDefinition.type === RecordBoardColumnDefinitionType.Value
+              ? 'regular'
+              : 'medium'
+          }
         />
         {!!boardColumnTotal && <StyledAmount>${boardColumnTotal}</StyledAmount>}
         <StyledNumChildren>{recordCount}</StyledNumChildren>
diff --git a/packages/twenty-ui/src/display/tag/components/Tag.tsx b/packages/twenty-ui/src/display/tag/components/Tag.tsx
index 1ed0dc1dd..83d06878f 100644
--- a/packages/twenty-ui/src/display/tag/components/Tag.tsx
+++ b/packages/twenty-ui/src/display/tag/components/Tag.tsx
@@ -26,7 +26,9 @@ const StyledTag = styled.h3<{
     color === 'transparent' ? color : theme.tag.background[color]};
   border-radius: ${BORDER_COMMON.radius.sm};
   color: ${({ color, theme }) =>
-    color === 'transparent' ? theme.tag.text['gray'] : theme.tag.text[color]};
+    color === 'transparent'
+      ? theme.font.color.tertiary
+      : theme.tag.text[color]};
   display: inline-flex;
   font-size: ${({ theme }) => theme.font.size.md};
   font-style: normal;
@@ -39,7 +41,7 @@ const StyledTag = styled.h3<{
   overflow: hidden;
   padding: 0 ${spacing2};
   border: ${({ variant, theme }) =>
-    variant === 'outline' ? `2px dashed ${theme.tag.background['gray']}` : ''};
+    variant === 'outline' ? `1px dashed ${theme.border.color.strong}` : ''};
 
   gap: ${spacing1};
 
diff --git a/packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx b/packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx
index e764a42aa..5a3db6ebd 100644
--- a/packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx
+++ b/packages/twenty-ui/src/display/tag/components/__stories__/Tag.stories.tsx
@@ -90,3 +90,16 @@ export const Catalog: CatalogStory<Story, typeof Tag> = {
   },
   decorators: [CatalogDecorator],
 };
+
+export const EmptyTag: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'transparent',
+    text: 'No Value',
+    variant: 'outline',
+    weight: 'medium',
+  },
+  parameters: {
+    container: { width: 'auto' },
+  },
+};