website refactor

apps/website/components/dev/sections/APIStatusSection.tsx

@@ -2,11 +2,11 @@
 
 import React from 'react';
 import { Activity, Wifi, RefreshCw, Terminal } from 'lucide-react';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Button } from '@/ui/Button';
+import { Grid } from '@/ui/Grid';
 import { StatusIndicator, StatRow, Badge } from '@/ui/StatusIndicator';
 
 interface APIStatusSectionProps {
@@ -60,13 +60,13 @@ export function APIStatusSection({
   const consecutiveFailuresLabel = String(apiHealth.consecutiveFailures);
 
   return (
-    <Box>
-      <Box display="flex" alignItems="center" gap={2} mb={3}>
+    <Stack>
+      <Stack direction="row" align="center" gap={2} mb={3}>
         <Icon icon={Activity} size={4} color="rgb(156, 163, 175)" />
         <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
           API Status
         </Text>
-      </Box>
+      </Stack>
 
       {/* Status Indicator */}
       <StatusIndicator 
@@ -76,7 +76,7 @@ export function APIStatusSection({
         variant={getStatusVariant()}
       />
 
-      <Box mt={2}>
+      <Stack mt={2}>
         {/* Reliability */}
         <StatRow 
           label="Reliability"
@@ -91,29 +91,29 @@ export function APIStatusSection({
           valueColor="text-primary-blue"
           valueFont="mono"
         />
-      </Box>
+      </Stack>
 
       {/* Consecutive Failures */}
       {apiHealth.consecutiveFailures > 0 && (
-        <Box mt={2}>
+        <Stack mt={2}>
           <StatusIndicator 
             icon={Activity}
             label="Consecutive Failures"
             subLabel={consecutiveFailuresLabel}
             variant="danger"
           />
-        </Box>
+        </Stack>
       )}
 
       {/* Circuit Breakers */}
-      <Box mt={2}>
+      <Stack mt={2}>
         <Text size="xs" color="text-gray-500" block mb={1}>Circuit Breakers:</Text>
         {Object.keys(circuitBreakers).length === 0 ? (
           <Text size="xs" color="text-gray-500" italic>None active</Text>
         ) : (
           <Stack gap={1} maxHeight="4rem" overflow="auto">
             {Object.entries(circuitBreakers).map(([endpoint, status]) => (
-              <Box key={endpoint} display="flex" alignItems="center" justifyContent="between">
+              <Stack key={endpoint} direction="row" align="center" justify="between">
                 <Text size="xs" color="text-gray-400" truncate flexGrow={1}>
                   {endpoint}
                 </Text>
@@ -123,14 +123,14 @@ export function APIStatusSection({
                 {status.failures > 0 && (
                   <Text size="xs" color="text-red-400" ml={1}>({status.failures})</Text>
                 )}
-              </Box>
+              </Stack>
             ))}
           </Stack>
         )}
-      </Box>
+      </Stack>
 
       {/* API Actions */}
-      <Box display="grid" gridCols={2} gap={2} mt={3}>
+      <Grid cols={2} gap={2} mt={3}>
         <Button
           variant="primary"
           onClick={onHealthCheck}
@@ -147,9 +147,9 @@ export function APIStatusSection({
         >
           Reset Stats
         </Button>
-      </Box>
+      </Grid>
 
-      <Box display="grid" gridCols={1} gap={2} mt={2}>
+      <Grid cols={1} gap={2} mt={2}>
         <Button
           variant="danger"
           onClick={onTestError}
@@ -158,13 +158,13 @@ export function APIStatusSection({
         >
           Test Error Handler
         </Button>
-      </Box>
+      </Grid>
 
-      <Box mt={2}>
+      <Stack mt={2}>
         <Text size="xs" color="text-gray-600">
           Last Check: {lastCheckLabel}
         </Text>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }

apps/website/components/dev/sections/NotificationSendSection.tsx

@@ -3,10 +3,10 @@
 import React from 'react';
 import { Bell, Loader2 } from 'lucide-react';
 import type { DemoNotificationType, DemoUrgency } from '../types';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
 
 interface NotificationSendSectionProps {
   selectedType: DemoNotificationType;
@@ -22,7 +22,7 @@ export function NotificationSendSection({
   onSend 
 }: NotificationSendSectionProps) {
   return (
-    <Box>
+    <Stack>
       <Button
         onClick={onSend}
         disabled={sending}
@@ -36,7 +36,7 @@ export function NotificationSendSection({
         {sending ? 'Sending...' : lastSent ? '✓ Notification Sent!' : 'Send Demo Notification'}
       </Button>
 
-      <Box p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" mt={2}>
+      <Stack p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline" mt={2}>
         <Text size="xs" color="text-gray-500" block>
           <Text weight="bold" color="text-gray-400">Silent:</Text> Notification center only
         </Text>
@@ -46,7 +46,7 @@ export function NotificationSendSection({
         <Text size="xs" color="text-gray-500" block>
           <Text weight="bold" color="text-gray-400">Modal:</Text> Blocking popup (may require action)
         </Text>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }

apps/website/components/dev/sections/NotificationTypeSection.tsx

@@ -3,9 +3,11 @@
 import React from 'react';
 import { MessageSquare, AlertTriangle, Shield, Vote, TrendingUp, Award, LucideIcon } from 'lucide-react';
 import type { DemoNotificationType } from '../types';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { Button } from '@/ui/Button';
 
 interface NotificationOption {
   type: DemoNotificationType;
@@ -60,34 +62,27 @@ export const notificationOptions: NotificationOption[] = [
 
 export function NotificationTypeSection({ selectedType, onSelectType }: NotificationTypeSectionProps) {
   return (
-    <Box>
-      <Box display="flex" alignItems="center" gap={2} mb={2}>
+    <Stack>
+      <Stack direction="row" align="center" gap={2} mb={2}>
         <Icon icon={MessageSquare} size={4} color="rgb(156, 163, 175)" />
         <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
           Notification Type
         </Text>
-      </Box>
+      </Stack>
 
-      <Box display="grid" gridCols={2} gap={1}>
+      <Grid cols={2} gap={1}>
         {notificationOptions.map((option) => {
           const isSelected = selectedType === option.type;
 
           return (
-            <Box
+            <Button
               key={option.type}
-              as="button"
               type="button"
               onClick={() => onSelectType(option.type)}
-              display="flex"
-              flexDirection="col"
-              alignItems="center"
-              gap={1}
+              variant="ghost"
               p={2}
               rounded="lg"
-              border
-              transition
-              bg={isSelected ? 'bg-primary-blue/20' : 'bg-iron-gray/30'}
-              borderColor={isSelected ? 'border-primary-blue/50' : 'border-charcoal-outline'}
+              className={`flex flex-col items-center gap-1 transition-all ${isSelected ? 'bg-primary-blue/20 border-primary-blue/50' : 'bg-iron-gray/30 border-charcoal-outline'} border`}
             >
               <Icon 
                 icon={option.icon} 
@@ -101,10 +96,10 @@ export function NotificationTypeSection({ selectedType, onSelectType }: Notifica
               >
                 {option.label.split(' ')[0]}
               </Text>
-            </Box>
+            </Button>
           );
         })}
-      </Box>
-    </Box>
+      </Grid>
+    </Stack>
   );
 }

apps/website/components/dev/sections/ReplaySection.tsx

@@ -3,9 +3,8 @@
 import React, { useState, useEffect } from 'react';
 import { Play, Copy, Trash2, Download, Clock } from 'lucide-react';
 import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
 import { Button } from '@/ui/Button';

apps/website/components/dev/sections/UrgencySection.tsx

@@ -3,9 +3,11 @@
 import React from 'react';
 import { Bell, BellRing, AlertCircle, LucideIcon } from 'lucide-react';
 import type { DemoUrgency } from '../types';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Grid } from '@/ui/Grid';
+import { Button } from '@/ui/Button';
 
 interface UrgencyOption {
   urgency: DemoUrgency;
@@ -42,15 +44,15 @@ export const urgencyOptions: UrgencyOption[] = [
 
 export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySectionProps) {
   return (
-    <Box>
-      <Box display="flex" alignItems="center" gap={2} mb={2}>
+    <Stack>
+      <Stack direction="row" align="center" gap={2} mb={2}>
         <Icon icon={BellRing} size={4} color="rgb(156, 163, 175)" />
         <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
           Urgency Level
         </Text>
-      </Box>
+      </Stack>
 
-      <Box display="grid" gridCols={3} gap={1}>
+      <Grid cols={3} gap={1}>
         {urgencyOptions.map((option) => {
           const isSelected = selectedUrgency === option.urgency;
 
@@ -73,21 +75,14 @@ export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySect
           };
 
           return (
-            <Box
+            <Button
               key={option.urgency}
-              as="button"
               type="button"
               onClick={() => onSelectUrgency(option.urgency)}
-              display="flex"
-              flexDirection="col"
-              alignItems="center"
-              gap={1}
+              variant="ghost"
               p={2}
               rounded="lg"
-              border
-              transition
-              bg={isSelected ? getSelectedBg() : 'bg-iron-gray/30'}
-              borderColor={isSelected ? getSelectedBorder() : 'border-charcoal-outline'}
+              className={`flex flex-col items-center gap-1 transition-all ${isSelected ? `${getSelectedBg()} ${getSelectedBorder()}` : 'bg-iron-gray/30 border-charcoal-outline'} border`}
             >
               <Icon 
                 icon={option.icon} 
@@ -101,13 +96,13 @@ export function UrgencySection({ selectedUrgency, onSelectUrgency }: UrgencySect
               >
                 {option.label}
               </Text>
-            </Box>
+            </Button>
           );
         })}
-      </Box>
+      </Grid>
       <Text size="xs" color="text-gray-600" mt={1} block>
         {urgencyOptions.find(o => o.urgency === selectedUrgency)?.description}
       </Text>
-    </Box>
+    </Stack>
   );
 }