website refactor

apps/website/templates/AdminUsersTemplate.tsx

@@ -8,7 +8,13 @@ import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
 import { BulkActionBar } from '@/components/admin/BulkActionBar';
 import { UserFilters } from '@/components/admin/UserFilters';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
-import { SharedButton, SharedContainer, SharedIcon, SharedStack, SharedBox, SharedText } from '@/components/shared/UIComponents';
+import { Button } from '@/ui/Button';
+import { Container } from '@/ui/Container';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { ErrorBanner } from '@/ui/ErrorBanner';
 import { RefreshCw, ShieldAlert, Users } from 'lucide-react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
 
@@ -95,37 +101,29 @@ export function AdminUsersTemplate({
   ];
 
   return (
-    <SharedContainer size="lg">
-      <SharedBox paddingY={8}>
-        <SharedStack gap={8}>
+    <Container size="lg">
+      <Box paddingY={8}>
+        <Stack gap={8}>
           <AdminHeaderPanel
             title="User Management"
             description="Monitor and control system access"
             isLoading={loading}
             actions={
-              <SharedButton
+              <Button
                 onClick={onRefresh}
                 disabled={loading}
                 variant="secondary"
                 size="sm"
-                icon={<SharedIcon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
+                icon={<Icon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
               >
                 Refresh Data
-              </SharedButton>
+              </Button>
             }
           />
 
           {/* error notice should be a component */}
           {error && (
-            <SharedBox bg="bg-error-red/10" p={4} rounded="md" border borderColor="border-error-red/20">
-              <SharedStack direction="row" align="center" gap={3}>
-                <SharedIcon icon={ShieldAlert} size={5} color="text-error-red" />
-                <SharedBox>
-                  <SharedText weight="bold" color="text-error-red">Operation Failed</SharedText>
-                  <SharedText size="sm" color="text-error-red/80">{error}</SharedText>
-                </SharedBox>
-              </SharedStack>
-            </SharedBox>
+            <ErrorBanner title="Operation Failed" message={error} />
           )}
 
           <AdminStatsPanel stats={stats} />
@@ -147,9 +145,9 @@ export function AdminUsersTemplate({
                 title="No users found"
                 description="Try adjusting your filters or search query"
                 action={
-                  <SharedButton variant="secondary" size="sm" onClick={onClearFilters}>
+                  <Button variant="secondary" size="sm" onClick={onClearFilters}>
                     Clear All Filters
-                  </SharedButton>
+                  </Button>
                 }
               />
             ) : (
@@ -170,8 +168,8 @@ export function AdminUsersTemplate({
             actions={bulkActions}
             onClearSelection={onClearSelection}
           />
-        </SharedStack>
-      </SharedBox>
-    </SharedContainer>
+        </Stack>
+      </Box>
+    </Container>
   );
 }