website refactor

apps/website/client-wrapper/AdminUsersWrapper.tsx

@@ -6,7 +6,7 @@ import { AdminUsersTemplate } from '@/templates/AdminUsersTemplate';
 import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
 import { updateUserStatus, deleteUser } from '@/app/actions/adminActions';
 import { routes } from '@/lib/routing/RouteConfig';
-import { SharedConfirmDialog } from '@/components/shared/UIComponents';
+import { ConfirmDialog } from '@/components/shared/ConfirmDialog';
 import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
 
 export function AdminUsersWrapper({ viewData }: ClientWrapperProps<AdminUsersViewData>) {
@@ -148,7 +148,7 @@ export function AdminUsersWrapper({ viewData }: ClientWrapperProps<AdminUsersVie
         onSelectAll={handleSelectAll}
         onClearSelection={handleClearSelection}
       />
-      <SharedConfirmDialog
+      <ConfirmDialog
         isOpen={!!userToDelete}
         onClose={() => setUserToDelete(null)}
         onConfirm={confirmDeleteUser}

apps/website/client-wrapper/LeagueAdminSchedulePageClient.tsx

@@ -8,7 +8,12 @@ import {
   updateRaceAction
 } from '@/app/actions/leagueScheduleActions';
 import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
-import { SharedConfirmDialog, SharedStack, SharedCard, SharedBox, SharedText, SharedHeading } from '@/components/shared/UIComponents';
+import { ConfirmDialog } from '@/components/shared/ConfirmDialog';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
 import {
   useLeagueAdminSchedule,
   useLeagueAdminStatus,
@@ -172,16 +177,16 @@ export function LeagueAdminSchedulePageClient() {
   // Render admin access required if not admin
   if (!isLoading && !isAdmin) {
     return (
-      <SharedStack gap={6}>
-        <SharedCard>
-          <SharedBox p={6} textAlign="center">
-            <SharedHeading level={3}>Admin Access Required</SharedHeading>
-            <SharedBox mt={2}>
-              <SharedText size="sm" color="text-gray-400">Only league admins can manage the schedule.</SharedText>
-            </SharedBox>
-          </SharedBox>
-        </SharedCard>
-      </SharedStack>
+      <Stack gap={6}>
+        <Card>
+          <Box p={6} textAlign="center">
+            <Heading level={3}>Admin Access Required</Heading>
+            <Box mt={2}>
+              <Text size="sm" color="text-gray-400">Only league admins can manage the schedule.</Text>
+            </Box>
+          </Box>
+        </Card>
+      </Stack>
     );
   }
 
@@ -221,7 +226,7 @@ export function LeagueAdminSchedulePageClient() {
               setForm(new RaceScheduleCommandModel(form.toCommand()));
             }}
           />
-          <SharedConfirmDialog
+          <ConfirmDialog
             isOpen={!!raceToDelete}
             onClose={() => setRaceToDelete(null)}
             onConfirm={confirmDelete}

apps/website/client-wrapper/ProfileSettingsPageClient.tsx

@@ -3,13 +3,11 @@
 import type { Result } from '@/lib/contracts/Result';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
 import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
-import { 
-  SharedBox, 
-  SharedStack, 
-  SharedText, 
-  SharedIcon,
-  SharedProgressLine
-} from '@/components/shared/UIComponents';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { ProgressLine } from '@/components/shared/ProgressLine';
 import { ShieldAlert } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -46,19 +44,19 @@ export function ProfileSettingsPageClient({ viewData, onSave }: ProfileSettingsP
 
   return (
     <>
-      <SharedProgressLine isLoading={isSaving} />
+      <ProgressLine isLoading={isSaving} />
       {error && (
-        <SharedBox position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
-          <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">Update Failed</SharedText>
-                <SharedText size="sm" color="text-error-red/80">{error}</SharedText>
-              </SharedBox>
-            </SharedStack>
-          </SharedBox>
-        </SharedBox>
+        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
+          <Box bg="var(--ui-color-bg-surface)" p={4} rounded="md" border borderColor="var(--ui-color-intent-critical)">
+            <Stack direction="row" align="center" gap={3}>
+              <Icon icon={ShieldAlert} size={5} color="var(--ui-color-intent-critical)" />
+              <Box>
+                <Text weight="bold" variant="critical">Update Failed</Text>
+                <Text size="sm" variant="low">{error}</Text>
+              </Box>
+            </Stack>
+          </Box>
+        </Box>
       )}
       <ProfileSettingsTemplate
         viewData={viewData}

apps/website/client-wrapper/SponsorshipRequestsClient.tsx

@@ -1,12 +1,10 @@
 'use client';
 
-import { 
-  SharedBox, 
-  SharedStack, 
-  SharedText, 
-  SharedIcon,
-  SharedProgressLine
-} from '@/components/shared/UIComponents';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { ProgressLine } from '@/components/shared/ProgressLine';
 import { ShieldAlert } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -53,19 +51,19 @@ export function SponsorshipRequestsClient({ viewData, onAccept, onReject }: Spon
 
   return (
     <>
-      <SharedProgressLine isLoading={!!isProcessing} />
+      <ProgressLine isLoading={!!isProcessing} />
       {error && (
-        <SharedBox position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
-          <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">Action Failed</SharedText>
-                <SharedText size="sm" color="text-error-red/80">{error}</SharedText>
-              </SharedBox>
-            </SharedStack>
-          </SharedBox>
-        </SharedBox>
+        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
+          <Box bg="bg-error-red/10" p={4} rounded="md" border borderColor="border-error-red/20">
+            <Stack direction="row" align="center" gap={3}>
+              <Icon icon={ShieldAlert} size={5} color="text-error-red" />
+              <Box>
+                <Text weight="bold" color="text-error-red">Action Failed</Text>
+                <Text size="sm" color="text-error-red/80">{error}</Text>
+              </Box>
+            </Stack>
+          </Box>
+        </Box>
       )}
       <SponsorshipRequestsTemplate
         viewData={viewData}