🩹(frontend) fine tuning v2.2.0

Fix minor issues:
- Add some height to the carret in the editor
- Improve css in mail templates
- Improve images resolution on homepage

Author: AntoLC

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

@@ -10,7 +10,7 @@ test.describe('Header', () => {
   test('checks all the elements are visible', async ({ page }) => {
     const header = page.locator('header').first();
 
-    await expect(header.getByAltText('Docs Logo')).toBeVisible();
+    await expect(header.getByLabel('Docs Logo')).toBeVisible();
     await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
       'color',
       'rgb(0, 0, 145)',

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -1,11 +1,10 @@
 import { Button } from '@openfun/cunningham-react';
-import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { BoxButton } from '@/components';
 
-import ProConnectImg from '../assets/button-proconnect.svg?url';
+import ProConnectImg from '../assets/button-proconnect.svg';
 import { useAuth } from '../hooks';
 import { gotoLogin, gotoLogout } from '../utils';
 
@@ -41,8 +40,9 @@ export const ProConnectButton = () => {
           background-color: var(--c--theme--colors--primary-action);
         }
       `}
+      $radius="4px"
     >
-      <Image src={ProConnectImg} alt={t('ProConnect Image')} />
+      <ProConnectImg />
     </BoxButton>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -65,7 +65,7 @@ export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
           $css="overflow-x: clip; flex: 1;"
           $position="relative"
         >
-          <Box $css="flex:1;" $position="relative">
+          <Box $css="flex:1;" $position="relative" $width="100%">
             {isVersion ? (
               <DocVersionEditor docId={doc.id} versionId={versionId} />
             ) : (

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -11,7 +11,7 @@ export const cssEditor = (readonly: boolean) => css`
     }
     .collaboration-cursor-custom__caret {
       position: absolute;
-      height: 85%;
+      height: 100%;
       width: 2px;
       bottom: 4%;
       left: -1px;

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -1,8 +1,7 @@
-import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { default as IconDocs } from '@/assets/icons/icon-docs.svg?url';
+import IconDocs from '@/assets/icons/icon-docs.svg';
 import { Box, StyledLink } from '@/components/';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonLogin } from '@/features/auth';
@@ -51,7 +50,7 @@ export const Header = () => {
           $height="fit-content"
           $margin={{ top: 'auto' }}
         >
-          <Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
+          <IconDocs aria-label={t('Docs Logo')} width={25} />
           <Title />
         </Box>
       </StyledLink>