website refactor

apps/website/components/teams/TeamAdmin.tsx

@@ -15,9 +15,7 @@ import { DangerZone } from '@/ui/DangerZone';
 import { Input } from '@/ui/Input';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
-import { SectionHeader } from '@/ui/SectionHeader';
 import { Box } from '@/ui/Box';
-import { Group } from '@/ui/Group';
 import { Stack } from '@/ui/Stack';
 import React, { useState } from 'react';
 
@@ -40,14 +38,12 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
     description: team.description || '',
   });
 
-  // Use hooks for data fetching
   const { data: joinRequests = [], isLoading: loading } = useTeamJoinRequests(
     team.id,
     team.ownerId,
     true
   );
 
-  // Use hooks for mutations
   const updateTeamMutation = useUpdateTeam({
     onSuccess: () => {
       setEditMode(false);
@@ -96,17 +92,22 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
   };
 
   return (
-    <Stack gap={6}>
+    <Stack gap="lg">
       <Panel 
-        title="Team Settings"
-        actions={!editMode && (
-          <Button variant="secondary" size="sm" onClick={() => setEditMode(true)}>
-            Edit Details
-          </Button>
-        )}
+        variant="default"
+        padding="md"
       >
+        <Box display="flex" justifyContent="between" alignItems="center" marginBottom={6}>
+          <Heading level={3} uppercase>Team Settings</Heading>
+          {!editMode && (
+            <Button variant="secondary" size="sm" onClick={() => setEditMode(true)}>
+              Edit Details
+            </Button>
+          )}
+        </Box>
+
         {editMode ? (
-          <Stack gap={4}>
+          <Stack gap="md">
             <Input
               label="Team Name"
               value={editedTeam.name}
@@ -128,7 +129,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
               onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
             />
 
-            <Group gap={2}>
+            <Box display="flex" gap="sm">
               <Button variant="primary" onClick={handleSaveChanges} disabled={updateTeamMutation.isPending}>
                 {updateTeamMutation.isPending ? 'Saving...' : 'Save Changes'}
               </Button>
@@ -145,27 +146,30 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
               >
                 Cancel
               </Button>
-            </Group>
+            </Box>
           </Stack>
         ) : (
-          <Stack gap={4}>
-            <Stack gap={1}>
-              <Text size="sm" variant="low" block>Team Name</Text>
-              <Text variant="high" weight="medium" block>{team.name}</Text>
+          <Stack gap="md">
+            <Stack gap="xs">
+              <Text size="xs" variant="low" uppercase>Team Name</Text>
+              <Text weight="bold">{team.name}</Text>
             </Stack>
-            <Stack gap={1}>
-              <Text size="sm" variant="low" block>Team Tag</Text>
-              <Text variant="high" weight="medium" block>{team.tag}</Text>
+            <Stack gap="xs">
+              <Text size="xs" variant="low" uppercase>Team Tag</Text>
+              <Text weight="bold">{team.tag}</Text>
             </Stack>
-            <Stack gap={1}>
-              <Text size="sm" variant="low" block>Description</Text>
-              <Text variant="high" block>{team.description}</Text>
+            <Stack gap="xs">
+              <Text size="xs" variant="low" uppercase>Description</Text>
+              <Text variant="med">{team.description}</Text>
             </Stack>
           </Stack>
         )}
       </Panel>
 
-      <Panel title="Join Requests">
+      <Panel variant="default" padding="md">
+        <Box marginBottom={6}>
+          <Heading level={3} uppercase>Join Requests</Heading>
+        </Box>
         {loading ? (
           <LoadingWrapper variant="spinner" message="Loading requests..." />
         ) : joinRequests.length > 0 ? (
@@ -202,3 +206,5 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
     </Stack>
   );
 }
+
+import { Heading } from '@/ui/Heading';