website refactor

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>
   );
 }