f4a7b53393
Shift the dark theme from neutral gray to a richer blue-tinted palette inspired by CharBuilder-style TTRPG apps. Deeper navy background, steel-blue card surfaces, and visible blue borders create more depth and visual layering. - Update design tokens: background, card, border, input, muted colors - Add card-glow utility (radial gradient + blue box-shadow) for card surfaces - Add panel-glow utility (top-down gradient) for tall panels like stat blocks - Apply glow and rounded-lg to all card surfaces, dropdowns, dialogs, toasts - Give outline buttons a subtle fill instead of transparent background - Active combatant row now uses full border with glow instead of left accent Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
import { X } from "lucide-react";
|
|
import { useEffect } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { Button } from "./ui/button.js";
|
|
|
|
interface ToastProps {
|
|
message: string;
|
|
progress?: number;
|
|
onDismiss: () => void;
|
|
autoDismissMs?: number;
|
|
}
|
|
|
|
export function Toast({
|
|
message,
|
|
progress,
|
|
onDismiss,
|
|
autoDismissMs,
|
|
}: ToastProps) {
|
|
useEffect(() => {
|
|
if (autoDismissMs === undefined) return;
|
|
const timer = setTimeout(onDismiss, autoDismissMs);
|
|
return () => clearTimeout(timer);
|
|
}, [autoDismissMs, onDismiss]);
|
|
|
|
return createPortal(
|
|
<div className="fixed bottom-4 left-4 z-50">
|
|
<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
|
|
<span className="text-foreground text-sm">{message}</span>
|
|
{progress !== undefined && (
|
|
<div className="h-2 w-24 overflow-hidden rounded-full bg-muted">
|
|
<div
|
|
className="h-full rounded-full bg-primary transition-all"
|
|
style={{ width: `${Math.round(progress * 100)}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={onDismiss}
|
|
className="text-muted-foreground"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|