wip

apps/website/components/teams/TeamRoster.tsx

@@ -1,10 +1,18 @@
 'use client';
 
-import Card from '@/ui/Card';
+import { Card } from '@/ui/Card';
 import { DriverIdentity } from '@/components/drivers/DriverIdentity';
 import { useTeamRoster } from "@/lib/hooks/team";
 import { useState } from 'react';
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Select } from '@/ui/Select';
+import { Surface } from '@/ui/Surface';
+import { Badge } from '@/ui/Badge';
+import { Button } from '@/ui/Button';
 
 type TeamRole = 'owner' | 'admin' | 'member';
 type TeamMemberRole = 'owner' | 'manager' | 'member';
@@ -24,7 +32,7 @@ interface TeamRosterProps {
   onChangeRole?: (driverId: string, newRole: TeamRole) => void;
 }
 
-export default function TeamRoster({
+export function TeamRoster({
   teamId,
   memberships,
   isAdmin,
@@ -36,17 +44,6 @@ export default function TeamRoster({
   // Use hook for data fetching
   const { data: teamMembers = [], isLoading: loading } = useTeamRoster(memberships);
 
-  const getRoleBadgeColor = (role: TeamRole) => {
-    switch (role) {
-      case 'owner':
-        return 'bg-warning-amber/20 text-warning-amber';
-      case 'admin':
-        return 'bg-primary-blue/20 text-primary-blue';
-      default:
-        return 'bg-charcoal-outline text-gray-300';
-    }
-  };
-
   const getRoleLabel = (role: TeamRole | TeamMemberRole) => {
     // Convert manager to admin for display
     const displayRole = role === 'manager' ? 'admin' : role;
@@ -85,43 +82,48 @@ export default function TeamRoster({
   });
 
   const teamAverageRating = teamMembers.length > 0
-    ? teamMembers.reduce((sum, m) => sum + (m.rating || 0), 0) / teamMembers.length
+    ? teamMembers.reduce((sum: number, m: any) => sum + (m.rating || 0), 0) / teamMembers.length
     : 0;
 
   if (loading) {
     return (
       <Card>
-        <div className="text-center py-8 text-gray-400">Loading roster...</div>
+        <Box textAlign="center" py={8}>
+          <Text color="text-gray-400">Loading roster...</Text>
+        </Box>
       </Card>
     );
   }
 
   return (
     <Card>
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h3 className="text-xl font-semibold text-white">Team Roster</h3>
-          <p className="text-sm text-gray-400 mt-1">
+      <Stack direction="row" align="center" justify="between" mb={6} wrap>
+        <Box>
+          <Heading level={3}>Team Roster</Heading>
+          <Text size="sm" color="text-gray-400" block mt={1}>
             {memberships.length} {memberships.length === 1 ? 'member' : 'members'} • Avg Rating:{' '}
-            <span className="text-primary-blue font-medium">{teamAverageRating}</span>
-          </p>
-        </div>
+            <Text color="text-primary-blue" weight="medium">{teamAverageRating.toFixed(0)}</Text>
+          </Text>
+        </Box>
 
-        <div className="flex items-center gap-2">
-          <label className="text-sm text-gray-400">Sort by:</label>
-          <select
-            value={sortBy}
-            onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
-            className="px-3 py-1 bg-deep-graphite border border-charcoal-outline rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
-          >
-            <option value="rating">Rating</option>
-            <option value="role">Role</option>
-            <option value="name">Name</option>
-          </select>
-        </div>
-      </div>
+        <Stack direction="row" align="center" gap={2}>
+          <Text size="sm" color="text-gray-400">Sort by:</Text>
+          <Box width={32}>
+            <Select
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value as typeof sortBy)}
+              options={[
+                { value: 'rating', label: 'Rating' },
+                { value: 'role', label: 'Role' },
+                { value: 'name', label: 'Name' },
+              ]}
+              className="py-1 text-sm"
+            />
+          </Box>
+        </Stack>
+      </Stack>
 
-      <div className="space-y-3">
+      <Stack gap={3}>
         {sortedMembers.map((member) => {
           const { driver, role, joinedAt, rating, overallRank } = member;
 
@@ -130,68 +132,79 @@ export default function TeamRoster({
           const canManageMembership = isAdmin && role !== 'owner';
 
           return (
-            <div
+            <Surface
               key={driver.id}
-              className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-charcoal-outline/60 transition-colors"
+              variant="dark"
+              rounded="lg"
+              border
+              padding={4}
             >
-              <DriverIdentity
-                driver={driver as DriverViewModel}
-                href={`/drivers/${driver.id}?from=team&teamId=${teamId}`}
-                contextLabel={getRoleLabel(role)}
-                meta={
-                  <span>
-                    {driver.country} • Joined {new Date(joinedAt).toLocaleDateString()}
-                  </span>
-                }
-                size="md"
-              />
+              <Stack direction="row" align="center" justify="between" wrap gap={4}>
+                <DriverIdentity
+                  driver={driver as DriverViewModel}
+                  href={`/drivers/${driver.id}?from=team&teamId=${teamId}`}
+                  contextLabel={getRoleLabel(role)}
+                  meta={
+                    <Text size="xs" color="text-gray-400">
+                      {driver.country} • Joined {new Date(joinedAt).toLocaleDateString()}
+                    </Text>
+                  }
+                  size="md"
+                />
 
-              {rating !== null && (
-                <div className="flex items-center gap-6 text-center">
-                  <div>
-                    <div className="text-lg font-bold text-primary-blue">
-                      {rating}
-                    </div>
-                    <div className="text-xs text-gray-400">Rating</div>
-                  </div>
-                  {overallRank !== null && (
-                    <div>
-                      <div className="text-sm text-gray-300">#{overallRank}</div>
-                      <div className="text-xs text-gray-500">Rank</div>
-                    </div>
-                  )}
-                </div>
-              )}
+                {rating !== null && (
+                  <Stack direction="row" align="center" gap={6}>
+                    <Box textAlign="center">
+                      <Text size="lg" weight="bold" color="text-primary-blue" block>
+                        {rating}
+                      </Text>
+                      <Text size="xs" color="text-gray-400">Rating</Text>
+                    </Box>
+                    {overallRank !== null && (
+                      <Box textAlign="center">
+                        <Text size="sm" color="text-gray-300" block>#{overallRank}</Text>
+                        <Text size="xs" color="text-gray-500">Rank</Text>
+                      </Box>
+                    )}
+                  </Stack>
+                )}
 
-              {canManageMembership && (
-                <div className="flex items-center gap-2">
-                  <select
-                    className="px-3 py-2 bg-iron-gray border-0 rounded text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
-                    value={displayRole}
-                    onChange={(e) =>
-                      onChangeRole?.(driver.id, e.target.value as TeamRole)
-                    }
-                  >
-                    <option value="member">Member</option>
-                    <option value="admin">Admin</option>
-                  </select>
+                {canManageMembership && (
+                  <Stack direction="row" align="center" gap={2}>
+                    <Box width={32}>
+                      <Select
+                        value={displayRole}
+                        onChange={(e) =>
+                          onChangeRole?.(driver.id, e.target.value as TeamRole)
+                        }
+                        options={[
+                          { value: 'member', label: 'Member' },
+                          { value: 'admin', label: 'Admin' },
+                        ]}
+                        className="text-sm"
+                      />
+                    </Box>
 
-                  <button
-                    onClick={() => onRemoveMember?.(driver.id)}
-                    className="px-3 py-2 bg-danger-red/20 hover:bg-danger-red/30 text-danger-red rounded text-sm font-medium transition-colors"
-                  >
-                    Remove
-                  </button>
-                </div>
-              )}
-            </div>
+                    <Button
+                      variant="danger"
+                      size="sm"
+                      onClick={() => onRemoveMember?.(driver.id)}
+                    >
+                      Remove
+                    </Button>
+                  </Stack>
+                )}
+              </Stack>
+            </Surface>
           );
         })}
-      </div>
+      </Stack>
 
       {memberships.length === 0 && (
-        <div className="text-center py-8 text-gray-400">No team members yet.</div>
+        <Box textAlign="center" py={8}>
+          <Text color="text-gray-400">No team members yet.</Text>
+        </Box>
       )}
     </Card>
   );
-}
+}