website refactor

apps/website/components/leagues/SeasonProgressWidget.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Icon } from '@/ui/Icon';
 import { ProgressBar } from '@/ui/ProgressBar';
 import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
@@ -19,14 +20,9 @@ export function SeasonProgressWidget({
 }: SeasonProgressWidgetProps) {
   return (
     <Surface
-      variant="muted"
+      variant="precision"
       rounded="xl"
-      border
       padding={6}
-      style={{
-        background: 'linear-gradient(to bottom right, #262626, rgba(38, 38, 38, 0.8))',
-        borderColor: 'rgba(34, 197, 94, 0.3)',
-      }}
     >
       <Stack gap={4}>
         {/* Header */}
@@ -38,15 +34,15 @@ export function SeasonProgressWidget({
             alignItems="center"
             justifyContent="center"
             rounded="lg"
-            bg="bg-performance-green/10"
+            bg="bg-success-green/10"
           >
-            <Trophy size={20} color="var(--performance-green)" />
+            <Icon icon={Trophy} size={4} intent="success" />
           </Stack>
           <Stack gap={0}>
-            <Text size="sm" weight="bold" color="text-white" block>
+            <Text size="sm" weight="bold" variant="high" block>
               Season Progress
             </Text>
-            <Text size="xs" color="text-gray-400" block>
+            <Text size="xs" variant="low" block>
               Race {completedRaces} of {totalRaces}
             </Text>
           </Stack>
@@ -60,10 +56,10 @@ export function SeasonProgressWidget({
             size="lg"
           />
           <Stack direction="row" justify="between" align="center">
-            <Text size="xs" color="text-gray-500">
+            <Text size="xs" variant="low">
               {percentage}% Complete
             </Text>
-            <Text size="xs" color="text-performance-green" weight="bold">
+            <Text size="xs" variant="success" weight="bold">
               {completedRaces}/{totalRaces} Races
             </Text>
           </Stack>
@@ -72,12 +68,12 @@ export function SeasonProgressWidget({
         {/* Visual Indicator */}
         <Stack
           rounded="lg"
-          bg="bg-performance-green/10"
+          bg="bg-success-green/10"
           border
-          borderColor="border-performance-green/30"
+          borderColor="border-success-green/30"
           p={3}
         >
-          <Text size="xs" color="text-performance-green" weight="medium" block>
+          <Text size="xs" variant="success" weight="medium" block>
             {percentage >= 100
               ? 'Season Complete! 🏆'
               : percentage >= 50