website refactor

apps/website/components/errors/GlobalErrorScreen.tsx

@@ -5,9 +5,10 @@ import { Card } from '@/ui/Card';
 import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
+import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { AlertTriangle, Home, RefreshCw, Terminal } from 'lucide-react';
+import React from 'react';
 
 interface GlobalErrorScreenProps {
   error: Error & { digest?: string };
@@ -23,88 +24,44 @@ interface GlobalErrorScreenProps {
  */
 export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenProps) {
   return (
-    <Stack 
-      as="main" 
-      minHeight="screen"
-      fullWidth
-      align="center"
-      justify="center"
-      bg="bg-base-black"
-      position="relative"
-      overflow="hidden"
-      px={6}
-    >
+    <ErrorPageContainer size="lg" variant="glass">
       {/* Background Accents - Subtle telemetry vibe */}
       <Glow color="primary" size="xl" position="center" opacity={0.03} />
       
-      <Card 
-        variant="outline"
-        rounded="none" 
-        p={0} 
-        maxWidth="2xl"
-        fullWidth
-        position="relative"
-        zIndex={10}
-        borderColor="border-white"
-        className="bg-graphite-black/10"
-      >
-        {/* System Status Header */}
-        <Stack 
-          borderBottom 
-          borderColor="border-white" 
-          px={6} 
-          py={4}
-          direction="row"
-          align="center"
-          justify="between"
-          className="bg-white/5"
-        >
-          <Stack direction="row" gap={3} align="center">
-            <Icon icon={AlertTriangle} size={5} color="var(--warning-amber)" />
-            <Heading level={2} weight="bold">
-              <Text uppercase letterSpacing="widest" size="sm">
-                System Fault Detected
-              </Text>
-            </Heading>
-          </Stack>
-          <Text font="mono" size="xs" color="text-gray-500" uppercase>
-            Status: Critical
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem', paddingBottom: '1rem', borderBottom: '1px solid var(--ui-color-border-default)' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Icon icon={AlertTriangle} size={5} intent="warning" />
+          <Heading level={2} weight="bold">
+            System Fault Detected
+          </Heading>
+        </div>
+        <Text font="mono" size="xs" variant="low" uppercase>
+          Status: Critical
+        </Text>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        {/* Fault Description */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Text variant="med" size="base" leading="relaxed">
+            The application kernel encountered an unrecoverable execution error. 
+            Telemetry has been captured for diagnostic review.
           </Text>
-        </Stack>
 
-        <Stack p={8}>
-          <Stack gap={8}>
-            {/* Fault Description */}
-            <Stack gap={4}>
-              <Text color="text-gray-400" size="base" leading="relaxed">
-                The application kernel encountered an unrecoverable execution error. 
-                Telemetry has been captured for diagnostic review.
-              </Text>
+          <SystemStatusPanel error={error} />
+        </div>
 
-              <SystemStatusPanel error={error} />
-            </Stack>
+        {/* Recovery Actions */}
+        <RecoveryActions onRetry={reset} onHome={onHome} />
+      </div>
 
-            {/* Recovery Actions */}
-            <RecoveryActions onRetry={reset} onHome={onHome} />
-          </Stack>
-        </Stack>
-
-        {/* Footer / Metadata */}
-        <Stack 
-          borderTop 
-          borderColor="border-white" 
-          px={6} 
-          py={3}
-          direction="row"
-          justify="end"
-          className="bg-white/5"
-        >
-          <Text font="mono" size="xs" color="text-gray-600">
-            GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
-          </Text>
-        </Stack>
-      </Card>
-    </Stack>
+      {/* Footer / Metadata */}
+      <div style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid var(--ui-color-border-default)', textAlign: 'right' }}>
+        <Text font="mono" size="xs" variant="low">
+          GP-CORE-ERR-{error.digest?.substring(0, 8).toUpperCase() || 'UNKNOWN'}
+        </Text>
+      </div>
+    </ErrorPageContainer>
   );
 }
 
@@ -115,30 +72,23 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
  */
 function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
   return (
-    <Card 
-      variant="outline"
-      rounded="none" 
-      p={4} 
-      fullWidth 
-      borderColor="border-white" 
-      className="bg-graphite-black/20"
-    >
-      <Stack gap={3}>
-        <Stack direction="row" align="center" gap={2}>
-          <Icon icon={Terminal} size={3} color="var(--gray-500)" />
-          <Text font="mono" size="xs" color="text-gray-500" uppercase letterSpacing="wider">
+    <Card variant="outline">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+          <Icon icon={Terminal} size={3} intent="low" />
+          <Text font="mono" size="xs" variant="low" uppercase>
             Fault Log
           </Text>
-        </Stack>
-        <Text font="mono" size="sm" color="text-warning-amber" block>
+        </div>
+        <Text font="mono" size="sm" variant="warning" block>
           {error.message || 'Unknown execution fault'}
         </Text>
         {error.digest && (
-          <Text font="mono" size="xs" color="text-gray-600" block>
+          <Text font="mono" size="xs" variant="low" block>
             Digest: {error.digest}
           </Text>
         )}
-      </Stack>
+      </div>
     </Card>
   );
 }
@@ -150,19 +100,11 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  */
 function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
   return (
-    <Stack 
-      direction="row"
-      wrap
-      align="center" 
-      gap={4} 
-      fullWidth
-    >
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
       <Button 
         variant="primary" 
         onClick={onRetry}
         icon={<Icon icon={RefreshCw} size={4} />}
-        rounded="none"
-        px={8}
       >
         Reboot Session
       </Button>
@@ -170,11 +112,9 @@ function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: ()
         variant="secondary" 
         onClick={onHome}
         icon={<Icon icon={Home} size={4} />}
-        rounded="none"
-        px={8}
       >
         Return to Pits
       </Button>
-    </Stack>
+    </div>
   );
 }