diff --git a/app/routes/u.$identifier/index.tsx b/app/routes/u.$identifier/index.tsx index cd18d77f3..dc13cbd19 100644 --- a/app/routes/u.$identifier/index.tsx +++ b/app/routes/u.$identifier/index.tsx @@ -89,15 +89,19 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) { {smallBadges.length > 0 ? (
{smallBadges.map((badge) => ( - {badge.displayName} setBadgeFirst(badge)} - width="48" - height="48" - /> +
+ {badge.displayName} setBadgeFirst(badge)} + width="48" + height="48" + /> + {badge.count > 1 ? ( +
x{badge.count}
+ ) : null} +
))}
) : null} @@ -110,5 +114,6 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) { } function badgeExplanationText(badge: Unpacked) { - return `Awarded for winning ${badge.displayName}`; + const countString = badge.count > 1 ? ` (x${badge.count})` : ""; + return `Awarded for winning ${badge.displayName}${countString}`; } diff --git a/app/styles/global.css b/app/styles/global.css index bcd85bb7c..ed2c18cb9 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -34,6 +34,7 @@ --fonts-sm: 0.92rem; --fonts-xs: 0.8rem; --fonts-xxs: 0.7rem; + --fonts-xxxs: 0.6rem; --extra-bold: 700; --bold: 600; --semi-bold: 500; diff --git a/app/styles/u.css b/app/styles/u.css index 122caa94c..d68fcf74a 100644 --- a/app/styles/u.css +++ b/app/styles/u.css @@ -104,7 +104,7 @@ align-items: center; justify-content: center; cursor: pointer; - gap: var(--s-1); + gap: var(--s-3); } .u__badge-explanation { @@ -112,3 +112,19 @@ font-size: var(--fonts-xs); text-align: center; } + +.u__small-badge-container { + position: relative; +} + +.u__small-badge-count { + position: absolute; + top: 0; + right: 0; + margin-top: -10px; + margin-right: auto; + margin-left: auto; + color: var(--theme-secondary); + font-size: var(--fonts-xxxs); + font-weight: var(--bold); +}