feat(04-02): restyle RecoveryBanner with design tokens and update NeedsAttention label

- Replace all hardcoded Tailwind colors with CSS custom properties (--warn, --warn-soft, --text, --muted, --panel-soft, --success, --danger, --muted-strong)
- Use rounded-[10px] instead of rounded-lg for design system consistency
- Add aria-label on dismiss button for accessibility
- Update NeedsAttention label to 'Needs Your Attention' in en.ts and zh.ts
This commit is contained in:
ZacharyZhang-NY committed 2026-03-22 16:44:12 -04:00
1 parent 071eef43a2
commit ec14f4a8ea
3 files changed
+10 -10

No files matched your search

@@ -41,33 +41,33 @@ export function RecoveryBanner() {
const handleDismissAll = () => setDismissed(true);
return (
<div className="bg-amber-500/10 border border-amber-500/30 rounded-lg p-4 mb-4">
<div className="bg-[color:var(--warn-soft)] border border-[color:var(--warn)]/30 rounded-[10px] p-4 mb-4">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2 text-amber-400 font-medium">
<div className="flex items-center gap-2 text-[color:var(--warn)] font-medium">
<Warning size={18} weight="bold" />
<span>{runs.length} interrupted task(s) detected from previous session</span>
</div>
<button onClick={handleDismissAll} className="text-zinc-400 hover:text-zinc-200 transition-colors">
<button onClick={handleDismissAll} className="text-[color:var(--muted-strong)] hover:text-[color:var(--text)] transition-colors" aria-label="Dismiss recovery banner">
<X size={16} />
</button>
</div>
<div className="space-y-2">
{runs.map(run => (
<div key={run.runId} className="flex items-center justify-between bg-zinc-800/50 rounded px-3 py-2 text-sm">
<div key={run.runId} className="flex items-center justify-between bg-[color:var(--panel-soft)] rounded px-3 py-2 text-sm">
<div>
<span className="text-zinc-200">{run.taskTitle}</span>
<span className="text-zinc-500 ml-2">({run.agentName})</span>
<span className="text-[color:var(--text)]">{run.taskTitle}</span>
<span className="text-[color:var(--muted)] ml-2">({run.agentName})</span>
</div>
<div className="flex gap-2">
<button
onClick={() => handleRetry(run)}
className="flex items-center gap-1 text-emerald-400 hover:text-emerald-300 text-xs transition-colors"
className="flex items-center gap-1 text-[color:var(--success)] hover:text-[color:var(--success)] text-xs transition-colors"
>
<ArrowClockwise size={14} /> Retry
</button>
<button
onClick={() => handleFail(run)}
className="flex items-center gap-1 text-red-400 hover:text-red-300 text-xs transition-colors"
className="flex items-center gap-1 text-[color:var(--danger)] hover:text-[color:var(--danger)] text-xs transition-colors"
>
<Trash size={14} /> Cancel
</button>
+1 -1
View File
@@ -558,7 +558,7 @@ export const en: Record<string, string> = {
"dash.workforce": "Workforce",
"dash.recentActivity": "Recent Activity",
"dash.infrastructure": "Infrastructure",
"dash.needsAttentionSection": "Needs Attention",
"dash.needsAttentionSection": "Needs Your Attention",
"dash.daysLeft": "{0} days left",
"dash.tasksComplete": "{0}/{1} tasks complete",
"dash.people": "People",
+1 -1
View File
@@ -558,7 +558,7 @@ export const zh: Record<string, string> = {
"dash.workforce": "工作力",
"dash.recentActivity": "最近活动",
"dash.infrastructure": "基础设施",
"dash.needsAttentionSection": "需要关注",
"dash.needsAttentionSection": "需要您的关注",
"dash.daysLeft": "剩余 {0} 天",
"dash.tasksComplete": "{0}/{1} 任务完成",
"dash.people": "人员",