♻️(app-desk) change header html structure

Change the html structure of the header
component to be more aligned.
Remove dummy profil picture.

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',

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>
+        <Box $align="center" $gap="6rem" $direction="row">
-          <Image priority src={IconMarianne} alt={t('Marianne Logo')} />
+          <Image
-          <Box $align="center" $gap="6rem" $direction="row">
+            priority
-            <Image
+            src={IconGouv}
-              priority
+            alt={t('Freedom Equality Fraternity Logo')}
-              src={IconGouv}
+          />
-              alt={t('Freedom Equality Fraternity Logo')}
+          <StyledLink href="/">
-            />
+            <Box $align="center" $gap="1rem" $direction="row">
-            <StyledLink href="/">
+              <Image priority src={IconImpress} alt={t('Impress Logo')} />
-              <Box $align="center" $gap="1rem" $direction="row">
+              <Text $margin="none" as="h2" $theme="primary">
-                <Image priority src={IconImpress} alt={t('Impress Logo')} />
+                {t('Impress')}
-                <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
               </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>
   );
 };