improvements

src/features/badges/components/badge-showcase.tsx

@@ -26,7 +26,6 @@ const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: numbe
   const imagePath = `/static/img/${badge.key}.png`;
 
   if (imageError) {
-    // Fallback to icon if image fails to load
     return earned ? (
       <MedalIcon
         size={size}
@@ -142,7 +141,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
       <Box
         px="md"
         style={{
-          maxHeight: '220px',
+          maxHeight: '240px',
           overflowY: 'auto',
           overflowX: 'hidden',
           width: '100%',
@@ -180,15 +179,15 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                           <Box
                             key={i}
                             style={{
-                              width: '85px',
-                              height: '85px',
+                              width: '100px',
+                              height: '100px',
                               borderRadius: '12px',
-                              background: 'transparent',
+                              background: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))',
                               border: '2px solid var(--mantine-primary-color-5)',
                               position: 'absolute',
-                              top: `${(i + 1) * 3}px`,
-                              left: `${(i + 1) * 3}px`,
-                              opacity: 0.4 - (i * 0.15),
+                              top: `${(i + 1) * 4}px`,
+                              left: `${(i + 1) * 4}px`,
+                              opacity: 0.3 - (i * 0.1),
                               zIndex: -(i + 1),
                             }}
                           />
@@ -210,6 +209,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         justifyContent: 'center',
                         flexDirection: 'column',
                         gap: '4px',
+                        padding: 'var(--mantine-spacing-sm)',
                         position: 'relative',
                         boxShadow: display.earned
                           ? '0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-6) 20%, transparent)'
@@ -242,6 +242,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
 
                       <Text
                         size="xs"
+                        px={4}
                         fw={display.earned ? 600 : 500}
                         ta="center"
                         c={display.earned ? undefined : 'dimmed'}

src/features/players/server.ts

@@ -105,11 +105,17 @@ export const associatePlayer = createServerFn()
       const userAuthId = context.userAuthId;
       if (!userAuthId) return;
 
+      const p = await pbAdmin.getPlayer(data);
+
       await pbAdmin.updatePlayer(data, {
         auth_id: userAuthId
       });
 
-      await setUserMetadata({ data: { player_id: data } });
+      await setUserMetadata({ data: { 
+        player_id: data, 
+        first_name: p?.first_name,
+        last_name: p?.last_name
+      }});
 
       const player = await pbAdmin.getPlayer(data);
       logger.info('Associated player', player);