website refactor

apps/website/templates/TeamDetailTemplate.tsx

@@ -1,23 +1,20 @@
 'use client';
 
-import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
-import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard';
-import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
+import React from 'react';
+import { useRouter } from 'next/navigation';
 import { Box } from '@/ui/Box';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { HorizontalStatItem } from '@/ui/HorizontalStatItem';
-import { Grid } from '@/ui/Grid';
-import { GridItem } from '@/ui/GridItem';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-
-import { TeamAdmin } from '@/components/teams/TeamAdmin';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { Button } from '@/ui/Button';
+import { Panel } from '@/ui/Panel';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { TeamDetailsHeader } from '@/components/teams/TeamDetailsHeader';
 import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
 import { TeamStandingsPanel } from '@/components/teams/TeamStandingsPanel';
+import { TeamAdmin } from '@/components/teams/TeamAdmin';
 import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -26,8 +23,6 @@ export interface TeamDetailTemplateProps {
   viewData: TeamDetailViewData;
   activeTab: Tab;
   loading: boolean;
-  
-  // Event handlers
   onTabChange: (tab: Tab) => void;
   onUpdate: () => void;
   onRemoveMember: (driverId: string) => void;
@@ -43,15 +38,14 @@ export function TeamDetailTemplate({
   onRemoveMember,
   onGoBack,
 }: TeamDetailTemplateProps) {
-  const isSponsorMode = useSponsorMode();
   const team = viewData.team;
 
   if (loading) {
     return (
-      <Box bg="base-black" minH="screen" display="flex" center>
-        <Stack align="center" gap={4}>
-          <Box w="12" h="12" border borderColor="primary-accent" borderOpacity={0.2} borderTop borderTopColor="primary-accent" rounded="full" animate="spin" />
-          <Text color="text-gray-500" font="mono" size="xs" uppercase letterSpacing="widest">Synchronizing Telemetry...</Text>
+      <Box bg="var(--ui-color-bg-base)" minHeight="100vh" display="flex" center>
+        <Stack align="center" gap="md">
+          <Box width={12} height={12} border="2px solid var(--ui-color-border-muted)" borderTop="2px solid var(--ui-color-intent-primary)" rounded="full" animate="spin" />
+          <Text variant="low" size="xs" uppercase mono>Synchronizing Telemetry...</Text>
         </Stack>
       </Box>
     );
@@ -59,28 +53,30 @@ export function TeamDetailTemplate({
 
   if (!team) {
     return (
-      <Box bg="base-black" minH="screen">
-        <Container size="md" py={24}>
-          <Box border borderColor="outline-steel" bg="surface-charcoal" p={12} textAlign="center">
-            <Heading level={1}>404: Team Disconnected</Heading>
-            <Text color="text-gray-500" block mt={4} font="mono">
-              The requested team entity is no longer broadcasting.
-            </Text>
-            <Box mt={8}>
-              <Button variant="primary" onClick={onGoBack}>
-                Return to Base
-              </Button>
-            </Box>
-          </Box>
-        </Container>
+      <Box bg="var(--ui-color-bg-base)" minHeight="100vh">
+        <Box paddingY={24}>
+          <Container size="md">
+            <Panel variant="dark" padding="lg">
+              <Stack align="center" gap="lg">
+                <Heading level={1}>404: Team Disconnected</Heading>
+                <Text variant="low" block mono>
+                  The requested team entity is no longer broadcasting.
+                </Text>
+                <Button variant="primary" onClick={onGoBack}>
+                  Return to Base
+                </Button>
+              </Stack>
+            </Panel>
+          </Container>
+        </Box>
       </Box>
     );
   }
 
   return (
-    <Box bg="base-black" minH="screen">
-      <Container size="lg" py={8}>
-        <Stack gap={8}>
+    <Box bg="var(--ui-color-bg-base)" minHeight="100vh" paddingY={8}>
+      <Container size="xl">
+        <Stack gap="lg">
           <Breadcrumbs
             items={[
               { label: 'Home', href: '/' },
@@ -89,42 +85,26 @@ export function TeamDetailTemplate({
             ]}
           />
 
-          {isSponsorMode && (
-            <SponsorInsightsCard
-              entityType="team"
-              entityId={team.id}
-              entityName={team.name}
-              tier="standard"
-              metrics={viewData.teamMetrics}
-              slots={SlotTemplates.team(true, true, '$500', '$250')}
-              trustScoreLabel="90/100"
-              monthlyActivityLabel="85%"
-              onNavigate={(href) => window.location.href = href}
-            />
-          )}
-
           <TeamDetailsHeader
             teamId={team.id}
             name={team.name}
             tag={team.tag}
             description={team.description}
             memberCount={viewData.memberships.length}
-            memberCountLabel={viewData.memberCountLabel}
-            foundedDate={team.createdAt}
             foundedDateLabel={team.foundedDateLabel}
             isAdmin={viewData.isAdmin}
             onAdminClick={() => onTabChange('admin')}
           />
 
           {/* Tabs */}
-          <Box borderBottom borderColor="outline-steel">
-            <Stack direction="row" gap={8}>
+          <Box borderBottom="1px solid var(--ui-color-border-muted)">
+            <Stack direction="row" gap="lg">
               {viewData.tabs.map((tab) => (
                 tab.visible && (
                   <Box
                     key={tab.id}
-                    onClick={() => onTabChange(tab.id)}
-                    pb={4}
+                    onClick={() => onTabChange(tab.id as Tab)}
+                    paddingBottom={4}
                     cursor="pointer"
                     position="relative"
                   >
@@ -132,8 +112,7 @@ export function TeamDetailTemplate({
                       weight="bold" 
                       size="xs"
                       uppercase
-                      letterSpacing="widest"
-                      color={activeTab === tab.id ? 'text-primary-accent' : 'text-gray-500'}
+                      variant={activeTab === tab.id ? 'primary' : 'low'}
                     >
                       {tab.label}
                     </Text>
@@ -141,10 +120,10 @@ export function TeamDetailTemplate({
                       <Box 
                         position="absolute" 
                         bottom="-1px" 
-                        left="0" 
-                        right="0" 
-                        h="2px" 
-                        bg="primary-accent" 
+                        left={0} 
+                        right={0} 
+                        height="2px" 
+                        bg="var(--ui-color-intent-primary)" 
                       />
                     )}
                   </Box>
@@ -155,58 +134,73 @@ export function TeamDetailTemplate({
 
           <Box>
             {activeTab === 'overview' && (
-              <Stack gap={8}>
-                <Grid cols={12} gap={8}>
-                  <GridItem colSpan={12} lgSpan={8}>
-                    <Stack gap={8}>
-                      <Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.3} p={6}>
-                        <Text size="xs" weight="bold" color="text-gray-400" uppercase>Mission Statement</Text>
-                        <Text color="text-gray-300" leading="relaxed" size="sm" block mt={4}>
+              <Grid cols={3} gap="lg">
+                <Box gridCols={{ lg: 2 }}>
+                  <Stack gap="lg">
+                    <Panel variant="default" padding="md">
+                      <Text size="xs" weight="bold" variant="low" uppercase>Mission Statement</Text>
+                      <Box marginTop={4}>
+                        <Text variant="med" leading="relaxed" size="sm" block>
                           {team.description || 'No description provided.'}
                         </Text>
                       </Box>
+                    </Panel>
 
-                      <Box>
-                        <Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Recent Operations</Text>
-                        <Box py={12} border borderStyle="dashed" borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.1} textAlign="center">
-                          <Text color="text-gray-600" font="mono" size="xs">NO RECENT TELEMETRY DATA</Text>
+                    <Box>
+                      <Box marginBottom={4}>
+                        <Text size="xs" weight="bold" variant="low" uppercase block>Recent Operations</Text>
+                      </Box>
+                      <Panel variant="muted" padding="lg">
+                        <Box textAlign="center">
+                          <Text variant="low" mono size="xs">NO RECENT TELEMETRY DATA</Text>
                         </Box>
-                      </Box>
-                    </Stack>
-                  </GridItem>
+                      </Panel>
+                    </Box>
+                  </Stack>
+                </Box>
 
-                  <GridItem colSpan={12} lgSpan={4}>
-                    <Stack gap={6}>
-                      <Box border borderColor="outline-steel" bg="surface-charcoal" bgOpacity={0.5} p={6}>
-                        <Text size="xs" weight="bold" color="text-gray-400" uppercase mb={4} block>Performance Metrics</Text>
-                        <Stack gap={4}>
-                          <HorizontalStatItem label="Avg Rating" value="1450" color="text-primary-accent" />
-                          <HorizontalStatItem label="Win Rate" value="12.5%" color="text-telemetry-aqua" />
-                          <HorizontalStatItem label="Total Podiums" value="42" color="text-warning-amber" />
-                        </Stack>
+                <Box>
+                  <Stack gap="lg">
+                    <Panel variant="default" padding="md">
+                      <Box marginBottom={4}>
+                        <Text size="xs" weight="bold" variant="low" uppercase block>Performance Metrics</Text>
                       </Box>
-                    </Stack>
-                  </GridItem>
-                </Grid>
-              </Stack>
+                      <Stack gap="md">
+                        <Box display="flex" justifyContent="between" alignItems="center">
+                          <Text size="xs" variant="low" uppercase>Avg Rating</Text>
+                          <Text weight="bold" mono variant="primary">1450</Text>
+                        </Box>
+                        <Box display="flex" justifyContent="between" alignItems="center">
+                          <Text size="xs" variant="low" uppercase>Win Rate</Text>
+                          <Text weight="bold" mono variant="telemetry">12.5%</Text>
+                        </Box>
+                        <Box display="flex" justifyContent="between" alignItems="center">
+                          <Text size="xs" variant="low" uppercase>Total Podiums</Text>
+                          <Text weight="bold" mono variant="warning">42</Text>
+                        </Box>
+                      </Stack>
+                    </Panel>
+                  </Stack>
+                </Box>
+              </Grid>
             )}
 
             {activeTab === 'roster' && (
-              <Box>
-                <Stack direction="row" align="center" justify="between" mb={6}>
-                  <Text size="xs" weight="bold" color="text-gray-400" uppercase>Active Personnel</Text>
-                  <Text size="xs" color="text-gray-500" font="mono">{viewData.memberships.length} UNITS ACTIVE</Text>
-                </Stack>
+              <Stack gap="md">
+                <Box display="flex" alignItems="center" justifyContent="between">
+                  <Text size="xs" weight="bold" variant="low" uppercase>Active Personnel</Text>
+                  <Text size="xs" variant="low" mono>{viewData.memberships.length} UNITS ACTIVE</Text>
+                </Box>
                 <TeamMembersTable 
                   members={viewData.memberships} 
                   isAdmin={viewData.isAdmin}
                   onRemoveMember={onRemoveMember}
                 />
-              </Box>
+              </Stack>
             )}
 
             {activeTab === 'standings' && (
-              <TeamStandingsPanel standings={[]} /> // Mocked for now as in original
+              <TeamStandingsPanel standings={[]} />
             )}
 
             {activeTab === 'admin' && viewData.isAdmin && (