From de23c885c3708224e59a3641bee404377e33aaae Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 13 Feb 2024 16:00:59 +0100
Subject: [PATCH] [#2059] Simplified and improved padding of mail templates

---
 .../conf/parts/case_status_notification.html  | 22 ++++++++++----
 ...e_status_notification_action_required.html | 19 +++++++-----
 src/open_inwoner/static/mailcss/email.css     | 30 +++++++++++++++++--
 src/open_inwoner/templates/mail/_base.html    |  6 ++--
 4 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
index 566c6d587a..9a791b2211 100644
--- a/src/open_inwoner/conf/parts/case_status_notification.html
+++ b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -6,6 +6,11 @@
             <p>Er is iets veranderd in &eacute;&eacute;n van uw aanvragen.</p>
         </td>
     </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <h1>Nieuw:</h1>
@@ -14,7 +19,7 @@ <h1>Nieuw:</h1>
     <tr class="tr--responsive">
         <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
-            <h2 class="heading-font">{{ type_description }}</h2>
+            <h2>{{ type_description }}</h2>
         </td>
         <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
@@ -42,9 +47,14 @@ <h2 class="heading-font">{{ type_description }}</h2>
     <!-- end of Table with differing column-widths -->
 
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-all td__info-link" colspan="6">
             <p>U hoeft niets te doen. Zodra er weer een update beschikbaar is ontvangt u hier een melding over. U kunt wel inloggen om uw aanvraag te bekijken.</p>
-            <p><strong><a href="{{ login_page }}" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
+            <p><strong><a href="{{ case_link }}" class="color--primary">Log in</a><span class="color--primary"> &rarr;</span></strong></p>
+        </td>
+    </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
         </td>
     </tr>
     <tr>
@@ -67,9 +77,9 @@ <h2 class="heading-font">{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="{{ contactpage }}" class="color--secondary">Ga naar onze contactpagina</a>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="https://example.com">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="tel:+14050" data-rel="external">Bel 14050</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">
@@ -78,7 +88,7 @@ <h2 class="heading-font">{{ type_description }}</h2>
     </tr>
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
-            <p>Pas hier uw <a href="{{ profile_notifications }}" class="color--secondary">voorkeuren</a> aan voor de notificaties. </p>
+            <p>Pas hier uw <a href="https://example.com">voorkeuren</a> aan voor de notificaties. </p>
         </td>
     </tr>
     </tbody>
diff --git a/src/open_inwoner/conf/parts/case_status_notification_action_required.html b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
index f77de79a33..aed640a5ff 100644
--- a/src/open_inwoner/conf/parts/case_status_notification_action_required.html
+++ b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
@@ -6,6 +6,11 @@
             <p>Er is iets veranderd in &eacute;&eacute;n van uw aanvragen.</p>
         </td>
     </tr>
+    <tr>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
+        </td>
+    </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <h1>Nieuw:</h1>
@@ -14,7 +19,7 @@ <h1>Nieuw:</h1>
     <tr class="tr--responsive">
         <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
-            <h2 class="td--responsive heading-font">{{ type_description }}</h2>
+            <h2>{{ type_description }}</h2>
         </td>
         <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
@@ -40,13 +45,13 @@ <h2 class="td--responsive heading-font">{{ type_description }}</h2>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
-            <a href="{{ case_link }}" class="button--primary">Upload documenten</a>
+            <p>Log in om de documenten te uploaden.</p>
+            <a href="{{ case_link }}" class="button--primary">Log in</a>
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
-            <p>U hoeft niets te doen. Zodra er weer een update beschikbaar is ontvangt u hier een melding over.</p>
-            <p><strong><a href="{{ case_link }}" class="color--primary">Bekijk aanvraag &rarr;</a></strong></p>
+        <td class="spacing__extra" colspan="6">
+            &nbsp;
         </td>
     </tr>
     <tr>
@@ -69,9 +74,9 @@ <h2 class="td--responsive heading-font">{{ type_description }}</h2>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="{{ contactpage }}" class="color--secondary">Ga naar onze contactpagina</a>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="https://example.com">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="tel:+14050" data-rel="external">Bel 14050</a></p></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
index 6a9cd32416..0dfd0d3652 100644
--- a/src/open_inwoner/static/mailcss/email.css
+++ b/src/open_inwoner/static/mailcss/email.css
@@ -17,7 +17,7 @@ p {
     margin: 0;
 }
 
-.heading-font, h1 {
+.heading-font, h1, h2, h3, h4 {
     color: #000000;
     font-family: Ubuntu, Helvetica, Arial, sans-serif;
     font-weight: bold;
@@ -44,13 +44,33 @@ td, .td-mail {
 
 /* Class styles for differing elements */
 
-.logo-mail {
+.td-mail__bg-danger .td-mail__bg-white a {
+    color: #704000;
+}
+
+.td-mail__bg-info .td-mail__bg-white a, .td-mail__bg-info a, .td__info-link a {
+    color: #2566A7;
+}
+
+.td__logo-mail {
     text-align: center;
+    padding-top: 16px;
+}
+
+.img__logo-mail {
     width: auto;
     max-height: 55px;
     max-width: 600px;
 }
 
+.td-mail h1 {
+    font-size: 20px;
+}
+
+.td-mail h2 {
+    font-size: 18px;
+}
+
 .td-mail.align-top {
     vertical-align: top;
 }
@@ -65,7 +85,7 @@ td.align-center {
 
 .td-mail.spacer-bottom {
     border-bottom: 1px solid #d2d2d2;
-    padding-top: 80px;
+    padding-top: 60px;
 }
 
 .td-mail--accent {
@@ -118,6 +138,10 @@ td.align-center {
     padding: 0;
 }
 
+.spacing__extra {
+    height: 20px;
+}
+
 /* Theme-colors and other mail-template colors */
 
 .text-color__info {
diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
index c64d9e248a..819ac4a9f3 100644
--- a/src/open_inwoner/templates/mail/_base.html
+++ b/src/open_inwoner/templates/mail/_base.html
@@ -163,9 +163,9 @@
                     <tr>
                         <td class="td-mail--accent td-mail__bg-accent" colspan="6" style="background-color: {{ theming.accent_color }};">&nbsp;</td>
                     </tr>
-                    <tr>
-                        <td class="td-mail logo-mail td__padding-top" colspan="6">
-                            <img height="55" src="{{ logo.url }}" alt="" class="logo-mail">
+                    <tr align="center">
+                        <td class="td-mail td__logo-mail" colspan="6" align="center" >
+                            <img height="55" src="{{ logo.url }}" alt="" class="img__logo-mail">
                         </td>
                     </tr>
                     <tr>