website refactor

apps/website/components/leaderboards/TeamRankingRow.tsx

@@ -2,6 +2,10 @@ import { getMediaUrl } from '@/lib/utilities/media';
 import { Image } from '@/ui/Image';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { RankMedal } from './RankMedal';
 import React from 'react';
 
@@ -34,22 +38,22 @@ export function TeamRankingRow({
       onClick={onClick}
     >
       <TableCell>
-        <div style={{ width: '2rem', display: 'flex', justifyContent: 'center' }}>
+        <Box width="2rem" display="flex" justifyContent="center">
           <RankMedal rank={rank} size="md" />
-        </div>
+        </Box>
       </TableCell>
 
       <TableCell>
-        <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)'
-          }}>
+        <Group gap={3}>
+          <Surface 
+            position="relative" 
+            width="2.5rem" 
+            height="2.5rem" 
+            rounded="md" 
+            overflow="hidden" 
+            border 
+            variant="muted"
+          >
             <Image 
               src={logoUrl || getMediaUrl('team-logo', id)} 
               alt={name} 
@@ -57,8 +61,8 @@ export function TeamRankingRow({
               height={40} 
               objectFit="cover" 
             />
-          </div>
-          <div style={{ minWidth: 0 }}>
+          </Surface>
+          <Stack gap={0} flex={1} minWidth="0">
             <Text 
               weight="semibold" 
               variant="high" 
@@ -70,8 +74,8 @@ export function TeamRankingRow({
             <Text size="xs" variant="low" block>
               {memberCount} Members
             </Text>
-          </div>
-        </div>
+          </Stack>
+        </Group>
       </TableCell>
 
       <TableCell textAlign="center">