last updates

privacybydesign · Feb 5, 2025 · 152f4fb · 152f4fb
1 parent 15cdbf6
commit 152f4fb
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 26 deletions.
diff --git a/src/main/resources/email-en.html b/src/main/resources/email-en.html
@@ -83,7 +83,7 @@
 
       .button {
         background: #a3244a;
-        border: 25px solid #a3244a;
+        border: 20px solid #a3244a;
         font-weight: 700;
         font-size: 17px;
         line-height: 25px;
@@ -136,8 +136,8 @@
     <table align="center" class="email-container" cellpadding="0" cellspacing="0" role="presentation" width="700">
       <tr>
         <td align="center">
-          <table class="main" width="100%%">
-            <tr>
+          <table class="main" width="700">
+            <tr width="100%%">
               <td class="header" width="100%%">
                 <img src="https://yivi-cdn.s3.nl-ams.scw.cloud/header.png" width="650" style="display:block; margin:0 auto;" />
               </td>

diff --git a/src/main/resources/email-nl.html b/src/main/resources/email-nl.html
@@ -6,7 +6,6 @@
     <meta name="supported-color-schemes" content="light dark"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
-      /* Base styles */
       body {
         margin: 0;
         padding: 0;
@@ -17,26 +16,55 @@
         color: #000000;
       }
 
+      .email-container {
+        width: 700px;
+        max-width: 700px;
+        min-width: 700px;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+
       .main {
-        width: 600px;
+        width: 700px;
+        max-width: 700px;
+        min-width: 700px;
         background-color: #ffffff;
         border: 1px solid #ddd;
+        border-collapse: separate;
+        border-spacing: 0;
         border-radius: 4px;
         overflow: hidden;
       }
 
       .header, .title, .body-text, .footer-text, .alt-link {
         padding: 16px 24px;
+      }
+
+      .header {
         text-align: left;
+        width: 100%%;
       }
 
       .header img {
-        float: left;
-      }
+        display: block;
+        width: 650px !important;
+        max-width: 650px !important;
+        min-width: 650px !important;
+        height: auto;
+        border: 0;
+        line-height: 100%%;
+        font-size: 0;
+        margin: 0;
+        padding: 0;
+        mso-margin-left-alt: 0;
+        mso-margin-right-alt: 0;
+    }
+
 
       .title {
         font-size: 24px;
         font-weight: bold;
+        text-align: left;
       }
 
       .body-text p {
@@ -48,26 +76,29 @@
         text-align: center;
       }
 
-      .button {
+      .button-container a {
         display: inline-block;
+        text-decoration: none;
+      }
+
+      .button {
         background: #a3244a;
         border: 20px solid #a3244a;
         font-weight: 700;
-        letter-spacing: 2px;
-        font-size: 16px;
+        font-size: 17px;
         line-height: 25px;
         text-decoration: none;
         border-radius: 6px;
         color: #ffffff !important;
+        display: inline-block;
+        text-align: center;
       }
 
       .alt-link {
         font-size: 18px;
         color: #000000 !important;
         text-align: left;
-        padding-left: 16px;
-        padding-right: 24px;
-        padding-bottom: 0px;
+        padding-left: 24px;
       }
 
       .divider {
@@ -76,7 +107,6 @@
         font-size: 1px;
       }
 
-      /* Dark mode support */
       @media (prefers-color-scheme: dark) {
         body {
           background-color: #000000 !important;
@@ -95,25 +125,29 @@
           color: #ffffff !important;
         }
       }
-
     </style>
   </head>
   <body>
-    <table align="center" width="600" cellpadding="0" cellspacing="0" role="presentation">
+    <!--[if mso]>
+    <table align="center" width="700" cellpadding="0" cellspacing="0" border="0" role="presentation">
+    <tr>
+    <td>
+    <![endif]-->
+    <table align="center" class="email-container" cellpadding="0" cellspacing="0" role="presentation" width="700">
       <tr>
         <td align="center">
-          <table class="main" width="600">
-            <tr align="center">
-              <td class="header" align="center">
-                <img src="https://yivi-cdn.s3.nl-ams.scw.cloud/header.png" />
+          <table class="main" width="700">
+            <tr width="100%%">
+              <td class="header" width="100%%">
+                <img src="https://yivi-cdn.s3.nl-ams.scw.cloud/header.png" width="650" style="display:block; margin:0 auto;" />
               </td>
             </tr>
             <tr>
               <td class="title">E-mailbevestiging</td>
             </tr>
             <tr>
               <td class="body-text">
-                <p>Beste Yivi-gebruiker,</p>
+                <p>Dear Yivi User,</p>
                 <p>
                     Bedankt voor het gebruiken van Yivi, jouw privacyvriendelijke identity wallet!<br />
                     Klik op de knop hieronder om je e-mailadres te verifi&euml;ren en toe te voegen aan jouw Yivi-app.
@@ -126,7 +160,6 @@
                 <a href="%1$s" class="button">Verifieer je e-mailadres</a>
               </td>
             </tr>
-
             <tr>
               <td>
                 <table width="100%%">
@@ -136,13 +169,13 @@
                     </td>
                   </tr>
                   <tr>
-                    <td style="padding: 0px 24px 0px 16px; font-size: 18px; text-align: left;">
+                    <td style="padding: 0px 16px 0px 24px; font-size: 18px; text-align: left;">
                       <a href="%1$s" style="color:blue underline;">%1$s</a>
                     </td>
                   </tr>
                 </table>
               </td>
-            </tr>            
+            </tr>          
             <tr>
               <td class="body-text">
                 Heb jij dit niet aangevraagd?<br />
@@ -161,11 +194,16 @@
             <tr>
               <td class="footer-text">
                 Verzonden door Yivi, sluit je aan bij onze <a href="https://github.com/privacybydesign">GitHub-community</a>.
-            </td>
+              </td>
             </tr>
           </table>
         </td>
       </tr>
     </table>
+    <!--[if mso]>
+    </td>
+    </tr>
+    </table>
+    <![endif]-->
   </body>
-</html>
+</html>