website refactor

apps/website/components/leagues/LeagueHeaderPanel.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
 import { Trophy, Users, Timer, Activity, type LucideIcon } from 'lucide-react';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface LeagueHeaderPanelProps {
   viewData: LeagueDetailViewData;
@@ -16,24 +15,24 @@ interface LeagueHeaderPanelProps {
 
 export function LeagueHeaderPanel({ viewData }: LeagueHeaderPanelProps) {
   return (
-    <Surface variant="dark" border rounded="lg" padding={6} position="relative" overflow="hidden">
+    <Card variant="outline" p={6} position="relative" overflow="hidden" className="bg-graphite-black">
       {/* Background Accent */}
-      <Box 
+      <Stack 
         position="absolute" 
         top={0} 
         right={0} 
         w="300px" 
-        h="100%" 
+        h="full" 
         bg="bg-gradient-to-l from-primary-blue/5 to-transparent" 
         pointerEvents="none"
-      />
+      >{null}</Stack>
       
       <Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={6}>
         <Stack gap={2}>
           <Stack direction="row" align="center" gap={3}>
-            <Box p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
+            <Stack p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
               <Icon icon={Trophy} size={6} color="text-primary-blue" />
-            </Box>
+            </Stack>
             <Heading level={1} letterSpacing="tight">
               {viewData.name}
             </Heading>
@@ -64,7 +63,7 @@ export function LeagueHeaderPanel({ viewData }: LeagueHeaderPanelProps) {
           />
         </Stack>
       </Stack>
-    </Surface>
+    </Card>
   );
 }
 
@@ -73,7 +72,7 @@ function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: stri
     <Stack gap={1}>
       <Stack direction="row" align="center" gap={1.5}>
         <Icon icon={icon} size={3.5} color="text-gray-500" />
-        <Text size="xs" color="text-gray-500" weight="medium" letterSpacing="wider" display="block">
+        <Text size="xs" color="text-gray-500" weight="medium" letterSpacing="wider" block>
           {label.toUpperCase()}
         </Text>
       </Stack>