From 42e50cb8182c7a13b9047ead6a6b88a9bf09062d Mon Sep 17 00:00:00 2001
From: Emad <emadbaqeri@outlook.com>
Date: Mon, 15 Apr 2024 17:10:27 +0330
Subject: [PATCH] fix: record object chip background color when idle (not
 hovered) (#4662)

Fixes #4651


https://github.com/twentyhq/twenty/assets/50639499/c4b604a1-4e73-422a-bc13-a2764f564a75

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
---
 .../src/modules/object-record/components/RecordChip.tsx      | 5 ++++-
 .../record-board-card/components/RecordBoardCard.tsx         | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
index 60eeea769..37d032156 100644
--- a/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { EntityChip } from 'twenty-ui';
+import { EntityChip, EntityChipVariant } from 'twenty-ui';
 
 import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
@@ -11,6 +11,7 @@ export type RecordChipProps = {
   record: ObjectRecord;
   maxWidth?: number;
   className?: string;
+  variant?: EntityChipVariant;
 };
 
 export const RecordChip = ({
@@ -18,6 +19,7 @@ export const RecordChip = ({
   record,
   maxWidth,
   className,
+  variant,
 }: RecordChipProps) => {
   const { mapToObjectRecordIdentifier } = useMapToObjectRecordIdentifier({
     objectNameSingular,
@@ -44,6 +46,7 @@ export const RecordChip = ({
       linkToEntity={linkToEntity}
       maxWidth={maxWidth}
       className={className}
+      variant={variant}
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index 0c753862a..81838d8ff 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconEye } from 'twenty-ui';
+import { EntityChipVariant, IconEye } from 'twenty-ui';
 
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
@@ -221,6 +221,7 @@ export const RecordBoardCard = () => {
           <RecordChip
             objectNameSingular={objectMetadataItem.nameSingular}
             record={record}
+            variant={EntityChipVariant.Transparent}
           />
           {isCompactModeActive && (
             <StyledCompactIconContainer className="compact-icon-container">