Fix for hover states on different backgrounds & runs table select cell

samejr · samejr · commit 50d56804bcde · 2024-09-27T09:19:45.000+01:00
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
@@ -141,6 +141,13 @@ type TableCellProps = TableCellBasicProps & {
   hasAction?: boolean;
   isSticky?: boolean;
   actionClassName?: string;
+  rowHoverStyle?: keyof typeof rowHoverStyles;
+};
+
+const rowHoverStyles = {
+  default: "group-hover/table-row:bg-charcoal-800",
+  dimmed: "group-hover/table-row:bg-charcoal-850",
+  bright: "group-hover/table-row:bg-charcoal-750",
 };
 
 const stickyStyles =
@@ -158,6 +165,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       onClick,
       hasAction = false,
       isSticky = false,
+      rowHoverStyle = "default",
     },
     ref
   ) => {
@@ -184,12 +192,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       <td
         ref={ref}
         className={cn(
-          "text-xs text-charcoal-400",
-          to || onClick || hasAction
-            ? "cursor-pointer group-hover/table-row:bg-charcoal-800"
-            : "px-3 py-3 align-middle",
+          "text-xs text-charcoal-400 transition-colors",
+          to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
           !to && !onClick && alignmentClassName,
           isSticky && stickyStyles,
+          rowHoverStyles[rowHoverStyle],
           className
         )}
         colSpan={colSpan}
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -338,16 +338,32 @@ function SpanBody({
                             );
                             return (
                               <TableRow key={run.friendlyId}>
-                                <TableCell to={path} actionClassName="py-1.5">
+                                <TableCell
+                                  to={path}
+                                  actionClassName="py-1.5"
+                                  rowHoverStyle="bright"
+                                >
                                   {run.number}
                                 </TableCell>
-                                <TableCell to={path} actionClassName="py-1.5">
+                                <TableCell
+                                  to={path}
+                                  actionClassName="py-1.5"
+                                  rowHoverStyle="bright"
+                                >
                                   {run.taskIdentifier}
                                 </TableCell>
-                                <TableCell to={path} actionClassName="py-1.5">
+                                <TableCell
+                                  to={path}
+                                  actionClassName="py-1.5"
+                                  rowHoverStyle="bright"
+                                >
                                   {run.lockedToVersion?.version ?? "–"}
                                 </TableCell>
-                                <TableCell to={path} actionClassName="py-1.5">
+                                <TableCell
+                                  to={path}
+                                  actionClassName="py-1.5"
+                                  rowHoverStyle="bright"
+                                >
                                   <DateTime date={run.createdAt} />
                                 </TableCell>
                               </TableRow>
