From e64fb4cdbdeec2d3fa2bf1219ada09e082101d8f Mon Sep 17 00:00:00 2001
From: Jordan Doig <jordan.steele.doig@gmail.com>
Date: Tue, 8 Dec 2020 22:22:46 -0700
Subject: [PATCH] Insights card styles, navbar restructuring, begin navbar
 styles

---
 pkg/dashboard/assets/css/dashboard.css   |  7 ++++
 pkg/dashboard/assets/css/main.css        | 25 +-----------
 pkg/dashboard/templates/dashboard.gohtml |  6 +--
 pkg/dashboard/templates/head.gohtml      |  1 +
 pkg/dashboard/templates/navbar.gohtml    | 48 +++++++++++++++++++++---
 5 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/pkg/dashboard/assets/css/dashboard.css b/pkg/dashboard/assets/css/dashboard.css
index a0284376..cd9f542c 100644
--- a/pkg/dashboard/assets/css/dashboard.css
+++ b/pkg/dashboard/assets/css/dashboard.css
@@ -11,6 +11,13 @@
     background-color: #CACBD2;
     padding-left: 40px;
     padding-right: 40px;
+    box-shadow: none;
+}
+.card.insights a {
+  background-color: #20162D;
+  color: #fff;
+  font-weight: bold;
+  border-radius: 2rem;
 }
 
 .filters .title,
diff --git a/pkg/dashboard/assets/css/main.css b/pkg/dashboard/assets/css/main.css
index 83c0145c..db31da81 100644
--- a/pkg/dashboard/assets/css/main.css
+++ b/pkg/dashboard/assets/css/main.css
@@ -5,34 +5,11 @@ body {
   line-height: 1.3em;
 }
 
-.navbar {
-  padding-top: 20px;
-}
-.navbar, .main-content {
+.main-content {
   width: 960px;
   margin: auto;
 }
 
-.navbar .navbar-content {
-  padding: 0px 20px;
-}
-
-.navbar .navbar-right {
-  float: right;
-}
-
-.navbar .logo {
-  height: 80px;
-}
-
-.navbar .fw-logo {
-  height: 64px;
-}
-
-.navbar a {
-  text-decoration: none;
-}
-
 .card {
   margin: 25px 20px;
   padding: 20px;
diff --git a/pkg/dashboard/templates/dashboard.gohtml b/pkg/dashboard/templates/dashboard.gohtml
index 91720785..0a039327 100644
--- a/pkg/dashboard/templates/dashboard.gohtml
+++ b/pkg/dashboard/templates/dashboard.gohtml
@@ -83,10 +83,10 @@
     </div>
   </div>
 
-  <div class="card insights">
-    <img src="" />
+  <div class="card insights py-2">
+    <img class="col-3 align-self-center" src="static/images/FW_Insights_Polaris.svg" />
     <span>Fairwinds, the company behind Polaris, now offers Fairwinds Insights, a multi-cluster, multi-user Kubernetes configuration validation and policy enforcement platform. Fairwinds Insights can help you avoid errors that lead to wasted time, compute costs, and increased risk.</span>
-    <button>Try Insights</button>
+    <a class="col-auto py-1 px-3 mt-2 align-self-center" href="https://fairwinds.com/insights?source=polaris" target="_blank">Try Insights</a>
   </div>
 
   <div class="card category">
diff --git a/pkg/dashboard/templates/head.gohtml b/pkg/dashboard/templates/head.gohtml
index b2870b38..bd885890 100644
--- a/pkg/dashboard/templates/head.gohtml
+++ b/pkg/dashboard/templates/head.gohtml
@@ -18,6 +18,7 @@
   <link rel="stylesheet" href="static/css/fontawesome-5.7.2.css">
   <link rel="stylesheet" href="static/css/dashboard.css">
   <link rel="stylesheet" href="static/css/footer.css">
+  <link rel="stylesheet" href="static/css/navbar.css">
   <script type="text/javascript" src="static/js/Chart-2.7.2.min.js"></script>
   <script type="text/javascript" src="static/js/cash-4.1.2.min.js"></script>
   <script type="text/javascript" src="static/js/main.js"></script>
diff --git a/pkg/dashboard/templates/navbar.gohtml b/pkg/dashboard/templates/navbar.gohtml
index f5073f8c..0f681c98 100644
--- a/pkg/dashboard/templates/navbar.gohtml
+++ b/pkg/dashboard/templates/navbar.gohtml
@@ -1,14 +1,50 @@
 {{define "navbar"}}
   <div class="navbar">
-    <div class="navbar-content">
-      <a href="{{ .BasePath }}">
-        <img class="logo" src="static/images/polaris-logo.png" alt="Polaris" />
-      </a>
-      <div class="navbar-right">
+    <div class="fw-nav">
+      <div class="container p-2">
         <a href="https://fairwinds.com?source=polaris" target="_blank">
-          <img class="fw-logo" src="static/images/oss-logo.png" alt="Fairwinds" />
+          <img class="fw-logo" src="static/images/white_logo_fairwinds.svg" alt="Fairwinds" />
         </a>
+        <div class="right-section col-5 p-0 d-flex justify-content-between">
+          <a href="https://github.com/FairwindsOps" target="_blank">
+            <img class="gh-logo" src="static/images/white_icon_github.svg" alt="Github" />
+          </a>
+          <a href="https://twitter.com/fairwindsops" target="_blank">
+            <img class="tw-logo" src="static/images/white_icon_twitter.svg" alt="Twitter" />
+          </a>
+          <a class="mr-5" href="mailto:sales@fairwinds.com" target="_blank">
+            <img class="em-logo" src="static/images/white_icon_email.svg" alt="Email" />
+          </a>
+          <a href="https://join.slack.com/t/fairwindscommunity/shared_invite/zt-e3c6vj4l-3lIH6dvKqzWII5fSSFDi1g" target="_blank">
+            <img class="sl-logo mr-3" src="static/images/white_icon_slack.svg" alt="Slack" />
+            <span>Join our community slack</span>
+          </a>
+        </div>
       </div>
     </div>
+    <div class="polaris-nav container p-2">
+      <div class="left-section">
+        <a href="{{ .BasePath }}">
+          <img class="logo" src="static/images/polaris_logo.svg" alt="Polaris" />
+        </a>
+        <a href="https://polaris.docs.fairwinds.com/">Docs</a>
+      </div>
+      <div class="right-section">
+        <span>Overview</span>
+        <span>Insights</span>
+        <span>Category</span>
+        <span>Namespaces</span>
+      </div>
+    </div>
+    <!-- <div class="navbar-content"> -->
+      <!-- <a href="{{ .BasePath }}"> -->
+        <!-- <img class="logo" src="static/images/polaris-logo.png" alt="Polaris" /> -->
+      <!-- </a> -->
+      <!-- <div class="navbar-right"> -->
+        <!-- <a href="https://fairwinds.com?source=polaris" target="_blank"> -->
+          <!-- <img class="fw-logo" src="static/images/oss-logo.png" alt="Fairwinds" /> -->
+        <!-- </a> -->
+      <!-- </div> -->
+    <!-- </div> -->
   </div>
 {{end}}