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:
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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "人员",
|
||||
|
||||
Reference in new issue
Block a user