website refactor

apps/website/components/teams/TeamAdmin.tsx

@@ -16,6 +16,9 @@ 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 { useState } from 'react';
 import React from 'react';
 
@@ -94,7 +97,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <Stack gap={6}>
       <Panel 
         title="Team Settings"
         actions={!editMode && (
@@ -104,7 +107,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
         )}
       >
         {editMode ? (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Stack gap={4}>
             <Input
               label="Team Name"
               value={editedTeam.name}
@@ -126,7 +129,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
               onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
             />
 
-            <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <Group gap={2}>
               <Button variant="primary" onClick={handleSaveChanges} disabled={updateTeamMutation.isPending}>
                 {updateTeamMutation.isPending ? 'Saving...' : 'Save Changes'}
               </Button>
@@ -143,23 +146,23 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
               >
                 Cancel
               </Button>
-            </div>
-          </div>
+            </Group>
+          </Stack>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-            <div>
-              <Text size="sm" variant="low" block marginBottom={1}>Team Name</Text>
+          <Stack gap={4}>
+            <Stack gap={1}>
+              <Text size="sm" variant="low" block>Team Name</Text>
               <Text variant="high" weight="medium" block>{team.name}</Text>
-            </div>
-            <div>
-              <Text size="sm" variant="low" block marginBottom={1}>Team Tag</Text>
+            </Stack>
+            <Stack gap={1}>
+              <Text size="sm" variant="low" block>Team Tag</Text>
               <Text variant="high" weight="medium" block>{team.tag}</Text>
-            </div>
-            <div>
-              <Text size="sm" variant="low" block marginBottom={1}>Description</Text>
+            </Stack>
+            <Stack gap={1}>
+              <Text size="sm" variant="low" block>Description</Text>
               <Text variant="high" block>{team.description}</Text>
-            </div>
-          </div>
+            </Stack>
+          </Stack>
         )}
       </Panel>
 
@@ -197,6 +200,6 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
           Disband Team (Coming Soon)
         </Button>
       </DangerZone>
-    </div>
+    </Stack>
   );
 }

apps/website/components/teams/TeamDetailsHeader.tsx

@@ -6,6 +6,9 @@ import { TeamHero } from '@/ui/TeamHero';
 import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
 import { StatGrid } from '@/ui/StatGrid';
+import { Group } from '@/ui/Group';
+import { Surface } from '@/ui/Surface';
+import { Box } from '@/ui/Box';
  
 interface TeamDetailsHeaderProps {
   teamId: string;
@@ -36,23 +39,30 @@ export function TeamDetailsHeader({
   return (
     <TeamHero
       title={
-        <div className="flex items-center gap-3">
+        <Group gap={3}>
           {name}
           {tag && <Badge variant="outline">[{tag}]</Badge>}
-        </div>
+        </Group>
       }
       description={description || 'No mission statement provided.'}
-      memberCount={memberCount}
-      memberCountLabel={memberCountLabel}
-      foundedDateLabel={foundedDateLabel}
       sideContent={
-        <div className="w-32 h-32 bg-[var(--ui-color-bg-surface-muted)] border border-[var(--ui-color-border-default)] flex items-center justify-center overflow-hidden rounded-lg">
+        <Surface 
+          variant="muted" 
+          rounded="lg" 
+          width="8rem" 
+          height="8rem" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center" 
+          overflow="hidden"
+          border
+        >
           {logoUrl ? (
             <Image src={logoUrl} alt={name} width={128} height={128} />
           ) : (
             <Text size="2xl" weight="bold" variant="low">{name.substring(0, 2).toUpperCase()}</Text>
           )}
-        </div>
+        </Surface>
       }
       stats={
         <StatGrid
@@ -71,7 +81,7 @@ export function TeamDetailsHeader({
         />
       }
       actions={
-        <>
+        <Group gap={3}>
           {isAdmin && (
             <Button variant="secondary" onClick={onAdminClick}>
               Configure
@@ -80,7 +90,7 @@ export function TeamDetailsHeader({
           <Button variant="primary">
             Join Request
           </Button>
-        </>
+        </Group>
       }
     />
   );

apps/website/components/teams/TeamHeroSectionWrapper.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { TeamHero } from '@/ui/TeamHero';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
 import {
     Crown,
     Plus,
@@ -27,24 +28,36 @@ const SKILL_LEVELS = [
     label: 'Pro',
     icon: Crown,
     intent: 'warning' as const,
+    color: 'text-warning-amber',
+    bgColor: 'bg-warning-amber/10',
+    borderColor: 'border-warning-amber/20',
   },
   {
     id: 'advanced',
     label: 'Advanced',
     icon: Star,
     intent: 'primary' as const,
+    color: 'text-primary-blue',
+    bgColor: 'bg-primary-blue/10',
+    borderColor: 'border-primary-blue/20',
   },
   {
     id: 'intermediate',
     label: 'Intermediate',
     icon: TrendingUp,
     intent: 'telemetry' as const,
+    color: 'text-telemetry-aqua',
+    bgColor: 'bg-telemetry-aqua/10',
+    borderColor: 'border-telemetry-aqua/20',
   },
   {
     id: 'beginner',
     label: 'Beginner',
     icon: Shield,
     intent: 'success' as const,
+    color: 'text-performance-green',
+    bgColor: 'bg-performance-green/10',
+    borderColor: 'border-performance-green/20',
   },
 ] as const;
 
@@ -96,11 +109,11 @@ export function TeamHeroSection({
         </React.Fragment>
       }
       sideContent={
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Stack gap={4}>
           <Text size="xs" variant="low" weight="bold" uppercase>
             Find Your Level
           </Text>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <Stack gap={2}>
             {SKILL_LEVELS.map((level) => {
               const count = teamsByLevel[level.id]?.length || 0;
 
@@ -109,13 +122,16 @@ export function TeamHeroSection({
                   key={level.id}
                   label={level.label}
                   icon={level.icon}
+                  color={level.color}
+                  bgColor={level.bgColor}
+                  borderColor={level.borderColor}
                   count={count}
                   onClick={() => onSkillLevelClick(level.id as SkillLevel)}
                 />
               );
             })}
-          </div>
-        </div>
+          </Stack>
+        </Stack>
       }
     />
   );