website refactor

apps/website/components/leagues/JoinRequestsPanel.tsx

@@ -4,6 +4,9 @@ import { IconButton } from '@/ui/IconButton';
 import { Panel } from '@/ui/Panel';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
 import { ListItem, ListItemInfo, ListItemActions } from '@/ui/ListItem';
 import { EmptyState } from '@/ui/EmptyState';
 import { Check, Clock, X, UserPlus } from 'lucide-react';
@@ -34,17 +37,17 @@ export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequest
 
   return (
     <Panel title={`Pending Requests (${requests.length})`}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      <Stack gap={3}>
         {requests.map((request) => (
           <ListItem key={request.id}>
             <ListItemInfo
               title={request.driverName}
               description={request.message}
               meta={
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+                <Group gap={1.5}>
                   <Icon icon={Clock} size={3} intent="low" />
                   <Text size="xs" variant="low" font="mono">{request.requestedAt}</Text>
-                </div>
+                </Group>
               }
             />
             <ListItemActions>
@@ -66,7 +69,7 @@ export function JoinRequestsPanel({ requests, onAccept, onDecline }: JoinRequest
             </ListItemActions>
           </ListItem>
         ))}
-      </div>
+      </Stack>
     </Panel>
   );
 }