website refactor

apps/website/components/leagues/LeagueHeader.tsx

@@ -1,9 +1,8 @@
 
 
 import { ReactNode } from 'react';
-import { Box } from '@/ui/Box';
-import { Heading } from '@/ui/Heading';
 import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
 import { Image } from '@/ui/Image';
 
@@ -23,10 +22,10 @@ export function LeagueHeader({
   statusContent,
 }: LeagueHeaderProps) {
   return (
-    <Box mb={8}>
-      <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+    <Stack mb={8}>
+      <Stack display="flex" alignItems="center" justifyContent="between" mb={6}>
         <Stack direction="row" align="center" gap={4}>
-          <Box h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
+          <Stack h="16" w="16" rounded="xl" overflow="hidden" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)', backgroundColor: '#1a1d23' }} shadow="lg">
             <Image
               src={logoUrl}
               alt={`${name} logo`}
@@ -36,9 +35,9 @@ export function LeagueHeader({
               fullHeight
               objectFit="cover"
             />
-          </Box>
-          <Box>
-            <Box display="flex" alignItems="center" gap={3} mb={1}>
+          </Stack>
+          <Stack>
+            <Stack display="flex" alignItems="center" gap={3} mb={1}>
               <Heading level={1}>
                 {name}
                 {sponsorContent && (
@@ -48,15 +47,15 @@ export function LeagueHeader({
                 )}
               </Heading>
               {statusContent}
-            </Box>
+            </Stack>
             {description && (
               <Text color="text-gray-400" size="sm" maxWidth="xl" block>
                 {description}
               </Text>
             )}
-          </Box>
+          </Stack>
         </Stack>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }