app: improve the browser deprecation banner appearance

app/assets/stylesheets/new_design/outdated_browser_banner.scss

@@ -7,11 +7,12 @@
   left: 0;
   margin: 0;
   padding: $default-padding;
-  color: #FFFFFF;
-  background-color: $medium-red;
-
-  a {
-    color: $lighter-blue;
-    text-decoration: underline;
-  }
+  color: $black;
+  background-color: $yellow;
+}
+
+.outdater-browser-icon {
+  margin-right: $default-padding;
+  font-size: 30px;
+  opacity: 0.7;
 }

app/assets/stylesheets/outdated_browser_banner.scss

@@ -1,16 +1,23 @@
 #outdated-browser-banner {
-  position: fixed;
-  text-align: center;
-  line-height: 2em;
-  color: #FFFFFF;
-  background-color: #990000;
   width: 100%;
   margin: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
 
-  a {
-    color: #C3D9FF;
+  color: #333333;
+  background-color: #FEF3B8;
+
+  .container {
+    display: flex;
+    width: auto;
+    align-items: center;
+    padding: 8px 16px;
   }
 }
+
+.outdater-browser-icon {
+  margin-right: 16px;
+  font-size: 30px;
+  opacity: 0.7;
+}

app/views/layouts/_outdated_browser_banner.html.haml

@@ -1,8 +1,14 @@
-/ See config/browser.rb
+-# See config/browser.rb
 - if !browser.modern?
   #outdated-browser-banner
-    .container
-      Attention, votre navigateur (#{browser.name} #{browser.version}) est trop ancien pour utiliser demarches-simplifiees.fr : certaines parties du site ne fonctionneront pas correctement. Nous vous recommandons fortement de
-      %a{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }mettre à jour votre navigateur
-      %span<>
-        \.
+    .container.flex.align-center
+      .outdater-browser-icon
+        ⚠️
+      .outdated-browser-test
+        %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{ style: 'margin-left: auto' }
+        %a.button.primary{ href: "https://browser-update.org/fr/update.html", target: "_blank", rel: "noopener" }
+          Mettre à jour mon navigateur