mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-21 18:40:49 +01:00
parent 69319ce1d4
commit ea58909070
18 changed files with 1051 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
apps/website/components/leagues/EnhancedLeagueSchedulePanel.tsx
View File

@@ -116,8 +116,8 @@ export function EnhancedLeagueSchedulePanel({
if (events.length === 0) {
return (
<Box p={12} textAlign="center" border borderColor="zinc-800" bg="zinc-900/30">
<Text color="text-zinc-500" italic>No races scheduled for this season.</Text>
<Box p={12} textAlign="center" border borderColor="border-muted" bg="bg-surface-muted">
<Text variant="low" italic>No races scheduled for this season.</Text>
</Box>
);
}
@@ -129,29 +129,29 @@ export function EnhancedLeagueSchedulePanel({
const isExpanded = expandedMonths.has(monthKey);
return (
<Surface key={monthKey} border borderColor="border-outline-steel" overflow="hidden">
<Surface key={monthKey} variant="precision" overflow="hidden">
{/* Month Header */}
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
p={4}
bg="bg-surface-charcoal"
bg="bg-surface"
borderBottom={isExpanded}
borderColor="border-outline-steel"
borderColor="border-default"
cursor="pointer"
onClick={() => toggleMonth(monthKey)}
>
<Group gap={3}>
<Icon icon={Calendar} size={4} color="text-primary-blue" />
<Text size="md" weight="bold" color="text-white">
<Icon icon={Calendar} size={4} intent="primary" />
<Text size="md" weight="bold" variant="high">
{group.month}
</Text>
<Badge variant="outline" size="sm">
{group.races.length} {group.races.length === 1 ? 'Race' : 'Races'}
</Badge>
</Group>
<Icon icon={isExpanded ? ChevronUp : ChevronDown} size={4} color="text-zinc-400" />
<Icon icon={isExpanded ? ChevronUp : ChevronDown} size={4} intent="low" />
</Box>
{/* Race List */}
@@ -161,39 +161,37 @@ export function EnhancedLeagueSchedulePanel({
{group.races.map((race, raceIndex) => (
<Surface
key={race.id}
border
borderColor="border-outline-steel"
variant="precision"
p={4}
bg="bg-base-black"
>
<Box display="flex" alignItems="center" justifyContent="space-between" gap={4}>
{/* Race Info */}
<Box flex={1}>
<Stack gap={2}>
<Group gap={2} align="center">
<Text size="sm" weight="bold" color="text-white">
<Text size="sm" weight="bold" variant="high">
{race.name || `Race ${race.id.substring(0, 4)}`}
</Text>
{getRaceStatusBadge(race.status)}
</Group>
<Group gap={3}>
<Text size="xs" color="text-zinc-400" uppercase letterSpacing="widest">
<Text size="xs" variant="low" uppercase letterSpacing="widest">
{race.track || 'TBA'}
</Text>
{race.car && (
<Text size="xs" color="text-zinc-500" uppercase letterSpacing="widest">
<Text size="xs" variant="low" uppercase letterSpacing="widest">
{race.car}
</Text>
)}
{race.sessionType && (
<Text size="xs" color="text-zinc-500" uppercase letterSpacing="widest">
<Text size="xs" variant="low" uppercase letterSpacing="widest">
{race.sessionType}
</Text>
)}
</Group>
<Group gap={2} align="center">
<Icon icon={Clock} size={3} color="text-zinc-500" />
<Text size="xs" color="text-zinc-400" font="mono">
<Icon icon={Clock} size={3} intent="low" />
<Text size="xs" variant="low" font="mono">
{formatTime(race.scheduledAt)}
</Text>
</Group>