website refactor

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

@@ -1,10 +1,12 @@
 'use client';
 
-import { Bell } from 'lucide-react';
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useNotifications } from '@/components/notifications/NotificationProvider';
-import type { NotificationVariant } from '@/components/notifications/notificationTypes';
+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';
 
 interface NotificationSendSectionProps {
   selectedType: DemoNotificationType;
@@ -15,50 +17,36 @@ interface NotificationSendSectionProps {
 }
 
 export function NotificationSendSection({ 
-  selectedType, 
-  selectedUrgency, 
   sending, 
   lastSent, 
   onSend 
 }: NotificationSendSectionProps) {
   return (
-    <div>
-      <button
+    <Box>
+      <Button
         onClick={onSend}
         disabled={sending}
-        className={`
-          w-full flex items-center justify-center gap-2 py-2.5 rounded-lg font-medium text-sm transition-all
-          ${lastSent
-            ? 'bg-performance-green/20 border border-performance-green/30 text-performance-green'
-            : 'bg-primary-blue hover:bg-primary-blue/80 text-white'
-          }
-          disabled:opacity-50 disabled:cursor-not-allowed
-        `}
+        variant={lastSent ? 'secondary' : 'primary'}
+        fullWidth
+        bg={lastSent ? 'bg-performance-green/20' : undefined}
+        borderColor={lastSent ? 'border-performance-green/30' : undefined}
+        color={lastSent ? 'text-performance-green' : undefined}
+        icon={sending ? <Icon icon={Loader2} size={4} animate="spin" /> : lastSent ? undefined : <Icon icon={Bell} size={4} />}
       >
-        {sending ? (
-          <>
-            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-            Sending...
-          </>
-        ) : lastSent ? (
-          <>
-            ✓ Notification Sent!
-          </>
-        ) : (
-          <>
-            <Bell className="w-4 h-4" />
-            Send Demo Notification
-          </>
-        )}
-      </button>
+        {sending ? 'Sending...' : lastSent ? '✓ Notification Sent!' : 'Send Demo Notification'}
+      </Button>
 
-      <div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline mt-2">
-        <p className="text-[10px] text-gray-500">
-          <strong className="text-gray-400">Silent:</strong> Notification center only<br/>
-          <strong className="text-gray-400">Toast:</strong> Temporary popup (auto-dismisses)<br/>
-          <strong className="text-gray-400">Modal:</strong> Blocking popup (may require action)
-        </p>
-      </div>
-    </div>
+      <Box 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>
+        <Text size="xs" color="text-gray-500" block>
+          <Text weight="bold" color="text-gray-400">Toast:</Text> Temporary popup (auto-dismisses)
+        </Text>
+        <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>
   );
-}
+}