From dd0b570fea9302844f5a073695d0d7087de05e4d Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Mon, 2 Jun 2025 23:11:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(header)=20remove=20the=20French=20?=
 =?UTF-8?q?gov=20motto=20+=20marianne=20from=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This shouldn't have been in the repo really. Instead of this, add some
css classes, that kinda act as hooks for people using a custom css file
(for example, DINUM) in case they need to
---
 src/frontend/public/assets/gouvernement.svg | 61 +++++++++++++++++++++
 src/frontend/src/layout/Header.tsx          | 52 +++---------------
 2 files changed, 69 insertions(+), 44 deletions(-)
 create mode 100644 src/frontend/public/assets/gouvernement.svg

diff --git a/src/frontend/public/assets/gouvernement.svg b/src/frontend/public/assets/gouvernement.svg
new file mode 100644
index 00000000..59e1ef82
--- /dev/null
+++ b/src/frontend/public/assets/gouvernement.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="38.194309mm"
+   height="3.4877367mm"
+   viewBox="0 0 38.194309 3.4877367"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="gouvernement.svg"
+   inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="6.1918409"
+     inkscape:cx="79.620909"
+     inkscape:cy="44.332534"
+     inkscape:window-width="1901"
+     inkscape:window-height="1037"
+     inkscape:window-x="5"
+     inkscape:window-y="5"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <rect
+       x="111.07374"
+       y="333.22122"
+       width="541.4845"
+       height="297.51895"
+       id="rect2" />
+    <rect
+       x="158.10136"
+       y="358.3631"
+       width="425.55618"
+       height="204.21426"
+       id="rect1" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-53.656101,-100.08408)">
+    <path
+       d="m 55.435527,103.08144 c -0.72898,0 -1.249045,-0.56007 -1.249045,-1.25349 0,-0.69342 0.502285,-1.25349 1.204595,-1.25349 0.41783,0 0.760095,0.20447 0.96901,0.50673 l 0.333375,-0.25781 c -0.28448,-0.38227 -0.742315,-0.64008 -1.302385,-0.64008 -0.973455,0 -1.63576,0.75565 -1.63576,1.64465 0,0.889 0.680085,1.64465 1.68021,1.64465 0.582295,0 1.05791,-0.24892 1.346835,-0.64008 v -1.21349 h -1.31572 v 0.36005 h 0.89789 v 0.70231 c -0.217805,0.24447 -0.54229,0.40005 -0.929005,0.40005 z m 3.569334,-2.89814 c -0.973455,0 -1.63576,0.75565 -1.63576,1.64465 0,0.889 0.662305,1.64465 1.63576,1.64465 0.96901,0 1.631315,-0.75565 1.631315,-1.64465 0,-0.889 -0.662305,-1.64465 -1.631315,-1.64465 z m 0,2.89814 c -0.70231,0 -1.204595,-0.56007 -1.204595,-1.25349 0,-0.69342 0.502285,-1.25349 1.204595,-1.25349 0.697865,0 1.20015,0.56007 1.20015,1.25349 0,0.69342 -0.502285,1.25349 -1.20015,1.25349 z m 4.276088,-0.84455 c 0,0.53784 -0.31115,0.84455 -0.786765,0.84455 -0.48006,0 -0.79121,-0.30671 -0.79121,-0.84455 v -1.96469 h -0.41783 v 1.93802 c 0,0.8001 0.48006,1.26238 1.20904,1.26238 0.72898,0 1.204595,-0.46228 1.204595,-1.26238 v -1.93802 h -0.41783 z m 0.942341,-1.96469 1.2446,3.1115 h 0.55118 l 1.2446,-3.1115 h -0.4445 l -1.07569,2.68922 -1.07569,-2.68922 z m 3.653795,3.1115 h 1.67132 v -0.3556 h -1.25349 v -1.05347 h 1.07569 v -0.35115 h -1.07569 v -0.99568 h 1.25349 v -0.3556 h -1.67132 z m 2.502533,0 h 0.41783 v -1.36462 h 0.40894 c 0.03111,0 0.06667,0 0.09779,-0.004 l 0.902335,1.36906 h 0.493395 l -1.00457,-1.44907 c 0.333375,-0.13335 0.52451,-0.41339 0.52451,-0.78677 0,-0.5334 -0.386715,-0.87566 -1.01346,-0.87566 h -0.82677 z m 0.84455,-2.7559 c 0.3556,0 0.564515,0.19558 0.564515,0.51117 0,0.33338 -0.208915,0.52451 -0.564515,0.52451 h -0.42672 v -1.03568 z m 2.004699,2.7559 h 0.41783 v -2.60033 l 1.76022,2.60033 h 0.546735 v -3.1115 h -0.41783 v 2.60032 l -1.76022,-2.60032 h -0.546735 z m 3.71158,0 h 1.67132 v -0.3556 h -1.25349 v -1.05347 h 1.07569 v -0.35115 h -1.07569 v -0.99568 h 1.25349 v -0.3556 h -1.67132 z m 2.502533,0 h 0.41783 v -2.55143 l 0.90678,1.48463 h 0.32004 l 0.90678,-1.48463 v 2.55143 h 0.41783 v -3.1115 h -0.5334 l -0.95123,1.56908 -0.95123,-1.56908 h -0.5334 z m 3.951605,0 h 1.67132 v -0.3556 h -1.25349 v -1.05347 h 1.07569 v -0.35115 h -1.07569 v -0.99568 h 1.25349 v -0.3556 h -1.67132 z m 2.502535,0 h 0.41783 v -2.60033 l 1.76022,2.60033 h 0.546735 v -3.1115 h -0.41783 v 2.60032 l -1.76022,-2.60032 H 85.89712 Z m 3.373758,-2.72923 h 1.03124 v 2.72923 h 0.41783 v -2.72923 h 1.03124 v -0.38227 h -2.48031 z"
+       id="text3"
+       style="font-size:4.445px;line-height:0.661464px;font-family:Marianne;-inkscape-font-specification:'Marianne, Normal';letter-spacing:0px;word-spacing:0px;display:inline;stroke:#000000;stroke-width:0.198437"
+       aria-label="GOUVERNEMENT" />
+  </g>
+</svg>
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index c5418b83..6080e150 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -14,47 +14,6 @@ import { ProConnectButton } from '@/components/ProConnectButton'
 import LogoAsset from '@/assets/logo.svg'
 import { useLoginHint } from '@/hooks/useLoginHint'
 
