Fix: Selected Line Not Fully Highlighted in Blue (#5966)

Fixes: #5942

<img width="1517" alt="Screenshot 2024-06-19 at 5 07 35 PM"
src="https://github.com/twentyhq/twenty/assets/63531478/c88a98e9-7ce3-43fe-a496-1a5dfe796b81">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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 = () => {

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',
           }}
         >
           <SelectAllCheckbox />

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;
+}) => (
+  <StyledTd isSelected={isSelected} style={style}>
+    {children}
+  </StyledTd>
+);
+
 export const RecordTableRow = ({
   recordId,
   rowIndex,
@@ -127,9 +148,12 @@ export const RecordTableRow = ({
             >
               <GripCell isDragging={draggableSnapshot.isDragging} />
             </StyledTd>
-            <StyledTd>
+            <SelectableStyledTd
+              isSelected={currentRowSelected}
+              style={{ borderRight: 'transparent' }}
+            >
               {!draggableSnapshot.isDragging && <CheckboxCell />}
-            </StyledTd>
+            </SelectableStyledTd>
             {inView || draggableSnapshot.isDragging
               ? visibleTableColumns.map((column, columnIndex) => (
                   <RecordTableCellContext.Provider
@@ -145,9 +169,12 @@ export const RecordTableRow = ({
                   </RecordTableCellContext.Provider>
                 ))
               : visibleTableColumns.map((column) => (
-                  <StyledTd key={column.fieldMetadataId}></StyledTd>
+                  <StyledTd
+                    isSelected={currentRowSelected}
+                    key={column.fieldMetadataId}
+                  ></StyledTd>
                 ))}
-            <StyledTd />
+            <SelectableStyledTd isSelected={currentRowSelected} />
           </StyledTr>
         )}
       </Draggable>

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;