website refactor

apps/website/components/admin/AdminUsersTable.tsx

@@ -6,6 +6,8 @@ import { Button } from '@/ui/Button';
 import { IconButton } from '@/ui/IconButton';
 import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { DriverIdentity } from '@/ui/DriverIdentity';
 import {
     Table,
@@ -87,13 +89,13 @@ export function AdminUsersTable({
               />
             </TableCell>
             <TableCell>
-              <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
+              <Group gap={1.5} wrap>
                 {user.roles.map((role) => (
                   <Badge key={role} variant="default" size="sm">
                     {role}
                   </Badge>
                 ))}
-              </div>
+              </Group>
             </TableCell>
             <TableCell>
               <UserStatusTag status={user.status} />
@@ -104,7 +106,7 @@ export function AdminUsersTable({
               </Text>
             </TableCell>
             <TableCell>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
+              <Group gap={2} justify="end">
                 {user.status === 'active' ? (
                   <Button
                     size="sm"
@@ -138,7 +140,7 @@ export function AdminUsersTable({
                   icon={MoreVertical}
                   title="More"
                 />
-              </div>
+              </Group>
             </TableCell>
           </TableRow>
         ))}