1584d34b89
Removes light mode entirely in favour of a permanent dark theme with a navy-tinted background and three signature accents (electric blue, amber/gold, coral) exposed as CSS custom properties and Tailwind utilities (bg-electric, text-amber-accent, text-coral-accent). - Set class="dark" on <html> and apply Clerk dark base theme - Rewrite app.css: single :root palette (oklch navy values), custom --electric / --amber-accent / --coral-accent variables, remove duplicate .dark block and light-mode bg-white/bg-gray-950 rule - Install @clerk/themes for Clerk dark modal support - Replace hardcoded Tailwind colors across 30+ files: - Draft grid cells: blue-50/blue-950 → electric/15, green-50/950 → emerald/10 - Timer: green-600/yellow-600/red-600 → emerald-400/amber-accent/coral-accent - Status badges: blue-50/green-50/gray-50 → electric/emerald/muted variants - Success messages: green-500/15 text-green-700 dark:text-green-400 → emerald-500/15 text-emerald-400 - Info cards: blue-50 dark:bg-blue-950 → electric/10 - Warning cards: yellow-500 → amber-accent variants - Medal/placement badges: yellow-500/orange-600 → amber-accent/coral-accent - Movement indicators: green-600/red-600 → emerald-400/coral-accent - Connection dots: green-500/red-500 → emerald-500/coral-accent - Remove dark:hidden/dark:block logo toggle in welcome.tsx (always dark) - Update DraftGrid test assertions to match new class names Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
import { Button } from "~/components/ui/button";
|
|
import { Card } from "~/components/ui/card";
|
|
|
|
interface ConnectionOverlayProps {
|
|
isConnected: boolean;
|
|
isReconnecting: boolean;
|
|
connectionError: string | null;
|
|
}
|
|
|
|
export function ConnectionOverlay({
|
|
isConnected,
|
|
isReconnecting,
|
|
connectionError,
|
|
}: ConnectionOverlayProps) {
|
|
// Don't show overlay if connected
|
|
if (isConnected) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
|
|
<Card className="w-full max-w-md mx-4 p-8 text-center">
|
|
<div className="flex flex-col items-center gap-6">
|
|
{/* Spinner or Error Icon */}
|
|
{connectionError ? (
|
|
<div className="w-16 h-16 rounded-full bg-destructive/15 flex items-center justify-center">
|
|
<svg
|
|
className="w-8 h-8 text-destructive"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
<div className="relative w-16 h-16">
|
|
<div className="absolute inset-0 border-4 border-primary/30 rounded-full"></div>
|
|
<div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Title */}
|
|
<div>
|
|
<h2 className="text-2xl font-bold mb-2">
|
|
{connectionError
|
|
? "Connection Error"
|
|
: isReconnecting
|
|
? "Reconnecting..."
|
|
: "Connecting to Draft"}
|
|
</h2>
|
|
|
|
{/* Message */}
|
|
<p className="text-muted-foreground">
|
|
{connectionError ? (
|
|
connectionError
|
|
) : isReconnecting ? (
|
|
"Lost connection to the draft server. Attempting to reconnect..."
|
|
) : (
|
|
"Please wait while we connect you to the live draft room."
|
|
)}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Button (only on persistent error) */}
|
|
{connectionError && (
|
|
<Button
|
|
onClick={() => window.location.reload()}
|
|
className="w-full"
|
|
variant="default"
|
|
>
|
|
Reload Page
|
|
</Button>
|
|
)}
|
|
|
|
{/* Loading Dots */}
|
|
{!connectionError && (
|
|
<div className="flex gap-1.5">
|
|
<div
|
|
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
|
style={{ animationDelay: "0ms" }}
|
|
></div>
|
|
<div
|
|
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
|
style={{ animationDelay: "150ms" }}
|
|
></div>
|
|
<div
|
|
className="w-2 h-2 bg-primary rounded-full animate-bounce"
|
|
style={{ animationDelay: "300ms" }}
|
|
></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|