fix(header/footer): logo CNAM

SocialGouv · Jan 4, 2022 · f63469b · f63469b
1 parent 4a952c4
commit f63469b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 53 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,54 +1,11 @@
 import {
   Footer as FooterDS,
-  FooterBody,
-  FooterBodyItem,
   FooterBottom,
   FooterCopy,
   FooterLink,
-  Logo,
 } from "@dataesr/react-dsfr";
 import React from "react";
 
-const FooterDescription = () => (
-  <>
-    Le code source est ouvert et les contributions sont bienvenues.{" "}
-    <a
-      href="https://github.com/betagouv/sante-psy"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      Voir le code source
-    </a>
-    .
-  </>
-);
-const footerBodyLinks = [
-  {
-    link: "https://www.gouvernement.fr",
-    title: "gouvernement.fr",
-  },
-  {
-    link: "http://www.service-public.fr",
-    title: "service-public.fr",
-  },
-  {
-    link: "http://legifrance.gouv.fr",
-    title: "legifrance.gouv.fr",
-  },
-  {
-    link: "http://data.gouv.fr",
-    title: "data.gouv.fr",
-  },
-  {
-    link: "https://www.ameli.fr",
-    title: "ameli.fr",
-  },
-  {
-    link: "https://beta.gouv.fr/",
-    title: "beta.gouv.fr",
-  },
-];
-
 const footerBottomLinks = [
   {
     link: "/mentions-legales#accessibilite",
@@ -62,16 +19,84 @@ const footerBottomLinks = [
 
 const Footer = () => (
   <FooterDS>
-    <FooterBody description={<FooterDescription />}>
-      <Logo>République Française</Logo>
-      {footerBodyLinks.map((item) => (
-        <FooterBodyItem key={item.title}>
-          <a href={item.link} target="_blank" rel="noopener noreferrer">
-            {item.title}
+    <div className="fr-footer__body">
+      <div className="fr-footer__brand">
+        <a className="fr-logo" href="/" title="République française">
+          <p className="fr-logo__title fr-mb-0">République Française</p>
+        </a>
+      </div>
+      <div className="fr-footer__brand">
+        <a href="/" title="Accueil">
+          <img src="/images/cpam.png" alt="CNAM" width="200" height="66" />
+        </a>
+      </div>
+      <div className="fr-footer__content">
+        <p className="fr-footer__content-desc">
+          Le code source est ouvert et les contributions sont bienvenues.{" "}
+          <a
+            title="Voir le code source"
+            href="https://github.com/SocialGouv/mon-psy-sante"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Voir le code source
           </a>
-        </FooterBodyItem>
-      ))}
-    </FooterBody>
+        </p>
+
+        <ul className="fr-footer__content-list">
+          <li className="fr-footer__content-item">
+            <a
+              className="fr-footer__content-link"
+              href="https://www.gouvernement.fr"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              gouvernement.fr
+            </a>
+          </li>
+          <li className="fr-footer__content-item">
+            <a
+              className="fr-footer__content-link"
+              href="https://www.legifrance.gouv.fr"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              legifrance.gouv.fr
+            </a>
+          </li>
+          <li className="fr-footer__content-item">
+            <a
+              className="fr-footer__content-link"
+              href="https://www.data.gouv.fr"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              data.gouv.fr
+            </a>
+          </li>
+          <li className="fr-footer__content-item">
+            <a
+              className="fr-footer__content-link"
+              href="https://www.ameli.fr"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              ameli.fr
+            </a>
+          </li>
+          <li className="fr-footer__content-item">
+            <a
+              className="fr-footer__content-link"
+              href="https://beta.gouv.fr/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              beta.gouv.fr
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
     <FooterBottom>
       {footerBottomLinks.map((item) => (
         <FooterLink key={item.title} href={item.link}>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -13,7 +13,7 @@ const Nav = () => {
       <HeaderBody>
         <Logo>République Française</Logo>
         <HeaderOperator>
-          <img src="/images/cpam.png" alt="CNAM" />
+          <img src="/images/cpam.png" alt="CNAM" width="200" height="66" />
         </HeaderOperator>
         <Service
           title="MonPsySanté"