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

41
apps/website/components/leagues/AdminQuickViewWidgets.tsx
View File

@@ -31,14 +31,9 @@ export function AdminQuickViewWidgets({
<Stack gap={4}>
{/* Wallet Preview */}
<Surface
variant="muted"
variant="precision"
rounded="xl"
border
padding={6}
style={{
background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
borderColor: 'rgba(59, 130, 246, 0.3)',
}}
>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
@@ -51,13 +46,13 @@ export function AdminQuickViewWidgets({
rounded="lg"
bg="bg-primary-blue/10"
>
<Wallet size={20} color="var(--primary-blue)" />
<Icon icon={Wallet} size={4} intent="primary" />
</Stack>
<Stack gap={0}>
<Text size="sm" weight="bold" color="text-white" block>
<Text size="sm" weight="bold" variant="high" block>
Wallet Balance
</Text>
<Text size="2xl" weight="bold" color="text-primary-blue" font="mono" block>
<Text size="2xl" weight="bold" variant="primary" font="mono" block>
${walletBalance.toFixed(2)}
</Text>
</Stack>
@@ -78,14 +73,9 @@ export function AdminQuickViewWidgets({
{/* Stewarding Quick-View */}
<Surface
variant="muted"
variant="precision"
rounded="xl"
border
padding={6}
style={{
background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
borderColor: 'rgba(239, 68, 68, 0.3)',
}}
>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
@@ -98,13 +88,13 @@ export function AdminQuickViewWidgets({
rounded="lg"
bg="bg-error-red/10"
>
<Shield size={20} color="var(--error-red)" />
<Icon icon={Shield} size={4} intent="critical" />
</Stack>
<Stack gap={0}>
<Text size="sm" weight="bold" color="text-white" block>
<Text size="sm" weight="bold" variant="high" block>
Stewarding Queue
</Text>
<Text size="2xl" weight="bold" color="text-error-red" font="mono" block>
<Text size="2xl" weight="bold" variant="critical" font="mono" block>
{pendingProtestsCount}
</Text>
</Stack>
@@ -122,7 +112,7 @@ export function AdminQuickViewWidgets({
</Link>
</Stack>
) : (
<Text size="xs" color="text-gray-500" italic>
<Text size="xs" variant="low" italic>
No pending protests
</Text>
)}
@@ -132,14 +122,9 @@ export function AdminQuickViewWidgets({
{/* Join Requests Preview */}
{pendingJoinRequestsCount > 0 && (
<Surface
variant="muted"
variant="precision"
rounded="xl"
border
padding={6}
style={{
background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
borderColor: 'rgba(251, 191, 36, 0.3)',
}}
>
<Stack gap={4}>
<Stack direction="row" align="center" gap={3}>
@@ -152,13 +137,13 @@ export function AdminQuickViewWidgets({
rounded="lg"
bg="bg-warning-amber/10"
>
<Icon icon={Shield} size={20} color="var(--warning-amber)" />
<Icon icon={Shield} size={4} intent="warning" />
</Stack>
<Stack gap={0}>
<Text size="sm" weight="bold" color="text-white" block>
<Text size="sm" weight="bold" variant="high" block>
Join Requests
</Text>
<Text size="2xl" weight="bold" color="text-warning-amber" font="mono" block>
<Text size="2xl" weight="bold" variant="warning" font="mono" block>
{pendingJoinRequestsCount}
</Text>
</Stack>

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>

5
apps/website/components/leagues/LeagueCardWrapper.tsx
View File

@@ -149,8 +149,13 @@ export function LeagueCard({ league, onClick }: LeagueCardProps) {
isTeamLeague={!!isTeamLeague}
usedDriverSlots={league.usedDriverSlots}
maxDrivers={league.maxDrivers}
activeDriversCount={league.activeDriversCount}
nextRaceAt={league.nextRaceAt}
timingSummary={league.timingSummary}
onClick={onClick}
onQuickJoin={() => console.log('Quick Join', league.id)}
onFollow={() => console.log('Follow', league.id)}
isFeatured={league.usedDriverSlots > 20} // Example logic for featured
badges={
<>
{isNew && (

40
apps/website/components/leagues/NextRaceCountdownWidget.tsx
View File

@@ -67,15 +67,12 @@ export function NextRaceCountdownWidget({
return (
<Surface
variant="muted"
variant="precision"
rounded="xl"
border
padding={6}
style={{
position: 'relative',
overflow: 'hidden',
background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
borderColor: 'rgba(59, 130, 246, 0.3)',
}}
>
<Stack
@@ -85,7 +82,8 @@ export function NextRaceCountdownWidget({
w="40"
h="40"
style={{
background: 'linear-gradient(to bottom left, rgba(59, 130, 246, 0.2), transparent)',
background: 'linear-gradient(to bottom left, var(--ui-color-intent-primary), transparent)',
opacity: 0.2,
borderBottomLeftRadius: '9999px',
}}
/>
@@ -109,16 +107,16 @@ export function NextRaceCountdownWidget({
</Text>
{track && (
<Stack direction="row" align="center" gap={1.5}>
<Icon icon={MapPin as LucideIcon} size={4} color="var(--text-gray-500)" />
<Text size="sm" color="text-gray-400">
<Icon icon={MapPin as LucideIcon} size={4} intent="low" />
<Text size="sm" variant="low">
{track}
</Text>
</Stack>
)}
{car && (
<Stack direction="row" align="center" gap={1.5}>
<Icon icon={Calendar as LucideIcon} size={4} color="var(--text-gray-500)" />
<Text size="sm" color="text-gray-400">
<Icon icon={Calendar as LucideIcon} size={4} intent="low" />
<Text size="sm" variant="low">
{car}
</Text>
</Stack>
@@ -129,7 +127,7 @@ export function NextRaceCountdownWidget({
<Stack gap={2}>
<Text
size="xs"
color="text-gray-500"
variant="low"
style={{ textTransform: 'uppercase', letterSpacing: '0.05em' }}
block
>
@@ -138,31 +136,31 @@ export function NextRaceCountdownWidget({
{countdown && (
<Stack direction="row" gap={2} align="center">
<Stack align="center" gap={0.5}>
<Text size="2xl" weight="bold" color="text-primary-blue" font="mono">
<Text size="2xl" weight="bold" variant="primary" font="mono">
{formatTime(countdown.days)}
</Text>
<Text size="xs" color="text-gray-500">Days</Text>
<Text size="xs" variant="low">Days</Text>
</Stack>
<Text size="2xl" weight="bold" color="text-gray-600">:</Text>
<Text size="2xl" weight="bold" variant="med">:</Text>
<Stack align="center" gap={0.5}>
<Text size="2xl" weight="bold" color="text-primary-blue" font="mono">
<Text size="2xl" weight="bold" variant="primary" font="mono">
{formatTime(countdown.hours)}
</Text>
<Text size="xs" color="text-gray-500">Hours</Text>
<Text size="xs" variant="low">Hours</Text>
</Stack>
<Text size="2xl" weight="bold" color="text-gray-600">:</Text>
<Text size="2xl" weight="bold" variant="med">:</Text>
<Stack align="center" gap={0.5}>
<Text size="2xl" weight="bold" color="text-primary-blue" font="mono">
<Text size="2xl" weight="bold" variant="primary" font="mono">
{formatTime(countdown.minutes)}
</Text>
<Text size="xs" color="text-gray-500">Mins</Text>
<Text size="xs" variant="low">Mins</Text>
</Stack>
<Text size="2xl" weight="bold" color="text-gray-600">:</Text>
<Text size="2xl" weight="bold" variant="med">:</Text>
<Stack align="center" gap={0.5}>
<Text size="2xl" weight="bold" color="text-primary-blue" font="mono">
<Text size="2xl" weight="bold" variant="primary" font="mono">
{formatTime(countdown.seconds)}
</Text>
<Text size="xs" color="text-gray-500">Secs</Text>
<Text size="xs" variant="low">Secs</Text>
</Stack>
</Stack>
)}

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>

26
apps/website/components/leagues/SeasonProgressWidget.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { Icon } from '@/ui/Icon';
import { ProgressBar } from '@/ui/ProgressBar';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
@@ -19,14 +20,9 @@ export function SeasonProgressWidget({
}: SeasonProgressWidgetProps) {
return (
<Surface
variant="muted"
variant="precision"
rounded="xl"
border
padding={6}
style={{
background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
borderColor: 'rgba(34, 197, 94, 0.3)',
}}
>
<Stack gap={4}>
{/* Header */}
@@ -38,15 +34,15 @@ export function SeasonProgressWidget({
alignItems="center"
justifyContent="center"
rounded="lg"
bg="bg-performance-green/10"
bg="bg-success-green/10"
>
<Trophy size={20} color="var(--performance-green)" />
<Icon icon={Trophy} size={4} intent="success" />
</Stack>
<Stack gap={0}>
<Text size="sm" weight="bold" color="text-white" block>
<Text size="sm" weight="bold" variant="high" block>
Season Progress
</Text>
<Text size="xs" color="text-gray-400" block>
<Text size="xs" variant="low" block>
Race {completedRaces} of {totalRaces}
</Text>
</Stack>
@@ -60,10 +56,10 @@ export function SeasonProgressWidget({
size="lg"
/>
<Stack direction="row" justify="between" align="center">
<Text size="xs" color="text-gray-500">
<Text size="xs" variant="low">
{percentage}% Complete
</Text>
<Text size="xs" color="text-performance-green" weight="bold">
<Text size="xs" variant="success" weight="bold">
{completedRaces}/{totalRaces} Races
</Text>
</Stack>
@@ -72,12 +68,12 @@ export function SeasonProgressWidget({
{/* Visual Indicator */}
<Stack
rounded="lg"
bg="bg-performance-green/10"
bg="bg-success-green/10"
border
borderColor="border-performance-green/30"
borderColor="border-success-green/30"
p={3}
>
<Text size="xs" color="text-performance-green" weight="medium" block>
<Text size="xs" variant="success" weight="medium" block>
{percentage >= 100
? 'Season Complete! 🏆'
: percentage >= 50