website refactor

apps/website/components/dev/DevToolbar.tsx

@@ -15,7 +15,6 @@ import { NotificationTypeSection } from './sections/NotificationTypeSection';
 import { UrgencySection } from './sections/UrgencySection';
 import { NotificationSendSection } from './sections/NotificationSendSection';
 import { APIStatusSection } from './sections/APIStatusSection';
-import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
@@ -230,7 +229,7 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Box position="fixed" bottom="4" right="4" zIndex={50}>
+      <Stack position="fixed" bottom="4" right="4" zIndex={50}>
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -238,12 +237,12 @@ export function DevToolbar() {
           title="Open Dev Toolbar"
           size="lg"
         />
-      </Box>
+      </Stack>
     );
   }
 
   return (
-    <Box 
+    <Stack 
       position="fixed" 
       bottom="4" 
       right="4" 
@@ -257,15 +256,15 @@ export function DevToolbar() {
       overflow="hidden"
     >
       {/* Header */}
-      <Box display="flex" alignItems="center" justifyContent="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
-        <Box display="flex" alignItems="center" gap={2}>
+      <Stack direction="row" align="center" justify="between" px={4} py={3} bg="bg-iron-gray/50" borderBottom borderColor="border-charcoal-outline">
+        <Stack direction="row" align="center" gap={2}>
           <Icon icon={Wrench} size={4} color="rgb(59, 130, 246)" />
           <Text size="sm" weight="semibold" color="text-white">Dev Toolbar</Text>
           <Badge variant="primary" size="xs">
             DEMO
           </Badge>
-        </Box>
-        <Box display="flex" alignItems="center" gap={1}>
+        </Stack>
+        <Stack direction="row" align="center" gap={1}>
           <IconButton
             icon={isExpanded ? ChevronDown : ChevronUp}
             onClick={() => setIsExpanded(!isExpanded)}
@@ -278,12 +277,12 @@ export function DevToolbar() {
             variant="ghost"
             size="sm"
           />
-        </Box>
-      </Box>
+        </Stack>
+      </Stack>
 
       {/* Content */}
       {isExpanded && (
-        <Box p={4}>
+        <Stack p={4}>
           <Stack gap={3}>
             {/* Notification Section - Accordion */}
             <Accordion
@@ -337,23 +336,23 @@ export function DevToolbar() {
               onToggle={() => setOpenAccordion(openAccordion === 'errors' ? null : 'errors')}
             >
               <Stack gap={2}>
-                <Box display="flex" justifyContent="between" alignItems="center" p={2} bg="bg-iron-gray/30" rounded="md">
+                <Stack direction="row" justify="between" align="center" p={2} bg="bg-iron-gray/30" rounded="md">
                   <Text size="xs" color="text-gray-400">Total Errors</Text>
                   <Text size="xs" font="mono" weight="bold" color="text-red-400">{errorStats.total}</Text>
-                </Box>
+                </Stack>
                 {Object.keys(errorStats.byType).length > 0 ? (
                   <Stack gap={1}>
                     {Object.entries(errorStats.byType).map(([type, count]) => (
-                      <Box key={type} display="flex" justifyContent="between" alignItems="center" p={1.5} bg="bg-deep-graphite" rounded="md">
+                      <Stack key={type} direction="row" justify="between" align="center" p={1.5} bg="bg-deep-graphite" rounded="md">
                         <Text size="xs" color="text-gray-300">{type}</Text>
                         <Text size="xs" font="mono" color="text-warning-amber">{count}</Text>
-                      </Box>
+                      </Stack>
                     ))}
                   </Stack>
                 ) : (
-                  <Box textAlign="center" py={2}>
+                  <Stack align="center" py={2}>
                     <Text size="xs" color="text-gray-500">No errors yet</Text>
-                  </Box>
+                  </Stack>
                 )}
                 <Button
                   variant="secondary"
@@ -370,15 +369,15 @@ export function DevToolbar() {
               </Stack>
             </Accordion>
           </Stack>
-        </Box>
+        </Stack>
       )}
 
       {/* Collapsed state hint */}
       {!isExpanded && (
-        <Box px={4} py={2}>
+        <Stack px={4} py={2}>
           <Text size="xs" color="text-gray-500">Click ↑ to expand dev tools</Text>
-        </Box>
+        </Stack>
       )}
-    </Box>
+    </Stack>
   );
 }