From 55c019f77610f191bf24ca7d752ae294f7e15d77 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 12 Dec 2017 10:40:16 -0500
Subject: [PATCH] UX: Cleaning up staff counters on user profiles

---
 .../javascripts/discourse/templates/user.hbs  | 10 +++++-----
 app/assets/stylesheets/common/base/user.scss  | 20 +++++++++----------
 app/assets/stylesheets/desktop/user.scss      |  1 -
 app/assets/stylesheets/mobile/user.scss       |  5 -----
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs
index ce87eae68b6..040de2143d0 100644
--- a/app/assets/javascripts/discourse/templates/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user.hbs
@@ -5,27 +5,27 @@
     {{#unless collapsedInfo}}
     <div class='staff-counters'>
       {{#if model.number_of_flags_given}}
-        <div><span class="helpful-flags">{{model.number_of_flags_given}}</span>&nbsp;{{i18n 'user.staff_counters.flags_given'}}</div>
+        <div><span class="helpful-flags">{{model.number_of_flags_given}}</span>{{i18n 'user.staff_counters.flags_given'}}</div>
       {{/if}}
       {{#if model.number_of_flagged_posts}}
         <div>
           {{#link-to 'user.flaggedPosts' model}}
-            <span class="flagged-posts">{{model.number_of_flagged_posts}}</span>&nbsp;{{i18n 'user.staff_counters.flagged_posts'}}
+            <span class="flagged-posts">{{model.number_of_flagged_posts}}</span>{{i18n 'user.staff_counters.flagged_posts'}}
           {{/link-to}}
         </div>
       {{/if}}
       {{#if model.number_of_deleted_posts}}
         <div>
           {{#link-to 'user.deletedPosts' model}}
-            <span class="deleted-posts">{{model.number_of_deleted_posts}}</span>&nbsp;{{i18n 'user.staff_counters.deleted_posts'}}
+            <span class="deleted-posts">{{model.number_of_deleted_posts}}</span>{{i18n 'user.staff_counters.deleted_posts'}}
           {{/link-to}}
         </div>
       {{/if}}
       {{#if model.number_of_suspensions}}
-        <div><span class="suspensions">{{model.number_of_suspensions}}</span>&nbsp;{{i18n 'user.staff_counters.suspensions'}}</div>
+        <div><span class="suspensions">{{model.number_of_suspensions}}</span>{{i18n 'user.staff_counters.suspensions'}}</div>
       {{/if}}
       {{#if model.warnings_received_count}}
-        <div><span class="warnings-received">{{model.warnings_received_count}}</span>&nbsp;{{i18n 'user.staff_counters.warnings_received'}}</div>
+        <div><span class="warnings-received">{{model.warnings_received_count}}</span>{{i18n 'user.staff_counters.warnings_received'}}</div>
       {{/if}}
     </div>
     {{/unless}}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index df9ab3e4883..d3a415b75ec 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -181,21 +181,21 @@
   }
 
   .staff-counters {
-    text-align: left;
     background: $primary;
-
-    > div {
+    color: $secondary;    
+    display: flex;
+    padding: 10px;    
+    > div, > div a {
+      display: flex;
+      align-items: baseline;
+      flex: 0 1 auto;
       margin: 0 10px 0 0;
-      display: inline-block;
-      padding: 5px 0;
-      &:first-of-type {
-        padding-left: 10px;
-      }
       span {
-        padding: 1px 5px;
+        padding: 1px 6px;
         border-radius: 10px;
+        margin-right: 5px;        
       }
-    }
+    }  
 
     a {
       color: $secondary;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 2e07197d0c4..c3fec738e98 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -242,7 +242,6 @@
   }
 
   .staff-counters {
-    color: $secondary;
     margin-bottom: 20px;
   }
 
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 80b9cec1501..2a29a58525f 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -175,11 +175,6 @@
     }
   }
 
-  .staff-counters {
-    padding: 7px 0;
-    display: inline;
-  }
-
   .user-field {
     label {
       width: auto;