From 51c4a2975188aa27fc1aa3ba1e3b70c6c241f7c4 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 3 May 2024 14:42:21 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20change=20header?=
 =?UTF-8?q?=20html=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change a bit the html structure of the header
component to be more aligned.
Logo linked to homepage.
---
 .../apps/desk/src/features/header/Header.tsx  | 52 +++++++++----------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
index 64d9c76..6d349de 100644
--- a/src/frontend/apps/desk/src/features/header/Header.tsx
+++ b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -3,15 +3,15 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { Box, Text } from '@/components/';
-import { AccountDropdown } from '@/features/header/AccountDropdown';
+import { default as IconGouv } from '@/assets/icons/icon-gouv.svg?url';
+import { default as IconMarianne } from '@/assets/icons/icon-marianne.svg?url';
+import { Box, StyledLink, Text } from '@/components/';
 import { LaGaufre } from '@/features/header/LaGaufre';
 
 import { LanguagePicker } from '../language/';
 
+import { AccountDropdown } from './AccountDropdown';
 import { default as IconApplication } from './assets/icon-application.svg?url';
-import { default as IconGouv } from './assets/icon-gouv.svg?url';
-import { default as IconMarianne } from './assets/icon-marianne.svg?url';
 
 export const HEADER_HEIGHT = '100px';
 
@@ -23,51 +23,49 @@ const RedStripe = styled.div`
   top: 0;
 `;
 
-const StyledHeader = styled.header`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: ${HEADER_HEIGHT};
-  width: 100%;
-  background: white;
-  box-shadow: 0 1px 4px #00000040;
-  z-index: 100;
-`;
-
 export const Header = () => {
   const { t } = useTranslation();
 
   return (
-    <StyledHeader>
+    <Box
+      as="header"
+      $justify="center"
+      $width="100%"
+      $height={HEADER_HEIGHT}
+      $zIndex="100"
+      $css="box-shadow: 0 1px 4px #00000040;"
+    >
       <RedStripe />
+      <Box $margin={{ horizontal: 'xbig' }}>
+        <Image priority src={IconMarianne} alt={t('Marianne Logo')} />
+      </Box>
       <Box
         $margin={{ horizontal: 'xbig' }}
         $align="center"
         $justify="space-between"
         $direction="row"
       >
-        <Box>
-          <Image priority src={IconMarianne} alt={t('Marianne Logo')} />
-          <Box $align="center" $gap="6rem" $direction="row">
-            <Image
-              priority
-              src={IconGouv}
-              alt={t('Freedom Equality Fraternity Logo')}
-            />
+        <Box $align="center" $gap="6rem" $direction="row">
+          <Image
+            priority
+            src={IconGouv}
+            alt={t('Freedom Equality Fraternity Logo')}
+          />
+          <StyledLink href="/">
             <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconApplication} alt={t('Equipes Logo')} />
               <Text $margin="none" as="h2" $theme="primary">
                 {t('Equipes')}
               </Text>
             </Box>
-          </Box>
+          </StyledLink>
         </Box>
-        <Box $align="center" $gap="1rem" $justify="flex-end" $direction="row">
+        <Box $align="center" $gap="1rem" $direction="row">
           <AccountDropdown />
           <LanguagePicker />
           <LaGaufre />
         </Box>
       </Box>
-    </StyledHeader>
+    </Box>
   );
 };