From ab46a05d777a4bba30b35cb9c7aa71cad7d3faa7 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Thu, 23 Feb 2023 09:21:26 +0700
Subject: [PATCH] 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>
---
 .../addon/templates/admin-badges/show.hbs     |  8 ++++----
 .../discourse/app/components/badge-card.hbs   | 19 ++++++++++---------
 .../stylesheets/common/base/user-badges.scss  |  7 +++----
 config/locales/client.en.yml                  |  4 +---
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs b/app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs
index d73d41dad94..086560451bb 100644
--- a/app/assets/javascripts/admin/addon/templates/admin-badges/show.hbs
+++ b/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
-          "badges.granted"
-          count=this.grant_count
-        }}</LinkTo>
+      <LinkTo @route="badges.show" @model={{this}}>
+        {{number this.grant_count}}
+        {{i18n "badges.awarded"}}
+      </LinkTo>
     </div>
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/badge-card.hbs b/app/assets/javascripts/discourse/app/components/badge-card.hbs
index 4a6fe7a13c3..eca0ebef940 100644
--- a/app/assets/javascripts/discourse/app/components/badge-card.hbs
+++ b/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
-            (i18n
-              "badges.granted_with_count"
-              count=this.displayCount
-              badgeUrl=this.url
-            )
-          }}
-        </div>
+
+        <LinkTo
+          @route="badges.show"
+          @model={{this.badge}}
+          class="badge-granted"
+        >
+          {{number this.displayCount}}
+          {{i18n "badges.awarded"}}
+        </LinkTo>
+
       {{/if}}
     </div>
   </div>
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index acc9f026310..204330fb770 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/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);
       }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 61c6647334f..4bc3d13b707 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4121,9 +4121,7 @@ en:
       granted:
         one: "%{count} granted"
         other: "%{count} granted"
-      granted_with_count:
-        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>'
+      awarded: awarded
       select_badge_for_title: Select a badge to use as your title
       none: "(none)"
       successfully_granted: "Successfully granted %{badge} to %{username}"