working but sheet styling is ugly

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

@@ -18,15 +18,15 @@ interface BadgeDisplay {
 
 interface BadgeIconProps {
   badge: Badge;
-  earned: boolean;
+  filled: boolean;
 }
 
-const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: number }) => {
+export const BadgeIcon = ({ badge, filled, size = 48 }: BadgeIconProps & { size?: number }) => {
   const [imageError, setImageError] = useState(false);
   const imagePath = `/static/img/${badge.key}.png`;
 
   if (imageError) {
-    return earned ? (
+    return filled ? (
       <MedalIcon
         size={size}
         weight="fill"
@@ -50,7 +50,7 @@ const BadgeIcon = ({ badge, earned, size = 48 }: BadgeIconProps & { size?: numbe
       onError={() => setImageError(true)}
       style={{
         objectFit: 'contain',
-        opacity: earned ? 1 : 0.4,
+        opacity: filled ? 1 : 0.4,
       }}
     />
   );
@@ -218,7 +218,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                         zIndex: 1,
                       }}
                     >
-                      <BadgeIcon badge={display.badge} earned={display.earned} />
+                      <BadgeIcon badge={display.badge} filled={display.earned} />
 
                       {showStack && (
                         <Box
@@ -256,7 +256,7 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
                 <Popover.Dropdown>
                   <Stack gap={4} align="center">
                     <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                      <BadgeIcon badge={display.badge} earned={display.earned} size={80} />
+                      <BadgeIcon badge={display.badge} filled={display.earned} size={80} />
                     </Box>
 
                     <Title order={5} ta="center">