Logan CusanoandClaude Opus 5.5
bf206334e3
UI_REDESIGN chunk 4 was never finished: 39 app/component files still used raw Tailwind greys, kept readable in light mode only by the !important override sheet. In dark mode text-gray-600 is ~2.3:1 on surface, and the light override maps it to #94a3b8 (~2.6:1 on white) — unreadable in both. Mechanical mapping (886 classes): gray-100/200 -> ink, 300/400 -> ink-2, 500/600/700 -> ink-muted, bg 950/900/800 -> page/surface/raised, border 800 -> line, 700/600 -> line-strong, plus hover/divide/placeholder. Alpha suffixes kept (tokens are color-mix, so /60 works). bg-gray-700, text-white and marketing pages left alone. text-[9px] -> text-[10px]. Frontend unverified: no Node on the authoring box (#207). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
interface EmptyStateProps {
|
|
icon?: ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
action?: ReactNode;
|
|
}
|
|
|
|
/** Consistent "nothing here yet" panel — replaces the ad-hoc `<p className="text-ink-muted">` scattered across pages. */
|
|
export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center text-center py-12 px-6 border border-dashed border-line-strong rounded-xl">
|
|
{icon && <div className="text-ink-muted mb-3">{icon}</div>}
|
|
<p className="text-ink text-sm font-semibold">{title}</p>
|
|
{description && <p className="text-ink-muted text-xs mt-1 max-w-sm">{description}</p>}
|
|
{action && <div className="mt-4">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Inline error banner — for API/Firestore errors surfaced within a page section. */
|
|
export function ErrorBanner({ message }: { message: string }) {
|
|
return (
|
|
<div className="bg-sev-major/10 border border-sev-major/40 rounded-lg p-4">
|
|
<p className="text-sev-major text-sm">{message}</p>
|
|
</div>
|
|
);
|
|
}
|