UX: User badges tweaks (#20408)

* UX: fix standalone badge padding

* UX: badge number formatting

* UX: copy

* DEV: Add LinkTo for the admin-badges/show count text

* UX: user badge awarded style update

---------

Co-authored-by: Martin Brennan <martin@discourse.org>

app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs

@@ -286,10 +286,10 @@
 {{#if this.grant_count}}
   <div class="content-body current-badge-actions">
     <div>
-      <LinkTo @route="badges.show" @model={{this}}>{{i18n
+      <LinkTo @route="badges.show" @model={{this}}>
-          "badges.granted"
+        {{number this.grant_count}}
-          count=this.grant_count
+        {{i18n "badges.awarded"}}
-        }}</LinkTo>
+      </LinkTo>
     </div>
   </div>
 {{/if}}

app/assets/javascripts/discourse/app/components/badge-card.hbs

@@ -41,15 +41,16 @@
       <div class="badge-summary">{{html-safe this.summary}}</div>
 
       {{#if this.displayCount}}
-        <div class="badge-granted">
+
-          {{html-safe
+        <LinkTo
-            (i18n
+          @route="badges.show"
-              "badges.granted_with_count"
+          @model={{this.badge}}
-              count=this.displayCount
+          class="badge-granted"
-              badgeUrl=this.url
+        >
-            )
+          {{number this.displayCount}}
-          }}
+          {{i18n "badges.awarded"}}
-        </div>
+        </LinkTo>
+
       {{/if}}
     </div>
   </div>

app/assets/stylesheets/common/base/user-badges.scss

@@ -132,7 +132,10 @@
   }
 
   .badge-granted {
+    display: block;
     margin-top: 0.5em;
+    color: var(--primary-medium);
+    font-size: var(--font-down-1);
   }
 
   .grant-count {
@@ -191,9 +194,6 @@
     }
 
     .badge-info {
-      display: flex;
-      flex: 1 1 auto;
-      align-items: center;
       color: var(--primary);
 
       h3 {
@@ -216,7 +216,6 @@
     }
 
     .badge-contents {
-      padding: 0 5%;
       h3 {
         font-size: var(--font-up-3);
       }

config/locales/client.en.yml

@@ -4121,9 +4121,7 @@ en:
       granted:
         one: "%{count} granted"
         other: "%{count} granted"
-      granted_with_count:
+      awarded: awarded
-        one: '<a href="%{badgeUrl}" title="%{count} granted" class="grant-count">%{count}x</a> <span class="grant-text">granted</span>'
-        other: '<a href="%{badgeUrl}" title="%{count} granted" class="grant-count">%{count}x</a> <span class="grant-text">granted</span>'
       select_badge_for_title: Select a badge to use as your title
       none: "(none)"
       successfully_granted: "Successfully granted %{badge} to %{username}"