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>
This commit is contained in:
Emad
2024-04-15 17:10:27 +03:30
committed by GitHub
parent 9d992143ff
commit 42e50cb818
2 changed files with 6 additions and 2 deletions

View File

@ -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}
/>
);
};

View File

@ -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">