Corrige le formattage des emails

confiture-rest-api/templates/account-confirmation.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Votre compte a bien été créé</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Votre compte a bien été créé</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/account-verification.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Confirmer votre adresse e-mail</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Confirmer votre adresse e-mail</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/audit-creation.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Accéder à l’audit « {{ procedureName }} »</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Accéder à l’audit « {{ procedureName }} »</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/email-update-confirmation.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Votre adresse e-mail a bien été mise à jour</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Votre adresse e-mail a bien été mise à jour</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/email-update-verification.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Confirmer votre nouvelle adresse e-mail</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Confirmer votre nouvelle adresse e-mail</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/header.mjml

@@ -1,21 +1,27 @@
-<mj-section>
-  <mj-column width="100px" vertical-align="middle" padding-top="24px">
-    <mj-image align="left" src="https://upload.wikimedia.org/wikipedia/fr/thumb/2/22/Republique-francaise-logo.svg/1024px-Republique-francaise-logo.svg.png?20201008150502" width="100px"></mj-image>
-  </mj-column>
-  <mj-column width="32px"></mj-column>
-  <mj-column width="468px" vertical-align="middle" padding-top="24px">
-    <mj-group>
-      <mj-column width="55px" vertical-align="middle">
-        <mj-image align="left" width="55px" src="data:image/png;base64,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"></mj-image>  
-      </mj-column>
-      <mj-column width="16px"></mj-column>
-      <mj-column width="397px" vertical-align="middle">
-        <mj-text font-weight="700" font-size="18px">Ara</mj-text>
-        <mj-text>Réalisez vos audits d’accessibilité numérique</mj-text>
-      </mj-column>
-    </mj-group>
+<!-- TODO: upload images to server and add URL in `<mj-image>` src attribute -->
+<mj-section padding-top="24px">
+  <!--
+    203px = 116px (france) + 87px (ara)
+      - 116px = 100px image + 16px padding
+      - 87px = 55px image + 32px padding
+  -->
+  <mj-group width="203px">
+    <mj-column padding-right="16px" vertical-align="middle">
+      <mj-image padding="0" src="https://confiture-container-prod.s3.gra.io.cloud.ovh.net/email/email-header-bloc-marque.png"></mj-image>
+    </mj-column>
+
+    <mj-column padding-right="32px" vertical-align="middle">
+      <mj-image padding="0" src="https://confiture-container-prod.s3.gra.io.cloud.ovh.net/email/email-header-ara.png"></mj-image>
+    </mj-column>
+  </mj-group>
+
+  <!-- 397px = 600px maxwidth - 203px (images) -->
+  <mj-column width="397px" vertical-align="middle">
+    <mj-text font-weight="700" font-size="18px">Ara</mj-text>
+    <mj-text>Réalisez vos audits d’accessibilité numérique</mj-text>
   </mj-column>
 </mj-section>
+
 <mj-section padding="24px 0">
   <mj-column>
     <mj-divider border-width="1px" border-style="solid" border-color="#E5E5E5" />

confiture-rest-api/templates/password-update-confirmation.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Votre mot de passe a bien été mis à jour</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Votre mot de passe a bien été mis à jour</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/request-password-reset.mjml

@@ -1,12 +1,12 @@
 <mjml>
   <mj-head>
     <mj-title>Réinitialiser votre mot de passe</mj-title>
+    <mj-include path="./styles.mjml" />
     <mj-attributes>
       <mj-preview>Réinitialiser votre mot de passe</mj-preview>
-      <mj-include path="./styles.mjml" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="#fff">
+  <mj-body>
     <!-- HEADER -->
     <mj-include path="./header.mjml" />
 

confiture-rest-api/templates/styles.mjml

@@ -1,12 +1,16 @@
-<mj-all font-family="Arial" padding="0" font-size="14px" line-height="24px" />
-<mj-class name="blue-link" color="#000091" font-size="16px" />
-<mj-class name="blue-section" background-color="#F5F5FE" padding="24px" />
-<mj-class
-  name="blue-button"
-  font-size="16px"
-  background-color="#000091"
-  padding-bottom="8px"
-  inner-padding="8px 16px"
-  border-radius="0"
-/>
-<mj-style>a { text-decoration: underline !important }</mj-style>
+<mj-attributes>
+  <mj-all font-family="Arial" padding="0" font-size="14px" line-height="24px" color="#000000" />
+  <mj-body background-color="#ffffff" />
+  <mj-class name="blue-link" color="#000091" font-size="16px" />
+  <mj-class name="blue-section" background-color="#F5F5FE" padding="24px" />
+  <mj-class
+    name="blue-button"
+    font-size="16px"
+    color="#ffffff"
+    background-color="#000091"
+    padding-bottom="8px"
+    inner-padding="8px 16px"
+    border-radius="0"
+  />
+  <mj-style>a { text-decoration: underline !important }</mj-style>
+</mj-attributes>