diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx index 294882ca9..ad96588d9 100644 --- a/app/components/ExternalIps.tsx +++ b/app/components/ExternalIps.tsx @@ -39,7 +39,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) { function IpLink({ ip }: { ip: string }) { return ( - {instance.name} - - ) : null + + const instanceLinkCell = linkCell((instanceName) => + pb.instancePage({ ...projectSelector, instance: instanceName }) + ) + + return instance ? instanceLinkCell({ value: instance.name }) : null } const EmptyState = () => ( diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx index 099ad2c7a..0554dffe5 100644 --- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx +++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx @@ -58,7 +58,7 @@ export const VpcNameFromId = ({ value }: { value: string }) => { if (!vpc) return return ( {vpc.name} diff --git a/libs/table/cells/LinkCell.tsx b/libs/table/cells/LinkCell.tsx index 5cfa6be5a..2094d345d 100644 --- a/libs/table/cells/LinkCell.tsx +++ b/libs/table/cells/LinkCell.tsx @@ -14,12 +14,12 @@ export const linkCell = ({ value }: Cell) => { return ( - {value} {/* Pushes out the link area to the entire cell for improved clickability™ */} -
+
+
{value}
) } diff --git a/libs/ui/lib/date-picker/CalendarCell.tsx b/libs/ui/lib/date-picker/CalendarCell.tsx index 4e7a6ea2f..2e842ec7e 100644 --- a/libs/ui/lib/date-picker/CalendarCell.tsx +++ b/libs/ui/lib/date-picker/CalendarCell.tsx @@ -87,7 +87,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) { >
diff --git a/libs/ui/lib/table/table.css b/libs/ui/lib/table/table.css index 5615ce0cd..044f8ee06 100644 --- a/libs/ui/lib/table/table.css +++ b/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 { diff --git a/libs/ui/styles/index.css b/libs/ui/styles/index.css index 63de89f55..fdf05c7bb 100644 --- a/libs/ui/styles/index.css +++ b/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 {