From d19d491d65259924ca78e490338194ea32b8ddd0 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 22 May 2018 15:33:06 -0400
Subject: [PATCH] Styling dashboard user tables

---
 .../admin/templates/dashboard_next.hbs        |  4 +--
 .../common/admin/dashboard_next.scss          | 28 +++++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/dashboard_next.hbs b/app/assets/javascripts/admin/templates/dashboard_next.hbs
index 9e75443d40d..1608d6238ce 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next.hbs
@@ -79,11 +79,11 @@
         </div>
       {{/conditional-loading-section}}
     </div>
-
+    <div class="user-metrics">
     {{dashboard-inline-table dataSourceNames="users_by_type" lastRefreshedAt=lastRefreshedAt}}
 
     {{dashboard-inline-table dataSourceNames="users_by_trust_level" lastRefreshedAt=lastRefreshedAt}}
-
+    </div>
     {{#conditional-loading-section isLoading=isLoading title=(i18n "admin.dashboard.backups")}}
       <div class="misc">
         <div class="durability">
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index 2d63c4b49be..a2a2dac1fea 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -370,28 +370,44 @@
   }
 }
 
+.user-metrics {
+  display: flex; 
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-left: -5%;
+  margin: 2em 0 .75em -5%;   // Negative margin allows for a margin when in 2-columns, 
+  .dashboard-inline-table { //  and "hides" margin when the item spans 100% width
+    flex: 1 0 auto;
+    max-width: 95%;
+  }
+}
+
 .dashboard-inline-table {
-  margin-bottom: 1em;
+  margin-left: 5%;
+  margin-bottom: 1.25em;
 
   .table-title {
     border-bottom: 1px solid $primary-low;
     margin-bottom: 1em;
-    padding-bottom: .5em;
   }
 
   .table-container {
     display: flex;
-    justify-content: space-between;
     flex-wrap: wrap;
+    flex: 1 1 auto;
   }
 
   .table-cell {
-    margin-right: .5em;
     display: flex;
-
+    flex: 0 1 auto;
+    margin: 0 2em .5em 0;
     .label {
-      font-weight: 700;
+      display: flex;
+      align-items: center;
       margin-right: .5em;
+      .d-icon {
+        margin-right: 5px;
+      }
     }
   }
 }