Fix #803 - Exit out of survey banner (#954)

* Fix #803 - Exit out of survey banner * Add .hidden to micro-survey-banner class * Fix #803 - Retired utility classes, moved to SCSS * :wq ix #803 - Added Protocol * Fix #803 - Add patch with protocol values * Fix #803 - Change .hidden to .is-hidden * Replace .hidden to .is-hidden * Change var to const * Make exit button black, change .hidden to .is-hidden
mozilla · Aug 5, 2021 · 5da38c5 · 5da38c5
1 parent 9a9ed09
commit 5da38c5
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 25 deletions.
diff --git a/privaterelay/templates/includes/header.html b/privaterelay/templates/includes/header.html
@@ -15,9 +15,11 @@
     <div class="recruitment-banner">
       <a id="recruitment-banner" class="text-link" href="{{ settings.RECRUITMENT_BANNER_LINK }}" target="_blank" rel="noopener noreferrer" data-ga="send-ga-funnel-pings" data-event-category="Recruitment" data-event-label="{{ settings.RECRUITMENT_BANNER_TEXT }}">{{ settings.RECRUITMENT_BANNER_TEXT }}</a>
     </div>
-  {% endif %}
-  {% if not request.user.is_anonymous %}
-    <div id="micro-survey-banner" class="micro-survey-banner hidden">
+  {% elif not request.user.is_anonymous %}
+    <div id="micro-survey-banner" class="micro-survey-banner">
+      <button id="survey-dismiss" class="dismiss-btn">
+        <svg class="x-close-icon fill-current  text-gray" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
+      </button>
       {% comment %}
       {% now "U" as now_second %}
       {% if now_second|last == "1" or now_second|last == "6" %}

diff --git a/static/js/app.js b/static/js/app.js
@@ -525,3 +525,12 @@ function vpnBannerLogic() {
 
   vpnPromoFunctions.init();
 }
+
+//Micro Survey Banner
+function dismissSurvey() {
+	const survey_banner = document.getElementById("micro-survey-banner");
+	survey_banner.classList.toggle("is-hidden");
+};
+
+document.getElementById("survey-dismiss").addEventListener("click", dismissSurvey, false);
+
diff --git a/static/scss/partials/banners.scss b/static/scss/partials/banners.scss
@@ -8,7 +8,7 @@
     background: rgba(255,255,255,.1);
 }
 
-.micro-survey-banner.hidden {
+.micro-survey-banner.is-hidden {
     display: none;
 }
 
@@ -87,3 +87,29 @@
         display: none;
     }
 }
+
+
+.dismiss-btn {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: $spacing-md;
+    margin: auto;
+    outline: none;
+    border: none;
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    background-color: transparent;
+    padding: $spacing-xs;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: $spacing-2xl;
+
+    .x-close-icon path {
+      fill: $color-black !important; 
+    }
+
+  }
diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -323,7 +323,6 @@ button:active {
   cursor: not-allowed;
 }
 
-
 .main-list {
   max-width: $content-xl;
   margin: auto;
@@ -1990,22 +1989,3 @@ ul.messages {
   text-align: center;
 }
 
-.dismiss {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 1rem;
-  margin: auto;
-  outline: none;
-  border: none;
-  height: 32px;
-  width: 32px;
-  border-radius: 50%;
-  padding: 5px;
-  background-color: transparent;
-
-  .x-close-icon path {
-    fill: $color-white !important; 
-  }
-
-}
diff --git a/static/scss/partials/vpn-promo.scss b/static/scss/partials/vpn-promo.scss
@@ -3,7 +3,7 @@ body {
   --vpn-purple: #C5C8FB;
 }
 
-.vpn-promo-banner + .micro-survey-banner {
+.vpn-promo-banner + .micro-survey-banner.is-hidden {
   display: none;
 }
 
@@ -31,6 +31,14 @@ body {
   display: none;
 }
 
+.vpn-promo-banner.closed + .micro-survey-banner {
+  display: block;
+}
+
+.vpn-promo-banner.closed + .micro-survey-banner.is-hidden {
+  display: none;
+}
+
 .vpn-promo-banner-wrapper {
   max-width: $content-lg;
   margin: 0 auto;