website refactor

apps/website/components/leaderboards/RankMedal.tsx

@@ -1,6 +1,7 @@
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
 import { Crown, Medal } from 'lucide-react';
 import React from 'react';
 
@@ -33,23 +34,21 @@ export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps
   };
 
   return (
-    <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)'
-      }}
+    <Surface 
+      variant="muted"
+      rounded="full"
+      border
+      height={sizePx[size]}
+      width={sizePx[size]}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     >
       {isTop3 && showIcon ? (
         <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} intent={variant as any} />
       ) : (
         <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
       )}
-    </div>
+    </Surface>
   );
 }