website refactor

apps/website/components/errors/ServerErrorPanel.tsx

@@ -3,9 +3,9 @@
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
 import { Text } from '@/ui/Text';
 import { AlertTriangle } from 'lucide-react';
+import React from 'react';
 
 interface ServerErrorPanelProps {
   message?: string;
@@ -20,57 +20,53 @@ interface ServerErrorPanelProps {
  */
 export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
   return (
-    <Stack gap={6} align="center" fullWidth>
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
       {/* Status Indicator */}
-      <Stack 
-        p={4} 
-        rounded="full" 
-        bg="bg-warning-amber" 
-        {...({ bgOpacity: 0.1 } as any)}
-        border 
-        borderColor="border-warning-amber"
-        align="center"
-        justify="center"
+      <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'
+        }}
       >
-        <Icon icon={AlertTriangle} size={8} color="var(--warning-amber)" />
-      </Stack>
+        <Icon icon={AlertTriangle} size={8} intent="warning" />
+      </div>
 
       {/* Primary Message */}
-      <Stack gap={2} align="center">
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
         <Heading level={1} weight="bold">
           CRITICAL_SYSTEM_FAILURE
         </Heading>
-        <Text color="text-gray-400" textAlign="center" maxWidth="md">
+        <Text variant="low" align="center" style={{ maxWidth: '32rem' }}>
           The application engine encountered an unrecoverable state. 
           Telemetry has been dispatched to engineering.
         </Text>
-      </Stack>
+      </div>
 
       {/* Technical Summary */}
-      <Card 
-        variant="outline"
-        rounded="md" 
-        p={4} 
-        fullWidth 
-        borderColor="border-white" 
-        className="bg-graphite-black/20"
-      >
-        <Stack gap={2}>
-          <Text font="mono" size="sm" color="text-warning-amber" block>
-            STATUS: 500_INTERNAL_SERVER_ERROR
-          </Text>
-          {message && (
-            <Text font="mono" size="xs" color="text-gray-400" block>
-              EXCEPTION: {message}
+      <div style={{ width: '100%' }}>
+        <Card variant="outline">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <Text font="mono" size="sm" variant="warning" block>
+              STATUS: 500_INTERNAL_SERVER_ERROR
             </Text>
-          )}
-          {incidentId && (
-            <Text font="mono" size="xs" color="text-gray-500" block>
-              INCIDENT_ID: {incidentId}
-            </Text>
-          )}
-        </Stack>
-      </Card>
-    </Stack>
+            {message && (
+              <Text font="mono" size="xs" variant="low" block>
+                EXCEPTION: {message}
+              </Text>
+            )}
+            {incidentId && (
+              <Text font="mono" size="xs" variant="low" block>
+                INCIDENT_ID: {incidentId}
+              </Text>
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
   );
 }