Console polish

app/components/StatusBadge.tsx

@@ -3,16 +3,16 @@ import type { BadgeColor, BadgeProps } from '@oxide/ui'
 import { Badge } from '@oxide/ui'
 
 const INSTANCE_COLORS: Record<InstanceState, Pick<BadgeProps, 'color' | 'variant'>> = {
-  creating: { color: 'notice', variant: 'default' },
-  starting: { color: 'notice' },
+  creating: { color: 'purple', variant: 'solid' },
+  starting: { color: 'blue', variant: 'solid' },
   running: { color: 'default' },
   rebooting: { color: 'notice' },
   stopping: { color: 'notice' },
-  stopped: { color: 'neutral', variant: 'default' },
-  repairing: { color: 'notice' },
-  migrating: { color: 'notice' },
-  failed: { color: 'destructive' },
-  destroyed: { color: 'neutral' },
+  stopped: { color: 'neutral', variant: 'solid' },
+  repairing: { color: 'notice', variant: 'solid' },
+  migrating: { color: 'notice', variant: 'solid' },
+  failed: { color: 'destructive', variant: 'solid' },
+  destroyed: { color: 'neutral', variant: 'solid' },
 }
 
 export const InstanceStatusBadge = (props: {
@@ -26,19 +26,19 @@ export const InstanceStatusBadge = (props: {
 
 type DiskStateStr = DiskState['state']
 
-const DISK_COLORS: Record<DiskStateStr, BadgeColor> = {
-  attached: 'default',
-  attaching: 'notice',
-  creating: 'notice',
-  detaching: 'notice',
-  detached: 'neutral',
-  destroyed: 'neutral', // should we ever see this?
-  faulted: 'destructive',
-  maintenance: 'notice',
+const DISK_COLORS: Record<DiskStateStr, Pick<BadgeProps, 'color' | 'variant'>> = {
+  attached: { color: 'default' },
+  attaching: { color: 'blue', variant: 'solid' },
+  creating: { color: 'purple', variant: 'solid' },
+  detaching: { color: 'notice', variant: 'solid' },
+  detached: { color: 'neutral', variant: 'solid' },
+  destroyed: { color: 'destructive', variant: 'solid' }, // should we ever see this?
+  faulted: { color: 'destructive', variant: 'solid' },
+  maintenance: { color: 'notice', variant: 'solid' },
 }
 
 export const DiskStatusBadge = (props: { status: DiskStateStr; className?: string }) => (
-  <Badge color={DISK_COLORS[props.status]} className={props.className}>
+  <Badge {...DISK_COLORS[props.status]} className={props.className}>
     {props.status}
   </Badge>
 )
@@ -54,11 +54,7 @@ export const SnapshotStatusBadge = (props: {
   status: SnapshotState
   className?: string
 }) => (
-  <Badge
-    variant="default"
-    color={SNAPSHOT_COLORS[props.status]}
-    className={props.className}
-  >
+  <Badge color={SNAPSHOT_COLORS[props.status]} className={props.className}>
     {props.status}
   </Badge>
 )

app/components/form/fields/DisksTableField.tsx

@@ -3,7 +3,8 @@ import type { Control } from 'react-hook-form'
 import { useController } from 'react-hook-form'
 
 import type { DiskCreate, DiskIdentifier } from '@oxide/api'
-import { Button, Error16Icon, FieldLabel, MiniTable } from '@oxide/ui'
+import { Badge, Button, Error16Icon, FieldLabel, MiniTable } from '@oxide/ui'
+import { bytesToGiB } from '@oxide/util'
 
 import AttachDiskSideModalForm from 'app/forms/disk-attach'
 import { CreateDiskSideModalForm } from 'app/forms/disk-create'
@@ -34,6 +35,7 @@ export function DisksTableField({ control }: { control: Control<InstanceCreateIn
             <MiniTable.Header>
               <MiniTable.HeadCell>Name</MiniTable.HeadCell>
               <MiniTable.HeadCell>Type</MiniTable.HeadCell>
+              <MiniTable.HeadCell>Size</MiniTable.HeadCell>
               {/* For remove button */}
               <MiniTable.HeadCell className="w-12" />
             </MiniTable.Header>
@@ -46,7 +48,19 @@ export function DisksTableField({ control }: { control: Control<InstanceCreateIn
                   key={item.name}
                 >
                   <MiniTable.Cell>{item.name}</MiniTable.Cell>
-                  <MiniTable.Cell>{item.type}</MiniTable.Cell>
+                  <MiniTable.Cell>
+                    <Badge variant="solid">{item.type}</Badge>
+                  </MiniTable.Cell>
+                  <MiniTable.Cell>
+                    {item.type === 'attach' ? (
+                      '-'
+                    ) : (
+                      <>
+                        <span>{bytesToGiB(item.size)}</span>
+                        <span className="ml-1 inline-block text-accent-secondary">GiB</span>
+                      </>
+                    )}
+                  </MiniTable.Cell>
                   <MiniTable.Cell>
                     <button
                       onClick={() => onChange(items.filter((i) => i.name !== item.name))}

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

@@ -203,7 +203,7 @@ export function NetworkingTab() {
             A network interface cannot be created or edited without{' '}
             <a href="#/" className="text-accent-secondary">
               stopping the instance
-              <OpenLink12Icon className="ml-1 pt-[1px]" />
+              <OpenLink12Icon className="ml-1 align-middle" />
             </a>
           </span>
         )}

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

@@ -179,7 +179,7 @@ export function StorageTab() {
             A disk cannot be added or attached without first{' '}
             <a href="#/" className="text-accent-secondary">
               stopping the instance
-              <OpenLink12Icon className="ml-1 pt-[1px]" />
+              <OpenLink12Icon className="ml-1 align-middle" />
             </a>
           </span>
         )}

libs/table/columns/action-col.tsx

@@ -20,57 +20,58 @@ export const getActionsCol = <TData extends { id?: string }>(
   return {
     id: 'menu',
     header: '',
-    meta: { thClassName: 'w-12 action-col', tdClassName: 'action-col' },
+    meta: {
+      thClassName: 'action-col',
+      tdClassName: 'action-col children:p-0 w-10',
+    },
 
     cell: ({ row }) => {
       // TODO: control flow here has always confused me, would like to straighten it out
       const actions = makeActions(row.original)
       const id = row.original.id
       return (
-        <div className="flex w-full justify-center">
-          <Menu>
-            {/* TODO: This name should not suck; future us, make it so! */}
-            {/* stopPropagation prevents clicks from toggling row select in a single select table */}
-            <MenuButton
-              className="-m-3 p-3"
-              aria-label="Row actions"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <More12Icon className="text-tertiary" />
-            </MenuButton>
-            <MenuList>
-              {id && (
-                <MenuItem
-                  onSelect={() => {
-                    window.navigator.clipboard.writeText(id)
-                  }}
+        <Menu>
+          {/* TODO: This name should not suck; future us, make it so! */}
+          {/* stopPropagation prevents clicks from toggling row select in a single select table */}
+          <MenuButton
+            className="flex h-full w-10 items-center justify-center"
+            aria-label="Row actions"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <More12Icon className="text-tertiary" />
+          </MenuButton>
+          <MenuList>
+            {id && (
+              <MenuItem
+                onSelect={() => {
+                  window.navigator.clipboard.writeText(id)
+                }}
+              >
+                Copy ID
+              </MenuItem>
+            )}
+            {actions.map((action) => {
+              return (
+                <Wrap
+                  when={!!action.disabled}
+                  with={<Tooltip content={action.disabled} />}
+                  key={kebabCase(`action-${action.label}`)}
                 >
-                  Copy ID
-                </MenuItem>
-              )}
-              {actions.map((action) => {
-                return (
-                  <Wrap
-                    when={!!action.disabled}
-                    with={<Tooltip content={action.disabled} />}
-                    key={kebabCase(`action-${action.label}`)}
+                  <MenuItem
+                    className={cn(action.className, {
+                      destructive:
+                        action.label.toLowerCase() === 'delete' && !action.disabled,
+                    })}
+                    onSelect={action.onActivate}
+                    disabled={!!action.disabled}
                   >
-                    <MenuItem
-                      className={cn(action.className, {
-                        destructive:
-                          action.label.toLowerCase() === 'delete' && !action.disabled,
-                      })}
-                      onSelect={action.onActivate}
-                      disabled={!!action.disabled}
-                    >
-                      {action.label}
-                    </MenuItem>
-                  </Wrap>
-                )
-              })}
-            </MenuList>
-          </Menu>
-        </div>
+                    {action.label}
+                  </MenuItem>
+                </Wrap>
+              )
+            })}
+          </MenuList>
+        </Menu>
       )
     },
   }

libs/ui/lib/badge/Badge.tsx

@@ -1,8 +1,13 @@
 import cn from 'classnames'
-import invariant from 'tiny-invariant'
 
-export type BadgeColor = 'default' | 'destructive' | 'notice' | 'neutral'
-export type BadgeVariant = 'default' | 'secondary' | 'ghost'
+export type BadgeColor =
+  | 'default'
+  | 'destructive'
+  | 'notice'
+  | 'neutral'
+  | 'purple'
+  | 'blue'
+export type BadgeVariant = 'default' | 'solid'
 
 export interface BadgeProps {
   color?: BadgeColor
@@ -11,37 +16,31 @@ export interface BadgeProps {
   variant?: BadgeVariant
 }
 
-export const badgeColors: Record<BadgeVariant, Partial<Record<BadgeColor, string>>> = {
+export const badgeColors: Record<BadgeVariant, Record<BadgeColor, string>> = {
   default: {
+    default: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`,
+    destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,
+    notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,
+    neutral: `ring-1 ring-inset bg-secondary text-secondary ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,
+    purple: `ring-1 ring-inset bg-[var(--base-purple-200)] text-[var(--base-purple-700)] ring-[rgba(var(--base-purple-700-rgb),0.15)]`,
+    blue: `ring-1 ring-inset bg-[var(--base-blue-200)] text-[var(--base-blue-700)] ring-[rgba(var(--base-blue-700-rgb),0.15)]`,
+  },
+  solid: {
     default: 'bg-accent text-inverse',
     destructive: 'bg-destructive text-inverse',
     notice: 'bg-notice text-inverse',
     neutral: 'bg-inverse-tertiary text-inverse',
-  },
-  secondary: {
-    default: 'bg-accent-secondary text-accent',
-    destructive: 'bg-destructive-secondary text-destructive',
-    notice: 'bg-notice-secondary text-notice',
-    neutral: 'bg-secondary text-secondary',
-  },
-  ghost: {
-    default: 'ring-1 ring-inset bg-accent-secondary ring-accent-tertiary text-accent',
-    destructive:
-      'ring-1 ring-inset bg-destructive-secondary ring-destructive-tertiary text-destructive',
-    notice: 'ring-1 ring-inset bg-notice-secondary ring-notice-tertiary text-notice',
+    purple: 'bg-[var(--base-purple-700)] text-[var(--base-purple-200)]',
+    blue: 'bg-[var(--base-blue-700)] text-[var(--base-blue-200)]',
   },
 }
 
 export const Badge = ({
   className,
   children,
   color = 'default',
-  variant = 'secondary',
+  variant = 'default',
 }: BadgeProps) => {
-  invariant(
-    badgeColors[variant][color],
-    `${variant} ${color} is not a valid variant/color combination`
-  )
   return (
     <span
       className={cn(

libs/ui/lib/mini-table/mini-table.css

@@ -1,47 +1,67 @@
 .ox-mini-table {
-  border-spacing: 0px;
-}
+  & {
+    border-spacing: 0px;
+  }
 
-.ox-mini-table td {
-  @apply relative px-0 pt-2;
-}
+  & td {
+    @apply relative px-0 pt-2;
+  }
 
-.ox-mini-table tr {
-  @apply relative;
-}
+  & tr {
+    @apply relative;
+  }
 
-.ox-mini-table td + td:before {
-  @apply absolute top-[calc(0.5rem+1px)] bottom-[2px] block w-[1px] border-l border-secondary;
-  content: ' ';
-}
+  & td + td:before {
+    @apply absolute top-[calc(0.5rem+1px)] bottom-[2px] block w-[1px] border-l border-secondary;
+    content: ' ';
+  }
 
-.ox-mini-table tr:last-child td + td:before {
-  @apply bottom-[calc(0.5rem+2px)];
-}
+  & tr:last-child td + td:before {
+    @apply bottom-[calc(0.5rem+2px)];
+  }
 
-.ox-mini-table td > div {
-  @apply flex h-11 items-center border-y py-3 pl-3 text-accent bg-accent-secondary border-accent;
-}
+  & td > div {
+    @apply flex h-11 items-center border-y py-3 pl-3 text-accent bg-accent-secondary border-accent-secondary;
+  }
 
-.ox-mini-table td:last-child > div {
-  @apply w-12 justify-center pl-0 pr-0;
-}
-.ox-mini-table td:last-child > div > button {
-  @apply -mx-3 -my-3 flex items-center justify-center px-3 py-3;
-}
+  & td:last-child > div {
+    @apply w-12 justify-center pl-0 pr-0;
+  }
+  & td:last-child > div > button {
+    @apply -mx-3 -my-3 flex items-center justify-center px-3 py-3;
+  }
 
-.ox-mini-table tr:hover td > div {
-  @apply bg-accent-secondary-hover;
-}
+  & tr:hover td > div {
+    @apply bg-accent-secondary-hover;
+  }
 
-.ox-mini-table tr:last-child td {
-  @apply pb-2;
-}
+  & tr:last-child td {
+    @apply pb-2;
+  }
 
-.ox-mini-table td:first-child > div {
-  @apply ml-2 rounded-l border-l;
-}
+  & td:first-child > div {
+    @apply ml-2 rounded-l border-l;
+  }
+
+  & td:last-child > div {
+    @apply mr-2 rounded-r border-r;
+  }
+
+  & thead tr:first-of-type th:first-of-type {
+    border-top-left-radius: var(--border-radius-lg);
+    @apply border-l;
+  }
+
+  & thead tr:first-of-type th:last-of-type {
+    border-top-right-radius: var(--border-radius-lg);
+    @apply border-r;
+  }
+
+  & tbody tr:last-of-type td:first-of-type {
+    border-bottom-left-radius: var(--border-radius-lg);
+  }
 
-.ox-mini-table td:last-child > div {
-  @apply mr-2 rounded-r border-r;
+  & tbody tr:last-of-type td:last-of-type {
+    border-bottom-right-radius: var(--border-radius-lg);
+  }
 }