website refactor

apps/website/components/leaderboards/TeamRankingRow.tsx

@@ -1,9 +1,9 @@
 import { getMediaUrl } from '@/lib/utilities/media';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { RankMedal } from './RankMedal';
+import React from 'react';
 
 interface TeamRankingRowProps {
   id: string;
@@ -32,70 +32,62 @@ export function TeamRankingRow({
     <TableRow
       clickable={!!onClick}
       onClick={onClick}
-      group
     >
       <TableCell>
-        <Box w="8" display="flex" justifyContent="center">
+        <div style={{ width: '2rem', display: 'flex', justifyContent: 'center' }}>
           <RankMedal rank={rank} size="md" />
-        </Box>
+        </div>
       </TableCell>
 
       <TableCell>
-        <Box display="flex" alignItems="center" gap={3}>
-          <Box 
-            position="relative" 
-            w="10" 
-            h="10" 
-            rounded="lg" 
-            overflow="hidden" 
-            border 
-            borderColor="border-charcoal-outline"
-            bg="bg-graphite-black/50"
-            groupHoverBorderColor="purple-400/50"
-            transition
-          >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <div style={{ 
+            position: 'relative', 
+            width: '2.5rem', 
+            height: '2.5rem', 
+            borderRadius: '0.5rem', 
+            overflow: 'hidden', 
+            border: '1px solid var(--ui-color-border-default)',
+            backgroundColor: 'var(--ui-color-bg-surface-muted)'
+          }}>
             <Image 
               src={logoUrl || getMediaUrl('team-logo', id)} 
               alt={name} 
               width={40} 
               height={40} 
-              fullWidth
-              fullHeight
               objectFit="cover" 
             />
-          </Box>
-          <Box minWidth="0">
+          </div>
+          <div style={{ minWidth: 0 }}>
             <Text 
               weight="semibold" 
-              color="text-white" 
+              variant="high" 
               block 
               truncate
-              groupHoverTextColor="text-purple-400"
-              transition
             >
               {name}
             </Text>
-            <Text size="xs" color="text-gray-500" block mt={0.5}>
+            <Text size="xs" variant="low" block>
               {memberCount} Members
             </Text>
-          </Box>
-        </Box>
+          </div>
+        </div>
       </TableCell>
 
       <TableCell textAlign="center">
-        <Text font="mono" weight="bold" color="text-purple-400">
+        <Text font="mono" weight="bold" variant="primary">
           {rating}
         </Text>
       </TableCell>
 
       <TableCell textAlign="center">
-        <Text font="mono" weight="bold" color="text-performance-green">
+        <Text font="mono" weight="bold" variant="success">
           {wins}
         </Text>
       </TableCell>
 
       <TableCell textAlign="center">
-        <Text color="text-gray-400" font="mono">{races}</Text>
+        <Text variant="low" font="mono">{races}</Text>
       </TableCell>
     </TableRow>
   );