website refactor

apps/website/components/errors/ErrorDetailsBlock.tsx

@@ -2,12 +2,11 @@
 
 import React, { useState } from 'react';
 import { Copy, ChevronDown, ChevronUp } from 'lucide-react';
-import { Box } from '@/ui/Box';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
+import { Card } from '@/ui/Card';
 
 interface ErrorDetailsBlockProps {
   error: Error & { digest?: string };
@@ -42,53 +41,48 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
   };
 
   return (
-    <Stack gap={4} fullWidth pt={4} borderTop borderColor="border-white" bgOpacity={0.1}>
-      <Box 
+    <Stack gap={4} fullWidth pt={4} borderTop borderColor="border-white">
+      <Stack 
         as="button"
         onClick={() => setShowDetails(!showDetails)}
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        direction="row"
+        align="center"
+        justify="center"
         gap={2}
-        transition
+        className="transition-all"
       >
         <Text 
           size="xs" 
           color="text-gray-500" 
-          hoverTextColor="text-gray-300" 
+          className="hover:text-gray-300 flex items-center gap-2"
           uppercase 
           letterSpacing="widest" 
           weight="medium"
-          display="flex"
-          alignItems="center"
-          gap={2}
         >
           {showDetails ? <Icon icon={ChevronUp} size={3} /> : <Icon icon={ChevronDown} size={3} />}
           {showDetails ? 'Hide Technical Logs' : 'Show Technical Logs'}
         </Text>
-      </Box>
+      </Stack>
 
       {showDetails && (
         <Stack gap={3}>
-          <Surface 
-            variant="dark" 
+          <Card 
+            variant="outline"
             rounded="md" 
-            padding={4} 
+            p={4} 
             fullWidth
             maxHeight="48"
             overflow="auto"
-            border
             borderColor="border-white"
-            bgOpacity={0.4}
-            hideScrollbar={false}
+            className="bg-graphite-black/40"
           >
             <Text font="mono" size="xs" color="text-gray-500" block leading="relaxed">
               {error.stack || 'No stack trace available'}
               {error.digest && `\n\nDigest: ${error.digest}`}
             </Text>
-          </Surface>
+          </Card>
           
-          <Box display="flex" justifyContent="end">
+          <Stack direction="row" justify="end">
             <Button 
               variant="secondary" 
               size="sm"
@@ -99,7 +93,7 @@ export function ErrorDetailsBlock({ error }: ErrorDetailsBlockProps) {
             >
               {copied ? 'Copied to Clipboard' : 'Copy Error Details'}
             </Button>
-          </Box>
+          </Stack>
         </Stack>
       )}
     </Stack>