admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: record object chip background color when idle (not hovered) (#4662)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -1,5 +1,5 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { EntityChip } from 'twenty-ui'; import { EntityChip, EntityChipVariant } from 'twenty-ui';
import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier'; import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
@ -11,6 +11,7 @@ export type RecordChipProps = {
record: ObjectRecord; record: ObjectRecord;
maxWidth?: number; maxWidth?: number;
className?: string; className?: string;
variant?: EntityChipVariant;
}; };
export const RecordChip = ({ export const RecordChip = ({
@ -18,6 +19,7 @@ export const RecordChip = ({
record, record,
maxWidth, maxWidth,
className, className,
variant,
}: RecordChipProps) => { }: RecordChipProps) => {
const { mapToObjectRecordIdentifier } = useMapToObjectRecordIdentifier({ const { mapToObjectRecordIdentifier } = useMapToObjectRecordIdentifier({
objectNameSingular, objectNameSingular,
@ -44,6 +46,7 @@ export const RecordChip = ({
linkToEntity={linkToEntity} linkToEntity={linkToEntity}
maxWidth={maxWidth} maxWidth={maxWidth}
className={className} className={className}
variant={variant}
/> />
); );
}; };

3
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
View File

@ -2,7 +2,7 @@ import { ReactNode, useContext, useState } from 'react';
import { useInView } from 'react-intersection-observer'; import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; 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 { RecordChip } from '@/object-record/components/RecordChip';
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
@ -221,6 +221,7 @@ export const RecordBoardCard = () => {
<RecordChip <RecordChip
objectNameSingular={objectMetadataItem.nameSingular} objectNameSingular={objectMetadataItem.nameSingular}
record={record} record={record}
variant={EntityChipVariant.Transparent}
/> />
{isCompactModeActive && ( {isCompactModeActive && (
<StyledCompactIconContainer className="compact-icon-container"> <StyledCompactIconContainer className="compact-icon-container">