💬(frontend) change text logo Marianne

Change the text of the logo Marianne.
It was "Devise" and now it's "République Francaise".

src/frontend/apps/desk/src/components/LogoGouv.tsx

@@ -0,0 +1,44 @@
+import Image from 'next/image';
+import React, { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { default as IconDevise } from '@/assets/icons/icon-devise.svg?url';
+import { default as IconMarianne } from '@/assets/icons/icon-marianne.svg?url';
+
+import { Box } from './Box';
+import { Text, TextType } from './Text';
+
+interface LogoGouvProps {
+  imagesWidth?: number;
+  textProps?: TextType;
+}
+
+export const LogoGouv = ({
+  imagesWidth,
+  children,
+  textProps,
+}: PropsWithChildren<LogoGouvProps>) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box>
+      <Box>
+        <Image
+          priority
+          src={IconMarianne}
+          alt={t('Marianne Logo')}
+          width={imagesWidth}
+        />
+      </Box>
+      <Text $weight="bold" {...textProps}>
+        {children}
+      </Text>
+      <Image
+        width={imagesWidth}
+        priority
+        src={IconDevise}
+        alt={t('Freedom Equality Fraternity Logo')}
+      />
+    </Box>
+  );
+};

src/frontend/apps/desk/src/components/index.ts

@@ -4,5 +4,6 @@ export * from './Card';
 export * from './DropButton';
 export * from './IconOptions';
 export * from './Link';
+export * from './LogoGouv';
 export * from './Text';
 export * from './TextErrors';

src/frontend/apps/desk/src/features/footer/Footer.tsx

@@ -1,11 +1,8 @@
-import Image from 'next/image';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-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 { Box, LogoGouv, StyledLink, Text } from '@/components';
 
 import IconLink from './assets/external-link.svg';
 
@@ -24,14 +21,6 @@ export const Footer = () => {
     <Box $position="relative" as="footer">
       <BlueStripe />
       <Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}>
-        <Box>
-          <Image
-            priority
-            src={IconMarianne}
-            alt={t('Marianne Logo')}
-            width={70}
-          />
-        </Box>
         <Box
           $direction="row"
           $gap="1.5rem"
@@ -40,14 +29,20 @@ export const Footer = () => {
           $css="flex-wrap: wrap;"
         >
           <Box>
-            <Box $align="center" $gap="6rem" $direction="row">
-              <Image
-                width={100}
-                priority
-                src={IconGouv}
-                alt={t('Freedom Equality Fraternity Logo')}
-              />
-            </Box>
+            <LogoGouv
+              textProps={{
+                $size: '1.2rem',
+                $margin: { vertical: '0.3rem' },
+                $css: `
+                  line-height:18px;
+                  text-transform: uppercase;
+                `,
+                $maxWidth: '100px',
+              }}
+              imagesWidth={66}
+            >
+              République Française
+            </LogoGouv>
           </Box>
           <Box
             $direction="row"

src/frontend/apps/desk/src/features/header/Header.tsx

@@ -3,9 +3,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-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 { Box, LogoGouv, StyledLink, Text } from '@/components/';
 import { LaGaufre } from '@/features/header/LaGaufre';
 
 import { LanguagePicker } from '../language/';
@@ -36,9 +34,6 @@ export const Header = () => {
       $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"
@@ -46,11 +41,19 @@ export const Header = () => {
         $direction="row"
       >
         <Box $align="center" $gap="6rem" $direction="row">
-          <Image
-            priority
-            src={IconGouv}
-            alt={t('Freedom Equality Fraternity Logo')}
-          />
+          <LogoGouv
+            textProps={{
+              $size: 't',
+              $css: `
+                line-height:11px;
+                text-transform: uppercase;
+              `,
+              $margin: { vertical: '3px' },
+              $maxWidth: '100px',
+            }}
+          >
+            République Française
+          </LogoGouv>
           <StyledLink href="/">
             <Box $align="center" $gap="1rem" $direction="row">
               <Image priority src={IconApplication} alt={t('Equipes Logo')} />

src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts

@@ -13,6 +13,8 @@ test.describe('Footer', () => {
 
     await expect(footer.getByAltText('Marianne Logo')).toBeVisible();
 
+    await expect(footer.getByText(/République Française/i)).toBeVisible();
+
     await expect(
       footer.getByAltText('Freedom Equality Fraternity Logo'),
     ).toBeVisible();

src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts

@@ -13,6 +13,8 @@ test.describe('Header', () => {
 
     await expect(header.getByAltText('Marianne Logo')).toBeVisible();
 
+    await expect(header.getByText(/République Française/i)).toBeVisible();
+
     await expect(
       header.getByAltText('Freedom Equality Fraternity Logo'),
     ).toBeVisible();