website refactor

apps/website/components/leagues/LeagueSummaryCard.tsx

@@ -1,7 +1,4 @@
-
-
 import { ArrowRight } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Grid } from '@/ui/Grid';
@@ -9,9 +6,8 @@ import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { LeagueLogo } from './LeagueLogo';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
-import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 
 interface LeagueSummaryCardProps {
   id: string;
@@ -32,10 +28,10 @@ export function LeagueSummaryCard({
 }: LeagueSummaryCardProps) {
   return (
     <Card p={0} style={{ overflow: 'hidden' }}>
-      <Box p={4}>
+      <Stack p={4}>
         <Stack direction="row" align="center" gap={4} mb={4}>
           <LeagueLogo leagueId={id} alt={name} size={56} />
-          <Box style={{ flex: 1, minWidth: 0 }}>
+          <Stack style={{ flex: 1, minWidth: 0 }}>
             <Text
               size="xs"
               color="text-gray-500"
@@ -48,7 +44,7 @@ export function LeagueSummaryCard({
             <Heading level={3} style={{ fontSize: '1rem' }}>
               {name}
             </Heading>
-          </Box>
+          </Stack>
         </Stack>
 
         {description && (
@@ -64,17 +60,17 @@ export function LeagueSummaryCard({
           </Text>
         )}
 
-        <Box mb={4}>
+        <Stack mb={4}>
           <Grid cols={2} gap={3}>
-            <Surface variant="dark" rounded="lg" padding={3}>
+            <Card variant="outline" rounded="lg" p={3} className="bg-graphite-black">
               <Text size="xs" color="text-gray-500" block mb={1}>
                 Max Drivers
               </Text>
               <Text weight="medium" color="text-white">
                 {maxDrivers}
               </Text>
-            </Surface>
-            <Surface variant="dark" rounded="lg" padding={3}>
+            </Card>
+            <Card variant="outline" rounded="lg" p={3} className="bg-graphite-black">
               <Text size="xs" color="text-gray-500" block mb={1}>
                 Format
               </Text>
@@ -85,11 +81,11 @@ export function LeagueSummaryCard({
               >
                 {qualifyingFormat}
               </Text>
-            </Surface>
+            </Card>
           </Grid>
-        </Box>
+        </Stack>
 
-        <Box>
+        <Stack>
           <Link href={href}>
             <Button
               variant="secondary"
@@ -99,8 +95,8 @@ export function LeagueSummaryCard({
               View League
             </Button>
           </Link>
-        </Box>
-      </Box>
+        </Stack>
+      </Stack>
     </Card>
   );
 }