website refactor

apps/website/components/notifications/ModalNotification.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { IconButton } from '@/ui/IconButton';
 import type { Notification, NotificationAction } from './notificationTypes';
 import {
   Bell,
@@ -13,20 +17,17 @@ import {
   Flag,
   AlertCircle,
   Clock,
-  TrendingUp,
-  Award,
   Star,
   Medal,
-  Target,
-  Zap,
   X,
 } from 'lucide-react';
-import Button from '@/ui/Button';
+import { Button } from '@/ui/Button';
 
 interface ModalNotificationProps {
   notification: Notification;
   onAction: (notification: Notification, actionId?: string) => void;
   onDismiss?: (notification: Notification) => void;
+  onNavigate?: (href: string) => void;
 }
 
 const notificationIcons: Record<string, typeof Bell> = {
@@ -80,13 +81,13 @@ const notificationColors: Record<string, { bg: string; border: string; text: str
   },
 };
 
-export default function ModalNotification({
+export function ModalNotification({
   notification,
   onAction,
   onDismiss,
+  onNavigate,
 }: ModalNotificationProps) {
   const [isVisible, setIsVisible] = useState(false);
-  const router = useRouter();
 
   useEffect(() => {
     // Animate in
@@ -108,19 +109,19 @@ export default function ModalNotification({
 
   const handleAction = (action: NotificationAction) => {
     onAction(notification, action.id);
-    if (action.href) {
-      router.push(action.href);
+    if (action.href && onNavigate) {
+      onNavigate(action.href);
     }
   };
 
   const handlePrimaryAction = () => {
     onAction(notification, 'primary');
-    if (notification.actionUrl) {
-      router.push(notification.actionUrl);
+    if (notification.actionUrl && onNavigate) {
+      onNavigate(notification.actionUrl);
     }
   };
 
-  const Icon = notificationIcons[notification.type] || AlertCircle;
+  const NotificationIcon = notificationIcons[notification.type] || AlertCircle;
   const colors = notificationColors[notification.type] || {
     bg: 'bg-warning-amber/10',
     border: 'border-warning-amber/50',
@@ -160,7 +161,6 @@ export default function ModalNotification({
   // Special celebratory styling for race notifications
   const isRaceNotification = notification.type.startsWith('race_');
   const isPerformanceSummary = notification.type === 'race_performance_summary';
-  const isFinalResults = notification.type === 'race_final_results';
 
   const provisionalRatingChange = getNumber(data.provisionalRatingChange) ?? 0;
   const finalRatingChange = getNumber(data.finalRatingChange) ?? 0;
@@ -168,144 +168,192 @@ export default function ModalNotification({
   const protestId = getString(data.protestId);
 
   return (
-    <div
-      className={`
-        fixed inset-0 z-[100] flex items-center justify-center p-4
-        transition-all duration-300
-        ${isVisible ? 'bg-black/70 backdrop-blur-sm' : 'bg-transparent'}
-        ${isRaceNotification ? 'bg-gradient-to-br from-black/80 via-indigo-900/10 to-black/80' : ''}
-      `}
+    <Box
+      position="fixed"
+      inset="0"
+      zIndex={100}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      p={4}
+      transition
+      bg={isVisible ? 'bg-black/70' : 'bg-transparent'}
+      // eslint-disable-next-line gridpilot-rules/component-classification
+      className={isVisible ? 'backdrop-blur-sm' : ''}
+      hoverBg={isRaceNotification ? 'bg-gradient-to-br from-black/80 via-indigo-900/10 to-black/80' : undefined}
     >
-      <div
-        className={`
-          w-full max-w-lg transform transition-all duration-300
-          ${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}
-          ${isRaceNotification ? '' : ''}
-        `}
+      <Box
+        w="full"
+        maxWidth="lg"
+        transform
+        transition
+        opacity={isVisible ? 1 : 0}
+        // eslint-disable-next-line gridpilot-rules/component-classification
+        className={isVisible ? 'scale-100' : 'scale-95'}
       >
-        <div
-          className={`
-            rounded-2xl border-2 ${colors.border} ${colors.bg}
-            backdrop-blur-md ${colors.glow}
-            overflow-hidden
-            ${isRaceNotification ? 'relative' : ''}
-          `}
+        <Box
+          rounded="2xl"
+          border
+          borderWidth="2px"
+          borderColor={colors.border}
+          bg={colors.bg}
+          shadow={colors.glow}
+          overflow="hidden"
+          position={isRaceNotification ? 'relative' : undefined}
+          // eslint-disable-next-line gridpilot-rules/component-classification
+          className="backdrop-blur-md"
         >
           {/* Header with pulse animation */}
-          <div className={`relative px-6 py-4 ${colors.bg} border-b ${colors.border} ${isRaceNotification ? 'bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent' : ''}`}>
-            {/* Subtle pulse ring */}
-            <div className="absolute top-4 left-6 w-12 h-12">
-              <div className={`absolute inset-0 rounded-full ${colors.bg} opacity-10`} />
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-4">
-                <div className={`relative p-3 rounded-xl ${colors.bg} border ${colors.border} ${isRaceNotification ? 'shadow-lg' : ''}`}>
-                  <Icon className={`w-6 h-6 ${colors.text}`} />
-                </div>
-                <div>
-                  <p className={`text-xs font-semibold uppercase tracking-wide ${isRaceNotification ? 'text-yellow-400' : 'text-gray-400'}`}>
+          <Box 
+            px={6} 
+            py={4} 
+            bg={colors.bg} 
+            borderBottom 
+            borderColor={colors.border}
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className={isRaceNotification ? 'bg-gradient-to-r from-transparent via-yellow-500/10 to-transparent' : ''}
+          >
+            <Box display="flex" alignItems="center" justifyContent="between">
+              <Box display="flex" alignItems="center" gap={4}>
+                <Box 
+                  p={3} 
+                  rounded="xl" 
+                  bg={colors.bg} 
+                  border 
+                  borderColor={colors.border}
+                  shadow={isRaceNotification ? 'lg' : undefined}
+                >
+                  <Icon icon={NotificationIcon} size={6} color={colors.text} />
+                </Box>
+                <Box>
+                  <Text 
+                    size="xs" 
+                    weight="semibold" 
+                    transform="uppercase" 
+                    // eslint-disable-next-line gridpilot-rules/component-classification
+                    className="tracking-wide"
+                    color={isRaceNotification ? 'text-yellow-400' : 'text-gray-400'}
+                  >
                     {isRaceNotification ? (isPerformanceSummary ? '🏁 Race Complete!' : '🏆 Championship Update') : 'Action Required'}
-                  </p>
-                  <h2 className={`text-xl font-bold ${isRaceNotification ? 'text-white' : 'text-white'}`}>
+                  </Text>
+                  <Heading level={2} fontSize="xl" weight="bold" color="text-white">
                     {notification.title}
-                  </h2>
-                </div>
-              </div>
+                  </Heading>
+                </Box>
+              </Box>
 
               {/* X button for dismissible notifications */}
               {onDismiss && !notification.requiresResponse && (
-                <button
+                <IconButton
+                  icon={X}
                   onClick={() => onDismiss(notification)}
-                  className="p-2 rounded-full hover:bg-white/10 transition-colors"
-                  aria-label="Dismiss notification"
-                >
-                  <X className="w-5 h-5 text-gray-400 hover:text-white" />
-                </button>
+                  variant="ghost"
+                  size="md"
+                  color="text-gray-400"
+                  title="Dismiss notification"
+                />
               )}
-            </div>
-          </div>
+            </Box>
+          </Box>
 
           {/* Body */}
-          <div className={`px-6 py-5 ${isRaceNotification ? 'bg-gradient-to-b from-transparent to-yellow-500/5' : ''}`}>
-            <p className={`leading-relaxed ${isRaceNotification ? 'text-white text-lg font-medium' : 'text-gray-300'}`}>
+          <Box 
+            px={6} 
+            py={5}
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className={isRaceNotification ? 'bg-gradient-to-b from-transparent to-yellow-500/5' : ''}
+          >
+            <Text 
+              leading="relaxed" 
+              size={isRaceNotification ? 'lg' : 'base'}
+              weight={isRaceNotification ? 'medium' : 'normal'}
+              color={isRaceNotification ? 'text-white' : 'text-gray-300'}
+              block
+            >
               {notification.message}
-            </p>
+            </Text>
 
             {/* Race performance stats */}
             {isRaceNotification && (
-              <div className="mt-4 grid grid-cols-2 gap-3">
-                <div className="bg-black/20 rounded-lg p-3 border border-yellow-400/20">
-                  <div className="text-xs text-yellow-300 font-medium mb-1">POSITION</div>
-                  <div className="text-2xl font-bold text-white">
+              <Box display="grid" gridCols={2} gap={3} mt={4}>
+                <Box bg="bg-black/20" rounded="lg" p={3} border borderColor="border-yellow-400/20">
+                  <Text size="xs" color="text-yellow-300" weight="medium" block mb={1}>POSITION</Text>
+                  <Text size="2xl" weight="bold" color="text-white" block>
                     {notification.data?.position === 'DNF' ? 'DNF' : `P${notification.data?.position || '?'}`}
-                  </div>
-                </div>
-                <div className="bg-black/20 rounded-lg p-3 border border-yellow-400/20">
-                  <div className="text-xs text-yellow-300 font-medium mb-1">RATING CHANGE</div>
-                  <div className={`text-2xl font-bold ${ratingChange >= 0 ? 'text-green-400' : 'text-red-400'}`}>
+                  </Text>
+                </Box>
+                <Box bg="bg-black/20" rounded="lg" p={3} border borderColor="border-yellow-400/20">
+                  <Text size="xs" color="text-yellow-300" weight="medium" block mb={1}>RATING CHANGE</Text>
+                  <Text size="2xl" weight="bold" color={ratingChange >= 0 ? 'text-green-400' : 'text-red-400'} block>
                     {ratingChange >= 0 ? '+' : ''}
                     {ratingChange}
-                  </div>
-                </div>
-              </div>
+                  </Text>
+                </Box>
+              </Box>
             )}
 
             {/* Deadline warning */}
             {hasDeadline && !isRaceNotification && (
-              <div className="mt-4 flex items-center gap-2 px-4 py-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
-                <Clock className="w-5 h-5 text-warning-amber" />
-                <div>
-                  <p className="text-sm font-medium text-warning-amber">Response Required</p>
-                  <p className="text-xs text-gray-400">
+              <Box mt={4} display="flex" alignItems="center" gap={2} px={4} py={3} rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30">
+                <Icon icon={Clock} size={5} color="text-warning-amber" />
+                <Box>
+                  <Text size="sm" weight="medium" color="text-warning-amber" block>Response Required</Text>
+                  <Text size="xs" color="text-gray-400" block>
                     Please respond by {deadline ? deadline.toLocaleDateString() : ''} at {deadline ? deadline.toLocaleTimeString() : ''}
-                  </p>
-                </div>
-              </div>
+                  </Text>
+                </Box>
+              </Box>
             )}
 
             {/* Additional context from data */}
             {protestId && (
-              <div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-                <p className="text-xs text-gray-500 mb-1">Related Protest</p>
-                <p className="text-sm text-gray-300 font-mono">
+              <Box mt={4} p={3} rounded="lg" bg="bg-iron-gray/50" border borderColor="border-charcoal-outline">
+                <Text size="xs" color="text-gray-500" block mb={1}>Related Protest</Text>
+                <Text size="sm" color="text-gray-300" font="mono" block>
                   {protestId}
-                </p>
-              </div>
+                </Text>
+              </Box>
             )}
-
-          </div>
+          </Box>
 
           {/* Actions */}
-          <div className={`px-6 py-4 border-t ${isRaceNotification ? (isPerformanceSummary ? 'border-yellow-400/60 bg-gradient-to-r from-yellow-500/10 to-orange-500/10' : 'border-purple-400/60 bg-gradient-to-r from-purple-500/10 to-pink-500/10') : 'border-charcoal-outline bg-iron-gray/30'}`}>
-            {notification.actions && notification.actions.length > 0 ? (
-              <div className="flex flex-wrap gap-3 justify-end">
-                {notification.actions.map((action, index) => (
+          <Box 
+            px={6} 
+            py={4} 
+            borderTop 
+            borderColor={isRaceNotification ? (isPerformanceSummary ? 'border-yellow-400/60' : 'border-purple-400/60') : 'border-charcoal-outline'}
+            bg={isRaceNotification ? undefined : 'bg-iron-gray/30'}
+            // eslint-disable-next-line gridpilot-rules/component-classification
+            className={isRaceNotification ? (isPerformanceSummary ? 'bg-gradient-to-r from-yellow-500/10 to-orange-500/10' : 'bg-gradient-to-r from-purple-500/10 to-pink-500/10') : ''}
+          >
+            <Box display="flex" flexWrap="wrap" gap={3} justifyContent="end">
+              {notification.actions && notification.actions.length > 0 ? (
+                notification.actions.map((action, index) => (
                   <Button
                     key={index}
                     variant={action.type === 'primary' ? 'primary' : 'secondary'}
                     onClick={() => handleAction(action)}
-                    className={`${action.type === 'danger' ? 'bg-red-500 hover:bg-red-600 text-white' : ''} ${isRaceNotification ? 'shadow-lg hover:shadow-yellow-400/30' : ''}`}
+                    bg={action.type === 'danger' ? 'bg-red-500' : undefined}
+                    color={action.type === 'danger' ? 'text-white' : undefined}
+                    shadow={isRaceNotification ? 'lg' : undefined}
                   >
                     {action.label}
                   </Button>
-                ))}
-              </div>
-            ) : (
-              <div className="flex flex-wrap gap-3 justify-end">
-                {isRaceNotification ? (
+                ))
+              ) : (
+                isRaceNotification ? (
                   <>
                     <Button
                       variant="secondary"
                       onClick={() => (onDismiss ? onDismiss(notification) : onAction(notification, 'dismiss'))}
-                      className="shadow-lg hover:shadow-yellow-400/30"
+                      shadow="lg"
                     >
                       Dismiss
                     </Button>
                     <Button
                       variant="secondary"
                       onClick={() => handleAction({ id: 'share', label: 'Share Achievement', type: 'secondary' })}
-                      className="shadow-lg hover:shadow-yellow-400/30"
+                      shadow="lg"
                     >
                       🎉 Share
                     </Button>
@@ -320,21 +368,21 @@ export default function ModalNotification({
                   <Button variant="primary" onClick={handlePrimaryAction}>
                     {notification.actionUrl ? 'View Details' : 'Acknowledge'}
                   </Button>
-                )}
-              </div>
-            )}
-          </div>
+                )
+              )}
+            </Box>
+          </Box>
 
           {/* Cannot dismiss warning */}
           {notification.requiresResponse && !isRaceNotification && (
-            <div className="px-6 py-2 bg-red-500/10 border-t border-red-500/20">
-              <p className="text-xs text-red-400 text-center">
+            <Box px={6} py={2} bg="bg-red-500/10" borderTop borderColor="border-red-500/20">
+              <Text size="xs" color="text-red-400" textAlign="center" block>
                 ⚠️ This notification requires your action and cannot be dismissed
-              </p>
-            </div>
+              </Text>
+            </Box>
           )}
-        </div>
-      </div>
-    </div>
+        </Box>
+      </Box>
+    </Box>
   );
 }