website refactor

apps/website/components/admin/AdminDataTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
 import React from 'react';
 
 interface AdminDataTableProps {
@@ -20,14 +21,12 @@ export function AdminDataTable({
 }: AdminDataTableProps) {
   return (
     <Card padding={0}>
-      <div 
-        style={{ 
-          overflow: 'auto', 
-          maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight 
-        }}
+      <Box 
+        overflow="auto" 
+        maxHeight={typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight}
       >
         {children}
-      </div>
+      </Box>
     </Card>
   );
 }

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>
         ))}

apps/website/components/admin/UserFilters.tsx

@@ -5,6 +5,8 @@ import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { Filter, Search } from 'lucide-react';
 import { AdminToolbar } from './AdminToolbar';
 import React from 'react';
@@ -31,7 +33,7 @@ export function UserFilters({
   return (
     <AdminToolbar
       leftContent={
-        <React.Fragment>
+        <Group gap={3}>
           <Icon icon={Filter} size={4} intent="low" />
           <Text weight="medium" variant="high">Filters</Text>
           {(search || roleFilter || statusFilter) && (
@@ -43,16 +45,18 @@ export function UserFilters({
               Clear all
             </Button>
           )}
-        </React.Fragment>
+        </Group>
       }
     >
-      <Input
-        type="text"
-        placeholder="Search by email or name..."
-        value={search}
-        onChange={(e) => onSearch(e.target.value)}
-        style={{ width: '300px' }}
-      />
+      <Box width="18.75rem">
+        <Input
+          type="text"
+          placeholder="Search by email or name..."
+          value={search}
+          onChange={(e) => onSearch(e.target.value)}
+          fullWidth
+        />
+      </Box>
 
       <Select
         value={roleFilter}