[filigran-ui] fix header column with button and DnD in dark mode

FiligranHQ · Jul 5, 2024 · a68e2c7 · a68e2c7
1 parent 20ceebf
commit a68e2c7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>
               </>
             }
           />