website refactor

apps/website/components/teams/TeamAdmin.tsx

@@ -2,21 +2,22 @@
 
 import { JoinRequestItem } from '@/components/leagues/JoinRequestItem';
 import { JoinRequestList } from '@/components/leagues/JoinRequestList';
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
 import { useApproveJoinRequest } from "@/hooks/team/useApproveJoinRequest";
 import { useRejectJoinRequest } from "@/hooks/team/useRejectJoinRequest";
 import { useTeamJoinRequests } from "@/hooks/team/useTeamJoinRequests";
 import { useUpdateTeam } from "@/hooks/team/useUpdateTeam";
 import type { TeamJoinRequestViewModel } from '@/lib/view-models/TeamJoinRequestViewModel';
 import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
+import { Panel } from '@/ui/Panel';
 import { DangerZone } from '@/ui/DangerZone';
-import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
+import { SectionHeader } from '@/ui/SectionHeader';
 import { useState } from 'react';
+import React from 'react';
 
 interface TeamAdminProps {
   team: {
@@ -74,14 +75,10 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
   });
 
   const handleApprove = () => {
-    // Note: The current API doesn't support approving specific requests
-    // This would need the requestId to be passed to the service
     approveJoinRequestMutation.mutate();
   };
 
   const handleReject = () => {
-    // Note: The current API doesn't support rejecting specific requests
-    // This would need the requestId to be passed to the service
     rejectJoinRequestMutation.mutate();
   };
 
@@ -97,42 +94,30 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
   };
 
   return (
-    <Stack gap={6}>
-      <Card>
-        <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>
-          )}
-        </Stack>
-
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      <Panel 
+        title="Team Settings"
+        actions={!editMode && (
+          <Button variant="secondary" size="sm" onClick={() => setEditMode(true)}>
+            Edit Details
+          </Button>
+        )}
+      >
         {editMode ? (
-          <Stack gap={4}>
-            <Stack>
-              <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
-                Team Name
-              </Text>
-              <Input
-                type="text"
-                value={editedTeam.name}
-                onChange={(e) => setEditedTeam({ ...editedTeam, name: e.target.value })}
-              />
-            </Stack>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <Input
+              label="Team Name"
+              value={editedTeam.name}
+              onChange={(e) => setEditedTeam({ ...editedTeam, name: e.target.value })}
+            />
 
-            <Stack>
-              <Text as="label" size="sm" weight="medium" color="text-gray-400" block mb={2}>
-                Team Tag
-              </Text>
-              <Input
-                type="text"
-                value={editedTeam.tag}
-                onChange={(e) => setEditedTeam({ ...editedTeam, tag: e.target.value })}
-                maxLength={4}
-              />
-              <Text size="xs" color="text-gray-500" block mt={1}>Max 4 characters</Text>
-            </Stack>
+            <Input
+              label="Team Tag"
+              value={editedTeam.tag}
+              onChange={(e) => setEditedTeam({ ...editedTeam, tag: e.target.value })}
+              maxLength={4}
+              hint="Max 4 characters"
+            />
 
             <TextArea
               label="Description"
@@ -141,7 +126,7 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
               onChange={(e) => setEditedTeam({ ...editedTeam, description: e.target.value })}
             />
 
-            <Stack direction="row" gap={2}>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
               <Button variant="primary" onClick={handleSaveChanges} disabled={updateTeamMutation.isPending}>
                 {updateTeamMutation.isPending ? 'Saving...' : 'Save Changes'}
               </Button>
@@ -158,33 +143,29 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
               >
                 Cancel
               </Button>
-            </Stack>
-          </Stack>
+            </div>
+          </div>
         ) : (
-          <Stack gap={4}>
-            <Stack>
-              <Text size="sm" color="text-gray-400" block>Team Name</Text>
-              <Text color="text-white" weight="medium" block>{team.name}</Text>
-            </Stack>
-            <Stack>
-              <Text size="sm" color="text-gray-400" block>Team Tag</Text>
-              <Text color="text-white" weight="medium" block>{team.tag}</Text>
-            </Stack>
-            <Stack>
-              <Text size="sm" color="text-gray-400" block>Description</Text>
-              <Text color="text-white" block>{team.description}</Text>
-            </Stack>
-          </Stack>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <div>
+              <Text size="sm" variant="low" block marginBottom={1}>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>
+              <Text variant="high" weight="medium" block>{team.tag}</Text>
+            </div>
+            <div>
+              <Text size="sm" variant="low" block marginBottom={1}>Description</Text>
+              <Text variant="high" block>{team.description}</Text>
+            </div>
+          </div>
         )}
-      </Card>
-
-      <Card>
-        <Heading level={3} mb={6}>Join Requests</Heading>
+      </Panel>
 
+      <Panel title="Join Requests">
         {loading ? (
-          <Stack textAlign="center" py={8}>
-            <Text color="text-gray-400">Loading requests...</Text>
-          </Stack>
+          <LoadingWrapper variant="spinner" message="Loading requests..." />
         ) : joinRequests.length > 0 ? (
           <JoinRequestList>
             {joinRequests.map((request: TeamJoinRequestViewModel) => (
@@ -200,12 +181,13 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
             ))}
           </JoinRequestList>
         ) : (
-          <MinimalEmptyState
+          <EmptyState
             title="No pending join requests"
             description="When drivers request to join your team, they will appear here."
+            variant="minimal"
           />
         )}
-      </Card>
+      </Panel>
 
       <DangerZone
         title="Disband Team"
@@ -215,6 +197,6 @@ export function TeamAdmin({ team, onUpdate }: TeamAdminProps) {
           Disband Team (Coming Soon)
         </Button>
       </DangerZone>
-    </Stack>
+    </div>
   );
 }