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>
104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { Link } from "react-router";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { Trophy, Target, Flag } from "lucide-react";
|
|
|
|
interface SportSeasonCardProps {
|
|
leagueId: string;
|
|
sportSeasonId: string;
|
|
sportName: string;
|
|
seasonName: string;
|
|
status: "upcoming" | "active" | "completed";
|
|
scoringPattern?: string | null;
|
|
}
|
|
|
|
export function SportSeasonCard({
|
|
leagueId,
|
|
sportSeasonId,
|
|
sportName,
|
|
seasonName,
|
|
status,
|
|
scoringPattern,
|
|
}: SportSeasonCardProps) {
|
|
const getStatusBadge = () => {
|
|
switch (status) {
|
|
case "upcoming":
|
|
return (
|
|
<Badge variant="outline" className="bg-electric/15 text-electric border-electric/30">
|
|
<Flag className="mr-1 h-3 w-3" />
|
|
Upcoming
|
|
</Badge>
|
|
);
|
|
case "active":
|
|
return (
|
|
<Badge variant="outline" className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">
|
|
<Target className="mr-1 h-3 w-3" />
|
|
Active
|
|
</Badge>
|
|
);
|
|
case "completed":
|
|
return (
|
|
<Badge variant="outline" className="bg-muted text-muted-foreground border-border">
|
|
<Trophy className="mr-1 h-3 w-3" />
|
|
Completed
|
|
</Badge>
|
|
);
|
|
}
|
|
};
|
|
|
|
const getScoringPatternLabel = () => {
|
|
if (!scoringPattern) return null;
|
|
|
|
switch (scoringPattern) {
|
|
case "single_elimination_playoff":
|
|
return "Playoff Bracket";
|
|
case "page_playoff":
|
|
return "AFL Finals";
|
|
case "season_standings":
|
|
return "Season Standings";
|
|
case "qualifying_points":
|
|
return "Qualifying Points";
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const scoringLabel = getScoringPatternLabel();
|
|
const isPlayoffType = scoringPattern === "single_elimination_playoff" || scoringPattern === "page_playoff";
|
|
|
|
return (
|
|
<Link to={`/leagues/${leagueId}/sports-seasons/${sportSeasonId}`}>
|
|
<Card className="hover:shadow-lg transition-shadow cursor-pointer h-full">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<CardTitle className="text-lg mb-1">{sportName}</CardTitle>
|
|
<CardDescription className="truncate">{seasonName}</CardDescription>
|
|
</div>
|
|
{getStatusBadge()}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
{scoringLabel && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
{isPlayoffType ? (
|
|
<Trophy className="h-4 w-4" />
|
|
) : (
|
|
<Target className="h-4 w-4" />
|
|
)}
|
|
<span>{scoringLabel}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|