From 895910e1d19ec9db7f96feb1a46b58171203e917 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:11:03 +0530
Subject: [PATCH] Fix RecordTableHeaderCell (#6383)

@Bonapara

Fixed! the issue (#6365) where the `background-color` style was not set,
causing the bug. Now, the background color is properly applied.



https://github.com/user-attachments/assets/668bd3cc-77ea-42a9-84d4-071fca497e07
---
 .../RecordTableHeaderCheckboxColumn.tsx       | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
index ef88ebee3..639e91535 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -4,18 +4,25 @@ import { useRecoilValue } from 'recoil';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { Checkbox } from '@/ui/input/components/Checkbox';
-import { useTheme } from '@emotion/react';
 
 const StyledContainer = styled.div`
   align-items: center;
-
   display: flex;
   height: 32px;
-
   justify-content: center;
   background-color: ${({ theme }) => theme.background.primary};
 `;
 
+const StyledColumnHeaderCell = styled.th`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-right: transparent;
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  max-width: 30px;
+  min-width: 30px;
+  width: 30px;
+`;
+
 export const RecordTableHeaderCheckboxColumn = () => {
   const { allRowsSelectedStatusSelector } = useRecordTableStates();
 
@@ -36,19 +43,8 @@ export const RecordTableHeaderCheckboxColumn = () => {
     }
   };
 
-  const theme = useTheme();
-
   return (
-    <th
-      style={{
-        borderBottom: `1px solid ${theme.border.color.light}`,
-        borderTop: `1px solid ${theme.border.color.light}`,
-        width: 30,
-        minWidth: 30,
-        maxWidth: 30,
-        borderRight: 'transparent',
-      }}
-    >
+    <StyledColumnHeaderCell>
       <StyledContainer>
         <Checkbox
           checked={checked}
@@ -56,6 +52,6 @@ export const RecordTableHeaderCheckboxColumn = () => {
           indeterminate={indeterminate}
         />
       </StyledContainer>
-    </th>
+    </StyledColumnHeaderCell>
   );
 };