Lighten button styles, add Run button, and widen runs page

- Restyle Create Workflow split button to lightweight border/mint style
- Add "Run" icon button to workflow detail header
- Remove max-width constraint for wide pages so runs board uses full width
- Remove unused nav items (Start, Insights)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Helmkamp 2026-02-28 15:30:31 -05:00
parent d980b6de12
commit b2cf623007
3 changed files with 8 additions and 11 deletions

View file

@ -9,11 +9,9 @@ import {
} from "@headlessui/react";
import {
Bars3Icon,
ChartBarIcon,
Cog6ToothIcon,
PlayIcon,
RectangleStackIcon,
RocketLaunchIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import { Link, Outlet, useLocation, useMatches } from "react-router";
@ -26,10 +24,8 @@ const user = {
};
const navigation = [
{ name: "Start", href: "/start", icon: RocketLaunchIcon },
{ name: "Workflows", href: "/workflows", icon: RectangleStackIcon },
{ name: "Runs", href: "/runs", icon: PlayIcon },
{ name: "Insights", href: "/insights", icon: ChartBarIcon },
{ name: "Settings", href: "/settings", icon: Cog6ToothIcon },
];
@ -47,7 +43,7 @@ export default function AppShell() {
const lastMatch = matches[matches.length - 1];
const handle = lastMatch?.handle as { headerExtra?: React.ReactNode; wide?: boolean } | undefined;
const headerExtra = handle?.headerExtra;
const maxWidth = handle?.wide ? "max-w-7xl" : "max-w-5xl";
const maxWidth = handle?.wide ? "" : "max-w-5xl";
return (
<div className="min-h-full">

View file

@ -286,11 +286,12 @@ export default function WorkflowDetail() {
<button
type="button"
title="Run workflow"
className="flex size-9 shrink-0 items-center justify-center rounded-full border border-mint/20 text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white"
className="flex shrink-0 items-center gap-1.5 rounded-md border border-mint/20 px-3 py-1.5 text-sm font-medium text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white"
>
<svg viewBox="0 0 24 24" fill="currentColor" className="size-4" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor" className="size-3.5" aria-hidden="true">
<path fillRule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clipRule="evenodd" />
</svg>
Run
</button>
</div>

View file

@ -20,14 +20,14 @@ export const handle = {
<div className="relative inline-flex rounded-md">
<button
type="button"
className="inline-flex items-center gap-2 rounded-l-md bg-teal-700 px-3.5 py-2 text-sm font-semibold text-white transition-colors hover:bg-teal-500"
className="inline-flex items-center gap-1.5 rounded-l-md border border-r-0 border-mint/20 px-3 py-1.5 text-sm font-medium text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white"
>
<PlusIcon className="size-4" aria-hidden="true" />
<PlusIcon className="size-3.5" aria-hidden="true" />
Create Workflow
</button>
<Menu as="div" className="relative -ml-px flex">
<MenuButton className="inline-flex items-center rounded-r-md border-l border-teal-500/30 bg-teal-700 px-2 text-white transition-colors hover:bg-teal-500">
<ChevronDownIcon className="size-4" aria-hidden="true" />
<MenuButton className="inline-flex items-center rounded-r-md border border-mint/20 px-1.5 text-mint transition-colors hover:border-mint/50 hover:bg-mint/10 hover:text-white">
<ChevronDownIcon className="size-3.5" aria-hidden="true" />
</MenuButton>
<MenuItems
transition