website refactor

apps/website/ui/LeagueCard.tsx

@@ -61,25 +61,26 @@ export const LeagueCard = ({
   isFeatured
 }: LeagueCardProps) => {
   return (
-    <Card 
-      variant="precision" 
-      onClick={onClick} 
+    <Card
+      variant="precision"
+      onClick={onClick}
       fullHeight
       padding="none"
+      data-testid="league-card"
     >
       <Box height="8rem" position="relative" overflow="hidden">
-        <Image 
-          src={coverUrl} 
-          alt={name} 
-          fullWidth 
-          fullHeight 
-          objectFit="cover" 
-          style={{ opacity: 0.4, filter: 'grayscale(0.2)' }} 
+        <Image
+          src={coverUrl}
+          alt={name}
+          fullWidth
+          fullHeight
+          objectFit="cover"
+          style={{ opacity: 0.4, filter: 'grayscale(0.2)' }}
         />
-        <Box 
-          position="absolute" 
-          inset={0} 
-          style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} 
+        <Box
+          position="absolute"
+          inset={0}
+          style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }}
         />
         <Box position="absolute" top={3} left={3}>
           <Group gap={2}>
@@ -93,12 +94,12 @@ export const LeagueCard = ({
 
       <Stack padding={5} gap={5} flex={1}>
         <Stack direction="row" align="start" gap={4} marginTop="-2.5rem" position="relative" zIndex={10}>
-          <Box 
-            width="4rem" 
-            height="4rem" 
-            bg="var(--ui-color-bg-surface)" 
-            rounded="lg" 
-            border 
+          <Box
+            width="4rem"
+            height="4rem"
+            bg="var(--ui-color-bg-surface)"
+            rounded="lg"
+            border
             borderColor="var(--ui-color-border-default)"
             overflow="hidden"
             display="flex"
@@ -112,7 +113,7 @@ export const LeagueCard = ({
             )}
           </Box>
           <Stack flex={1} gap={1} paddingTop="2.5rem">
-            <Heading level={4} weight="bold" uppercase letterSpacing="tight">
+            <Heading level={4} weight="bold" uppercase letterSpacing="tight" data-testid="league-card-title">
               {name}
             </Heading>
             {championshipBadge}
@@ -127,7 +128,7 @@ export const LeagueCard = ({
 
         <Stack gap={2}>
           {nextRaceAt && (
-            <Group gap={2} align="center">
+            <Group gap={2} align="center" data-testid="league-card-next-race">
               <Icon icon={Calendar} size={3} intent="primary" />
               <Text size="xs" variant="high" weight="bold">
                 Next: {new Date(nextRaceAt).toLocaleDateString()} {new Date(nextRaceAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
@@ -135,7 +136,7 @@ export const LeagueCard = ({
             </Group>
           )}
           {activeDriversCount !== undefined && activeDriversCount > 0 && (
-            <Group gap={2} align="center">
+            <Group gap={2} align="center" data-testid="league-card-active-drivers">
               <Icon icon={Users} size={3} intent="success" />
               <Text size="xs" variant="success" weight="bold">
                 {activeDriversCount} Active Drivers
@@ -153,34 +154,35 @@ export const LeagueCard = ({
               <Text size="sm" variant="high" font="mono" weight="bold">{usedSlots} / {maxSlots}</Text>
             </Group>
             <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
-              <Box 
-                height="100%" 
-                bg="var(--ui-color-intent-primary)" 
-                style={{ 
+              <Box
+                height="100%"
+                bg="var(--ui-color-intent-primary)"
+                style={{
                   width: `${Math.min(fillPercentage, 100)}%`,
                   boxShadow: `0 0 8px var(--ui-color-intent-primary)44`
-                }} 
+                }}
               />
             </Box>
           </Stack>
 
           <Group gap={2} fullWidth>
             {onQuickJoin && (
-              <Button 
-                size="xs" 
-                variant="primary" 
-                fullWidth 
+              <Button
+                size="xs"
+                variant="primary"
+                fullWidth
                 onClick={(e) => { e.stopPropagation(); onQuickJoin(e); }}
                 icon={<Icon icon={UserPlus} size={3} />}
+                data-testid="quick-join-button"
               >
                 Join
               </Button>
             )}
             {onFollow && (
-              <Button 
-                size="xs" 
-                variant="secondary" 
-                fullWidth 
+              <Button
+                size="xs"
+                variant="secondary"
+                fullWidth
                 onClick={(e) => { e.stopPropagation(); onFollow(e); }}
                 icon={<Icon icon={Heart} size={3} />}
               >