💄(frontend) improve the design of the alert error

Since the new design implementation,
the alert error was not looking good.
This commit improves the design of the alert error.

src/frontend/apps/impress/cunningham.ts

@@ -357,6 +357,15 @@ const config = {
       components: {
         alert: {
           'border-radius': '0',
+          error: {
+            'background-color': 'var(--c--theme--colors--danger-100)',
+            'border-left-color': 'var(--c--theme--colors--danger-400)',
+            close: {
+              color: 'white',
+              'background-color': 'var(--c--theme--colors--danger-400)',
+              'background-color-hover': 'var(--c--theme--colors--danger-600)',
+            },
+          },
         },
         modal: {
           'width-small': '342px',

src/frontend/apps/impress/src/components/TextErrors.tsx

@@ -35,6 +35,7 @@ export const TextErrors = ({
             <Text
               key={`causes-${i}`}
               $theme="danger"
+              $variation="600"
               $textAlign="center"
               {...textProps}
             >
@@ -43,7 +44,12 @@ export const TextErrors = ({
           ))}
 
         {!causes && (
-          <Text $theme="danger" $textAlign="center" {...textProps}>
+          <Text
+            $theme="danger"
+            $variation="600"
+            $textAlign="center"
+            {...textProps}
+          >
             {defaultMessage || t('Something bad happens, please retry.')}
           </Text>
         )}

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -310,7 +310,7 @@ input:-webkit-autofill:focus {
 }
 
 /**
- * Others
+ * Checkbox
 */
 .c__checkbox:focus-within {
   border-color: transparent;
@@ -609,3 +609,22 @@ input:-webkit-autofill:focus {
 .c__tooltip {
   padding: 4px 6px;
 }
+
+/**
+ * Alert
+*/
+.c__alert--error {
+  background-color: var(--c--components--alert--error--background-color);
+  border-left-color: var(--c--components--alert--error--border-left-color);
+}
+
+.c__alert--error .c__button--tertiary {
+  background-color: var(--c--components--alert--error--close--background-color);
+  color: var(--c--components--alert--error--close--color);
+}
+
+.c__alert.c__alert--error .c__button--tertiary:hover {
+  background-color: var(
+    --c--components--alert--error--close--background-color-hover
+  );
+}

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -484,6 +484,19 @@
   --c--theme--logo--widthFooter: 220px;
   --c--theme--logo--alt: gouvernement logo;
   --c--components--alert--border-radius: 0;
+  --c--components--alert--error--background-color: var(
+    --c--theme--colors--danger-100
+  );
+  --c--components--alert--error--border-left-color: var(
+    --c--theme--colors--danger-400
+  );
+  --c--components--alert--error--close--color: white;
+  --c--components--alert--error--close--background-color: var(
+    --c--theme--colors--danger-400
+  );
+  --c--components--alert--error--close--background-color-hover: var(
+    --c--theme--colors--danger-600
+  );
   --c--components--modal--width-small: 342px;
   --c--components--button--medium-height: 40px;
   --c--components--button--medium-text-height: 40px;

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -483,7 +483,18 @@ export const tokens = {
         },
       },
       components: {
-        alert: { 'border-radius': '0' },
+        alert: {
+          'border-radius': '0',
+          error: {
+            'background-color': 'var(--c--theme--colors--danger-100)',
+            'border-left-color': 'var(--c--theme--colors--danger-400)',
+            close: {
+              color: 'white',
+              'background-color': 'var(--c--theme--colors--danger-400)',
+              'background-color-hover': 'var(--c--theme--colors--danger-600)',
+            },
+          },
+        },
         modal: { 'width-small': '342px' },
         button: {
           'medium-height': '40px',

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

@@ -134,7 +134,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
       $css={cssEditor(readOnly)}
     >
       {errorAttachment && (
-        <Box $margin={{ bottom: 'big' }}>
+        <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
           <TextErrors
             causes={errorAttachment.cause}
             canClose