some dashboard cleanup

pkg/dashboard/templates/dashboard.gohtml

@@ -8,7 +8,7 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Muli:300,400,700" rel="stylesheet">
   <link rel="stylesheet" href="/static/css/normalize.css">
   <link rel="stylesheet" href="/static/css/main.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
@@ -27,8 +27,8 @@
     <div class="header-content">
       <img class="logo" src="/static/images/logo.png" alt="Fairwinds" />
       <div class="header-right">
-        <a href="https://reactiveops.com?source=fairwinds">
-          <span class="by-text">by</span>
+        <a href="https://reactiveops.com?source=fairwinds" target="_blank">
+          <span class="oss-text">Open Source Project By</span>
           <img class="ro-logo" src="/static/images/ro-logo.png" alt="ReactiveOps" />
         </a>
       </div>
@@ -38,13 +38,13 @@
   <div class="dashboard-content">
     <div class="charts">
       <div class="cluster-score chart-section">
-        <h3>Overall Score:</h3>
+        <h3>Overall Score</h3>
         <div style="width:510px; height: 400px; left: -100px; position: relative;">
           <canvas id="clusterScoreChart"></canvas>
         </div>
       </div>
       <div class="namespace-score chart-section">
-        <h3>Scores By Namespace:</h3>
+        <h3>Scores By Namespace</h3>
         <canvas id="namespaceScoreChart"></canvas>
       </div>
     </div>
@@ -96,7 +96,7 @@
   </div>
 
   <div class="footer">
-    &copy; 2019, <a href="https://reactiveops.com?source=fairwinds">ReactiveOps Inc.</a>
+    <a href="https://reactiveops.com?source=fairwinds"  target="_blank">&copy;2019 ReactiveOps Inc.</a>
   </div>
 
   <script src="/static/js/charts.js">

public/css/main.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  background: #eee;
+  font-family: 'Muli', 'Helvetica', 'Arial', sans-serif;
+  background: #f5f5f5;
 }
 
 .header {
   background-color: #fff;
-  padding: 10px 20px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  padding: 20px 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 }
 
 .header .header-content {
@@ -23,20 +23,19 @@ body {
   width: 280px;
 }
 
-.header span.by-text {
-  font-family: 'Lobster', sans-serif;
+.header span.oss-text {
   color: #23103A;
-  vertical-align: top;
-  display: inline-block;
-  margin-top: 4px;
+  display: block;
+  font-size: 11px;
+  margin-bottom: 3px;
 }
 
 .header a {
   text-decoration: none;
 }
 
 .header .ro-logo {
-  height: 64px;
+  height: 44px;
 }
 
 .dashboard-content {
@@ -45,18 +44,18 @@ body {
 }
 
 .charts {
-  height: 400px;
+  height: 405px;
 }
 
 .chart-section {
   float: left;
-  margin: 20px;
+  margin: 25px 20px;
   padding: 30px;
   width: 300px;
   height: 320px;
   color: #333;
   background-color: #fff;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   border-radius: 5px;
 }
 
@@ -69,8 +68,8 @@ body {
   margin: 0 0 15px;
   padding: 0 0 15px;
   font-weight: 300;
-  font-size: 30px;
-  border-bottom: 1px solid #eee;
+  font-size: 28px;
+  text-align: center;
 }
 
 #clusterScoreChart {
@@ -84,19 +83,19 @@ body {
 }
 
 .namespace {
-  margin: 20px;
+  margin: 25px 20px;
   padding: 10px 20px;
   color: #333;
   background-color: #fff;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   border-radius: 5px;
 }
 
 .namespace h3 {
   margin: 0;
   font-weight: 300;
-  font-size: 30px;
-  padding: 20px;
+  font-size: 28px;
+  padding: 15px 20px 20px;
 }
 
 .namespace h3 strong {
@@ -241,6 +240,11 @@ body {
   padding-bottom: 30px;
 }
 
-.footer, .footer a {
+.footer a {
   color: #999;
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
 }