website refactor

apps/website/components/leagues/LeagueMemberRow.tsx

@@ -1,10 +1,10 @@
 import { DriverIdentity } from '@/components/drivers/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/primitives/Box';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
-import { ReactNode } from 'react';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+import React, { ReactNode } from 'react';
 
 interface LeagueMemberRowProps {
   driver?: DriverViewModel;
@@ -41,7 +41,7 @@ export function LeagueMemberRow({
   return (
     <TableRow variant={isTopPerformer ? 'highlight' : 'default'}>
       <TableCell>
-        <Box display="flex" alignItems="center" gap={2}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
           {driver ? (
             <DriverIdentity
               driver={driver}
@@ -51,28 +51,28 @@ export function LeagueMemberRow({
               size="md"
             />
           ) : (
-            <Text color="text-white">Unknown Driver</Text>
+            <Text variant="high">Unknown Driver</Text>
           )}
           {isCurrentUser && (
-            <Text size="xs" color="text-gray-500">(You)</Text>
+            <Text size="xs" variant="low">(You)</Text>
           )}
           {isTopPerformer && (
             <Text size="xs">⭐</Text>
           )}
-        </Box>
+        </div>
       </TableCell>
       <TableCell>
-        <Text color="text-primary-blue" weight="medium">
+        <Text variant="primary" weight="medium">
           {rating || '—'}
         </Text>
       </TableCell>
       <TableCell>
-        <Text color="text-gray-300">
+        <Text variant="med">
           #{rank || '—'}
         </Text>
       </TableCell>
       <TableCell>
-        <Text color="text-green-400" weight="medium">
+        <Text variant="success" weight="medium">
           {wins || 0}
         </Text>
       </TableCell>
@@ -82,12 +82,8 @@ export function LeagueMemberRow({
         </Badge>
       </TableCell>
       <TableCell>
-        <Text color="text-white" size="sm">
-          {new Date(joinedAt).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'short',
-            day: 'numeric',
-          })}
+        <Text variant="high" size="sm">
+          {DateDisplay.formatShort(joinedAt)}
         </Text>
       </TableCell>
       {actions && (