website refactor

apps/website/components/errors/ErrorScreen.tsx

@@ -2,11 +2,12 @@
 
 import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { AppErrorBoundaryView } from './AppErrorBoundaryView';
 import { ErrorDetailsBlock } from './ErrorDetailsBlock';
 import { ErrorRecoveryActions } from './ErrorRecoveryActions';
+import React from 'react';
 
 interface ErrorScreenProps {
   error: Error & { digest?: string };
@@ -22,54 +23,27 @@ interface ErrorScreenProps {
  */
 export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
   return (
-    <Stack 
-      as="main" 
-      minHeight="screen"
-      fullWidth
-      align="center"
-      justify="center"
-      bg="bg-deep-graphite"
-      position="relative"
-      overflow="hidden"
-      px={6}
-    >
+    <ErrorPageContainer size="lg" variant="glass">
       {/* Background Accents */}
       <Glow color="primary" size="xl" position="center" opacity={0.05} />
       
-      <Card 
-        variant="outline"
-        rounded="lg" 
-        p={8} 
-        maxWidth="2xl"
-        fullWidth
-        position="relative"
-        zIndex={10}
-        borderColor="border-white"
-        className="bg-white/5 backdrop-blur-md"
+      <AppErrorBoundaryView 
+        title="System Malfunction"
+        description="The application encountered an unexpected state. Our telemetry has logged the incident."
       >
-        <AppErrorBoundaryView 
-          title="System Malfunction"
-          description="The application encountered an unexpected state. Our telemetry has logged the incident."
-        >
-          {/* Error Message Summary */}
-          <Card 
-            variant="outline"
-            rounded="md" 
-            p={4} 
-            fullWidth 
-            borderColor="border-white" 
-            className="bg-graphite-black/20"
-          >
-            <Text font="mono" size="sm" color="text-warning-amber" block>
+        {/* Error Message Summary */}
+        <div style={{ width: '100%', marginBottom: '1.5rem' }}>
+          <Card variant="outline">
+            <Text font="mono" size="sm" variant="warning" block>
               {error.message || 'Unknown execution error'}
             </Text>
           </Card>
+        </div>
 
-          <ErrorRecoveryActions onRetry={reset} onHome={onHome} />
-          
-          <ErrorDetailsBlock error={error} />
-        </AppErrorBoundaryView>
-      </Card>
-    </Stack>
+        <ErrorRecoveryActions onRetry={reset} onHome={onHome} />
+        
+        <ErrorDetailsBlock error={error} />
+      </AppErrorBoundaryView>
+    </ErrorPageContainer>
   );
 }