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

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>
)}