Make links in tables more clearly clickable (#1899)

* All links are underlined

* Make disk link match the others

* Whole row hover

* Make underline less noisy

* Use `text-secondary` across the whole table by default

* Fix bg overlapping border

* Simpler fix

* Equivalent...nicer

* Might as well

Author: benjaminleonard

app/components/ExternalIps.tsx

@@ -39,7 +39,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
 function IpLink({ ip }: { ip: string }) {
   return (
     <a
-      className="underline text-sans-semi-md text-secondary hover:text-default"
+      className="link-with-underline text-sans-semi-md"
       href={`https://${ip}`}
       target="_blank"
       rel="noreferrer"

app/pages/project/disks/DisksPage.tsx

@@ -16,7 +16,7 @@ import {
   useApiQueryClient,
   type Disk,
 } from '@oxide/api'
-import { DateCell, SizeCell, useQueryTable, type MenuAction } from '@oxide/table'
+import { DateCell, linkCell, SizeCell, useQueryTable, type MenuAction } from '@oxide/table'
 import {
   buttonStyle,
   EmptyMessage,
@@ -43,14 +43,12 @@ function AttachedInstance({
   const { data: instance } = useApiQuery('instanceView', {
     path: { instance: instanceId },
   })
-  return instance ? (
-    <Link
-      className="text-sans-semi-md text-accent hover:underline"
-      to={pb.instancePage({ ...projectSelector, instance: instance.name })}
-    >
-      {instance.name}
-    </Link>
-  ) : null
+
+  const instanceLinkCell = linkCell((instanceName) =>
+    pb.instancePage({ ...projectSelector, instance: instanceName })
+  )
+
+  return instance ? instanceLinkCell({ value: instance.name }) : null
 }
 
 const EmptyState = () => (

app/pages/project/instances/instance/tabs/NetworkingTab.tsx

@@ -58,7 +58,7 @@ export const VpcNameFromId = ({ value }: { value: string }) => {
   if (!vpc) return <Skeleton />
   return (
     <Link
-      className="underline text-sans-semi-md text-secondary hover:text-default"
+      className="link-with-underline text-sans-semi-md"
       to={pb.vpc({ ...projectSelector, vpc: vpc.name })}
     >
       {vpc.name}

libs/table/cells/LinkCell.tsx

@@ -14,12 +14,12 @@ export const linkCell =
   ({ value }: Cell<string>) => {
     return (
       <Link
-        className="flex h-full w-full items-center text-sans-semi-md text-default hover:underline"
+        className="link-with-underline group flex h-full w-full items-center text-sans-semi-md"
         to={makeHref(value)}
       >
-        {value}
         {/* Pushes out the link area to the entire cell for improved clickability™ */}
-        <div className="absolute inset-0" />
+        <div className="absolute inset-0 right-px group-hover:bg-raise" />
+        <div className="relative">{value}</div>
       </Link>
     )
   }

libs/ui/lib/date-picker/CalendarCell.tsx

@@ -87,7 +87,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
       >
         <div
           className={cn(
-            'pointer-events-none absolute bottom-[0] left-[1px] right-[1px] top-[0] rounded',
+            'pointer-events-none absolute bottom-[0] left-px right-px top-[0] rounded',
             isSelectionStart || isSelectionEnd
               ? isInvalid
                 ? 'border border-error-secondary'

libs/ui/lib/table/Table.tsx

@@ -112,7 +112,7 @@ Table.Cell = ({ height = 'large', className, children, ...props }: TableCellProp
     >
       <div
         className={cn(
-          '-my-[1px] -mr-[2px] flex items-center border-b border-l py-3 pl-3 pr-3 border-secondary',
+          'relative -my-[1px] -mr-[2px] flex items-center border-b border-l py-3 pl-3 pr-3 border-secondary',
           heightClass
         )}
       >

libs/ui/lib/table/table.css

@@ -32,6 +32,7 @@ table.ox-table {
   & td {
     min-width: fit-content;
     white-space: nowrap;
+    @apply text-secondary;
   }
 
   /*
@@ -45,7 +46,7 @@ table.ox-table {
   /* First column is sticky */
   & th:first-of-type,
   & td:first-of-type {
-    @apply sticky left-0 bg-default;
+    @apply sticky left-0 z-10 bg-default;
   }
 
   /*
@@ -64,7 +65,7 @@ table.ox-table {
     Highlight when hovering over the action-col cell
   */
   & td.action-col:hover > div {
-    @apply bg-hover;
+    @apply bg-raise;
   }
 
   /*
@@ -75,7 +76,7 @@ table.ox-table {
   below with a background colour and still keep the styling
   */
   & tr:last-of-type td:last-of-type.action-col {
-    @apply border-b-0 border-r-0 !bg-default;
+    @apply border-b-0 border-r-0;
   }
 
   & tr:last-of-type td:last-of-type.action-col > div {

libs/ui/styles/index.css

@@ -51,11 +51,6 @@
 }
 
 @layer utilities {
-  .dashed-underline {
-    text-decoration: underline;
-    text-decoration-style: dashed;
-  }
-
   .external-link {
     @apply text-accent-secondary hover:text-accent;
   }
@@ -65,6 +60,16 @@
     margin-left: var(--content-gutter);
     margin-right: var(--content-gutter);
   }
+
+  .link-with-underline {
+    @apply text-secondary hover:text-default;
+    text-decoration: underline;
+    text-decoration-color: var(--content-quinary);
+
+    &:hover {
+      text-decoration-color: var(--content-tertiary);
+    }
+  }
 }
 
 @layer components {