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;