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) => (
-

setBadgeFirst(badge)}
- width="48"
- height="48"
- />
+
+

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);
+}