adding logo, updating colors to match

FairwindsOps · Feb 6, 2019 · 2fd6374 · 2fd6374
1 parent 19782d0
commit 2fd6374
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 33 deletions.
diff --git a/pkg/dashboard/templates/charts.gohtml b/pkg/dashboard/templates/charts.gohtml
@@ -20,7 +20,10 @@
 
 <body>
   <div class="header">
-    <h1>Fairwinds</h1>
+    <h1>
+      <img class="logo" src="/static/images/logo.png" alt="Fairwinds" />
+      <span class="alt-logo">Fairwinds</span>
+    </h1>
   </div>
 
   <div class="dashboard-content">
@@ -85,23 +88,23 @@
                 "{{ $results.Summary.Successes }}",
               {{ end }}
             ],
-            backgroundColor: '#006469',
+            backgroundColor: '#230f39',
           },{
             label: 'Warning',
             data: [
               {{ range $namespace, $results := .NamespacedResults }}
                 "{{ $results.Summary.Warnings }}",
               {{ end }}
             ],
-            backgroundColor: '#AE7500',
+            backgroundColor: '#f26c21',
           },{
             label: 'Failing',
             data: [
               {{ range $namespace, $results := .NamespacedResults }}
                 "{{ $results.Summary.Failures }}",
               {{ end }}
             ],
-            backgroundColor: '#AE0400',
+            backgroundColor: '#a11f4c',
           }]
         },
         options: {
@@ -128,7 +131,7 @@
           labels: ["Passing", "Warning", "Failing"],
           datasets: [{
             data: [{{ .ClusterSummary.Successes }}, {{ .ClusterSummary.Warnings }}, {{ .ClusterSummary.Failures }}],
-            backgroundColor: ['#006469','#AE7500','#AE0400'],
+            backgroundColor: ['#230f39','#f26c21','#a11f4c'],
           }]
         },
         options: {

diff --git a/public/charts.html b/public/charts.html
@@ -17,21 +17,24 @@
 
 <body>
   <div class="header">
-    <h1>Fairwinds</h1>
+    <h1>
+      <img class="logo" src="images/logo.png" alt="Fairwinds" />
+      <span class="alt-logo">Fairwinds</span>
+    </h1>
   </div>
 
   <div class="dashboard-content">
     <div class="charts">
-        <div class="cluster-score chart-section">
-          <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>
-          <canvas id="namespaceScoreChart"></canvas>
+      <div class="cluster-score chart-section">
+        <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>
+        <canvas id="namespaceScoreChart"></canvas>
+      </div>
     </div>
 
     <div class="namespace">
@@ -92,7 +95,7 @@ <h3>Namespace: <strong>kube-system</strong></h3>
             var txt = centerConfig.text;
             var color = centerConfig.color || '#000';
             var sidePadding = centerConfig.sidePadding || 20;
-            var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
+            var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
             //Start with a base font of 30px
             ctx.font = "30px " + fontStyle;
 
@@ -113,7 +116,7 @@ <h3>Namespace: <strong>kube-system</strong></h3>
             ctx.textBaseline = 'middle';
             var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
             var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
-            ctx.font = "bold "+fontSizeToUse+"px " + fontStyle;
+            ctx.font = "bold " + fontSizeToUse + "px " + fontStyle;
             ctx.fillStyle = color;
 
             //Draw text in center
@@ -131,15 +134,15 @@ <h3>Namespace: <strong>kube-system</strong></h3>
           datasets: [{
             label: 'Passing',
             data: [118, 78, 65, 56, 43],
-            backgroundColor: '#006469',
-          },{
+            backgroundColor: '#230f39',
+          }, {
             label: 'Warning',
             data: [85, 54, 28, 23, 21],
-            backgroundColor: '#AE7500',
-          },{
+            backgroundColor: '#f26c21',
+          }, {
             label: 'Failing',
             data: [38, 24, 18, 15, 12],
-            backgroundColor: '#AE0400',
+            backgroundColor: '#a11f4c',
           }]
         },
         options: {
@@ -167,7 +170,7 @@ <h3>Namespace: <strong>kube-system</strong></h3>
         labels: ["Passing", "Warning", "Failing"],
         datasets: [{
           data: [118, 34, 28],
-          backgroundColor: ['#006469','#AE7500','#AE0400'],
+          backgroundColor: ['#230f39', '#f26c21', '#a11f4c'],
         }]
       },
       options: {
@@ -189,4 +192,4 @@ <h3>Namespace: <strong>kube-system</strong></h3>
   </script>
 </body>
 
-</html>
+</html>
diff --git a/public/css/charts.css b/public/css/charts.css
@@ -7,16 +7,24 @@ body {
 .header {
   background-color: #fff;
   color: #006369;
-  padding: 20px 30px;
+  padding: 10px 20px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }
 
 .header h1 {
+  margin: 0 auto;
+  width: 900px;
+}
+
+.header h1 .logo {
+  width: 280px;
+}
+
+.header h1 span {
   font-family: 'Lobster', sans-serif;
   font-size: 60px;
   font-weight: normal;
-  margin: 0 auto;
-  width: 900px;
+  display: none;
 }
 
 .dashboard-content {
@@ -149,19 +157,19 @@ body {
 }
 
 .namespace-content .extra .success {
-  color: #006469;
+  color: #230f39;
 }
 
 .namespace-content .extra .warning {
-  color: #AE7500;
+  color: #f26c21;
 }
 
 .namespace-content .extra .warning span {
   font-size: 15px;
 }
 
 .namespace-content .extra .failure {
-  color: #AE0400;
+  color: #a11f4c;
 }
 
 .namespace-content td.status-bar {
@@ -180,12 +188,12 @@ body {
 }
 
 .namespace-content .status .passing {
-  background-color: #006469;
+  background-color: #230f39;
   float: left;
 }
 
 .namespace-content .status .warning {
-  background-color: #AE7500;
+  background-color: #f26c21;
   float: left;
 }
 
@@ -195,7 +203,7 @@ body {
 }
 
 .namespace-content .status .failing {
-  background-color: #AE0400;
+  background-color: #a11f4c;
   width: 200px;
   animation: fadeIn 2s;
 }

diff --git a/public/images/logo.png b/public/images/logo.png