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

64
apps/website/components/leagues/RaceDetailModal.tsx
View File

@@ -85,19 +85,19 @@ export function RaceDetailModal({
mx={4}
onClick={(e) => e.stopPropagation()}
>
<Surface border borderColor="border-outline-steel" overflow="hidden">
<Surface variant="precision" overflow="hidden">
{/* Header */}
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
p={4}
bg="bg-surface-charcoal"
bg="bg-surface"
borderBottom
borderColor="border-outline-steel"
borderColor="border-default"
>
<Group gap={3}>
<Text size="lg" weight="bold" color="text-white">
<Text size="lg" weight="bold" variant="high">
{race.name || `Race ${race.id.substring(0, 4)}`}
</Text>
{getStatusBadge(race.status)}
@@ -116,33 +116,33 @@ export function RaceDetailModal({
<Box p={4}>
<Stack gap={4}>
{/* Basic Info */}
<Surface border borderColor="border-outline-steel" p={4}>
<Text as="h3" size="sm" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={3}>
<Surface variant="precision" p={4}>
<Text as="h3" size="sm" weight="bold" variant="low" uppercase letterSpacing="widest" mb={3}>
Race Details
</Text>
<Stack gap={3}>
<Group gap={2} align="center">
<Icon icon={MapPin} size={4} color="text-primary-blue" />
<Text size="md" color="text-white" weight="bold">
<Icon icon={MapPin} size={4} intent="primary" />
<Text size="md" variant="high" weight="bold">
{race.track || 'TBA'}
</Text>
</Group>
<Group gap={2} align="center">
<Icon icon={Car} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">
<Icon icon={Car} size={4} intent="primary" />
<Text size="md" variant="high">
{race.car || 'TBA'}
</Text>
</Group>
<Group gap={2} align="center">
<Icon icon={Calendar} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">
<Icon icon={Calendar} size={4} intent="primary" />
<Text size="md" variant="high">
{formatTime(race.scheduledAt)}
</Text>
</Group>
{race.sessionType && (
<Group gap={2} align="center">
<Icon icon={Clock} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">
<Icon icon={Clock} size={4} intent="primary" />
<Text size="md" variant="high">
{race.sessionType}
</Text>
</Group>
@@ -151,37 +151,37 @@ export function RaceDetailModal({
</Surface>
{/* Weather Info (Mock Data) */}
<Surface border borderColor="border-outline-steel" p={4}>
<Text as="h3" size="sm" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={3}>
<Surface variant="precision" p={4}>
<Text as="h3" size="sm" weight="bold" variant="low" uppercase letterSpacing="widest" mb={3}>
Weather Conditions
</Text>
<Stack gap={3}>
<Group gap={2} align="center">
<Icon icon={Thermometer} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">Air: 24°C</Text>
<Icon icon={Thermometer} size={4} intent="primary" />
<Text size="md" variant="high">Air: 24°C</Text>
</Group>
<Group gap={2} align="center">
<Icon icon={Thermometer} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">Track: 31°C</Text>
<Icon icon={Thermometer} size={4} intent="primary" />
<Text size="md" variant="high">Track: 31°C</Text>
</Group>
<Group gap={2} align="center">
<Icon icon={Droplets} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">Humidity: 45%</Text>
<Icon icon={Droplets} size={4} intent="primary" />
<Text size="md" variant="high">Humidity: 45%</Text>
</Group>
<Group gap={2} align="center">
<Icon icon={Wind} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">Wind: 12 km/h NW</Text>
<Icon icon={Wind} size={4} intent="primary" />
<Text size="md" variant="high">Wind: 12 km/h NW</Text>
</Group>
<Group gap={2} align="center">
<Icon icon={Cloud} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">Partly Cloudy</Text>
<Icon icon={Cloud} size={4} intent="primary" />
<Text size="md" variant="high">Partly Cloudy</Text>
</Group>
</Stack>
</Surface>
{/* Car Classes */}
<Surface border borderColor="border-outline-steel" p={4}>
<Text as="h3" size="sm" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={3}>
<Surface variant="precision" p={4}>
<Text as="h3" size="sm" weight="bold" variant="low" uppercase letterSpacing="widest" mb={3}>
Car Classes
</Text>
<Group gap={2} wrap>
@@ -193,13 +193,13 @@ export function RaceDetailModal({
{/* Strength of Field */}
{race.strengthOfField && (
<Surface border borderColor="border-outline-steel" p={4}>
<Text as="h3" size="sm" weight="bold" color="text-gray-500" uppercase letterSpacing="widest" mb={3}>
<Surface variant="precision" p={4}>
<Text as="h3" size="sm" weight="bold" variant="low" uppercase letterSpacing="widest" mb={3}>
Strength of Field
</Text>
<Group gap={2} align="center">
<Icon icon={Trophy} size={4} color="text-primary-blue" />
<Text size="md" color="text-white">
<Icon icon={Trophy} size={4} intent="primary" />
<Text size="md" variant="high">
{race.strengthOfField.toFixed(1)} / 10.0
</Text>
</Group>