Skip to content

fix: UX audit — dark theme buttons, input backgrounds, ReactFlow dark mode, contrast & a11y #21

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
HongmingWang-Rabbit merged 1 commit into from
Apr 14, 2026
Merged

fix: UX audit — dark theme buttons, input backgrounds, ReactFlow dark mode, contrast & a11y #21

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
1 change: 1 addition & 0 deletions canvas/src/components/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ function CanvasInner() {
return (
<div className="w-screen h-screen bg-zinc-950">
<ReactFlow
colorMode="dark"
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
Expand Down
6 changes: 3 additions & 3 deletions canvas/src/components/EmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,13 @@ export function EmptyState() {
<h2 className="text-xl font-semibold text-zinc-100 mb-1">
Deploy your first agent
</h2>
<p className="text-sm text-zinc-500 mb-6 leading-relaxed">
<p className="text-sm text-zinc-400 mb-6 leading-relaxed">
Pick a template to get started instantly, or create a blank workspace.
</p>

{/* Template grid */}
{loading ? (
<div className="text-xs text-zinc-600 py-4">Loading templates...</div>
<div className="text-xs text-zinc-400 py-4">Loading templates...</div>
) : templates.length > 0 ? (
<div className="grid grid-cols-2 gap-2.5 mb-4 text-left max-h-[240px] overflow-y-auto">
{templates.slice(0, 6).map((t) => {
Expand Down Expand Up @@ -162,7 +162,7 @@ export function EmptyState() {

{/* Tips */}
<div className="mt-5 pt-4 border-t border-zinc-800/50">
<div className="flex items-center justify-center gap-6 text-[10px] text-zinc-600">
<div className="flex items-center justify-center gap-6 text-[10px] text-zinc-400">
<span>Drag to nest workspaces into teams</span>
<span className="text-zinc-700">|</span>
<span>Right-click for actions</span>
Expand Down
4 changes: 3 additions & 1 deletion canvas/src/components/TemplatePalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ export function OrgTemplatesSection() {
</h3>
<button
onClick={loadOrgs}
className="text-[9px] text-zinc-500 hover:text-zinc-300"
aria-label="Refresh org templates"
className="text-[10px] text-zinc-500 hover:text-zinc-300"
>
↻
</button>
Expand Down Expand Up @@ -314,6 +315,7 @@ export function TemplatePalette() {
: "bg-zinc-900/90 border border-zinc-700/50 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600"
}`}
title="Template Palette"
aria-label="Template Palette"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<rect x="1" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
Expand Down
34 changes: 19 additions & 15 deletions canvas/src/styles/settings-panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
--backdrop-color: rgba(0, 0, 0, 0.3);
--slide-duration: 200ms;
--slide-easing: ease-out;
--focus-ring: 2px solid #0066cc;
--focus-ring: 2px solid #3b82f6;
--focus-ring-offset: 2px;
--status-valid: #16a34a;
--status-invalid: #dc2626;
Expand Down Expand Up @@ -277,8 +277,8 @@
}

.secret-row__save-btn {
background: #f4f4f5;
color: #18181b;
background: #2563eb;
color: #ffffff;
border: none;
padding: 6px 12px;
border-radius: 6px;
Expand Down Expand Up @@ -323,6 +323,8 @@
border-radius: 6px;
font-size: 14px;
font-family: inherit;
background: #18181b;
color: #f4f4f5;
}

.add-key-form__select:focus,
Expand Down Expand Up @@ -353,8 +355,8 @@
}

.add-key-form__save-btn {
background: #f4f4f5;
color: #18181b;
background: #2563eb;
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 6px;
Expand Down Expand Up @@ -396,6 +398,8 @@
border-radius: 6px;
font-size: 14px;
font-family: monospace;
background: #18181b;
color: #f4f4f5;
}

.key-value-field input:focus {
Expand Down Expand Up @@ -481,8 +485,8 @@
.empty-state__body { font-size: 14px; color: #a1a1aa; margin: 0 0 24px; line-height: 1.5; }

.empty-state__cta {
background: #f4f4f5;
color: #18181b;
background: #2563eb;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 8px;
Expand Down Expand Up @@ -532,8 +536,8 @@
.secrets-tab__error p { color: var(--status-invalid); margin: 0 0 12px; }

.secrets-tab__refresh-btn {
background: #f4f4f5;
color: #18181b;
background: #2563eb;
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 6px;
Expand All @@ -550,7 +554,7 @@
.secrets-tab__clear-search {
background: none;
border: none;
color: #0066cc;
color: #3b82f6;
cursor: pointer;
margin-left: 8px;
font-size: 14px;
Expand Down Expand Up @@ -656,8 +660,8 @@
}

.guard-dialog__discard-btn {
background: #f4f4f5;
color: #18181b;
background: #2563eb;
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 6px;
Expand All @@ -679,7 +683,7 @@
}

.settings-button:hover { background: #27272a; color: #f4f4f5; }
.settings-button--active { color: #0066cc; background: #1e3a5f; }
.settings-button--active { color: #3b82f6; background: #1e3a5f; }
.settings-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.settings-button__tooltip {
Expand Down Expand Up @@ -708,8 +712,8 @@
.top-bar__name { font-size: 14px; font-weight: 500; color: #d4d4d8; }

.top-bar__btn {
background: #f4f4f5;
color: #18181b;
background: #2563eb;
color: #ffffff;
border: none;
padding: 6px 12px;
border-radius: 6px;
Expand Down
Loading