From a68e2c77516cec0eccf4d09a8c0d2fbb1e7a2022 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Kha <jean-philippe.kha@filigran.io>
Date: Fri, 5 Jul 2024 15:15:11 +0200
Subject: [PATCH] [filigran-ui] fix header column with button and DnD in dark
 mode

---
 packages/filigran-ui/src/components/clients/data-table.tsx  | 6 +++---
 packages/filigran-ui/src/components/clients/table.tsx       | 2 +-
 projects/filigran-website/components/example-data-table.tsx | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/filigran-ui/src/components/clients/data-table.tsx b/packages/filigran-ui/src/components/clients/data-table.tsx
index 6f7cdf8..f94f66f 100644
--- a/packages/filigran-ui/src/components/clients/data-table.tsx
+++ b/packages/filigran-ui/src/components/clients/data-table.tsx
@@ -193,7 +193,7 @@ const DataTableOptionsHeader = <TData, TValue>({
           <Button
             variant="ghost"
             size="sm"
-            className="ml-3 h-8 data-[state=open]:bg-accent">
+            className="-ml-3 h-8 data-[state=open]:bg-accent">
             <span className="font-title font-bold"> {title}</span>
             {column.getIsSorted() === 'desc' ? (
               <KeyboardArrowDownIcon className="ml-s h-3 w-3 text-text-secondary" />
@@ -249,7 +249,7 @@ const DraggableTableHeader = <TData, TValue>({
       colSpan={header.colSpan}
       className={cn(
         'transition-width group relative z-0 whitespace-nowrap opacity-100 transition-transform duration-200 ease-in-out',
-        isDragging && 'z-10 bg-gray-150 opacity-80'
+        isDragging && 'z-10 bg-text-secondary/50 opacity-80'
       )}
       ref={setNodeRef}
       style={{
@@ -286,7 +286,7 @@ const DraggableTableHeader = <TData, TValue>({
           onMouseDown={header.getResizeHandler()}
           onTouchStart={header.getResizeHandler()}
           className={cn(
-            `absolute right-0 top-0 h-full w-1 cursor-col-resize select-none bg-gray-700 opacity-0`,
+            `absolute right-0 top-0 h-full w-1 cursor-col-resize select-none bg-text-secondary opacity-0`,
             header.column.getIsResizing() && `bg-primary opacity-100`,
             !isDragging && 'group-hover:opacity-100'
           )}
diff --git a/packages/filigran-ui/src/components/clients/table.tsx b/packages/filigran-ui/src/components/clients/table.tsx
index c0e6273..6d35b7f 100644
--- a/packages/filigran-ui/src/components/clients/table.tsx
+++ b/packages/filigran-ui/src/components/clients/table.tsx
@@ -105,7 +105,7 @@ const TableCaption = React.forwardRef<
 >(({className, ...props}, ref) => (
   <caption
     ref={ref}
-    className={cn('text-text-foreground-foreground mt-4 text-sm', className)}
+    className={cn('text-text-foreground mt-4 text-sm', className)}
     {...props}
   />
 ))
diff --git a/projects/filigran-website/components/example-data-table.tsx b/projects/filigran-website/components/example-data-table.tsx
index 474a8a3..0425f72 100644
--- a/projects/filigran-website/components/example-data-table.tsx
+++ b/projects/filigran-website/components/example-data-table.tsx
@@ -107,6 +107,9 @@ export function ExampleDataTable() {
                 <DropdownMenuItem onClick={() => console.log(header.column)}>
                   Log column
                 </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => console.log(header.column)}>
+                  Log column 2
+                </DropdownMenuItem>
               </>
             }
           />