From a8a37e46c96624c58be273bf96c5873268ee431b Mon Sep 17 00:00:00 2001
From: Connor Chan <connorjosephchan@gmail.com>
Date: Mon, 2 Nov 2020 13:53:02 -0800
Subject: [PATCH] Add banner to prompt users to participate in Slack survey

Signed-off-by: Connor Chan <connorjosephchan@gmail.com>
---
 _includes/header.html | 18 +++++++++++++++++
 css/main.scss         | 46 +++++++++++++++++++++++++++++++++++++++++++
 js/slack-popup.js     |  2 +-
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/_includes/header.html b/_includes/header.html
index 3fade5bf..f154b79f 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,3 +1,21 @@
+<div id="surveyBanner">
+  <div>
+    <span>🎉 Participate in the community survey and get entered to win a Crossplane swag box.</span>
+    <a href="https://slack.crossplane.io/?utm_campaign=Slack%20Membership&utm_source=Crossplane%20Website%20Banner&utm_medium=banner&utm_content=banner">Join our Slack to take the survey</a>
+  </div>
+  <style>
+    #header .hamburger-controls {
+      top: 135px !important;
+      z-index: 10;
+    }
+
+    @media (max-width: 48em) {
+      #header .links {
+        top: 125px !important;
+      }
+    }
+  </style>
+</div>
 <div id="header">
   <div>
     <div class="logo">
diff --git a/css/main.scss b/css/main.scss
index ff4bfb97..e7271ac4 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -395,3 +395,49 @@ body {
     }   
   }
 }
+
+/* Crossplane survey banner */
+#surveyBanner {
+  height: 75px;
+  display: flex;
+  display: -ms-flexbox;
+  justify-content: center;
+  -ms-flex-pack: center;
+  flex-direction: column;
+  -ms-flex-direction: column;
+  background: #96ffe0;
+
+  & > div {
+    text-align: center;
+    display: flex;
+    display: -ms-flexbox;
+    width: 100%;
+    justify-content: center;
+    -ms-flex-pack: center;
+    flex-direction: row;
+    -ms-flex-direction: row;
+  }
+
+  span {
+    font-weight: 900;
+  }
+
+  a {
+    margin-left: 15px;
+    color: #000;
+  }
+
+  @media (max-width: $md-width) {
+    height: 100px;
+    padding: 0 15px;
+
+    & > div {
+      flex-direction: column;
+      -ms-flex-direction: column;
+    }
+
+    span {
+      margin-bottom: 7px;
+    }
+  }
+}
diff --git a/js/slack-popup.js b/js/slack-popup.js
index 6d487d92..9cd0a30d 100644
--- a/js/slack-popup.js
+++ b/js/slack-popup.js
@@ -65,7 +65,7 @@
 
       var ctaBtn = document.createElement('a');
       ctaBtn.classList.add('slack-popup-button', 'slack-popup-cta');
-      ctaBtn.href = 'https://slack.crossplane.io/';
+      ctaBtn.href = 'https://slack.crossplane.io/?utm_campaign=Slack%20Membership&utm_source=Crossplane%20Website%20Popup&utm_medium=popup&utm_content=popup';
       ctaBtn.innerHTML = '<img src="/images/slack-white.svg" /><span>Join Crossplane Slack</span>';
 
       var dismissBtn = document.createElement('a');