Fix #803 - Retired utility classes, moved to SCSS

mozilla · Jul 26, 2021 · 97ce2fe · 97ce2fe
1 parent 3646602
commit 97ce2fe
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/privaterelay/templates/includes/header.html b/privaterelay/templates/includes/header.html
@@ -14,9 +14,9 @@
       <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>
   {% elif not request.user.is_anonymous %}
-    <div id="micro-survey-banner" class="micro-survey-banner hidden">
-      <button id="survey-dismiss" class="flx center-value dismiss">
-        <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>
+    <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>
       {% 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
@@ -536,7 +536,7 @@ function vpnBannerLogic() {
 //Micro Survey Banner
 function dismissSurvey() {
 	var survey_banner = document.getElementById("micro-survey-banner");
-	survey_banner.classList.toggle("hidden");
+	survey_banner.classList.toggle("is-hidden");
 };
 
 document.getElementById("survey-dismiss").addEventListener("click", dismissSurvey, false);

diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -453,12 +453,12 @@ header {
   background: rgba(255,255,255,0.1);
 }
 
-.micro-survey-banner.hidden {
-  display: none;
+.micro-survey-banner.is-hidden {
+  display: none !important;
 }
 
 .micro-survey-options {
-  padding: 0;
+  padding-top: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2398,7 +2398,7 @@ ul.messages {
   margin: 0 auto;
 }
 
-.dismiss {
+.dismiss-btn {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2411,6 +2411,11 @@ ul.messages {
   width: 32px;
   border-radius: 50%;
   padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-left: 3em;
 }
 
 .home-messages span {