website refactor

apps/website/components/drivers/ProfileRaceHistory.tsx

@@ -6,6 +6,9 @@ import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Pagination } from '@/ui/Pagination';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
 import { ControlBar } from '@/ui/ControlBar';
 import { Trophy } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -55,9 +58,9 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <Stack gap={4}>
       <ControlBar>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <Group gap={2}>
           <Button
             variant={filter === 'all' ? 'primary' : 'secondary'}
             onClick={() => { setFilter('all'); setPage(1); }}
@@ -79,13 +82,13 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
           >
             Podiums
           </Button>
-        </div>
+        </Group>
       </ControlBar>
 
       <Card>
-        <div style={{ minHeight: '10rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box minHeight="10rem" display="flex" alignItems="center" justifyContent="center">
           <Text variant="low">No results found for the selected filter.</Text>
-        </div>
+        </Box>
 
         <Pagination
           currentPage={page}
@@ -93,6 +96,6 @@ export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
           onPageChange={setPage}
         />
       </Card>
-    </div>
+    </Stack>
   );
 }

apps/website/components/drivers/SkillLevelButton.tsx

@@ -2,6 +2,7 @@ import { Button } from '@/ui/Button';
 import { Icon } from '@/ui/Icon';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { Group } from '@/ui/Group';
 import { LucideIcon } from 'lucide-react';
 
 interface SkillLevelButtonProps {
@@ -28,13 +29,20 @@ export function SkillLevelButton({
       variant="ghost"
       onClick={onClick}
       fullWidth
-      className={`${bgColor} border ${borderColor} flex items-center justify-between p-3 rounded-lg h-auto`}
+      style={{ 
+        padding: '0.75rem', 
+        height: 'auto', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'space-between',
+        borderRadius: 'var(--ui-radius-lg)'
+      }}
     >
-      <Stack direction="row" align="center" gap={2}>
+      <Group gap={2}>
         <Icon icon={icon} size={4} className={color} />
-        <Text weight="medium" color="text-white">{label}</Text>
-      </Stack>
-      <Text size="sm" color="text-gray-400">{count} teams</Text>
+        <Text weight="medium" variant="high">{label}</Text>
+      </Group>
+      <Text size="sm" variant="low">{count} teams</Text>
     </Button>
   );
 }