website refactor

apps/website/client-wrapper/SponsorshipRequestsClient.tsx

@@ -1,16 +1,21 @@
 'use client';
 
-import { InlineNotice } from '@/ui/InlineNotice';
-import { ProgressLine } from '@/ui/ProgressLine';
+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';
 import type { Result } from '@/lib/contracts/Result';
 import type { SponsorshipRequestsViewData } from '@/lib/view-data/SponsorshipRequestsViewData';
 import { SponsorshipRequestsTemplate } from '@/templates/SponsorshipRequestsTemplate';
-import { Box } from '@/ui/Box';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
 
-interface SponsorshipRequestsClientProps {
-  viewData: SponsorshipRequestsViewData;
+interface SponsorshipRequestsClientProps extends ClientWrapperProps<SponsorshipRequestsViewData> {
   onAccept: (requestId: string) => Promise<Result<void, string>>;
   onReject: (requestId: string, reason?: string) => Promise<Result<void, string>>;
 }
@@ -48,15 +53,19 @@ export function SponsorshipRequestsClient({ viewData, onAccept, onReject }: Spon
 
   return (
     <>
-      <ProgressLine isLoading={!!isProcessing} />
+      <SharedProgressLine isLoading={!!isProcessing} />
       {error && (
-        <Box position="fixed" top={4} right={4} zIndex={50} maxWidth="md">
-          <InlineNotice
-            variant="error"
-            title="Action 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">Action Failed</SharedText>
+                <SharedText size="sm" color="text-error-red/80">{error}</SharedText>
+              </SharedBox>
+            </SharedStack>
+          </SharedBox>
+        </SharedBox>
       )}
       <SponsorshipRequestsTemplate
         viewData={viewData}