website refactor

apps/website/components/teams/TeamDetailsHeader.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
@@ -31,7 +30,7 @@ export function TeamDetailsHeader({
   onAdminClick,
 }: TeamDetailsHeaderProps) {
   return (
-    <Box 
+    <Stack 
       bg="surface-charcoal" 
       border 
       borderColor="outline-steel" 
@@ -40,7 +39,7 @@ export function TeamDetailsHeader({
       overflow="hidden"
     >
       {/* Background accent */}
-      <Box 
+      <Stack 
         position="absolute" 
         top="0" 
         right="0" 
@@ -53,7 +52,7 @@ export function TeamDetailsHeader({
       />
 
       <Stack direction="row" align="start" gap={8} position="relative">
-        <Box 
+        <Stack 
           w="32" 
           h="32" 
           bg="base-black" 
@@ -68,15 +67,15 @@ export function TeamDetailsHeader({
           ) : (
             <Text size="2xl" weight="bold" color="text-gray-700">{name.substring(0, 2).toUpperCase()}</Text>
           )}
-        </Box>
+        </Stack>
 
-        <Box flex="1">
+        <Stack flex="1">
           <Stack direction="row" align="center" gap={3}>
             <Heading level={1} weight="bold">{name}</Heading>
             {tag && (
-              <Box px={2} py={1} bg="base-black" border borderColor="outline-steel">
+              <Stack px={2} py={1} bg="base-black" border borderColor="outline-steel">
                 <Text size="xs" font="mono" color="primary-accent" weight="bold">[{tag}]</Text>
-              </Box>
+              </Stack>
             )}
           </Stack>
 
@@ -85,18 +84,18 @@ export function TeamDetailsHeader({
           </Text>
 
           <Stack direction="row" gap={6} mt={6}>
-            <Box>
+            <Stack>
               <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Personnel</Text>
               <Text block weight="bold" color="text-white">{memberCount} Units</Text>
-            </Box>
-            <Box>
+            </Stack>
+            <Stack>
               <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Established</Text>
               <Text block weight="bold" color="text-white">
                 {foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown'}
               </Text>
-            </Box>
+            </Stack>
           </Stack>
-        </Box>
+        </Stack>
 
         <Stack gap={3}>
           {isAdmin && (
@@ -109,6 +108,6 @@ export function TeamDetailsHeader({
           </Button>
         </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 }