website refactor

apps/website/components/admin/AdminUsersTable.tsx

@@ -3,9 +3,10 @@
 import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 import { Button } from '@/ui/Button';
-import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { IconButton } from '@/ui/IconButton';
 import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
+import { Badge } from '@/ui/Badge';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import {
     Table,
     TableBody,
@@ -15,8 +16,9 @@ import {
     TableRow
 } from '@/ui/Table';
 import { Text } from '@/ui/Text';
-import { MoreVertical, Shield, Trash2 } from 'lucide-react';
+import { MoreVertical, Trash2 } from 'lucide-react';
 import { UserStatusTag } from './UserStatusTag';
+import React from 'react';
 
 interface AdminUsersTableProps {
   users: AdminUsersViewData['users'];
@@ -49,7 +51,7 @@ export function AdminUsersTable({
     <Table>
       <TableHead>
         <TableRow>
-          <TableHeader width="10">
+          <TableHeader w="2.5rem">
             <SimpleCheckbox 
               checked={allSelected}
               onChange={onSelectAll}
@@ -74,55 +76,35 @@ export function AdminUsersTable({
               />
             </TableCell>
             <TableCell>
-              <Stack direction="row" align="center" gap={3}>
-                <Stack 
-                  bg="bg-primary-blue/10" 
-                  rounded="full" 
-                  p={2} 
-                  border 
-                  borderColor="border-primary-blue/20"
-                >
-                  <Icon icon={Shield} size={4} color="#198CFF" />
-                </Stack>
-                <Stack>
-                  <Text weight="semibold" color="text-white" block>
-                    {user.displayName}
-                  </Text>
-                  <Text size="xs" color="text-gray-500" block>
-                    {user.email}
-                  </Text>
-                </Stack>
-              </Stack>
+              <DriverIdentity
+                driver={{
+                  id: user.id,
+                  name: user.displayName,
+                  avatarUrl: null
+                }}
+                meta={user.email}
+                size="sm"
+              />
             </TableCell>
             <TableCell>
-              <Stack direction="row" gap={1.5} wrap>
+              <div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
                 {user.roles.map((role) => (
-                  <Stack 
-                    key={role}
-                    px={2} 
-                    py={0.5} 
-                    rounded="full" 
-                    bg="bg-charcoal-outline/30" 
-                    border 
-                    borderColor="border-charcoal-outline"
-                  >
-                    <Text size="xs" weight="medium" color="text-gray-300">
-                      {role}
-                    </Text>
-                  </Stack>
+                  <Badge key={role} variant="default" size="sm">
+                    {role}
+                  </Badge>
                 ))}
-              </Stack>
+              </div>
             </TableCell>
             <TableCell>
               <UserStatusTag status={user.status} />
             </TableCell>
             <TableCell>
-              <Text size="sm" color="text-gray-400">
+              <Text size="sm" variant="low">
                 {user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
               </Text>
             </TableCell>
             <TableCell>
-              <Stack direction="row" align="center" justify="end" gap={2}>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
                 {user.status === 'active' ? (
                   <Button
                     size="sm"
@@ -141,24 +123,22 @@ export function AdminUsersTable({
                   </Button>
                 ) : null}
                 
-                <Button
+                <IconButton
                   size="sm"
                   variant="secondary"
                   onClick={() => onDeleteUser(user.id)}
                   disabled={deletingUserId === user.id}
-                  icon={<Icon icon={Trash2} size={3} />}
-                >
-                  {deletingUserId === user.id ? '...' : ''}
-                </Button>
+                  icon={Trash2}
+                  title="Delete"
+                />
                 
-                <Button
+                <IconButton
                   size="sm"
                   variant="ghost"
-                  icon={<Icon icon={MoreVertical} size={4} />}
-                >
-                  {''}
-                </Button>
-              </Stack>
+                  icon={MoreVertical}
+                  title="More"
+                />
+              </div>
             </TableCell>
           </TableRow>
         ))}