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>
112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import {
|
|
isRouteErrorResponse,
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useLocation,
|
|
} from "react-router";
|
|
|
|
import type { Route } from "./+types/root";
|
|
import "./app.css";
|
|
import { clerkMiddleware, rootAuthLoader, getAuth } from "@clerk/react-router/server";
|
|
import { Navbar } from "~/components/navbar";
|
|
import { ClerkProvider } from "@clerk/react-router";
|
|
import { dark } from "@clerk/themes";
|
|
import { Toaster } from "~/components/ui/sonner";
|
|
import { isUserAdminByClerkId } from "~/models/user";
|
|
|
|
export const middleware: Route.MiddlewareFunction[] = [clerkMiddleware()];
|
|
|
|
export async function loader(args: Route.LoaderArgs) {
|
|
return rootAuthLoader(args, async () => {
|
|
const { userId } = await getAuth(args);
|
|
|
|
let isAdmin = false;
|
|
if (userId) {
|
|
isAdmin = await isUserAdminByClerkId(userId);
|
|
}
|
|
|
|
return { isAdmin };
|
|
});
|
|
}
|
|
|
|
export const links: Route.LinksFunction = () => [
|
|
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
|
{
|
|
rel: "preconnect",
|
|
href: "https://fonts.gstatic.com",
|
|
crossOrigin: "anonymous",
|
|
},
|
|
{
|
|
rel: "stylesheet",
|
|
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
|
|
},
|
|
];
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" className="dark">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App({ loaderData }: Route.ComponentProps) {
|
|
const location = useLocation();
|
|
const isDraftRoute = location.pathname.includes('/draft');
|
|
|
|
return (
|
|
<ClerkProvider loaderData={loaderData} appearance={{ baseTheme: dark }}>
|
|
{!isDraftRoute && <Navbar isAdmin={loaderData?.isAdmin ?? false} />}
|
|
{isDraftRoute ? (
|
|
<Outlet />
|
|
) : (
|
|
<main>
|
|
<Outlet />
|
|
</main>
|
|
)}
|
|
<Toaster />
|
|
</ClerkProvider>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
let message = "Oops!";
|
|
let details = "An unexpected error occurred.";
|
|
let stack: string | undefined;
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
message = error.status === 404 ? "404" : "Error";
|
|
details =
|
|
error.status === 404
|
|
? "The requested page could not be found."
|
|
: error.statusText || details;
|
|
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
|
details = error.message;
|
|
stack = error.stack;
|
|
}
|
|
|
|
return (
|
|
<main className="pt-16 p-4 container mx-auto">
|
|
<h1>{message}</h1>
|
|
<p>{details}</p>
|
|
{stack && (
|
|
<pre className="w-full p-4 overflow-x-auto">
|
|
<code>{stack}</code>
|
|
</pre>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|