jeremy/update styling for announcement banner (#9777)

* update styling for announcement banner * add id for hyperlink * fix: responsive view Co-authored-by: Graham Dixon <graham@gdixon.co.uk>
gitcoinco · Dec 1, 2021 · 0043114 · 0043114
1 parent 921552d
commit 0043114
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/app/assets/v2/js/base.js b/app/assets/v2/js/base.js
@@ -150,15 +150,15 @@ document.addEventListener('DOMContentLoaded', function() {
   var $top_nav_notif = $('#top_nav_notification');
   var top_nav_salt = document.nav_salt;
   var remove_top_row = function() {
-    $top_nav_notif.parents('.row').remove();
+    $top_nav_notif.parents('.bottom_notification').remove();
     localStorage['top_nav_notification_remove_' + top_nav_salt] = true;
   };
 
   // display (if it holds a message and hasn't been closed) or remove #top_nav_notification
   if (top_nav_salt == 0 || localStorage['top_nav_notification_remove_' + top_nav_salt]) {
     remove_top_row();
   } else {
-    $top_nav_notif.parents('.row').removeClass('d-none');
+    $top_nav_notif.parents('.bottom_notification').removeClass('d-none');
   }
   $top_nav_notif.click(remove_top_row);
 

diff --git a/app/assets/v2/scss/base.scss b/app/assets/v2/scss/base.scss
@@ -507,12 +507,11 @@ input[type=text].loading {
 
 .bottom_notification {
   padding: 8px 30px;
-  background: #6F3FF5;
-  color: white;
+  background: #F0EBFF;
+  color: black;
   width: 100%;
   margin-left: 0px;
   font-size: 16px;
-  padding-right: 50px;
 }
 
 .bottom_notification-beyond {
@@ -545,8 +544,8 @@ input[type=text].loading {
 }
 
 .bottom_notification a {
-  color: currentColor;
-  text-decoration: underline;
+  color: #6F3FF5;
+  text-decoration: none;
   margin-left: 5px;
 }
 

diff --git a/app/grants/templates/grants/landing/active_clr_round.html b/app/grants/templates/grants/landing/active_clr_round.html
@@ -4,7 +4,7 @@
 <div class="container-fluid grants-container">
   <div class="container">
     <div class="mx-0 mb-4 text-center text-md-left">
-      <h4 class="font-weight-bold mb-2">Discover Match Pools</h4>
+      <h4 class="font-weight-bold mb-2" id="match-pools">Discover Match Pools</h4>
       <p class="font-subheader">Match pool categories curated by the Gitcoin Dao and community</p>
     </div>
 

diff --git a/app/retail/templates/shared/top_nav.html b/app/retail/templates/shared/top_nav.html
@@ -19,15 +19,16 @@
 
 
 <!--- Top Row Notification -->
-<div class="row bottom_notification font-caption d-none" style="text-align: center;">
-  <script>
-    document.nav_salt = {{ nav_salt|safe }};
-  </script>
-  <span style="text-align: center; margin: auto;">
-    {{ header_msg|safe }}
-  </span>
-  <span style="cursor: pointer;" id="top_nav_notification">
-      &times;
-  </span>
+<div class="bottom_notification d-none">
+  <div class="row p-0 container-lg m-auto">
+    <script>
+      document.nav_salt = {{ nav_salt|safe }};
+    </script>
+    <span class="col m-auto text-center">
+      {{ header_msg|safe }}
+    </span>
+    <span class="cursor-pointer col-auto text-right" id="top_nav_notification">
+        &times;
+    </span>
+  </div>
 </div>
-