-const Marianne = () => {
-  return (
-    <div
-      className={css({
-        _before: {
-          content: '""',
-          display: 'block',
-          backgroundImage: 'url(/assets/marianne.svg)',
-          backgroundPosition: '0 -0.046875rem, 0 0, 0 0',
-          backgroundSize: '2.0625rem 0.84375rem, 2.0625rem 0.75rem, 0',
-          height: '0.75rem',
-          marginBottom: '0.1rem',
-          width: '2.0625rem',
-        },
-        _after: {
-          content: '""',
-          display: 'block',
-          backgroundImage: 'url(/assets/devise.svg)',
-          backgroundRepeat: 'no-repeat',
-          backgroundSize: 'contain',
-          width: '2.5rem',
-          height: '1.7857142857142858rem',
-          marginTop: '0.25rem',
-        },
-      })}
-    >
-      <p
-        className={css({
-          letterSpacing: '-.01em',
-          textTransform: 'uppercase',
-          fontWeight: '700',
-          fontFamily: 'Marianne',
-          fontSize: '0.7875rem !important',
-        })}
-      >
-        gouvernement
-      </p>
-    </div>
-  )
-}
-
 const BetaBadge = () => (
   <span
     className={css({
@@ -84,10 +43,10 @@ const Logo = () => {
     <img
       src={LogoAsset}
       alt={t('app')}
-      className={css({
+      className={`Header-logo ${css({
         maxHeight: { base: '30px', sm: '40px' },
         marginTop: { base: '10px', sm: '5px' },
-      })}
+      })}`}
     />
   )
 }
@@ -195,7 +154,12 @@ export const Header = () => {
                 }}
                 to="/"
               >
-                <Marianne />
+                {/* this is there only as a hook for custom CSS users who might want to show something before the app logo */}
+                <div
+                  className={`Header-beforeLogo ${css({
+                    display: 'none',
+                  })}`}
+                />
                 <HStack gap={0}>
                   <Logo />
                   <BetaBadge />