Flatten dashboard sections and emphasize data regions
This commit is contained in:
@@ -10,9 +10,9 @@ type MetricCardProps = {
|
||||
|
||||
export function MetricCard({ label, value, delta, positive = true, className }: MetricCardProps) {
|
||||
return (
|
||||
<div className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4', className)}>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-[color:var(--terminal-muted)]">{label}</p>
|
||||
<p className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
|
||||
<div className={cn('min-w-0 border-t border-[color:var(--line-weak)] pt-3', className)}>
|
||||
<p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{label}</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
|
||||
{delta ? (
|
||||
<p className={cn('mt-2 text-xs', positive ? 'text-[#96f5bf]' : 'text-[#ff9898]')}>
|
||||
{delta}
|
||||
|
||||
@@ -20,9 +20,9 @@ export function TaskFeed({ tasks }: TaskFeedProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="space-y-2">
|
||||
<ul>
|
||||
{tasks.slice(0, 8).map((task) => (
|
||||
<li key={task.id} className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
|
||||
<li key={task.id} className="flex items-center justify-between gap-3 border-b border-[color:var(--line-weak)] py-3 last:border-b-0 last:pb-0 first:pt-0">
|
||||
<div>
|
||||
<p className="text-sm text-[color:var(--terminal-bright)]">{taskLabels[task.task_type]}</p>
|
||||
<p className="text-xs text-[color:var(--terminal-muted)]">
|
||||
|
||||
Reference in New Issue
Block a user