website refactor

apps/website/components/errors/ServerErrorPanel.tsx

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { AlertTriangle } from 'lucide-react';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface ServerErrorPanelProps {
   message?: string;
@@ -24,37 +23,38 @@ export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps)
   return (
     <Stack gap={6} align="center" fullWidth>
       {/* Status Indicator */}
-      <Box 
+      <Stack 
         p={4} 
         rounded="full" 
         bg="bg-warning-amber" 
-        bgOpacity={0.1} 
+        {...({ bgOpacity: 0.1 } as any)}
         border 
         borderColor="border-warning-amber"
+        align="center"
+        justify="center"
       >
         <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
-      </Box>
+      </Stack>
 
       {/* Primary Message */}
       <Stack gap={2} align="center">
         <Heading level={1} weight="bold">
           CRITICAL_SYSTEM_FAILURE
         </Heading>
-        <Text color="text-gray-400" align="center" maxWidth="md">
+        <Text color="text-gray-400" textAlign="center" maxWidth="md">
           The application engine encountered an unrecoverable state. 
           Telemetry has been dispatched to engineering.
         </Text>
       </Stack>
 
       {/* Technical Summary */}
-      <Surface 
-        variant="dark" 
+      <Card 
+        variant="outline"
         rounded="md" 
-        padding={4} 
+        p={4} 
         fullWidth 
-        border 
         borderColor="border-white" 
-        bgOpacity={0.2}
+        className="bg-graphite-black/20"
       >
         <Stack gap={2}>
           <Text font="mono" size="sm" color="text-warning-amber" block>
@@ -71,7 +71,7 @@ export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps)
             </Text>
           )}
         </Stack>
-      </Surface>
+      </Card>
     </Stack>
   );
 }