website refactor

apps/website/components/leaderboards/RankMedal.tsx

@@ -1,8 +1,8 @@
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
 import { Text } from '@/ui/Text';
 import { Crown, Medal } from 'lucide-react';
+import React from 'react';
 
 interface RankMedalProps {
   rank: number;
@@ -12,11 +12,12 @@ interface RankMedalProps {
 
 export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
   const isTop3 = rank <= 3;
+  const variant = MedalDisplay.getVariant(rank);
   
-  const sizeMap = {
-    sm: '7',
-    md: '8',
-    lg: '10',
+  const sizePx = {
+    sm: '1.75rem',
+    md: '2rem',
+    lg: '2.5rem',
   };
 
   const textSizeMap = {
@@ -32,22 +33,23 @@ export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps
   };
 
   return (
-    <Box 
-      display="flex" 
-      alignItems="center" 
-      justifyContent="center" 
-      rounded="full" 
-      border 
-      h={sizeMap[size]}
-      w={sizeMap[size]}
-      bg={MedalDisplay.getBg(rank)}
-      color={MedalDisplay.getColor(rank)}
+    <div 
+      style={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        borderRadius: '9999px', 
+        border: '1px solid var(--ui-color-border-default)',
+        height: sizePx[size],
+        width: sizePx[size],
+        backgroundColor: 'var(--ui-color-bg-surface-muted)'
+      }}
     >
       {isTop3 && showIcon ? (
-        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} />
+        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} intent={variant as any} />
       ) : (
-        <Text weight="bold" size={textSizeMap[size]}>{rank}</Text>
+        <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
       )}
-    </Box>
+    </div>
   );
 }