Make the close icon on banners more visible

Fixes #4165

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index b694247a880bfb5d4ae362b7782c5dc5ae5d674e..5f89453c62634dac4ea172294abd75013c886e8e 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -460,6 +460,11 @@ body.small-nav {
       display: block;
       width: $sidebarWidth;
     }
+
+    button.btn-close {
+      background-color: rgba(255, 255, 255, 0.5);
+      opacity: 1.0;
+    }
   }
 
   #map {

diff --git a/app/views/layouts/_banner.html.erb b/app/views/layouts/_banner.html.erb
index 298135f45c7ad295f59f42a5d5437ef04d7c5780..4f24f538d6889eb0ad6729713234c3175e743479 100644 (file)
--- a/app/views/layouts/_banner.html.erb
+++ b/app/views/layouts/_banner.html.erb
@@ -1,4 +1,4 @@
 <% unless (banner = next_banner()).nil? %>
 <%= link_to (image_tag banner[:img], :srcset => banner[:srcset], :alt => banner[:alt], :title => banner[:alt]), banner[:link] %>
-<button type="button" class="btn-close <%= "btn-close-white" if banner[:dark] %> position-absolute top-0 end-0 p-4" id="<%= banner_cookie(banner[:id]) %>" aria-label="<%= t("javascripts.close") %>"></button>
+<button type="button" class="btn-close <%= "btn-close-white" if banner[:dark] %> position-absolute top-0 end-0 m-4" id="<%= banner_cookie(banner[:id]) %>" aria-label="<%= t("javascripts.close") %>"></button>
 <% end %>