add branding to dashboard

FairwindsOps · Mar 25, 2019 · 715cd1c · 715cd1c
1 parent 8dbfe46
commit 715cd1c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/pkg/dashboard/templates/dashboard.gohtml b/pkg/dashboard/templates/dashboard.gohtml
@@ -21,10 +21,15 @@
 
 <body>
   <div class="header">
-    <h1>
+    <div class="header-content">
       <img class="logo" src="/static/images/logo.png" alt="Fairwinds" />
-      <span class="alt-logo">Fairwinds</span>
-    </h1>
+      <div class="header-right">
+        <a href="https://reactiveops.com?source=fairwinds">
+          <span class="by-text">by</span>
+          <img class="ro-logo" src="/static/images/ro-logo.png" alt="ReactiveOps" />
+        </a>
+      </div>
+    </div>
   </div>
 
   <div class="dashboard-content">
@@ -87,6 +92,10 @@
     {{ end }} {{/* end range .NamespacedResults */}}
   </div>
 
+  <div class="footer">
+    &copy; 2019, <a href="https://reactiveops.com?source=fairwinds">ReactiveOps Inc.</a>
+  </div>
+
   <script>
     $(function () {
       var namespaceChart = new Chart("namespaceScoreChart", {

diff --git a/public/css/main.css b/public/css/main.css
@@ -10,20 +10,33 @@ body {
   box-shadow: 0 2px 5px rgba(0,0,0,0.3);
 }
 
-.header h1 {
+.header .header-content {
   margin: 0 auto;
   width: 900px;
 }
 
-.header h1 .logo {
+.header .header-right {
+  float: right;
+}
+
+.header .logo {
   width: 280px;
 }
 
-.header h1 span {
+.header span.by-text {
   font-family: 'Lobster', sans-serif;
-  font-size: 60px;
-  font-weight: normal;
-  display: none;
+  color: #23103A;
+  vertical-align: top;
+  display: inline-block;
+  margin-top: 4px;
+}
+
+.header a {
+  text-decoration: none;
+}
+
+.header .ro-logo {
+  height: 64px;
 }
 
 .dashboard-content {
@@ -223,3 +236,12 @@ body {
   animation: fadeIn 2s;
 }
 
+.footer {
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 30px;
+}
+
+.footer, .footer a {
+  color: #999;
+}
diff --git a/public/images/ro-logo.png b/public/images/ro-logo.png