website refactor

apps/website/components/errors/GlobalErrorScreen.tsx

@@ -1,15 +1,14 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Surface } from '@/ui/Surface';
 import { Glow } from '@/ui/Glow';
 import { Text } from '@/ui/Text';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { AlertTriangle, RefreshCw, Home, Terminal } from 'lucide-react';
 import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface GlobalErrorScreenProps {
   error: Error & { digest?: string };
@@ -25,13 +24,12 @@ interface GlobalErrorScreenProps {
  */
 export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenProps) {
   return (
-    <Box 
+    <Stack 
       as="main" 
       minHeight="screen"
       fullWidth
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
+      align="center"
+      justify="center"
       bg="bg-base-black"
       position="relative"
       overflow="hidden"
@@ -40,28 +38,27 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
       {/* Background Accents - Subtle telemetry vibe */}
       <Glow color="primary" size="xl" position="center" opacity={0.03} />
       
-      <Surface 
-        variant="dark" 
-        border 
+      <Card 
+        variant="outline"
         rounded="none" 
-        padding={0} 
+        p={0} 
         maxWidth="2xl"
         fullWidth
         position="relative"
         zIndex={10}
         borderColor="border-white"
-        bgOpacity={0.1}
+        className="bg-graphite-black/10"
       >
         {/* System Status Header */}
-        <Box 
+        <Stack 
           borderBottom 
           borderColor="border-white" 
-          bgOpacity={0.05} 
           px={6} 
           py={4}
-          display="flex"
-          alignItems="center"
-          justifyContent="space-between"
+          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)" />
@@ -74,9 +71,9 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
           <Text font="mono" size="xs" color="text-gray-500" uppercase>
             Status: Critical
           </Text>
-        </Box>
+        </Stack>
 
-        <Box p={8}>
+        <Stack p={8}>
           <Stack gap={8}>
             {/* Fault Description */}
             <Stack gap={4}>
@@ -91,24 +88,24 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
             {/* Recovery Actions */}
             <RecoveryActions onRetry={reset} onHome={onHome} />
           </Stack>
-        </Box>
+        </Stack>
 
         {/* Footer / Metadata */}
-        <Box 
+        <Stack 
           borderTop 
           borderColor="border-white" 
-          bgOpacity={0.05} 
           px={6} 
           py={3}
-          display="flex"
-          justifyContent="end"
+          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>
-        </Box>
-      </Surface>
-    </Box>
+        </Stack>
+      </Card>
+    </Stack>
   );
 }
 
@@ -119,22 +116,21 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
  */
 function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
   return (
-    <Surface 
-      variant="dark" 
+    <Card 
+      variant="outline"
       rounded="none" 
-      padding={4} 
+      p={4} 
       fullWidth 
-      border 
       borderColor="border-white" 
-      bgOpacity={0.2}
+      className="bg-graphite-black/20"
     >
       <Stack gap={3}>
-        <Box display="flex" alignItems="center" gap={2}>
+        <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">
             Fault Log
           </Text>
-        </Box>
+        </Stack>
         <Text font="mono" size="sm" color="text-warning-amber" block>
           {error.message || 'Unknown execution fault'}
         </Text>
@@ -144,7 +140,7 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
           </Text>
         )}
       </Stack>
-    </Surface>
+    </Card>
   );
 }
 
@@ -155,10 +151,10 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  */
 function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
   return (
-    <Box 
-      display="flex" 
-      flexWrap="wrap" 
-      alignItems="center" 
+    <Stack 
+      direction="row"
+      wrap
+      align="center" 
       gap={4} 
       fullWidth
     >
@@ -180,6 +176,6 @@ function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: ()
       >
         Return to Pits
       </Button>
-    </Box>
+    </Stack>
   );
 }