website refactor

apps/website/components/errors/GlobalErrorScreen.tsx

@@ -6,6 +6,9 @@ import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
 import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { AlertTriangle, Home, RefreshCw, Terminal } from 'lucide-react';
 import React from 'react';
@@ -28,39 +31,39 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
       {/* Background Accents - Subtle telemetry vibe */}
       <Glow color="primary" size="xl" position="center" opacity={0.03} />
       
-      <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' }}>
+      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={6} paddingBottom={4} borderBottom="1px solid var(--ui-color-border-default)">
+        <Group gap={3}>
           <Icon icon={AlertTriangle} size={5} intent="warning" />
           <Heading level={2} weight="bold">
             System Fault Detected
           </Heading>
-        </div>
+        </Group>
         <Text font="mono" size="xs" variant="low" uppercase>
           Status: Critical
         </Text>
-      </div>
+      </Box>
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <Stack gap={8}>
         {/* Fault Description */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <Stack gap={4}>
           <Text variant="med" size="base" leading="relaxed">
             The application kernel encountered an unrecoverable execution error. 
             Telemetry has been captured for diagnostic review.
           </Text>
 
           <SystemStatusPanel error={error} />
-        </div>
+        </Stack>
 
         {/* Recovery Actions */}
         <RecoveryActions onRetry={reset} onHome={onHome} />
-      </div>
+      </Stack>
 
       {/* Footer / Metadata */}
-      <div style={{ marginTop: '2rem', paddingTop: '1rem', borderTop: '1px solid var(--ui-color-border-default)', textAlign: 'right' }}>
+      <Box marginTop={8} paddingTop={4} 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>
+      </Box>
     </ErrorPageContainer>
   );
 }
@@ -73,13 +76,13 @@ export function GlobalErrorScreen({ error, reset, onHome }: GlobalErrorScreenPro
 function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
   return (
     <Card variant="outline">
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack gap={3}>
+        <Group gap={2}>
           <Icon icon={Terminal} size={3} intent="low" />
           <Text font="mono" size="xs" variant="low" uppercase>
             Fault Log
           </Text>
-        </div>
+        </Group>
         <Text font="mono" size="sm" variant="warning" block>
           {error.message || 'Unknown execution fault'}
         </Text>
@@ -88,7 +91,7 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
             Digest: {error.digest}
           </Text>
         )}
-      </div>
+      </Stack>
     </Card>
   );
 }
@@ -100,7 +103,7 @@ function SystemStatusPanel({ error }: { error: Error & { digest?: string } }) {
  */
 function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: () => void }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+    <Group gap={4} wrap>
       <Button 
         variant="primary" 
         onClick={onRetry}
@@ -115,6 +118,6 @@ function RecoveryActions({ onRetry, onHome }: { onRetry: () => void; onHome: ()
       >
         Return to Pits
       </Button>
-    </div>
+    </Group>
   );
 }