diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx index 2aff77e1b162..74af8f6ab5a9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/CheckboxCell.tsx @@ -16,7 +16,6 @@ const StyledContainer = styled.div` height: 32px; justify-content: center; - background-color: ${({ theme }) => theme.background.primary}; `; export const CheckboxCell = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx index 9fe828dd9750..b9dbc506b454 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx @@ -76,6 +76,7 @@ export const RecordTableHeader = ({ width: 30, minWidth: 30, maxWidth: 30, + borderRight: 'transparent', }} > diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx index 7fc7160e0b74..2f7112a25538 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx @@ -23,9 +23,17 @@ type RecordTableRowProps = { isPendingRow?: boolean; }; -export const StyledTd = styled.td` +export const StyledTd = styled.td<{ isSelected?: boolean }>` + background: ${({ theme }) => theme.background.primary}; position: relative; user-select: none; + + ${({ isSelected, theme }) => + isSelected && + ` + background: ${theme.accent.quaternary}; + + `} `; export const StyledTr = styled.tr<{ isDragging: boolean }>` @@ -33,7 +41,6 @@ export const StyledTr = styled.tr<{ isDragging: boolean }>` transition: border-left-color 0.2s ease-in-out; td:nth-of-type(-n + 2) { - background-color: ${({ theme }) => theme.background.primary}; border-right-color: ${({ theme }) => theme.background.primary}; } @@ -58,6 +65,20 @@ export const StyledTr = styled.tr<{ isDragging: boolean }>` `} `; +const SelectableStyledTd = ({ + isSelected, + children, + style, +}: { + isSelected: boolean; + children?: React.ReactNode; + style?: React.CSSProperties; +}) => ( + + {children} + +); + export const RecordTableRow = ({ recordId, rowIndex, @@ -127,9 +148,12 @@ export const RecordTableRow = ({ > - + {!draggableSnapshot.isDragging && } - + {inView || draggableSnapshot.isDragging ? visibleTableColumns.map((column, columnIndex) => ( )) : visibleTableColumns.map((column) => ( - + ))} - + )} diff --git a/packages/twenty-ui/src/theme/provider/theme.css b/packages/twenty-ui/src/theme/provider/theme.css index 076090f6370f..8ef007905c60 100644 --- a/packages/twenty-ui/src/theme/provider/theme.css +++ b/packages/twenty-ui/src/theme/provider/theme.css @@ -1,3 +1,11 @@ +/* + +!! DEPRECATED !! + +Please do not use those variables anymore. They are deprecated and will be removed soon. + +*/ + :root { --twentycrm-spacing-multiplicator: 4; --twentycrm-border-radius-sm: 4px;