From 4b0bf35cd73faa72fce0d4732ab9f8b56af93695 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 16 May 2018 15:06:23 -0400
Subject: [PATCH] dashboard style updates

---
 .../admin/templates/dashboard_next.hbs        |  7 ++-
 .../admin/templates/version-checks.hbs        |  4 +-
 .../stylesheets/common/admin/admin_base.scss  |  4 +-
 .../common/admin/dashboard_next.scss          | 43 +++++++++++++------
 .../stylesheets/common/base/tooltip.scss      |  6 ++-
 5 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/dashboard_next.hbs b/app/assets/javascripts/admin/templates/dashboard_next.hbs
index 4ac55783a04..be8c5e3d41c 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next.hbs
@@ -136,6 +136,7 @@
   </div>
 
   <div class="section-column">
+    <div class="top-referred-topics">
     {{#dashboard-inline-table
         dataSourceNames="top_referred_topics"
         lastRefreshedAt=lastRefreshedAt
@@ -154,7 +155,9 @@
         </tr>
       {{/each}}
     {{/dashboard-inline-table}}
+    </div>
 
+    <div class="trending-search">
     {{#dashboard-inline-table
       limit=8
       dataSourceNames="trending_search"
@@ -175,8 +178,8 @@
         </td>
         </tr>
       {{/each}}
-      {{{i18n "admin.dashboard.reports.trending_search.more"}}}
     {{/dashboard-inline-table}}
-
+      {{{i18n "admin.dashboard.reports.trending_search.more"}}}
+  </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/templates/version-checks.hbs b/app/assets/javascripts/admin/templates/version-checks.hbs
index 692684d713f..abd5f4befdd 100644
--- a/app/assets/javascripts/admin/templates/version-checks.hbs
+++ b/app/assets/javascripts/admin/templates/version-checks.hbs
@@ -1,4 +1,6 @@
-      <h2>{{i18n 'admin.dashboard.version'}}</h2>
+      <div class="section-title">
+        <h2>{{i18n 'admin.dashboard.version'}}</h2>
+      </div>
       <div class="dashboard-stats version-check {{if versionCheck.critical_updates 'critical' 'normal'}}">
 
       <div class="version-number">
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index e5ccbb0b67f..f4221319d2e 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -862,10 +862,10 @@ section.details {
   display: flex;
   flex-wrap: wrap;
 
-  h2 {
+  .section-title {
     flex: 1 1 100%;
     border-bottom: 1px solid $primary-low;
-    padding-bottom: .5em;
+    margin-bottom: .5em;
   }
 }
 
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index 7285453b905..40be1271d7a 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -31,12 +31,12 @@
       }
     }
 
-    .section-column:last-child {
-      margin-left: .5em;
+    .section-column:last-child, {
+      margin-left: 1em;
     }
 
     .section-column:first-child {
-      margin-right: .5em;
+      margin-right: 1em;
     }
 
     @include small-width  {
@@ -67,11 +67,11 @@
 
   .charts {
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     flex-wrap: wrap;
 
     .chart {
-      max-width: calc(100% * 1/3);
+      max-width: calc(100% * 1/3.2);
       width: 100%;
       flex-grow: 1;
       flex-basis: 100%;
@@ -87,7 +87,7 @@
 
     .chart-canvas-container {
       position: relative;
-      padding: 0 1em 0 0;
+      margin-left: -5px;
     }
 
     .chart-canvas {
@@ -97,6 +97,8 @@
   }
 
   .misc {
+    border: 1px solid $primary-low;
+    padding: 20px;
     .durability {
       display: flex;
       justify-content: space-between;
@@ -125,10 +127,11 @@
   .status {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 1em;
+    margin-bottom: .5em;
+    padding: 0 .45em 0 0;
 
     .title {
-      font-size: $font-0;
+      font-size: $font-up-1;
       font-weight: 700;
       margin: 0;
 
@@ -137,12 +140,11 @@
       .info {
         cursor: pointer;
         margin-left: .25em;
-        color: $primary-medium;
+        color: $primary-low-mid;
       }
     }
 
     .trend {
-      margin-right: 1em;
       align-items: center;
 
       &.trending-down, &.high-trending-down {
@@ -155,7 +157,6 @@
 
       .trend-value {
         font-size: $font-up-1;
-        font-weight: 700;
       }
 
       .trend-icon {
@@ -217,6 +218,12 @@
   }
 }
 
+.top-referred-topics, .trending-search {
+  th:first-of-type {
+    text-align: left;
+  }
+}
+
 .dashboard-table {
   margin-bottom: 1em;
 
@@ -243,17 +250,17 @@
     justify-content: space-between;
 
     h3 {
-      margin: .5em 0;
+      margin: 1em 0 0 0;
     }
   }
 
   table {
     table-layout: fixed;
+    border: 1px solid $primary-low;
 
     thead {
       border: 1px solid $primary-low;
       tr {
-        background: $primary-low;
         th {
           text-align: center;
           text-overflow: ellipsis;
@@ -264,6 +271,7 @@
     }
 
     tbody {
+      border-top: none;
       tr {
         td:first-child {
           text-overflow: ellipsis;
@@ -272,16 +280,23 @@
         }
 
         td {
-          border: 1px solid $primary-low;
           text-align: center;
+          padding: 8px 20px 8px 8px;
         }
         td.left {
           text-align: left;
         }
 
+        td.title {
+          text-align: left;
+        }
+
         td.value {
+          text-align: right;
+          transform: translateX(-30%);
           i {
             display: none;
+            margin-right: -12px;
           }
 
           &.high-trending-up, &.trending-up {
diff --git a/app/assets/stylesheets/common/base/tooltip.scss b/app/assets/stylesheets/common/base/tooltip.scss
index 0469599ba7b..6dd84a8de27 100644
--- a/app/assets/stylesheets/common/base/tooltip.scss
+++ b/app/assets/stylesheets/common/base/tooltip.scss
@@ -50,9 +50,11 @@ $discourse-tooltip-border: $primary-medium;
   }
 
   .tooltip-content {
-    padding: 0 0.5em;
+    padding: 1em;
+    max-width: 250px;
     font-size: $font-down-1;
-    color: $primary-medium;
+    color: $primary;
+    box-shadow: shadow("dropdown");
     line-height: 1.4em;
   }
 }