From 9903b43b72810b258ed4a42dbc4baefc84ec12f4 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 14 May 2024 16:02:49 +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 the html structure of the header
component to be more aligned.
Remove dummy profil picture.
---
 .../e2e/__tests__/app-impress/header.spec.ts  |  7 --
 .../impress/src/features/header/Header.tsx    | 87 ++++++-------------
 2 files changed, 28 insertions(+), 66 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
index 34cede2f..0dfb32ac 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts
@@ -29,13 +29,6 @@ test.describe('Header', () => {
 
     await expect(header.getByAltText('Language Icon')).toBeVisible();
 
-    await expect(header.getByText('John Doe')).toBeVisible();
-    await expect(
-      header.getByRole('img', {
-        name: 'profile picture',
-      }),
-    ).toBeVisible();
-
     await expect(
       header.getByRole('button', {
         name: 'Les services de La Suite numérique',
diff --git a/src/frontend/apps/impress/src/features/header/Header.tsx b/src/frontend/apps/impress/src/features/header/Header.tsx
index 91497279..8b79e634 100644
--- a/src/frontend/apps/impress/src/features/header/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/Header.tsx
@@ -11,7 +11,6 @@ import { LanguagePicker } from '../language/';
 
 import { LaGaufre } from './LaGaufre';
 import { default as IconImpress } from './assets/icon-impress.svg?url';
-import IconMyAccount from './assets/icon-my-account.png';
 
 export const HEADER_HEIGHT = '100px';
 
@@ -23,78 +22,48 @@ 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')}
-            />
-            <StyledLink href="/">
-              <Box $align="center" $gap="1rem" $direction="row">
-                <Image priority src={IconImpress} alt={t('Impress Logo')} />
-                <Text $margin="none" as="h2" $theme="primary">
-                  {t('Impress')}
-                </Text>
-              </Box>
-            </StyledLink>
-          </Box>
-        </Box>
-        <Box
-          $align="center"
-          $css={`
-            & > button {
-              padding: 0;
-            }
-          `}
-          $gap="5rem"
-          $justify="flex-end"
-          $direction="row"
-        >
-          <Box $align="center" $direction="row">
-            <LanguagePicker />
-          </Box>
-          <Box $direction="row" $align="center">
-            <Box $direction="row" $align="center" $gap="1rem">
-              <Text $weight="bold" $theme="primary">
-                John Doe
+        <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={IconImpress} alt={t('Impress Logo')} />
+              <Text $margin="none" as="h2" $theme="primary">
+                {t('Impress')}
               </Text>
-              <Image
-                width={58}
-                height={58}
-                priority
-                src={IconMyAccount}
-                alt={t(`Profile picture`)}
-              />
-              <LaGaufre />
             </Box>
-          </Box>
+          </StyledLink>
+        </Box>
+        <Box $align="center" $gap="1rem" $direction="row">
+          <LanguagePicker />
+          <LaGaufre />
         </Box>
       </Box>
-    </StyledHeader>
+    </Box>
   );
 };