feat: notify users about new design

SocialGouv · Oct 24, 2023 · baccf3e · baccf3e
1 parent 64e17aa
commit baccf3e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 20 deletions.
diff --git a/src/client/src/components/App/Header/Header.js b/src/client/src/components/App/Header/Header.js
@@ -1,6 +1,10 @@
 import "./header.scss";
 
-import { faChevronLeft, faPlus } from "@fortawesome/free-solid-svg-icons";
+import {
+  faChevronLeft,
+  faInfoCircle,
+  faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import React from "react";
@@ -9,6 +13,7 @@ import { withRouter } from "react-router";
 import { Link } from "react-router-dom";
 
 import logo from "../../../assets/img/logo_gouv-65w38h.png";
+import Config from "../../../services/Config";
 import { resetSearch } from "../../../services/Store/actions";
 
 const Header = ({ resetSearch, location, showBetaMessage }) => {
@@ -59,16 +64,27 @@ const Header = ({ resetSearch, location, showBetaMessage }) => {
       {showBetaMessage && (
         <div className="beta-message">
           <div>
-            <span>Ce site est en beta-test. </span>
+            <span className="beta-message__nouveaute">
+              {" "}
+              <FontAwesomeIcon icon={faInfoCircle} /> Nouvelle version de notre
+              portail FCE sera déployée le 15 novembre 2023 :{" "}
+            </span>
             {location.pathname !== "/login" && (
               <span>
-                Aidez-nous à l{"'"}améliorer en{" "}
-                <a
-                  className="beta-message__feedback-link"
-                  href="#user-feedback"
-                >
-                  donnant votre avis
-                </a>
+                {`Cette mise à jour est une refonte ergonomique visant à aligner notre site avec la charte de l'État.
+                  Nous tenons à souligner que cette mise à jour n'affectera en rien le contenu actuel de notre portail,
+                  qui restera inchangé. Vous continuerez d'accéder à toutes les informations et fonctionnalités auxquelles
+                   vous êtes habitués. `}
+                <br />
+                <span>
+                  Questions ou préoccupations ➜
+                  <a
+                    className="beta-message__feedback-link"
+                    href={`mailto:${Config.get("contact.mailto")}`}
+                  >
+                    [email protected]
+                  </a>
+                </span>
               </span>
             )}
           </div>

diff --git a/src/client/src/components/App/Header/header.scss b/src/client/src/components/App/Header/header.scss
@@ -70,26 +70,26 @@
 
 .beta-message {
     @extend %flex-center;
-    height: 40px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    text-align: center;
+    font-size: 1rem;
     letter-spacing: 0.04rem;
-    color: $black;
-    background-color: #ffe15b;
+    color: #0063cb;
+    background-color: #e8edff;
+    padding: 1rem;
     box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
-
+    &__nouveaute {
+        font-weight: bold;
+    }
     &__feedback-link {
         margin-left: $spacing-1;
         padding: $spacing-1 $spacing-2;
-        color: $dark-grey;
-        background-color: $white;
+        color: #0063cb !important;
+        transition: background-size 0s;
+        background-color: #b9c7f3;
         border-radius: $border-radius-1;
-        transition: color $duration-2, background-color $duration-2;
 
         &:hover {
             color: $white;
-            background-color: $primary;
+            background-color: #a9bfff;
         }
     }
 }