Put routes table on router page in card block (#3024)

* Remove irregular table title from router page

* Update divider spacing

* Divider spacing tweaks

* use CardBlock for Routes table

---------

Co-authored-by: Benjamin Leonard <benji@oxide.computer>

Author: charliepark

app/components/CapacityBars.tsx

@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="1000:flex-row mb-12 flex min-w-min flex-col gap-3">
+    <div className="1000:flex-row flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"

app/pages/SiloUtilizationPage.tsx

@@ -93,9 +93,9 @@ export default function SiloUtilizationPage() {
         allocatedLabel="Quota"
       />
 
-      <Divider className="my-6" />
+      <Divider className="my-8" />
 
-      <div className="mt-8 mb-3 flex flex-wrap justify-between gap-3">
+      <div className="mb-3 flex flex-wrap justify-between gap-3">
         <div className="flex gap-2">
           {intervalPicker}
 

app/pages/project/affinity/AntiAffinityGroupPage.tsx

@@ -225,7 +225,7 @@ export default function AntiAffinityPage() {
         <PropertiesTable.Row label="Members">{membersCount}</PropertiesTable.Row>
         <PropertiesTable.IdRow id={id} />
       </PropertiesTable>
-      <Divider className="mb-10" />
+      <Divider className="my-8" />
       <CardBlock>
         <CardBlock.Header
           title="Members"

app/pages/project/vpcs/RouterPage.tsx

@@ -36,11 +36,12 @@ import { addToast } from '~/stores/toast'
 import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
+import { CardBlock } from '~/ui/lib/CardBlock'
 import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
+import { Divider } from '~/ui/lib/Divider'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
-import { TableControls, TableTitle } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -199,22 +200,24 @@ export default function RouterPage() {
         <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
         <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
       </PropertiesTable>
-      <TableControls className="mb-3">
-        <TableTitle>Routes</TableTitle>
-        {canCreateNewRoute ? (
-          <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
-            New route
-          </CreateLink>
-        ) : (
-          <CreateButton
-            disabled
-            disabledReason={routeFormMessage.noNewRoutesOnSystemRouter}
-          >
-            New route
-          </CreateButton>
-        )}
-      </TableControls>
-      {table}
+      <Divider className="my-8" />
+      <CardBlock>
+        <CardBlock.Header title="Routes" description="Rules for directing network traffic">
+          {canCreateNewRoute ? (
+            <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
+              New route
+            </CreateLink>
+          ) : (
+            <CreateButton
+              disabled
+              disabledReason={routeFormMessage.noNewRoutesOnSystemRouter}
+            >
+              New route
+            </CreateButton>
+          )}
+        </CardBlock.Header>
+        <CardBlock.Body>{table}</CardBlock.Body>
+      </CardBlock>
       <Outlet />
     </>
   )

app/ui/lib/Table.tsx

@@ -131,9 +131,4 @@ export const TableEmptyBox = ({ children, border = true }: TableEmptyBoxProps) =
   </div>
 )
 
-/**
- * Used _outside_ of the `Table`, this element includes a soon-to-be-removed description of the resource inside the table,
- * along with a link to more info, and a button to take action on the resource listed in the table.
- */
-export const TableControls = classed.div`mb-4 flex items-end justify-between space-x-8`
 export const TableTitle = classed.div`text-sans-lg text-raise`

app/ui/styles/components/Tabs.css

@@ -8,7 +8,7 @@
 
 /* Tab list container styles */
 .ox-tabs-list {
-  @apply mb-10 flex bg-transparent;
+  @apply mb-8 flex bg-transparent;
 }
 
 .ox-tabs-list:after {

app/ui/styles/components/form.css

@@ -23,5 +23,5 @@
 }
 
 .ox-form .ox-divider {
-  @apply !my-10; /* important overrides space-y-* on .ox-form */
+  @apply !my-8; /* important overrides space-y-* on .ox-form */
 }