website refactor

apps/website/components/leagues/LeagueMembers.tsx

@@ -14,6 +14,8 @@ import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Button } from '@/ui/Button';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { ControlBar } from '@/ui/ControlBar';
 import { useCallback, useEffect, useState } from 'react';
 import React from 'react';
@@ -135,7 +137,7 @@ export function LeagueMembers({
   }
 
   return (
-    <div>
+    <Box>
       <ControlBar
         leftContent={
           <Text size="sm" variant="low">
@@ -143,7 +145,7 @@ export function LeagueMembers({
           </Text>
         }
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <Group gap={2}>
           <Text size="sm" variant="low">Sort by:</Text>
           <Select
             value={sortBy}
@@ -158,10 +160,10 @@ export function LeagueMembers({
             ]}
             fullWidth={false}
           />
-        </div>
+        </Group>
       </ControlBar>
 
-      <div style={{ overflowX: 'auto', marginTop: '1rem' }}>
+      <Box overflowX="auto" marginTop={4}>
         <LeagueMemberTable showActions={showActions}>
           {sortedMembers.map((member, index) => {
             const isCurrentUser = member.driverId === currentDriverId;
@@ -190,7 +192,7 @@ export function LeagueMembers({
                 href={routes.driver.detail(member.driverId)}
                 meta={ratingAndWinsMeta}
                 actions={showActions && !cannotModify && !isCurrentUser ? (
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
+                  <Group gap={2} justify="end">
                     {onUpdateRole && (
                       <Select
                         value={member.role}
@@ -212,13 +214,13 @@ export function LeagueMembers({
                         <Text variant="critical">Remove</Text>
                       </Button>
                     )}
-                  </div>
+                  </Group>
                 ) : (showActions && cannotModify ? <Text size="xs" variant="low">—</Text> : undefined)}
               />
             );
           })}
         </LeagueMemberTable>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }