website refactor

apps/website/ui/RaceStatusBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StatusBadge } from './StatusBadge';
+import { Box } from './Box';
 
 interface RaceStatusBadgeProps {
   status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
@@ -9,30 +9,52 @@ export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
   const config = {
     scheduled: {
       variant: 'info' as const,
-      label: 'Scheduled',
+      label: 'SCHEDULED',
+      color: 'text-primary-blue',
+      bg: 'bg-primary-blue/10',
+      border: 'border-primary-blue/30'
     },
     running: {
       variant: 'success' as const,
       label: 'LIVE',
+      color: 'text-performance-green',
+      bg: 'bg-performance-green/10',
+      border: 'border-performance-green/30'
     },
     completed: {
       variant: 'neutral' as const,
-      label: 'Completed',
+      label: 'COMPLETED',
+      color: 'text-gray-400',
+      bg: 'bg-gray-400/10',
+      border: 'border-gray-400/30'
     },
     cancelled: {
       variant: 'warning' as const,
-      label: 'Cancelled',
+      label: 'CANCELLED',
+      color: 'text-warning-amber',
+      bg: 'bg-warning-amber/10',
+      border: 'border-warning-amber/30'
     },
   };
 
   const badgeConfig = config[status as keyof typeof config] || {
     variant: 'neutral' as const,
-    label: status,
+    label: status.toUpperCase(),
+    color: 'text-gray-400',
+    bg: 'bg-gray-400/10',
+    border: 'border-gray-400/30'
   };
 
   return (
-    <StatusBadge variant={badgeConfig.variant}>
+    <Box 
+      px={2.5} 
+      py={0.5} 
+      rounded="none" 
+      border 
+      className={`${badgeConfig.bg} ${badgeConfig.color} ${badgeConfig.border}`}
+      style={{ fontSize: '10px', fontWeight: '800', letterSpacing: '0.05em' }}
+    >
       {badgeConfig.label}
-    </StatusBadge>
+    </Box>
   );
 }