website refactor

apps/website/components/teams/TeamAdmin.tsx

@@ -5,7 +5,6 @@ import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
 import { Input } from '@/ui/Input';
 import { TextArea } from '@/ui/TextArea';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
@@ -100,18 +99,18 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
   return (
     <Stack gap={6}>
       <Card>
-        <Box display="flex" alignItems="center" justifyContent="between" mb={6}>
+        <Stack display="flex" alignItems="center" justifyContent="between" mb={6}>
           <Heading level={3}>Team Settings</Heading>
           {!editMode && (
             <Button variant="secondary" onClick={() => setEditMode(true)}>
               Edit Details
             </Button>
           )}
-        </Box>
+        </Stack>
 
         {editMode ? (
           <Stack gap={4}>
-            <Box>
+            <Stack>
               <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                 Team Name
               </Text>
@@ -120,9 +119,9 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
                 value={editedTeam.name}
                 onChange={(e) => setEditedTeam({ ...editedTeam, name: e.target.value })}
               />
-            </Box>
+            </Stack>
 
-            <Box>
+            <Stack>
               <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
                 Team Tag
               </Text>
@@ -133,7 +132,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
                 maxLength={4}
               />
               <Text size="xs" color="text-gray-500" block mt={1}>Max 4 characters</Text>
-            </Box>
+            </Stack>
 
             <TextArea
               label="Description"
@@ -163,18 +162,18 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
           </Stack>
         ) : (
           <Stack gap={4}>
-            <Box>
+            <Stack>
               <Text size="sm" color="text-gray-400" block>Team Name</Text>
               <Text color="text-white" weight="medium" block>{team.name}</Text>
-            </Box>
-            <Box>
+            </Stack>
+            <Stack>
               <Text size="sm" color="text-gray-400" block>Team Tag</Text>
               <Text color="text-white" weight="medium" block>{team.tag}</Text>
-            </Box>
-            <Box>
+            </Stack>
+            <Stack>
               <Text size="sm" color="text-gray-400" block>Description</Text>
               <Text color="text-white" block>{team.description}</Text>
-            </Box>
+            </Stack>
           </Stack>
         )}
       </Card>
@@ -183,9 +182,9 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
         <Heading level={3} mb={6}>Join Requests</Heading>
 
         {loading ? (
-          <Box textAlign="center" py={8}>
+          <Stack textAlign="center" py={8}>
             <Text color="text-gray-400">Loading requests...</Text>
-          </Box>
+          </Stack>
         ) : joinRequests.length > 0 ? (
           <JoinRequestList>
             {joinRequests.map((request: TeamJoinRequestViewModel) => (