From 704ac64f635082b3367e5c17ed29469eacb92877 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Wed, 4 Dec 2019 14:03:39 +0000
Subject: [PATCH] stylesheet: move all browser banner styles into
 site-banner.scss

---
 app/assets/stylesheets/application.scss              |  2 +-
 ...outdated_browser_banner.scss => site_banner.scss} | 12 +++++++++---
 ...outdated_browser_banner.scss => site_banner.scss} |  7 ++++---
 app/views/layouts/_outdated_browser_banner.html.haml | 11 +++++------
 4 files changed, 19 insertions(+), 13 deletions(-)
 rename app/assets/stylesheets/new_design/{outdated_browser_banner.scss => site_banner.scss} (64%)
 rename app/assets/stylesheets/{outdated_browser_banner.scss => site_banner.scss} (72%)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 84ef7d75e..e9254da3e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -28,7 +28,7 @@
 // = require print
 // = require procedure
 // = require search
-// = require outdated_browser_banner
+// = require site_banner
 // = require switch_menu
 // = require autocomplete
 // = require users
diff --git a/app/assets/stylesheets/new_design/outdated_browser_banner.scss b/app/assets/stylesheets/new_design/site_banner.scss
similarity index 64%
rename from app/assets/stylesheets/new_design/outdated_browser_banner.scss
rename to app/assets/stylesheets/new_design/site_banner.scss
index 7b94f8a79..db86d4938 100644
--- a/app/assets/stylesheets/new_design/outdated_browser_banner.scss
+++ b/app/assets/stylesheets/new_design/site_banner.scss
@@ -1,21 +1,27 @@
 @import "colors";
 @import "constants";
 
-#outdated-browser-banner {
+.site-banner {
   width: 100%;
   margin: 0;
   padding: $default-padding;
   color: $black;
   background-color: $yellow;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
+
+  .container {
+    display: flex;
+    align-items: center;
+  }
 }
 
-.outdated-browser-icon {
+.site-banner-icon {
   margin-right: $default-padding;
   font-size: 30px;
   opacity: 0.7;
 }
 
-.outdated-browser-buttons {
+.site-banner-actions {
   display: flex;
   margin-left: auto;
 
diff --git a/app/assets/stylesheets/outdated_browser_banner.scss b/app/assets/stylesheets/site_banner.scss
similarity index 72%
rename from app/assets/stylesheets/outdated_browser_banner.scss
rename to app/assets/stylesheets/site_banner.scss
index c4b2eb089..d4b20a9a1 100644
--- a/app/assets/stylesheets/outdated_browser_banner.scss
+++ b/app/assets/stylesheets/site_banner.scss
@@ -1,9 +1,10 @@
-#outdated-browser-banner {
+.site-banner {
   width: 100%;
   margin: 0;
 
   color: #333333;
   background-color: #FEF3B8;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
 
   .container {
     display: flex;
@@ -13,13 +14,13 @@
   }
 }
 
-.outdated-browser-icon {
+.site-banner-icon {
   margin-right: 16px;
   font-size: 30px;
   opacity: 0.7;
 }
 
-.outdated-browser-buttons {
+.site-banner-actions {
   display: flex;
   margin-left: auto;
 }
diff --git a/app/views/layouts/_outdated_browser_banner.html.haml b/app/views/layouts/_outdated_browser_banner.html.haml
index d60b38661..ee39e191d 100644
--- a/app/views/layouts/_outdated_browser_banner.html.haml
+++ b/app/views/layouts/_outdated_browser_banner.html.haml
@@ -1,15 +1,14 @@
 -# See config/browser.rb
 - if !browser.modern? && !has_dismissed_outdated_browser_banner?
-  #outdated-browser-banner
-    .container.flex.align-center
-      .outdated-browser-icon
-        ⚠️
-      .outdated-browser-test
+  #outdated-browser-banner.site-banner
+    .container
+      .site-banner-icon ⚠️
+      .site-banner-text
         %strong
           #{browser.name} #{browser.version} est trop ancien pour utiliser demarches-simplifiees.fr.
         %br
         Certaines parties du site ne fonctionneront pas correctement.
-      .outdated-browser-buttons
+      .site-banner-actions
         = button_to 'Ignorer', dismiss_outdated_browser_path, method: :post, remote: true, class: 'button btn', title: 'Ne plus afficher cet avertissement pendant une semaine'
         %a.btn.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
           Mettre à jour mon navigateur