website refactor

apps/website/components/races/StandingsItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
 import { Grid } from '@/ui/Grid';
 import { StatItem } from '@/ui/StatItem';
+import { Card } from '@/ui/Card';
 
 interface StandingsItemProps {
   leagueName: string;
@@ -22,11 +22,8 @@ export function StandingsItem({
   racesCompleted,
 }: StandingsItemProps) {
   return (
-    <Box
-      bg="bg-iron-gray/50"
-      rounded="lg"
-      border
-      borderColor="border-charcoal-outline"
+    <Card
+      variant="default"
       p={4}
     >
       <Stack direction="row" align="center" justify="between" mb={3}>
@@ -43,6 +40,6 @@ export function StandingsItem({
         <StatItem label="Wins" value={wins} align="center" />
         <StatItem label="Races" value={racesCompleted} align="center" />
       </Grid>
-    </Box>
+    </Card>
   );
 }