unchained/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>