website refactor

apps/website/components/leagues/LeagueCard.tsx

@@ -5,6 +5,9 @@ import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Surface } from '@/ui/Surface';
 import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
 import { Calendar as LucideCalendar } from 'lucide-react';
 import React, { ReactNode } from 'react';
@@ -50,7 +53,14 @@ export function LeagueCard({
       onClick={onClick}
       coverUrl={coverUrl}
       logo={
-        <div style={{ width: '3rem', height: '3rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)', backgroundColor: 'var(--ui-color-bg-base)' }}>
+        <Surface 
+          width="3rem" 
+          height="3rem" 
+          rounded="md" 
+          overflow="hidden" 
+          border 
+          variant="dark"
+        >
           {logoUrl ? (
             <Image
               src={logoUrl}
@@ -62,7 +72,7 @@ export function LeagueCard({
           ) : (
             <PlaceholderImage size={48} />
           )}
-        </div>
+        </Surface>
       }
       badges={
         <React.Fragment>
@@ -71,12 +81,14 @@ export function LeagueCard({
         </React.Fragment>
       }
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
-        <div style={{ width: '0.25rem', height: '1rem', backgroundColor: 'var(--ui-color-intent-primary)' }} />
-        <Heading level={3} weight="bold" truncate>{name}</Heading>
-      </div>
+      <Box marginBottom={1}>
+        <Group gap={2}>
+          <Box width="0.25rem" height="1rem" bg="var(--ui-color-intent-primary)" />
+          <Heading level={3} weight="bold" truncate>{name}</Heading>
+        </Group>
+      </Box>
       
-      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem', marginBottom: '1rem' }} block leading="relaxed">
+      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem' }} block leading="relaxed" marginBottom={4}>
         {description || 'No description available'}
       </Text>
 
@@ -88,20 +100,32 @@ export function LeagueCard({
       />
 
       {hasOpenSlots && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem', padding: '0.25rem 0.5rem', backgroundColor: 'rgba(25, 140, 255, 0.05)', border: '1px solid rgba(25, 140, 255, 0.2)', borderRadius: 'var(--ui-radius-sm)', width: 'fit-content', marginBottom: '1rem' }}>
-          <div style={{ width: '0.375rem', height: '0.375rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-intent-primary)' }} />
-          <Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
-        </div>
+        <Box marginBottom={4}>
+          <Surface 
+            display="flex" 
+            alignItems="center" 
+            gap={1.5} 
+            paddingX={2} 
+            paddingY={1} 
+            bg="rgba(25, 140, 255, 0.05)" 
+            border="1px solid rgba(25, 140, 255, 0.2)" 
+            rounded="sm" 
+            width="fit-content"
+          >
+            <Box width="0.375rem" height="0.375rem" rounded="full" bg="var(--ui-color-intent-primary)" />
+            <Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
+          </Surface>
+        </Box>
       )}
 
       <LeagueCardFooter>
         {timingSummary && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Group gap={2}>
             <Icon icon={LucideCalendar} size={3} intent="low" />
             <Text size="xs" variant="low" font="mono">
               {timingSummary.split('•')[1]?.trim() || timingSummary}
             </Text>
-          </div>
+          </Group>
         )}
       </LeagueCardFooter>
     </UILeagueCard>