From eae300a95d597c4557e7f378217bf183af517bb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= Date: Wed, 15 Jan 2025 11:42:21 +0100 Subject: [PATCH] fix: add hover effect on record table action row (#9633) Related to this discord follow up https://discord.com/channels/1130383047699738754/1328751649174585427 --- .../components/RecordTableActionRow.tsx | 10 +++++++++- .../components/RecordTableDraggableTr.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx index 65019948a..f04d37b79 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx @@ -8,18 +8,26 @@ import { IconComponent } from 'twenty-ui'; const StyledRecordTableDraggableTr = styled(RecordTableDraggableTr)` cursor: pointer; + transition: background-color ${({ theme }) => theme.animation.duration.fast} + ease-in-out; + + &:hover { + background-color: ${({ theme }) => theme.background.transparent.light}; + } `; const StyledIconContainer = styled(RecordTableTd)` + align-items: center; + background-color: transparent; border-right: none; color: ${({ theme }) => theme.font.color.secondary}; display: flex; height: 32px; - align-items: center; justify-content: center; `; const StyledRecordTableTdTextContainer = styled(RecordTableTd)` + background-color: transparent; border-right: none; height: 32px; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx index 77830ac00..973bd11e9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDraggableTr.tsx @@ -51,7 +51,7 @@ export const RecordTableDraggableTr = forwardRef< ...draggableProvided.draggableProps.style, background: draggableSnapshot.isDragging ? theme.background.transparent.light - : 'none', + : undefined, borderColor: draggableSnapshot.isDragging ? `${theme.border.color.medium}` : 'transparent',