website refactor

apps/website/components/races/SessionStatusBadge.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import React from 'react';
-import { Badge } from '@/ui/Badge';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { StatusDot } from '@/ui/StatusDot';
 
 export type SessionStatus = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'delayed';
 
@@ -10,34 +12,37 @@ interface SessionStatusBadgeProps {
 }
 
 export function SessionStatusBadge({ status }: SessionStatusBadgeProps) {
-  const config: Record<SessionStatus, { label: string; variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' }> = {
+  const config: Record<SessionStatus, { label: string; intent: 'primary' | 'success' | 'telemetry' | 'critical' | 'warning' }> = {
     scheduled: {
-      label: 'SCHEDULED',
-      variant: 'primary',
+      label: 'Scheduled',
+      intent: 'primary',
     },
     running: {
-      label: 'LIVE',
-      variant: 'success',
+      label: 'Live',
+      intent: 'success',
     },
     completed: {
-      label: 'COMPLETED',
-      variant: 'default',
+      label: 'Finished',
+      intent: 'telemetry',
     },
     cancelled: {
-      label: 'CANCELLED',
-      variant: 'danger',
+      label: 'Cancelled',
+      intent: 'critical',
     },
     delayed: {
-      label: 'DELAYED',
-      variant: 'warning',
+      label: 'Delayed',
+      intent: 'warning',
     },
   };
 
-  const { label, variant } = config[status] || config.scheduled;
+  const { label, intent } = config[status] || config.scheduled;
 
   return (
-    <Badge variant={variant} size="sm">
-      {label}
-    </Badge>
+    <Stack direction="row" align="center" gap={2}>
+      <StatusDot intent={intent} size={1.5} pulse={status === 'running'} />
+      <Text size="xs" weight="bold" uppercase variant={intent === 'telemetry' ? 'low' : intent} letterSpacing="widest">
+        {label}
+      </Text>
+    </Stack>
   );
 }