website refactor

apps/website/components/errors/ServerErrorPanel.tsx

@@ -4,6 +4,9 @@ import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { AlertTriangle } from 'lucide-react';
 import React from 'react';
 
@@ -20,24 +23,22 @@ interface ServerErrorPanelProps {
  */
 export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
+    <Stack alignItems="center" gap={6} fullWidth>
       {/* Status Indicator */}
-      <div 
-        style={{ 
-          padding: '1rem', 
-          borderRadius: '9999px', 
-          backgroundColor: 'rgba(255, 190, 77, 0.1)', 
-          border: '1px solid rgba(255, 190, 77, 0.3)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}
+      <Surface 
+        padding={4} 
+        rounded="full" 
+        bg="rgba(255, 190, 77, 0.1)" 
+        border="1px solid rgba(255, 190, 77, 0.3)"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
       >
         <Icon icon={AlertTriangle} size={8} intent="warning" />
-      </div>
+      </Surface>
 
       {/* Primary Message */}
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack alignItems="center" gap={2}>
         <Heading level={1} weight="bold">
           CRITICAL_SYSTEM_FAILURE
         </Heading>
@@ -45,12 +46,12 @@ export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps)
           The application engine encountered an unrecoverable state. 
           Telemetry has been dispatched to engineering.
         </Text>
-      </div>
+      </Stack>
 
       {/* Technical Summary */}
-      <div style={{ width: '100%' }}>
+      <Box fullWidth>
         <Card variant="outline">
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+          <Stack gap={2}>
             <Text font="mono" size="sm" variant="warning" block>
               STATUS: 500_INTERNAL_SERVER_ERROR
             </Text>
@@ -64,9 +65,9 @@ export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps)
                 INCIDENT_ID: {incidentId}
               </Text>
             )}
-          </div>
+          </Stack>
         </Card>
-      </div>
-    </div>
+      </Box>
+    </Stack>
   );
 }