🩹(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

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>

src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
 
-import { default as IconDocs } from '@/assets/icons/icon-docs.svg?url';
+import IconDocs from '@/assets/icons/icon-docs.svg';
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { ButtonTogglePanel, Title } from '@/features/header/';
@@ -61,7 +61,7 @@ export const HomeHeader = () => {
           $position="relative"
           $height="fit-content"
         >
-          <Image priority src={IconDocs} alt={t('Docs Logo')} width={32} />
+          <IconDocs aria-label={t('Docs Logo')} width={32} />
           <Title />
         </Box>
       </Box>

src/frontend/apps/impress/src/features/home/components/HomeSection.tsx

@@ -175,7 +175,7 @@ export const HomeSection = ({
               height: 'fit-content',
               margin: 'auto',
               overflow: 'auto',
-              flexBasis: direction === 'column' ? '100%' : '50%',
+              flexBasis: direction === 'column' ? 'fit-content' : '50%',
             }}
           />
         )}

src/mail/mjml/invitation.mjml

@@ -2,7 +2,7 @@
   <mj-include path="./partial/header.mjml" />
 
   <mj-body mj-class="bg--blue-100">
-    <mj-wrapper css-class="wrapper" padding="0 25px 0px 25px">
+    <mj-wrapper css-class="wrapper" padding="5px 25px 0px 25px">
       <mj-section css-class="wrapper-logo">
         <mj-column>
           <mj-image
@@ -14,7 +14,7 @@
           />
         </mj-column>
       </mj-section>
-      <mj-section mj-class="bg--white-100" padding="30px 20px 60px 20px">
+      <mj-section mj-class="bg--white-100" padding="0px 20px 60px 20px">
         <mj-column>
           <mj-text align="center">
             <h1>{{title|capfirst}}</h1>

src/mail/mjml/partial/header.mjml

@@ -13,7 +13,7 @@
         <mj-all
             font-family="Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
             font-size="16px"
-            line-height="1.3em"
+            line-height="normal"
             color="#3A3A3A"
         />
     </mj-attributes>