yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update templates and improve UI styling across components

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-04 13:03:18 +05:30
parent b24e3e1dcd
commit f6105fa0d2
32 changed files with 399 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/app/agents/page.tsx
View File

@@ -278,8 +278,8 @@ export default function AgentsPage() {
return (
<DashboardShell>
<SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 bg-white p-10 text-center shadow-lush">
<p className="text-sm text-gray-600">
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center">
<p className="text-sm text-muted">
Sign in to view operational status.
</p>
<SignInButton
@@ -289,64 +289,56 @@ export default function AgentsPage() {
forceRedirectUrl="/agents"
signUpForceRedirectUrl="/agents"
>
<Button className="border-2 border-gray-900 bg-gray-900 text-white">
Sign in
</Button>
<Button>Sign in</Button>
</SignInButton>
</div>
</SignedOut>
<SignedIn>
<DashboardSidebar />
<div className="flex h-full flex-col gap-6 rounded-xl border-2 border-gray-200 bg-white p-8 shadow-lush">
<div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-8">
<div className="flex flex-wrap items-start justify-between gap-4">
<div className="space-y-2">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
Operations
</p>
<h1 className="text-2xl font-semibold text-gray-900">
Agents
</h1>
<p className="text-sm text-gray-600">
<h1 className="text-2xl font-semibold text-strong">Agents</h1>
<p className="text-sm text-muted">
Live status and heartbeat activity across all agents.
</p>
</div>
<div className="flex items-center gap-2">
<Button
variant="outline"
className="border-2 border-gray-200 text-gray-700"
onClick={() => loadData()}
disabled={isLoading}
>
Refresh
</Button>
<Button
className="border-2 border-gray-900 bg-gray-900 text-white"
onClick={() => setIsDialogOpen(true)}
>
<Button onClick={() => setIsDialogOpen(true)}>
New agent
</Button>
</div>
</div>
{error ? (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{error}
</div>
) : null}
<div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
<div className="overflow-hidden rounded-xl border border-gray-200">
<div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
<div className="overflow-hidden rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)]">
<div className="flex items-center justify-between border-b border-[color:var(--border)] bg-[color:var(--surface-muted)] px-4 py-3">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
Agents
</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-quiet">
{sortedAgents.length} total
</p>
</div>
<div className="divide-y divide-gray-200 text-sm">
<div className="divide-y divide-[color:var(--border)] text-sm">
{sortedAgents.length === 0 && !isLoading ? (
<div className="p-6 text-sm text-gray-500">
<div className="p-6 text-sm text-muted">
No agents yet. Add one or wait for a heartbeat.
</div>
) : (
@@ -356,10 +348,8 @@ export default function AgentsPage() {
className="flex flex-wrap items-center justify-between gap-3 px-4 py-3"
>
<div>
<p className="font-medium text-gray-900">
{agent.name}
</p>
<p className="text-xs text-gray-500">
<p className="font-medium text-strong">{agent.name}</p>
<p className="text-xs text-quiet">
Last seen {formatRelative(agent.last_seen_at)}
</p>
</div>
@@ -367,7 +357,7 @@ export default function AgentsPage() {
<StatusPill status={agent.status} />
<Button
variant="outline"
className="border-2 border-gray-200 text-xs text-gray-700"
size="sm"
onClick={() => router.push(`/boards`)}
>
View work
@@ -379,7 +369,7 @@ export default function AgentsPage() {
</div>
</div>
<div className="rounded-xl border border-gray-200 bg-gray-50 p-5">
<div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-5">
<Tabs defaultValue="activity">
<div className="flex flex-wrap items-center justify-between gap-3">
<TabsList>
@@ -389,28 +379,28 @@ export default function AgentsPage() {
</div>
<TabsContent value="activity">
<div className="mb-4 flex items-center justify-between">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
Activity feed
</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-quiet">
{events.length} events
</p>
</div>
<div className="space-y-3">
{events.length === 0 && !isLoading ? (
<div className="rounded-lg border border-dashed border-gray-200 bg-white p-4 text-sm text-gray-500">
<div className="rounded-lg border border-dashed border-[color:var(--border)] bg-[color:var(--surface)] p-4 text-sm text-muted">
No activity yet.
</div>
) : (
events.map((event) => (
<div
key={event.id}
className="rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-700"
className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-4 text-sm text-muted"
>
<p className="font-medium text-gray-900">
<p className="font-medium text-strong">
{event.message ?? event.event_type}
</p>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-quiet">
{formatTimestamp(event.created_at)}
</p>
</div>
@@ -420,45 +410,45 @@ export default function AgentsPage() {
</TabsContent>
<TabsContent value="gateway">
<div className="mb-4 flex items-center justify-between">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
OpenClaw Gateway
</p>
<Button
variant="outline"
className="border-2 border-gray-200 text-xs text-gray-700"
size="sm"
onClick={() => loadGateway()}
>
Refresh
</Button>
</div>
<div className="space-y-4">
<div className="rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-700">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-4 text-sm text-muted">
<div className="flex items-center justify-between">
<p className="font-medium text-gray-900">
<p className="font-medium text-strong">
{gatewayStatus?.connected ? "Connected" : "Not connected"}
</p>
<StatusPill
status={gatewayStatus?.connected ? "online" : "offline"}
/>
</div>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-quiet">
{gatewayStatus?.gateway_url ?? "Gateway URL not set"}
</p>
{gatewayStatus?.error ? (
<p className="mt-2 text-xs text-red-500">
<p className="mt-2 text-xs text-[color:var(--danger)]">
{gatewayStatus.error}
</p>
) : null}
</div>
<div className="rounded-lg border border-gray-200 bg-white">
<div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)]">
<div className="flex items-center justify-between border-b border-[color:var(--border)] px-4 py-3 text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
<span>Sessions</span>
<span>{gatewaySessions.length}</span>
</div>
<div className="max-h-56 divide-y divide-gray-200 overflow-y-auto text-sm">
<div className="max-h-56 divide-y divide-[color:var(--border)] overflow-y-auto text-sm">
{gatewaySessions.length === 0 ? (
<div className="p-4 text-sm text-gray-500">
<div className="p-4 text-sm text-muted">
No sessions found.
</div>
) : (
@@ -473,7 +463,7 @@ export default function AgentsPage() {
<button
key={getSessionKey(session, index)}
type="button"
className="flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-gray-50"
className="flex w-full items-center justify-between px-4 py-3 text-left text-sm transition hover:bg-[color:var(--surface-muted)]"
onClick={() => {
setSelectedSession(session);
if (sessionId) {
@@ -482,12 +472,12 @@ export default function AgentsPage() {
}}
>
<div>
<p className="font-medium text-gray-900">{display}</p>
<p className="text-xs text-gray-500">
<p className="font-medium text-strong">{display}</p>
<p className="text-xs text-quiet">
{session.status ?? "active"}
</p>
</div>
<span className="text-xs text-gray-400">Open</span>
<span className="text-xs text-quiet">Open</span>
</button>
);
})
@@ -496,19 +486,19 @@ export default function AgentsPage() {
</div>
{selectedSession ? (
<div className="rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-700">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-4 text-sm text-muted">
<div className="mb-3 space-y-1">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
Session details
</p>
<p className="font-medium text-gray-900">
<p className="font-medium text-strong">
{selectedSession.displayName ??
selectedSession.label ??
selectedSession.key ??
"Session"}
</p>
</div>
<div className="mb-4 max-h-40 space-y-2 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="mb-4 max-h-40 space-y-2 overflow-y-auto rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{sessionHistory.length === 0 ? (
<p>No history loaded.</p>
) : (
@@ -520,17 +510,17 @@ export default function AgentsPage() {
)}
</div>
<div className="space-y-2">
<label className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-500">
<label className="text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
Send message
</label>
<Input
value={message}
onChange={(event) => setMessage(event.target.value)}
placeholder="Type a message to the session"
className="h-10 rounded-lg border-2 border-gray-200 bg-white"
className="h-10"
/>
<Button
className="w-full border-2 border-gray-900 bg-gray-900 text-white"
className="w-full"
onClick={handleSendMessage}
disabled={isSending}
>
@@ -541,7 +531,7 @@ export default function AgentsPage() {
) : null}
{gatewayError ? (
<div className="rounded-lg border border-gray-200 bg-white p-3 text-xs text-red-500">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-3 text-xs text-[color:var(--danger)]">
{gatewayError}
</div>
) : null}
@@ -571,20 +561,16 @@ export default function AgentsPage() {
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-800">
Agent name
</label>
<label className="text-sm font-medium text-strong">Agent name</label>
<Input
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="e.g. Deployment bot"
className="h-11 rounded-lg border-2 border-gray-200 bg-white"
className="h-11"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-800">
Status
</label>
<label className="text-sm font-medium text-strong">Status</label>
<Select value={status} onValueChange={setStatus}>
<SelectTrigger>
<SelectValue placeholder="Select status" />
@@ -599,7 +585,7 @@ export default function AgentsPage() {
</Select>
</div>
{createError ? (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{createError}
</div>
) : null}
@@ -607,13 +593,11 @@ export default function AgentsPage() {
<DialogFooter>
<Button
variant="outline"
className="border-2 border-gray-200 text-gray-700"
onClick={() => setIsDialogOpen(false)}
>
Cancel
</Button>
<Button
className="border-2 border-gray-900 bg-gray-900 text-white"
onClick={handleCreate}
disabled={isCreating}
>

34
frontend/src/app/boards/[boardId]/page.tsx
View File

@@ -168,8 +168,8 @@ export default function BoardDetailPage() {
return (
<DashboardShell>
<SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 bg-white p-10 text-center shadow-lush">
<p className="text-sm text-gray-600">Sign in to view boards.</p>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center">
<p className="text-sm text-muted">Sign in to view boards.</p>
<SignInButton
mode="modal"
afterSignInUrl="/boards"
@@ -177,30 +177,27 @@ export default function BoardDetailPage() {
forceRedirectUrl="/boards"
signUpForceRedirectUrl="/boards"
>
<Button className="border-2 border-gray-900 bg-gray-900 text-white">
Sign in
</Button>
<Button>Sign in</Button>
</SignInButton>
</div>
</SignedOut>
<SignedIn>
<DashboardSidebar />
<div className="flex h-full flex-col gap-6 rounded-xl border-2 border-gray-200 bg-white p-8 shadow-lush">
<div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-8">
<div className="flex flex-wrap items-start justify-between gap-4">
<div className="space-y-2">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
{board?.slug ?? "board"}
</p>
<h1 className="text-2xl font-semibold text-gray-900">
<h1 className="text-2xl font-semibold text-strong">
{board?.name ?? "Board"}
</h1>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted">
Keep tasks moving through your workflow.
</p>
</div>
<Button
variant="outline"
className="border-2 border-gray-200 text-gray-700"
onClick={() => router.push("/boards")}
>
Back to boards
@@ -208,13 +205,13 @@ export default function BoardDetailPage() {
</div>
{error && (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{error}
</div>
)}
{isLoading ? (
<div className="flex flex-1 items-center justify-center text-sm text-gray-500">
<div className="flex flex-1 items-center justify-center text-sm text-muted">
Loading {titleLabel}…
</div>
) : (
@@ -245,27 +242,26 @@ export default function BoardDetailPage() {
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-800">Title</label>
<label className="text-sm font-medium text-strong">Title</label>
<Input
value={title}
onChange={(event) => setTitle(event.target.value)}
placeholder="e.g. Prepare launch notes"
className="h-11 rounded-lg border-2 border-gray-200 bg-white"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-800">
<label className="text-sm font-medium text-strong">
Description
</label>
<Textarea
value={description}
onChange={(event) => setDescription(event.target.value)}
placeholder="Optional details"
className="min-h-[120px] rounded-lg border-2 border-gray-200 bg-white"
className="min-h-[120px]"
/>
</div>
<div className="space-y-2">
<label className="text-sm font-medium text-gray-800">
<label className="text-sm font-medium text-strong">
Priority
</label>
<Select value={priority} onValueChange={setPriority}>
@@ -282,7 +278,7 @@ export default function BoardDetailPage() {
</Select>
</div>
{createError ? (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{createError}
</div>
) : null}
@@ -290,13 +286,11 @@ export default function BoardDetailPage() {
<DialogFooter>
<Button
variant="outline"
className="border-2 border-gray-200 text-gray-700"
onClick={() => setIsDialogOpen(false)}
>
Cancel
</Button>
<Button
className="border-2 border-gray-900 bg-gray-900 text-white"
onClick={handleCreateTask}
disabled={isCreating}
>

25
frontend/src/app/boards/new/page.tsx
View File

@@ -66,8 +66,8 @@ export default function NewBoardPage() {
return (
<DashboardShell>
<SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 bg-white p-10 text-center shadow-lush lg:col-span-2">
<p className="text-sm text-gray-600">Sign in to create a board.</p>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2">
<p className="text-sm text-muted">Sign in to create a board.</p>
<SignInButton
mode="modal"
afterSignInUrl="/boards/new"
@@ -75,47 +75,44 @@ export default function NewBoardPage() {
forceRedirectUrl="/boards/new"
signUpForceRedirectUrl="/boards/new"
>
<Button className="border-2 border-gray-900 bg-gray-900 text-white">
Sign in
</Button>
<Button>Sign in</Button>
</SignInButton>
</div>
</SignedOut>
<SignedIn>
<DashboardSidebar />
<div className="flex h-full flex-col justify-center rounded-xl border-2 border-gray-200 bg-white p-8 shadow-lush">
<div className="flex h-full flex-col justify-center rounded-2xl surface-panel p-8">
<div className="mb-6 space-y-2">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
New board
</p>
<h1 className="text-2xl font-semibold text-gray-900">
<h1 className="text-2xl font-semibold text-strong">
Spin up a board.
</h1>
<p className="text-sm text-gray-600">
<p className="text-sm text-muted">
Boards are where tasks live and move through your workflow.
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-800">
<label className="text-sm font-medium text-strong">
Board name
</label>
<Input
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="e.g. Product ops"
className="h-11 rounded-lg border-2 border-gray-200 bg-white"
disabled={isLoading}
/>
</div>
{error ? (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{error}
</div>
) : null}
<Button
type="submit"
className="w-full border-2 border-gray-900 bg-gray-900 text-white"
className="w-full"
disabled={isLoading}
>
{isLoading ? "Creating…" : "Create board"}
@@ -123,7 +120,7 @@ export default function NewBoardPage() {
</form>
<Button
variant="outline"
className="mt-4 border-2 border-gray-200 text-gray-700"
className="mt-4"
onClick={() => router.push("/boards")}
>
Back to boards

41
frontend/src/app/boards/page.tsx
View File

@@ -73,8 +73,8 @@ export default function BoardsPage() {
header: "Board",
cell: ({ row }) => (
<div>
<p className="font-medium text-gray-900">{row.original.name}</p>
<p className="text-xs text-gray-500">{row.original.slug}</p>
<p className="font-medium text-strong">{row.original.name}</p>
<p className="text-xs text-quiet">{row.original.slug}</p>
</div>
),
},
@@ -88,7 +88,7 @@ export default function BoardsPage() {
>
<Link
href={`/boards/${row.original.id}`}
className="inline-flex h-8 items-center justify-center rounded-lg border-2 border-gray-200 px-3 text-xs font-medium text-gray-700"
className="inline-flex h-8 items-center justify-center rounded-lg border border-[color:var(--border)] px-3 text-xs font-medium text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
>
Open
</Link>
@@ -108,8 +108,8 @@ export default function BoardsPage() {
return (
<DashboardShell>
<SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 bg-white p-10 text-center shadow-lush lg:col-span-2">
<p className="text-sm text-gray-600">Sign in to view boards.</p>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center lg:col-span-2">
<p className="text-sm text-muted">Sign in to view boards.</p>
<SignInButton
mode="modal"
afterSignInUrl="/boards"
@@ -117,51 +117,46 @@ export default function BoardsPage() {
forceRedirectUrl="/boards"
signUpForceRedirectUrl="/boards"
>
<Button className="border-2 border-gray-900 bg-gray-900 text-white">
Sign in
</Button>
<Button>Sign in</Button>
</SignInButton>
</div>
</SignedOut>
<SignedIn>
<DashboardSidebar />
<div className="flex h-full flex-col gap-4 rounded-xl border-2 border-gray-200 bg-white p-8 shadow-lush">
<div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-8">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<h2 className="text-lg font-semibold text-gray-900">Boards</h2>
<p className="text-sm text-gray-500">
<h2 className="text-lg font-semibold text-strong">Boards</h2>
<p className="text-sm text-muted">
{sortedBoards.length} board
{sortedBoards.length === 1 ? "" : "s"} total.
</p>
</div>
<Button
className="border-2 border-gray-900 bg-gray-900 text-white"
onClick={() => router.push("/boards/new")}
>
<Button onClick={() => router.push("/boards/new")}>
New board
</Button>
</div>
{error && (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600">
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{error}
</div>
)}
{sortedBoards.length === 0 && !isLoading ? (
<div className="flex flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-gray-200 bg-gray-50 p-6 text-center text-sm text-gray-500">
<div className="flex flex-1 flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-[color:var(--border)] bg-[color:var(--surface-muted)] p-6 text-center text-sm text-muted">
No boards yet. Create your first board to get started.
</div>
) : (
<div className="overflow-hidden rounded-lg border border-gray-200">
<table className="min-w-full divide-y divide-gray-200 text-sm">
<thead className="bg-gray-50">
<div className="overflow-hidden rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)]">
<table className="min-w-full divide-y divide-[color:var(--border)] text-sm">
<thead className="bg-[color:var(--surface-muted)]">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-gray-500"
className="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-[0.22em] text-quiet"
>
{header.isPlaceholder
? null
@@ -174,11 +169,11 @@ export default function BoardsPage() {
</tr>
))}
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-[color:var(--border)] bg-[color:var(--surface)]">
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
className="cursor-pointer hover:bg-gray-50"
className="cursor-pointer transition hover:bg-[color:var(--surface-muted)]"
onClick={() => router.push(`/boards/${row.original.id}`)}
>
{row.getVisibleCells().map((cell) => (

17
frontend/src/app/dashboard/page.tsx
View File

@@ -14,8 +14,8 @@ export default function DashboardPage() {
return (
<DashboardShell>
<SignedOut>
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 bg-white p-10 text-center shadow-lush">
<p className="text-sm text-gray-600">
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center">
<p className="text-sm text-muted">
Sign in to access your dashboard.
</p>
<SignInButton
@@ -25,22 +25,17 @@ export default function DashboardPage() {
forceRedirectUrl="/boards"
signUpForceRedirectUrl="/boards"
>
<Button className="border-2 border-gray-900 bg-gray-900 text-white">
Sign in
</Button>
<Button>Sign in</Button>
</SignInButton>
</div>
</SignedOut>
<SignedIn>
<DashboardSidebar />
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-xl border-2 border-gray-200 bg-white p-10 text-center shadow-lush">
<p className="text-sm text-gray-600">
<div className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl surface-panel p-10 text-center">
<p className="text-sm text-muted">
Your work lives in boards. Jump in to manage tasks.
</p>
<Button
className="border-2 border-gray-900 bg-gray-900 text-white"
onClick={() => router.push("/boards")}
>
<Button onClick={() => router.push("/boards")}>
Go to boards
</Button>
</div>

71
frontend/src/app/globals.css
View File

@@ -4,14 +4,33 @@
:root {
color-scheme: light;
--bg: #f4f6fa;
--surface: #ffffff;
--surface-muted: #eef2f7;
--surface-strong: #e6ecf6;
--border: #d6dce6;
--border-strong: #c2cad9;
--text: #0b1220;
--text-muted: #4b5a73;
--text-quiet: #7c8aa0;
--accent: #1d4ed8;
--accent-strong: #1e40af;
--accent-soft: rgba(29, 78, 216, 0.12);
--success: #0f766e;
--warning: #b45309;
--danger: #b42318;
--shadow-panel: 0 18px 40px rgba(12, 17, 29, 0.08);
--shadow-card: 0 12px 24px rgba(12, 17, 29, 0.06);
}
body {
@apply bg-white text-gray-900 font-body;
@apply font-body;
background: var(--bg);
color: var(--text);
}
* {
@apply border-black/10;
border-color: var(--border);
}
@keyframes fade-in-up {
@@ -54,6 +73,35 @@ body {
}
@layer utilities {
.bg-app {
background: var(--bg);
}
.text-strong {
color: var(--text);
}
.text-muted {
color: var(--text-muted);
}
.text-quiet {
color: var(--text-quiet);
}
.surface-card {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-card);
}
.surface-panel {
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-panel);
}
.surface-muted {
background: var(--surface-muted);
border: 1px solid var(--border);
}
.border-strong {
border-color: var(--border-strong);
}
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out both;
}
@@ -66,25 +114,14 @@ body {
.animate-progress-shimmer {
animation: progress-shimmer 1.8s linear infinite;
}
.glass-panel {
background: #ffffff;
border: 1px solid #0b0b0b;
box-shadow: 4px 4px 0 #0b0b0b;
}
.shadow-lush {
box-shadow: 6px 6px 0 #0b0b0b;
}
.soft-shadow {
box-shadow: 0 24px 60px rgba(11, 11, 11, 0.12);
}
.soft-shadow-sm {
box-shadow: 0 16px 32px rgba(11, 11, 11, 0.08);
box-shadow: var(--shadow-panel);
}
.bg-landing-grid {
background-image:
linear-gradient(to right, rgba(11, 11, 11, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11, 11, 11, 0.08) 1px, transparent 1px);
background-size: 80px 80px;
linear-gradient(to right, rgba(12, 17, 29, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(12, 17, 29, 0.08) 1px, transparent 1px);
background-size: 120px 120px;
}
}

10
frontend/src/app/layout.tsx
View File

@@ -4,23 +4,25 @@ import type { Metadata } from "next";
import type { ReactNode } from "react";
import { ClerkProvider } from "@clerk/nextjs";
import { Inter, Space_Grotesk } from "next/font/google";
import { IBM_Plex_Sans, Sora } from "next/font/google";
export const metadata: Metadata = {
title: "OpenClaw Mission Control",
description: "A calm command center for every task.",
};
const bodyFont = Inter({
const bodyFont = IBM_Plex_Sans({
subsets: ["latin"],
display: "swap",
variable: "--font-body",
weight: ["400", "500", "600", "700"],
});
const headingFont = Space_Grotesk({
const headingFont = Sora({
subsets: ["latin"],
display: "swap",
variable: "--font-heading",
weight: ["500", "600", "700"],
});
export default function RootLayout({ children }: { children: ReactNode }) {
@@ -28,7 +30,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
<ClerkProvider>
<html lang="en">
<body
className={`${bodyFont.variable} ${headingFont.variable} min-h-screen bg-white text-gray-900 antialiased`}
className={`${bodyFont.variable} ${headingFont.variable} min-h-screen bg-app text-strong antialiased`}
>
{children}
</body>

13
frontend/src/components/atoms/BrandMark.tsx
View File

@@ -1,16 +1,17 @@
export function BrandMark() {
return (
<div className="flex items-center gap-3">
<div className="grid h-10 w-10 place-items-center rounded-lg border-2 border-gray-200 bg-white text-sm font-bold text-gray-900 shadow-lush">
<span className="font-heading tracking-[0.2em]">
OC
</span>
<div className="relative grid h-11 w-11 place-items-center rounded-2xl bg-[color:var(--accent)] text-sm font-semibold text-white shadow-lush">
<span className="font-heading tracking-[0.18em]">OC</span>
<span className="absolute -bottom-1 h-1 w-6 rounded-full bg-[color:var(--accent-strong)]" />
</div>
<div className="leading-tight">
<div className="font-heading text-sm uppercase tracking-[0.28em] text-gray-600">
<div className="font-heading text-sm uppercase tracking-[0.28em] text-strong">
OpenClaw
</div>
<div className="text-[11px] font-medium text-gray-500">Mission Control</div>
<div className="text-[11px] font-medium text-quiet">
Mission Control
</div>
</div>
</div>
);

2
frontend/src/components/atoms/HeroKicker.tsx
View File

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
export function HeroKicker({ children }: { children: ReactNode }) {
return (
<span className="inline-flex items-center rounded-full bg-gray-100 px-4 py-1 text-[11px] font-semibold uppercase tracking-[0.35em] text-gray-600">
<span className="inline-flex items-center rounded-full bg-[color:var(--accent-soft)] px-4 py-1 text-[11px] font-semibold uppercase tracking-[0.35em] text-[color:var(--accent-strong)]">
{children}
</span>
);

21
frontend/src/components/atoms/StatusPill.tsx
View File

@@ -1,21 +1,24 @@
import { Badge } from "@/components/ui/badge";
const STATUS_STYLES: Record<string, "default" | "outline" | "ember"> = {
const STATUS_STYLES: Record<
string,
"default" | "outline" | "accent" | "success" | "warning" | "danger"
> = {
inbox: "outline",
assigned: "default",
in_progress: "ember",
testing: "outline",
review: "default",
done: "default",
online: "default",
busy: "ember",
assigned: "accent",
in_progress: "warning",
testing: "accent",
review: "accent",
done: "success",
online: "success",
busy: "warning",
offline: "outline",
};
export function StatusPill({ status }: { status: string }) {
return (
<Badge variant={STATUS_STYLES[status] ?? "default"}>
{status.replace("_", " ")}
{status.replaceAll("_", " ")}
</Badge>
);
}

12
frontend/src/components/molecules/HeroCopy.tsx
View File

@@ -5,14 +5,14 @@ export function HeroCopy() {
<div className="space-y-6">
<HeroKicker>Mission Control</HeroKicker>
<div className="space-y-4">
<h1 className="font-heading text-4xl font-bold leading-tight text-gray-900 sm:text-5xl lg:text-6xl">
Orchestrate work without
<h1 className="font-heading text-4xl font-semibold leading-tight text-strong sm:text-5xl lg:text-6xl">
Enterprise control for
<br />
the daily status chase.
autonomous execution.
</h1>
<p className="max-w-xl text-base text-gray-600 sm:text-lg">
OpenClaw keeps every task, agent, and delivery signal in one place so
teams can spot momentum shifts fast.
<p className="max-w-xl text-base text-muted sm:text-lg">
Coordinate boards, agents, and approvals in one command layer. No
status meetings. No blind spots. Just durable execution.
</p>
</div>
</div>

8
frontend/src/components/molecules/TaskCard.tsx
View File

@@ -12,15 +12,15 @@ interface TaskCardProps {
export function TaskCard({ title, status, assignee, due }: TaskCardProps) {
return (
<Card className="border-gray-200 bg-white">
<Card className="border border-[color:var(--border)] bg-[color:var(--surface)]">
<CardContent className="space-y-4">
<div className="flex items-start justify-between gap-3">
<div className="space-y-1">
<p className="text-sm font-semibold text-gray-900">{title}</p>
<div className="space-y-2">
<p className="text-sm font-semibold text-strong">{title}</p>
<StatusPill status={status} />
</div>
</div>
<div className="flex items-center justify-between text-xs text-gray-600">
<div className="flex items-center justify-between text-xs text-muted">
<div className="flex items-center gap-2">
<UserCircle className="h-4 w-4" />
<span>{assignee ?? "Unassigned"}</span>

45
frontend/src/components/organisms/DashboardSidebar.tsx
View File

@@ -2,6 +2,7 @@
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Bot, LayoutGrid } from "lucide-react";
import { cn } from "@/lib/utils";
@@ -9,34 +10,44 @@ export function DashboardSidebar() {
const pathname = usePathname();
return (
<aside className="flex h-full flex-col gap-6 rounded-xl border-2 border-gray-200 bg-white p-6 shadow-lush">
<div className="space-y-2">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
Work
<aside className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-5">
<div className="space-y-3">
<p className="text-xs font-semibold uppercase tracking-[0.32em] text-quiet">
Navigation
</p>
<nav className="space-y-1 text-sm">
<Link
href="/agents"
className={cn(
"block rounded-lg border border-transparent px-3 py-2 font-medium text-gray-700 hover:border-gray-200 hover:bg-gray-50",
pathname.startsWith("/agents") &&
"border-gray-200 bg-gray-50 text-gray-900"
)}
>
Agents
</Link>
<nav className="space-y-2 text-sm">
<Link
href="/boards"
className={cn(
"block rounded-lg border border-transparent px-3 py-2 font-medium text-gray-700 hover:border-gray-200 hover:bg-gray-50",
"flex items-center gap-3 rounded-xl border border-transparent px-3 py-2 font-semibold text-muted transition hover:border-[color:var(--border)] hover:bg-[color:var(--surface-muted)]",
pathname.startsWith("/boards") &&
"border-gray-200 bg-gray-50 text-gray-900"
"border-[color:var(--accent-soft)] bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]"
)}
>
<LayoutGrid className="h-4 w-4" />
Boards
</Link>
<Link
href="/agents"
className={cn(
"flex items-center gap-3 rounded-xl border border-transparent px-3 py-2 font-semibold text-muted transition hover:border-[color:var(--border)] hover:bg-[color:var(--surface-muted)]",
pathname.startsWith("/agents") &&
"border-[color:var(--accent-soft)] bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]"
)}
>
<Bot className="h-4 w-4" />
Agents
</Link>
</nav>
</div>
<div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-xs text-quiet">
<p className="font-semibold uppercase tracking-[0.2em] text-strong">
Ops health
</p>
<p className="mt-2">
Live boards and agents appear here once data streams in.
</p>
</div>
</aside>
);
}

115
frontend/src/components/organisms/LandingHero.tsx
View File

@@ -7,16 +7,10 @@ import { Button } from "@/components/ui/button";
export function LandingHero() {
return (
<section className="grid w-full items-center gap-10 lg:grid-cols-[1.05fr_0.95fr]">
<div
className="space-y-8 animate-fade-in-up"
style={{ animationDelay: "0.05s" }}
>
<section className="grid w-full items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
<div className="space-y-8 animate-fade-in-up">
<HeroCopy />
<div
className="flex flex-col gap-3 sm:flex-row sm:items-center animate-fade-in-up"
style={{ animationDelay: "0.12s" }}
>
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
<SignedOut>
<SignInButton
mode="modal"
@@ -25,60 +19,85 @@ export function LandingHero() {
forceRedirectUrl="/boards"
signUpForceRedirectUrl="/boards"
>
<Button
size="lg"
className="w-full sm:w-auto border-2 border-gray-900 bg-gray-900 text-white hover:bg-gray-900/90"
>
<Button size="lg" className="w-full sm:w-auto">
Sign in to open mission control
</Button>
</SignInButton>
</SignedOut>
<SignedIn>
<div className="text-sm text-gray-600">
<div className="text-sm text-muted">
You&apos;re signed in. Open your boards when you&apos;re ready.
</div>
</SignedIn>
</div>
<p
className="text-xs uppercase tracking-[0.3em] text-gray-500 animate-fade-in-up"
style={{ animationDelay: "0.18s" }}
>
One login · clear ownership · faster decisions
</p>
<div className="flex flex-wrap gap-3 text-xs font-semibold uppercase tracking-[0.28em] text-quiet">
<span className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1">
Enterprise ready
</span>
<span className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1">
Agent-first ops
</span>
<span className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1">
24/7 visibility
</span>
</div>
</div>
<div
className="relative animate-fade-in-up"
style={{ animationDelay: "0.3s" }}
>
<div className="glass-panel rounded-2xl bg-white p-6">
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
<span>Status</span>
<span className="rounded-full border border-gray-200 px-2 py-1 text-[10px]">
Live
</span>
</div>
<div className="space-y-2">
<p className="text-lg font-semibold text-gray-900">
Tasks claimed automatically
<div className="relative animate-fade-in-up">
<div className="surface-panel rounded-3xl p-6">
<div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
<span>Command surface</span>
<span className="rounded-full border border-[color:var(--border)] px-2 py-1 text-[10px]">
Live
</span>
</div>
<div className="mt-6 space-y-4">
<div>
<p className="text-lg font-semibold text-strong">
Tasks claimed, tracked, delivered.
</p>
<p className="text-sm text-gray-600">
Agents pick the next task in queue, report progress, and ship
deliverables back to you.
<p className="text-sm text-muted">
See every queue, agent, and handoff without chasing updates.
</p>
</div>
<div className="grid grid-cols-2 gap-3">
{["Assignments", "In review", "Delivered", "Signals"].map(
(label) => (
<div
key={label}
className="rounded-xl border-2 border-gray-200 bg-white p-4 text-sm font-semibold text-gray-900 soft-shadow-sm"
>
{label}
<div className="grid grid-cols-3 gap-3">
{[
{ label: "Active boards", value: "12" },
{ label: "Agents live", value: "08" },
{ label: "Tasks in flow", value: "46" },
].map((item) => (
<div
key={item.label}
className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-center"
>
<div className="text-xl font-semibold text-strong">
{item.value}
</div>
)
)}
<div className="text-[11px] uppercase tracking-[0.18em] text-quiet">
{item.label}
</div>
</div>
))}
</div>
<div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4">
<div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
<span>Signals</span>
<span>Updated 2m ago</span>
</div>
<div className="mt-3 space-y-2 text-sm text-muted">
<div className="flex items-center justify-between">
<span>Agent Delta moved task to review</span>
<span className="text-quiet">Just now</span>
</div>
<div className="flex items-center justify-between">
<span>Board Growth Ops hit WIP limit</span>
<span className="text-quiet">5m</span>
</div>
<div className="flex items-center justify-between">
<span>Release tasks stabilized</span>
<span className="text-quiet">12m</span>
</div>
</div>
</div>
</div>
</div>

10
frontend/src/components/organisms/TaskBoard.tsx
View File

@@ -55,18 +55,16 @@ export function TaskBoard({
}, [tasks]);
return (
<div className="grid grid-flow-col auto-cols-[minmax(260px,320px)] gap-6 overflow-x-auto pb-2">
<div className="grid grid-flow-col auto-cols-[minmax(260px,320px)] gap-6 overflow-x-auto pb-4">
{columns.map((column) => {
const columnTasks = grouped[column.status] ?? [];
return (
<div key={column.title} className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-900">
<h3 className="text-sm font-semibold text-strong">
{column.title}
</h3>
<span className="text-xs text-gray-500">
{columnTasks.length}
</span>
<span className="text-xs text-quiet">{columnTasks.length}</span>
</div>
<div className="space-y-3">
{column.status === "inbox" ? (
@@ -75,7 +73,7 @@ export function TaskBoard({
onClick={onCreateTask}
disabled={isCreateDisabled}
className={cn(
"flex w-full items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 px-4 py-6 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 transition hover:border-gray-300 hover:bg-white",
"flex w-full items-center justify-center rounded-2xl border border-dashed border-[color:var(--border)] bg-[color:var(--surface-muted)] px-4 py-6 text-[11px] font-semibold uppercase tracking-[0.2em] text-quiet transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface)]",
isCreateDisabled && "cursor-not-allowed opacity-60"
)}
>

16
frontend/src/components/templates/DashboardShell.tsx
View File

@@ -8,22 +8,24 @@ import { BrandMark } from "@/components/atoms/BrandMark";
export function DashboardShell({ children }: { children: ReactNode }) {
return (
<div className="relative min-h-screen bg-white text-gray-900">
<div className="relative min-h-screen bg-app text-strong">
<div
className="absolute inset-0 bg-landing-grid opacity-[0.35] pointer-events-none"
className="absolute inset-0 bg-landing-grid opacity-[0.18] pointer-events-none"
aria-hidden="true"
/>
<div className="relative flex min-h-screen w-full flex-col gap-8 px-6 pb-10 pt-8">
<header className="flex flex-wrap items-center justify-between gap-4">
<div className="relative flex min-h-screen w-full flex-col">
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-[color:var(--border)] bg-[color:rgba(244,246,250,0.8)] px-6 py-5 backdrop-blur">
<BrandMark />
<SignedIn>
<div className="rounded-lg border-2 border-gray-200 bg-white px-2 py-1">
<div className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2 py-1 shadow-sm">
<UserButton />
</div>
</SignedIn>
</header>
<div className="grid flex-1 gap-6 lg:grid-cols-[320px_1fr]">
{children}
<div className="flex-1 px-6 py-6">
<div className="grid gap-6 lg:grid-cols-[260px_1fr]">
{children}
</div>
</div>
</div>
</div>

16
frontend/src/components/templates/LandingShell.tsx
View File

@@ -8,26 +8,26 @@ import { BrandMark } from "@/components/atoms/BrandMark";
export function LandingShell({ children }: { children: ReactNode }) {
return (
<div className="landing-page bg-white text-gray-900">
<section className="relative overflow-hidden pt-24 pb-16 px-4 sm:px-6 lg:px-8">
<div className="landing-page bg-app text-strong">
<section className="relative overflow-hidden px-4 pb-20 pt-16 sm:px-6 lg:px-8">
<div
className="absolute inset-0 bg-landing-grid opacity-[0.35] pointer-events-none"
className="absolute inset-0 bg-landing-grid opacity-[0.18] pointer-events-none"
aria-hidden="true"
/>
<div
className="absolute -top-28 right-0 h-64 w-64 rounded-full bg-gray-100 blur-3xl pointer-events-none"
className="absolute -top-40 right-0 h-72 w-72 rounded-full bg-[color:var(--accent-soft)] blur-3xl pointer-events-none"
aria-hidden="true"
/>
<div
className="absolute -bottom-32 left-0 h-72 w-72 rounded-full bg-gray-100 blur-3xl pointer-events-none"
className="absolute -bottom-32 left-0 h-72 w-72 rounded-full bg-[color:var(--surface-strong)] blur-3xl pointer-events-none"
aria-hidden="true"
/>
<div className="relative w-full">
<header className="flex items-center justify-between pb-12">
<div className="relative mx-auto flex w-full max-w-6xl flex-col gap-12">
<header className="flex items-center justify-between gap-4">
<BrandMark />
<SignedIn>
<div className="rounded-lg border-2 border-gray-200 bg-white px-2 py-1">
<div className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2 py-1 shadow-sm">
<UserButton />
</div>
</SignedIn>

15
frontend/src/components/ui/badge.tsx
View File

@@ -4,13 +4,20 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold",
"inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em]",
{
variants: {
variant: {
default: "bg-gray-100 text-gray-800",
outline: "border border-gray-300 text-gray-800",
ember: "bg-gray-900 text-white",
default: "bg-[color:var(--surface-muted)] text-strong",
outline:
"border border-[color:var(--border-strong)] text-[color:var(--text-muted)]",
accent: "bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]",
success:
"bg-[color:rgba(15,118,110,0.14)] text-[color:var(--success)]",
warning:
"bg-[color:rgba(180,83,9,0.15)] text-[color:var(--warning)]",
danger:
"bg-[color:rgba(180,35,24,0.15)] text-[color:var(--danger)]",
},
},
defaultVariants: {

10
frontend/src/components/ui/button.tsx
View File

@@ -6,15 +6,17 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-lg text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
primary:
"border-2 border-gray-900 bg-gray-900 text-white hover:bg-gray-900/90",
"bg-[color:var(--accent)] text-white shadow-sm hover:bg-[color:var(--accent-strong)]",
secondary:
"border-2 border-gray-200 bg-white text-gray-900 hover:border-gray-900 hover:bg-gray-900 hover:text-white",
ghost: "bg-transparent text-gray-900 hover:bg-black/5",
"border border-[color:var(--border)] bg-[color:var(--surface)] text-strong hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]",
outline:
"border border-[color:var(--border-strong)] bg-transparent text-strong hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]",
ghost: "bg-transparent text-strong hover:bg-[color:var(--surface-strong)]",
},
size: {
sm: "h-9 px-4",

5
frontend/src/components/ui/card.tsx
View File

@@ -6,10 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border-2 border-gray-200 bg-white soft-shadow-sm",
className
)}
className={cn("rounded-2xl surface-card", className)}
{...props}
/>
)

8
frontend/src/components/ui/dialog.tsx
View File

@@ -17,7 +17,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-slate-950/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@@ -34,7 +34,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 w-[90vw] max-w-2xl translate-x-[-50%] translate-y-[-50%] rounded-2xl border-2 border-gray-200 bg-white p-6 shadow-lush focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
"fixed left-[50%] top-[50%] z-50 w-[90vw] max-w-2xl translate-x-[-50%] translate-y-[-50%] rounded-3xl border border-[color:var(--border)] bg-[color:var(--surface)] p-6 shadow-lush focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
className
)}
{...props}
@@ -70,7 +70,7 @@ const DialogTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-gray-900", className)}
className={cn("text-lg font-semibold text-strong", className)}
{...props}
/>
));
@@ -82,7 +82,7 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-gray-600", className)}
className={cn("text-sm text-muted", className)}
{...props}
/>
));

2
frontend/src/components/ui/input.tsx
View File

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
ref={ref}
type={type}
className={cn(
"flex h-11 w-full rounded-lg border-2 border-gray-200 bg-white px-4 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black",
"flex h-11 w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
className
)}
{...props}

12
frontend/src/components/ui/select.tsx
View File

@@ -18,14 +18,14 @@ const SelectTrigger = React.forwardRef<
ref={ref}
type="button"
className={cn(
"flex h-11 w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white px-4 text-sm text-gray-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2",
"flex h-11 w-full cursor-pointer items-center justify-between rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] focus:ring-offset-2",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 text-gray-500" />
<ChevronDown className="h-4 w-4 text-[color:var(--text-quiet)]" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
@@ -67,7 +67,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border-2 border-gray-200 bg-white shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
@@ -97,7 +97,7 @@ const SelectLabel = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold text-strong", className)}
{...props}
/>
));
@@ -110,7 +110,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-gray-800 outline-none focus:bg-black/5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm text-strong outline-none focus:bg-[color:var(--surface-strong)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
@@ -131,7 +131,7 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-gray-200", className)}
className={cn("-mx-1 my-1 h-px bg-[color:var(--border)]", className)}
{...props}
/>
));

4
frontend/src/components/ui/tabs.tsx
View File

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex items-center gap-2 rounded-full border-2 border-gray-200 bg-white p-1",
"inline-flex items-center gap-2 rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] p-1",
className
)}
{...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"rounded-full px-4 py-2 text-xs font-semibold text-gray-600 transition data-[state=active]:bg-gray-900 data-[state=active]:text-white",
"rounded-full px-4 py-2 text-xs font-semibold text-muted transition data-[state=active]:bg-[color:var(--accent)] data-[state=active]:text-white",
className
)}
{...props}

2
frontend/src/components/ui/textarea.tsx
View File

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
<textarea
ref={ref}
className={cn(
"min-h-[120px] w-full rounded-lg border-2 border-gray-200 bg-white px-4 py-3 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black",
"min-h-[120px] w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 py-3 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
className
)}
{...props}

2
frontend/src/components/ui/tooltip.tsx
View File

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"rounded-lg bg-gray-900 px-3 py-2 text-xs font-semibold text-white soft-shadow-sm",
"rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white shadow-lg",
className
)}
{...props}