website refactor

apps/website/client-wrapper/ProfileSettingsPageClient.tsx

@@ -1,16 +1,21 @@
 'use client';
 
-import { InlineNotice } from '@/ui/InlineNotice';
-import { ProgressLine } from '@/ui/ProgressLine';
 import type { Result } from '@/lib/contracts/Result';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
 import { ProfileSettingsTemplate } from '@/templates/ProfileSettingsTemplate';
-import { Box } from '@/ui/Box';
+import { 
+  SharedBox, 
+  SharedStack, 
+  SharedText, 
+  SharedIcon,
+  SharedProgressLine
+} from '@/components/shared/UIComponents';
+import { ShieldAlert } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
 
-interface ProfileSettingsPageClientProps {
-  viewData: ProfileViewData;
+interface ProfileSettingsPageClientProps extends ClientWrapperProps<ProfileViewData> {
   onSave: (updates: { bio?: string; country?: string }) => Promise<Result<void, string>>;
 }
 
@@ -41,15 +46,19 @@ export function ProfileSettingsPageClient({ viewData, onSave }: ProfileSettingsP
 
   return (
     <>
-      <ProgressLine isLoading={isSaving} />
+      <SharedProgressLine isLoading={isSaving} />
       {error && (
-        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
-          <InlineNotice
-            variant="error"
-            title="Update Failed"
-            message={error}
-          />
-        </Box>
+        <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>
       )}
       <ProfileSettingsTemplate
         viewData={viewData}