Skip to content

feat: modernize landing and dashboard UI #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Skeyelab merged 1 commit into from
Sep 22, 2026
Merged

feat: modernize landing and dashboard UI #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/dashboard/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default async function DashboardEventsPage() {
]);

return (
<section className="space-y-4">
<section className="space-y-8">
<DashboardPageHeader
eyebrow="Events"
title="Delivery events"
Expand Down
4 changes: 2 additions & 2 deletions app/dashboard/nodes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ export default async function DashboardNodesPage() {
.orderBy(desc(nodes.createdAt));

return (
<section className="space-y-4">
<section className="space-y-8">
<DashboardPageHeader
eyebrow="Nodes"
title="Connected nodes"
description="Register and monitor private OpenClaw nodes that pull events from the queue."
description="Register and monitor private nodes that receive events from the queue."
/>

<NodesClient
Expand Down
4 changes: 2 additions & 2 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default async function DashboardPage() {
}));

return (
<section className="space-y-8">
<section className="space-y-10">
<DashboardPageHeader eyebrow="Overview" title={intro.title} description={intro.description} />

{intro.cta ? (
Expand All @@ -99,7 +99,7 @@ export default async function DashboardPage() {
) : null}

<div className="flex min-w-0 flex-col gap-6">
<Card size="sm" className="min-w-0">
<Card size="sm" className="min-w-0 bg-card/55">
<CardHeader>
<CardTitle>Events over time</CardTitle>
<CardDescription>
Expand Down
2 changes: 1 addition & 1 deletion app/dashboard/routes/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default async function DashboardRoutesPage() {
]);

return (
<section className="space-y-4">
<section className="space-y-8">
<DashboardPageHeader
eyebrow="Routes"
title="Webhook routes"
Expand Down
140 changes: 70 additions & 70 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,79 +69,79 @@ a {
}

:root {
--brand-page: oklch(0.13 0.022 52);
--brand-accent: oklch(0.72 0.17 45);
--brand-accent-muted: oklch(0.72 0.12 50 / 0.35);
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--brand-page: oklch(0.12 0.03 250);
--brand-accent: oklch(0.78 0.15 205);
--brand-accent-muted: oklch(0.78 0.12 205 / 0.32);
--background: oklch(0.985 0.006 235);
--foreground: oklch(0.16 0.035 250);
--card: oklch(0.96 0.012 235);
--card-foreground: oklch(0.16 0.035 250);
--popover: oklch(0.985 0.006 235);
--popover-foreground: oklch(0.16 0.035 250);
--primary: oklch(0.56 0.14 205);
--primary-foreground: oklch(0.985 0.006 235);
--secondary: oklch(0.91 0.02 235);
--secondary-foreground: oklch(0.18 0.035 250);
--muted: oklch(0.91 0.02 235);
--muted-foreground: oklch(0.48 0.04 245);
--accent: oklch(0.9 0.04 205);
--accent-foreground: oklch(0.18 0.035 250);
--destructive: oklch(0.58 0.22 25);
--border: oklch(0.82 0.03 235);
--input: oklch(0.82 0.03 235);
--ring: oklch(0.65 0.13 205);
--chart-1: oklch(0.7 0.13 205);
--chart-2: oklch(0.58 0.11 225);
--chart-3: oklch(0.48 0.08 240);
--chart-4: oklch(0.38 0.07 250);
--chart-5: oklch(0.28 0.06 255);
--radius: 0.75rem;
--sidebar: oklch(0.96 0.012 235);
--sidebar-foreground: oklch(0.16 0.035 250);
--sidebar-primary: oklch(0.56 0.14 205);
--sidebar-primary-foreground: oklch(0.985 0.006 235);
--sidebar-accent: oklch(0.91 0.02 235);
--sidebar-accent-foreground: oklch(0.18 0.035 250);
--sidebar-border: oklch(0.82 0.03 235);
--sidebar-ring: oklch(0.65 0.13 205);
}

/* OpenClaw-adjacent: warm dark surfaces + coral accent (derived from openclaw.ai / docs palette) */
/* clawproxy: dark navy surfaces with a single cyan accent. */
.dark {
--brand-page: oklch(0.13 0.022 52);
--brand-accent: oklch(0.72 0.17 45);
--brand-accent-muted: oklch(0.72 0.12 50 / 0.35);
--background: oklch(0.14 0.02 50);
--foreground: oklch(0.96 0.012 90);
--card: oklch(0.19 0.024 48);
--card-foreground: oklch(0.96 0.012 90);
--popover: oklch(0.19 0.024 48);
--popover-foreground: oklch(0.96 0.012 90);
--primary: oklch(0.72 0.17 45);
--primary-foreground: oklch(0.16 0.028 50);
--secondary: oklch(0.26 0.03 48);
--secondary-foreground: oklch(0.96 0.012 90);
--muted: oklch(0.24 0.022 48);
--muted-foreground: oklch(0.72 0.04 75);
--accent: oklch(0.3 0.045 46);
--accent-foreground: oklch(0.96 0.012 90);
--destructive: oklch(0.63 0.22 25);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 14%);
--ring: oklch(0.72 0.14 50);
--chart-1: oklch(0.72 0.17 45);
--chart-2: oklch(0.55 0.08 55);
--chart-3: oklch(0.45 0.06 50);
--chart-4: oklch(0.35 0.04 48);
--chart-5: oklch(0.28 0.03 48);
--sidebar: oklch(0.19 0.024 48);
--sidebar-foreground: oklch(0.96 0.012 90);
--sidebar-primary: oklch(0.72 0.17 45);
--sidebar-primary-foreground: oklch(0.16 0.028 50);
--sidebar-accent: oklch(0.26 0.03 48);
--sidebar-accent-foreground: oklch(0.96 0.012 90);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: oklch(0.72 0.14 50);
--brand-page: oklch(0.12 0.03 250);
--brand-accent: oklch(0.78 0.15 205);
--brand-accent-muted: oklch(0.78 0.12 205 / 0.32);
--background: oklch(0.145 0.035 250);
--foreground: oklch(0.96 0.012 220);
--card: oklch(0.19 0.04 250);
--card-foreground: oklch(0.96 0.012 220);
--popover: oklch(0.19 0.04 250);
--popover-foreground: oklch(0.96 0.012 220);
--primary: oklch(0.78 0.15 205);
--primary-foreground: oklch(0.105 0.03 250);
--secondary: oklch(0.25 0.045 250);
--secondary-foreground: oklch(0.96 0.012 220);
--muted: oklch(0.24 0.04 250);
--muted-foreground: oklch(0.72 0.04 225);
--accent: oklch(0.28 0.06 240);
--accent-foreground: oklch(0.96 0.012 220);
--destructive: oklch(0.64 0.22 25);
--border: oklch(1 0 0 / 13%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.78 0.12 205);
--chart-1: oklch(0.78 0.15 205);
--chart-2: oklch(0.62 0.11 220);
--chart-3: oklch(0.5 0.08 235);
--chart-4: oklch(0.38 0.06 250);
--chart-5: oklch(0.29 0.05 255);
--sidebar: oklch(0.17 0.038 250);
--sidebar-foreground: oklch(0.96 0.012 220);
--sidebar-primary: oklch(0.78 0.15 205);
--sidebar-primary-foreground: oklch(0.105 0.03 250);
--sidebar-accent: oklch(0.25 0.045 250);
--sidebar-accent-foreground: oklch(0.96 0.012 220);
--sidebar-border: oklch(1 0 0 / 13%);
--sidebar-ring: oklch(0.78 0.12 205);
}

@layer base {
Expand Down
Loading
Loading