Turning admin dashboard user counts into badges

app/assets/javascripts/admin/templates/components/dashboard-inline-table.hbs

@@ -7,12 +7,12 @@
     <div class="table-container">
       {{#unless hasBlock}}
         {{#each report.data as |data|}}
-          <div class="table-cell">
+          <div class="table-cell user-{{data.key}}">
             <span class="label">
               {{#if data.icon}}
                 {{d-icon data.icon}}
               {{/if}}
-              {{data.x}}:
+              {{data.x}}
             </span>
             <span class="value">
               {{#if data.url}}

app/assets/stylesheets/common/admin/dashboard_next.scss

@@ -382,6 +382,59 @@
   }
 }
 
+  .table-cell {
+    display: flex;
+    flex: 0 1 auto;
+    margin: 0 1em .5em 0;
+    padding: 0 .5em 0 0;
+    border: 1px solid $primary-low;
+    border-radius: 10px;
+  
+    .label {
+      display: flex;
+      align-items: center;
+      margin-right: .25em;
+      color: $primary;
+      background: $primary-very-low;
+      padding: 0 .5em;
+      justify-content: center;
+      border-radius: 10px 0 0 10px;
+      .d-icon {
+        margin-right: 5px;
+        font-size: $font-down-1;
+      }
+    }
+    &.user-newuser{
+      .label {
+        color: $primary-high;
+      }
+    }
+    &.user-basic , &.user-member {
+      border-color: $bronze;
+      .label {
+        border-color: $bronze;        
+        background: $bronze;
+        color: $secondary;
+      } 
+    }
+    &.user-regular {
+      border-color: $silver;
+      .label {
+        border-color: $silver;        
+        background: $silver;
+        color: $secondary;
+      } 
+    }
+    &.user-leader { 
+      border-color: $gold;
+      .label {
+        background: $gold;
+        border-color: $gold;      
+        color: $secondary;
+      }
+    }
+  }
+
 .dashboard-inline-table {
   margin-left: 5%;
   margin-bottom: 1.25em;
@@ -396,20 +449,6 @@
     flex-wrap: wrap;
     flex: 1 1 auto;
   }
-
-  .table-cell {
-    display: flex;
-    flex: 0 1 auto;
-    margin: 0 2em .5em 0;
-    .label {
-      display: flex;
-      align-items: center;
-      margin-right: .5em;
-      .d-icon {
-        margin-right: 5px;
-      }
-    }
-  }
 }
 
 .dashboard-table.activity-metrics {

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

@@ -20,15 +20,15 @@
   }
 
   &.badge-type-gold .fa {
-    color: rgb(231, 195, 0) !important;
+    color: $gold !important;
   }
 
   &.badge-type-silver .fa {
-    color: #c0c0c0 !important;
+    color: $silver !important;
   }
 
   &.badge-type-bronze .fa {
-    color: #cd7f32 !important;
+    color: $bronze !important;
   }
 
   &.disabled {

app/assets/stylesheets/common/foundation/variables.scss

@@ -22,6 +22,13 @@ $twitter: #00bced !default;
 $yahoo: #810293 !default;
 $github: #6d6d6d !default;
 
+// Badge color variables
+// --------------------------------------------------
+
+$gold: rgb(231, 195, 0) !default;
+$silver: #c0c0c0 !default;
+$bronze: #cd7f32 !default;
+
 // Fonts
 // --------------------------------------------------