feat(GameTable): Improve actions position & add gradient

src/components/ui/table.tsx

@@ -23,7 +23,7 @@ const Header = React.forwardRef<
   <thead
     ref={ref}
     className={cn(
-      "sticky top-0 [&_tr]:border-b",
+      "sticky top-0 z-10 bg-background [&_tr]:border-b",
       "after:absolute after:inset-x-0 after:bottom-0 after:block after:h-px after:w-full after:bg-muted",
       className
     )}
@@ -51,7 +51,7 @@ const Footer = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-zinc-700/25 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-alt font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const Row = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-zinc-700/25 data-[state=selected]:bg-muted",
+      "border-b focus-within:bg-alt hover:bg-alt data-[state=selected]:bg-muted",
       className
     )}
     {...props}

src/globals.css

@@ -45,6 +45,9 @@
     --muted: 240 4% 16%;
     --muted-foreground: 240 5% 65%;
 
+    --alt: 240 6% 14%;
+    --alt-foreground: 0 0% 98%;
+
     --accent: 240 4% 16%;
     --accent-foreground: 0 0% 98%;
 

src/pages/rolled-games/GamesTableBody.tsx

@@ -6,24 +6,34 @@ import { PenBox, Trash } from "lucide-react"
 import { IconButton } from "~/components/IconButton"
 import { Table as NativeTable } from "~/components/ui/table"
 import { Game } from "~/data/games"
+import { cn } from "~/utils/utils"
 
 interface TableActionsProps {
   row: Row<Game>
   onEdit: Dispatch<Game>
   onDelete: Dispatch<Game>
 }
 const TableActions = ({ row, onEdit, onDelete }: TableActionsProps) => (
-  <NativeTable.Cell className="w-24 min-w-24 px-2 opacity-0 [tr:focus-within_&]:opacity-100 [tr:hover_&]:opacity-100">
-    <IconButton
-      icon={PenBox}
-      title="Edit"
-      onClick={() => onEdit(row.original)}
-    />
-    <IconButton
-      icon={Trash}
-      title="Delete"
-      onClick={() => onDelete(row.original)}
-    />
+  <NativeTable.Cell
+    className={cn(
+      "sticky right-0 overflow-visible px-0 opacity-0 [tr:focus-within_&]:opacity-100 [tr:hover_&]:opacity-100"
+    )}
+  >
+    <div className="ml-auto flex w-max items-center">
+      <div className="inline-block h-10 w-2 shrink-0 bg-gradient-to-r from-transparent to-alt" />
+      <div className="inline-flex justify-end bg-alt pr-2">
+        <IconButton
+          icon={PenBox}
+          title="Edit"
+          onClick={() => onEdit(row.original)}
+        />
+        <IconButton
+          icon={Trash}
+          title="Delete"
+          onClick={() => onDelete(row.original)}
+        />
+      </div>
+    </div>
   </NativeTable.Cell>
 )
 

tailwind.config.js

@@ -50,6 +50,10 @@ module.exports = {
           DEFAULT: "hsl(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
+        alt: {
+          DEFAULT: "hsl(var(--alt))",
+          foreground: "hsl(var(--alt-foreground))",
+        },
         popover: {
           DEFAULT: "hsl(var(--popover))",
           foreground: "hsl(var(--popover-foreground))",