From 7fa53096e03744250f19e5a8cf469cf553013e9b Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Wed, 20 Mar 2024 01:01:46 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(footer)=20update=20footer's=20logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In response to feedback from the communication team, the Footer's logo
has been updated to the official version.

The Footer component and its styling have been adjusted according to Johann's
Figma design. While I aimed to adhere to the design guidelines, there may
be slight variations in sizes.

Ensuring a seamless responsive experience on very small devices was tricky.
To address potential overflow caused by the logo on screens narrower than 302px,
I opted to hide the overflow. This solution, while effective, is temporary and
can be improved later on.

I wanted to ship asap a Footer with the updated logo, sorry for the quick
and dirty approach.
---
 src/components/Footer.tsx | 12 ++++++------
 src/styles/app.css        | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 40601b7..d4520eb 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -24,17 +24,17 @@ export const Footer = () => (
     <div className="fr-container">
       <div className="flex flex-wrap justify-between mb-6">
         <Link
-          className="w-fit md:flex items-center gap-10 hover:bg-white-1 p-4 pl-0 transition ease-in-out delay-50 duration-300 min-w-[114px] ml-[-0.5rem] "
+          className="w-fit flex no-wrap items-center gap-2 xs:gap-6 hover:bg-white-1 p-4 pl-0 transition ease-in-out delay-50 duration-300 min-w-[114px] ml-[-0.5rem] overflow-hidden"
           href="/"
           aria-label="Retour à l'accueil"
         >
-          <p className="logo text-[0.7875rem] font-bold leading-[1.0317460317em] tracking-[-.01em] pl-2 uppercase align-middle inline-block">
-            république
-            <Br className="inline" />
-            française
+          <p className="logo-footer text-base xs:text-xl font-bold leading-[1.0317460317em] tracking-[-.01em] pl-2 uppercase align-middle inline-block">
+            Gouvernement
           </p>
+          <span className="logo-footer-separator"/>
+          <p className="font-bold leading-5 text-sm xs:text-base">Direction<Br className="inline"/>interministérielle<Br className="inline"/>du numérique</p>
         </Link>
-        <div className="basis-full md:basis-2/3 max-w-2xl">
+        <div className="basis-full md:basis-2/4 max-w-2xl">
           <p className="text-sm leading-6 text-grey-5">
             Ce site est géré par La Suite Numérique de la direction
             interministérielle du numérique (DINUM) en charge de la
diff --git a/src/styles/app.css b/src/styles/app.css
index 011231c..5796322 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -32,6 +32,29 @@
   padding-top: 1.65625rem;
 }
 
+.logo-footer:before {
+  content: "";
+  display: block;
+  background-image: url("/assets/marianne.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 1.25rem;
+  margin-bottom: 0.2rem;
+  width: 3rem;
+}
+
+.logo-footer:after {
+  content: "";
+  display: block;
+  background-image: url("/assets/devise.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  height: 2.313rem;
+  margin-top: 0.2rem;
+  width: 3.25rem;
+}
+
 .navbar-shadow {
   position: relative;
   z-index: 10;
@@ -59,6 +82,19 @@
   width: 1px;
 }
 
+.logo-footer-separator:after {
+  box-shadow: inset 0 0 0 1px #000000;
+  content: "";
+  display: inline-block;
+  height: 5rem;
+  margin-right: 0.75rem;
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+  position: relative;
+  vertical-align: middle;
+  width: 1px;
+}
+
 .internal-link-footer:first-child:before {
   box-shadow: none;
   margin-right: 0;