From 3960c19693dfe96708d82dd8edc3d9eb55125c15 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Mon, 4 Mar 2024 14:11:35 +0100
Subject: [PATCH] [#2169] Improved mail-template styling and placeholders

---
 .../parts/case_document_notification.html     |  19 ++++-----
 .../conf/parts/case_status_notification.html  |  19 ++++-----
 ...e_status_notification_action_required.html |  19 ++++-----
 .../conf/parts/contact_approval.html          |   4 +-
 .../conf/parts/contactform_registration.html  |   4 +-
 .../conf/parts/daily_email_digest.html        |   4 +-
 .../conf/parts/expiring_action.html           |   4 +-
 .../conf/parts/expiring_plan.html             |   4 +-
 src/open_inwoner/conf/parts/invite.html       |   4 +-
 src/open_inwoner/conf/parts/maileditor.py     |  17 +++++++++
 src/open_inwoner/conf/parts/new_messages.html |   4 +-
 .../conf/parts/plan_action_update.html        |   4 +-
 .../static/img/mail/alarm_danger-orange.jpg   | Bin 1932 -> 0 bytes
 .../static/img/mail/alarm_danger-orange.png   | Bin 0 -> 2586 bytes
 .../static/img/mail/check_success-green.png   | Bin 0 -> 5381 bytes
 .../static/img/mail/info_info-blue.jpg        | Bin 2241 -> 0 bytes
 .../static/img/mail/info_info-blue.png        | Bin 0 -> 4743 bytes
 src/open_inwoner/static/mailcss/email.css     |  36 ++++++++++++++++--
 src/open_inwoner/templates/mail/_base.html    |   9 ++++-
 19 files changed, 98 insertions(+), 53 deletions(-)
 delete mode 100644 src/open_inwoner/static/img/mail/alarm_danger-orange.jpg
 create mode 100644 src/open_inwoner/static/img/mail/alarm_danger-orange.png
 create mode 100644 src/open_inwoner/static/img/mail/check_success-green.png
 delete mode 100644 src/open_inwoner/static/img/mail/info_info-blue.jpg
 create mode 100644 src/open_inwoner/static/img/mail/info_info-blue.png

diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
index 36afd0a05a..592172c34a 100644
--- a/src/open_inwoner/conf/parts/case_document_notification.html
+++ b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -12,16 +12,16 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
+                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__info">Een of meer documenten zijn aan uw aanvraag toegevoegd.</p>
                         </td>
                     </tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}#">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</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/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
index 313c954596..c7a8a0b16b 100644
--- a/src/open_inwoner/conf/parts/case_status_notification.html
+++ b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -12,16 +12,16 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-info td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
@@ -30,13 +30,12 @@ <h2>{{ type_description }}</h2>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
+                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__info">De status is gewijzigd naar <span class="status_current"><strong><a href="{{ case_link }}" class="text-color__info">{{ status_description }}</a></strong></span>.</p>
                         </td>
                     </tr>
@@ -66,7 +65,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -77,11 +76,9 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
     <tr>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">{{ contact_phonenumber }}</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/conf/parts/case_status_notification_action_required.html b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
index 4a204749b1..730bd08cf9 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
@@ -12,29 +12,28 @@
         </td>
     </tr>
     <tr>
-        <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
+        <td class="td-mail td-mail__bg-danger td__padding-top td__padding-right td__padding-left" colspan="6">
             <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__leftcell" colspan="3">
             <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
             <h2>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all" colspan="3">
+        <td class="td--responsive td-mail td-mail__bg-danger td__padding-all td__rightcell td__alignright" colspan="3">
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
-                <p>
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
                         <td width="35" class="td-mail td__padding-left align-center">
-                            <img src="/static/img/mail/alarm_danger-orange.jpg" width="20" height="18" alt="" class="mail__icon">
+                            <img src="/static/img/mail/alarm_danger-orange.png" width="20" height="18" alt="" class="mail__icon">
                         </td>
-                        <td class="td__padding-top td__padding-right td__padding-bottom">
+                        <td class="td__padding-top td__padding-right td__padding-bottom align-center">
                             <p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>
                                 Upload de documenten tot {{ end_date }}</p>
                         </td>
@@ -63,7 +62,7 @@ <h2>{{ type_description }}</h2>
     </tr>
     <tr class="tr-mail">
         <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
-            <!-- <hr> styling --> &nbsp;
+            <!-- <hr> styling -->
         </td>
     </tr>
     <tr>
@@ -74,11 +73,9 @@ <h2>{{ 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"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__leftcell" colspan="2"><p><a href="{{ contact_page }}">Ga naar onze contactpagina</a></p>
         </td>
-        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><p>
-            <a href="tel:{{contact_phonenumber}}" data-rel="external">{{contact_phonenumber}}</a>
-        </p></td>
+        <td class="td--responsive td-mail td__padding-right td__padding-bottom td__padding-left td__rightcell td__nowrap" colspan="4"><p><a href="tel:{{ contact_phonenumber }}" data-rel="external">{{ contact_phonenumber }}</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/conf/parts/contact_approval.html b/src/open_inwoner/conf/parts/contact_approval.html
index 37608367d4..7a0fd4d936 100644
--- a/src/open_inwoner/conf/parts/contact_approval.html
+++ b/src/open_inwoner/conf/parts/contact_approval.html
@@ -3,5 +3,5 @@
     Volg onderstaande link waarop u uw goedkeuring kan geven of kan aangeven {{ sender_name }} niet als contactpersoon te willen. </p>
 <p><a href="{{ contacts_link }}">Mijn Contacten</a><span class="color--secondary"> &rarr;</span></p>
 <p>U kunt ook op een later moment toestemming geven, het verzoek van {{ sender_name }} blijft open staat totdat u een keuze heeft gemaakt.</p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/contactform_registration.html b/src/open_inwoner/conf/parts/contactform_registration.html
index 0e996dab18..fdc0a44c4e 100644
--- a/src/open_inwoner/conf/parts/contactform_registration.html
+++ b/src/open_inwoner/conf/parts/contactform_registration.html
@@ -25,5 +25,5 @@
     </tr>
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/daily_email_digest.html b/src/open_inwoner/conf/parts/daily_email_digest.html
index 978ca2cf8c..b9357425d2 100644
--- a/src/open_inwoner/conf/parts/daily_email_digest.html
+++ b/src/open_inwoner/conf/parts/daily_email_digest.html
@@ -18,5 +18,5 @@
     {% endfor %}
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_action.html b/src/open_inwoner/conf/parts/expiring_action.html
index 345342c82c..e74c24a9fa 100644
--- a/src/open_inwoner/conf/parts/expiring_action.html
+++ b/src/open_inwoner/conf/parts/expiring_action.html
@@ -15,5 +15,5 @@
 </table>
 
 <p><a href="{{ actions_link }}">Go to your actions</a></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/expiring_plan.html b/src/open_inwoner/conf/parts/expiring_plan.html
index 2b371bde27..fbcdd992f9 100644
--- a/src/open_inwoner/conf/parts/expiring_plan.html
+++ b/src/open_inwoner/conf/parts/expiring_plan.html
@@ -17,5 +17,5 @@
 </table>
 
 <p><a href="{{ plan_list_link }}">Go to your plans</a></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/invite.html b/src/open_inwoner/conf/parts/invite.html
index dc3e526275..8951ef8097 100644
--- a/src/open_inwoner/conf/parts/invite.html
+++ b/src/open_inwoner/conf/parts/invite.html
@@ -3,5 +3,5 @@
     Gebruik onderstaande link om je aan te melden </p>
 <p><a href="{{ invite_link }}">aanmelden</a><span class="color--secondary"> &rarr;</span></p>
 <p>Mocht je geen behoefte hieraan hebben dan staat het je vrij om dit bericht te negeren </p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/maileditor.py b/src/open_inwoner/conf/parts/maileditor.py
index 14568a2b25..0256304af1 100644
--- a/src/open_inwoner/conf/parts/maileditor.py
+++ b/src/open_inwoner/conf/parts/maileditor.py
@@ -1,4 +1,5 @@
 import os
+from datetime import date
 
 from django.utils.translation import gettext_lazy as _
 
@@ -211,18 +212,22 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "status_description",
                 "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
             },
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "case_link",
@@ -269,14 +274,17 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "start_date",
                 "description": _("The start date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "case_link",
@@ -312,14 +320,22 @@ def _readfile(name):
             {
                 "name": "identification",
                 "description": _("The identification of the case"),
+                "example": "ZAAK-1234",
             },
             {
                 "name": "type_description",
                 "description": _("The description of the type of the case"),
+                "example": _("Casetype placeholder"),
             },
             {
                 "name": "status_description",
                 "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
+            },
+            {
+                "name": "status_description",
+                "description": _("The description of the status of the case"),
+                "example": _("status placeholder"),
             },
             {
                 "name": "case_link",
@@ -328,6 +344,7 @@ def _readfile(name):
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
+                "example": date(2024, 5, 1),
             },
             {
                 "name": "site_name",
diff --git a/src/open_inwoner/conf/parts/new_messages.html b/src/open_inwoner/conf/parts/new_messages.html
index 353768c12b..c8706774c5 100644
--- a/src/open_inwoner/conf/parts/new_messages.html
+++ b/src/open_inwoner/conf/parts/new_messages.html
@@ -1,5 +1,5 @@
 <p>Dear</p>
 <p>You've received {{ total_messages }} new messages from {{ total_senders }} users</p>
 <p><a href="{{ inbox_link }}">Go to the inbox</a><span class="color--secondary"> &rarr;</span></p>
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/conf/parts/plan_action_update.html b/src/open_inwoner/conf/parts/plan_action_update.html
index 3e7ef445ae..d27b67440e 100644
--- a/src/open_inwoner/conf/parts/plan_action_update.html
+++ b/src/open_inwoner/conf/parts/plan_action_update.html
@@ -20,5 +20,5 @@
     </tr>
 </table>
 
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
+<p>Met vriendelijke groet,</p>
+<p>{{ site_name }}</p>
diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg b/src/open_inwoner/static/img/mail/alarm_danger-orange.jpg
deleted file mode 100644
index 4b5a0c428d1f27e6603b5234c1998320da1373ac..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1932
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
QU&ejdTxJ~96atO>4!oCg`v3p{

diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.png b/src/open_inwoner/static/img/mail/alarm_danger-orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..a85a43088059b4896a4a1cc4ba0ec3a009c0e1cc
GIT binary patch
literal 2586
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

literal 0
HcmV?d00001

diff --git a/src/open_inwoner/static/img/mail/check_success-green.png b/src/open_inwoner/static/img/mail/check_success-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..481ebccd34f3c92c931fc3581a1158215127c159
GIT binary patch
literal 5381
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

literal 0
HcmV?d00001

diff --git a/src/open_inwoner/static/img/mail/info_info-blue.jpg b/src/open_inwoner/static/img/mail/info_info-blue.jpg
deleted file mode 100644
index 0cc66f0237e0b8892d867d1e4adf7c5be0c5428c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2241
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
Mu4_d(jwq&o11B=|Z2$lO

diff --git a/src/open_inwoner/static/img/mail/info_info-blue.png b/src/open_inwoner/static/img/mail/info_info-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f71360fb4f307a295bc12b49a25e1b82d76fc73
GIT binary patch
literal 4743
zcmai2hc_E+7mo-cRw5Cz1Tkuqs@0+rVx=gtYqa)iYqZvj5;Il>rQRB?)!MVvs8OSW
z+7vZPYP6_bN|n#|{R7`Qcbw;U&b{ZJbDwkXxxY9gLmd_f4+H=Ju;}UH2p696Uj@@&
z*b2+a+zZF(t!woN0APauS7`t*vbiomnnwg34M61(-;aw2$Q5gV1psQ2nNIEL004GA
zJsj3FkmhI3yf31cqj&hnUkusQDhPNR(${lo3|_5DvuD7*gs&+DY6Wz_b^if&=g=0u
zeKsJz%R*%&=K_w0oUuWH5#NR4qWv3gpCnpx8-t@x4)ljV9h=PndE@4Dj)#w5CU4Oj
zA+(JDuatr!2+Dn9|8(A+wNl|eSHe9y@Jwio^?$2$7W#RJFdf_axVoAFpI3|lk`JcD
zW`7<se?36nqfa~r#<@VfQ_q!tr?6uoy1}>u9!8V!QNs*p6$w<3DJnOy2QcER5iV&6
zy0$12QJ2a-!V35c{`|1S?bMi<O)Sa!`U^bB7txdmRwHq7K4<`MChPj|uN1UDB<@)i
zV+?6@;tb!Y=#Zw!`ol9>dc{If!BPGLR&}lgOCMfqKfhf7yiOF}i2AuQr)Xw|5cn`t
zV}Kkei~Y)sIYvp4kGN*VXe)UA5Iu~AhSJtug5|Fxj}gy=O;KL<_RFI}d)Y$rUXL<*
zdCXYd-(pxFOf<D!4b18<Q|-Zf^i?X_iYFl`d9tDpg{e98GsSgdZh7*CsPT7g+b#49
zwc3fpuTwPK6EVuYnDJ(Y*d*1J%|d@%z}>&!PDJIyzc4Km!i4*7R4*JXTk}O=;iY!;
z9-k%##R9Z1h2&Ae0FCzXJWdlOrHs6f6LJyyM`4+HL*H{D1+rsHG&U8E@+G#QrDB@-
z6zwDjy&JZ_i=K`aD#CD&l5~|fDKZlxFD5ilLD3ME+m74rs8LT1U7{pbH&}P^?CKA_
zuv|*3fM(iOu&DKC^zy>XKm11=?NN<-(vA43$aRZm2^n%pPm=SIs5wd$d<1n1cDnCT
zKEvH`Px7z%Vcd<-jacpkE9x1)9chwQ?zv+yh8&&#JbBe3uhY~VHOI2;KUCH7W}WX@
z5*+j@boC)Ar#vZZ%t2XNiYGh;&io0sn9c?2f_Ke)$cip~`q_ej%J!PRqAF9*yM?nK
z{9d!s@6~qd|Aa}%$-})MHsj<<r_JRc-&eI}mHmuSw;HD}sY$OySYQxhSCI*I4paDe
zsdR*15r|+XXE-}_^MOly*frg$(pHE}Q{By(<L&P3vO^B_WbNgfD$UJ*cCs!NgVSM@
zo*pqJ=0yOchp}rBKbha-9>i;A9=@Lrthskm#eaHy)ifLrE)4XUu;$t}i7_e_O8rhp
zC|7<Vl6YjF$HlavWmP3XLVFMqqO1!)BRAIvbf%^-J}cCuC&t(Dn?iBsD4PoEzY<`U
z(Z5UE3+1M2#~G_*W7={z-r6dmWGex_lM0A;D2;ps_~?3|zM6Nvga|E@LA}YFBIqoK
zkDp|-`+^T#wpdx&!)E%WnNJAMSt2W|sLS!SNF$UX@Wq?BmP07Fu@*Tbq)=s7XnH(e
zM<aY|>t?n<_}+~7L+ZnSgJ}fpD*tU%=N-4io5Ij9D<GWx<Ms(IW_+%(>Ma?6m|=Ty
z%TV;sttLMb$qm$L(v(NfHrnafVCu{Q`yBUj&XtnEL=%}<+wxL{bG)-mTq;9yZK%n2
z%LE(_?_D3h=r;zoR@Rfm!MPhb_o>FT0ne#R>9eVQY!S?B&nU`nF~h^^)3CYpaZDO1
zlg5%7K$cu8RgT!-r{&C<cV!uC>^JY7=QWZmf}roRa5=CvwcLA=$f<K?#Q<YG*fUVZ
z7s@B3E77*>FzFUh#gpDMC(`7eIJpjZ2xTC#doHi!C7u!(k$N3-k*VTZs31KH<?Tg}
z^!S31-#lc`j}d5*I~ASM=A`SA(kmZh1O3VhOU;*HP7|*=jC~qo(&L41Ha16REPtH7
zRqDaPg9XZi#@}n&r5OJ@J?%1|^$g+DnfX@Ax0ZeI($K%<Pkx=BmJ)Q<2qoPS4AOvZ
zu~<K@$8RV@4I)6HJ01BmG4W*9wuP3rZ+-maQ|l(&Nbo}|aZ;xg^5rJ_7`;>>?bjgj
z<Vk;3iqqKBYn=0~AUfkr%<t)I<cRNQk`<O_F<pCAbN{e^+Y+(kp`kM(VWJ9j`foX5
zOAuX4#~dH79v9AUAqj`lI8^Fr<nzAulil?X$0P+`103$XEe^qW1v>hjC_Ca@J1Nrc
zPcR=y4?Ru{2J3qh!P?1>Nk%^^4$?Kt{2C8t1mpvGfpF7{G+pfF9+Raf)ssSR32e<y
z>#N#qKz37<Q{qG}zQnv@y=#DBYAV}y0Z0=VsRGuOCGLDm_l*CA0Zgf}$O@J|W7L~j
z2_av#K`@GvLss#?{GXNq^Cm-vxz$WsFxQ!g966*u>I#v4=5jXJ0#hPFFzyB{fX((;
zgrGIcHU&Brumqu?z5oY$AQXoJX``3j4~o?Z#%R;pD_5ZWKK?R?JipUCE->FF@L*K6
z6&3j7@tGLATH`hiUicMEjrMN#pod>GwXga2KhOq?g|ceWp>~%NwxK~PZT@1!&poFR
z@1@l4M;fjT)^5Lm-4x)DQop+kj$mJ#<DM&D|FGY`)-~_9#{K^JnnU<Cq!yiA{ekUm
zhZU|Q)cT_hL{PCvHFrau)tG^%F>$e2WQj)Mx)&-ot?f)R@qZZk!@y#KQGi*A(3#>u
z_-;Ex@?TZKy}ing&Gav2t3r--uf(jjIN-X$RQ0nQeT!B?@T5)Q{R}4y+aU+5aoXG9
zVma$C;zZ2GSGbRXCRD=^<@EmUvyHro%A>pxey0y%oB@UWU_nu6<YEpVclBsaS_R@(
z%g>jwsD6=kA?sw{h=m_p=e!}_$Gux!8)1N=UHz{oYwe+b+`A(Gs_V*UX$g^ZBUpEY
z#UYgCd_r7vVo(2_vtx!aq&TFyA`hYJ!_ox;L1EzhbE-H`-l{;qwJz0;Bo+a^2h8RA
zc0OUWjxBR;=-_m01JF20WzcMMntT>a!iSuqtIz+fk!yvf{6cN@oTiMFp)xdRl~tb%
z9d<-6jojx5WwzqJSULf>Lm6G^jGg9iIFy|i`kdx~hX-?oReoa;Tjm&)Tun2<=efg)
z-f600hjz?5_^^RgeVo;7`HJ{x>G)stjcEgO1DTv09PVOJgVmP(t{7;K=D0PA+leud
zI>woV>c47p_fuG@(*8TEXaU;4SgBIXGsnhL;b<^P1I2!uNsE#A4nt{xT-P@?zR4Nq
z1NS0w32~4J)>H}>Awn=k;X`5KXTR4_(peGtIIsf<X#5NcwMR5PKmb!LZ|6@i!*zCh
ztx*r$-Yhc0+(h)R(?f9N@}FPtCw4h7N<TDSkL(swo&GAL&H%eJx2I$DEC6O1#W`3h
zx=_&9wxRdzi{Q?PJ{It=!VkC8!)~C#So*i_TJUXghMI-oJ9<(V2|gTDY|}N=q;rR-
z!$=*}jL#IWiUxv!lmjr=NFOQrIyCXwdL*!=u0_rV0;DXXq|+kAii1dU^n)Bb+AhKx
zFrw2R_=1dRH)9cA0h_P@Lk}E&gMkIUNgA!^OyF$$;E&JKQcX%6yL)c@Fh>>EUwc7Y
z^y9ZhH6=a=feP$=cD}Vap)m@_r>|r0oeHFag%0CW;JUNw5sh0V+T<AF)Py_4!K$x9
zqR=>8&OW&$i&xEvr*C2`K#h2+DTQ_I26e_Yr=24MHQW^9<q@CmgziMUSxaDDoqFe`
zgT!>`cj(2FKuPVbwQ>d<!Z<o=>ZZYt)&p~4`(Q2LpaXiQpj(S>Z*TTkdM)LBSJs#E
zRY9k!L%W;4N3T#+Nr;G{xN}ze!IU5OLrqHZ2<8!sYD(kLf{qOeY~JlsKf8AFN<PAH
zE$k8dq~w$)tllEA5fjtJl*O*d1Z#aMj#t3Q51=~S8U@-hd%jh$Vl?VN-l|HS(04s0
zRMcwW65PoGu3<?>1H~@)<>Q#^wJLqU!95_D?t&R-wH1%nI*Se)`a4nmM_KGXEf@nO
zE-Nx^Izll8x=FBjes(yY80`Kx<&@Wg1;&LLU~M)oh}8)jOdl0AZlpVN5guFfplY9*
zyf`CC9AvsJ^!;-Iq3^^V5#-D8?2c^c#-BFaN_<T?Em+rx=#9YU{j^YycME7ev03**
z6GGX*nc2yVZ9(<*j|I@)^S=!LyuVWsf6Ze&-typ;cT;cXBCxM^pEe~`#_{`8(alNc
z_0<41S%(4c2pu-jMoi=KE#=fWp$<>_d$twkzZN}R5{(>KdvI*8$@|#aNG4B06G_;(
z%uMaZ{QdypGXxUPuP+GfD<Bn8b0(V`f6LegS;87URy<xfm{Icc8BC@bO<J0$&JB@H
z%t@b9+aAhusyyHGoM>k7MIhBO6%k<W<^*JJB*<oRz4Ou916NIbpO|n;A!%75B67K%
z&DYp_!M-J=b%k~LEhZoj1BJMpc<~Nn-MUe+_ZIWVf#RdPlNDh%MG$iv%=7hU!8KFO
zJDRH2U?vCWyYzY6`1TiXbv{l|Kh_p2&#A$ESJ%-HPO!j<o}1R!V#&Xi-^KB&)ymll
zRy0`h_a~Hp%i!mB;*36Jbep#g&L<<)6B1`6UB6MOX}sD`Zc5CD%HHkQqpaklJ+!9w
zWzeXM?0E%&*cq5vY@$=e4Nxs?=WjJ>B-kZVeZeBE7QbwyyY5{2``1WLupC+7U#6@P
z*X6uA+rn0P^a|HsXXyp2@@S0~jx&GP+0~OGOAUYQR?Q}2(u~<FHBV@Z0q~i>Gezf7
z%FO6RT9$RZHLLYK6<$A1P*^SNVX+f~F1z?Q4Y~O5xa3J(I+|W$4SI9UCpp*%3K&v(
z@<hHJ2!keJGOLibYaADQHJz1h(c^~rd5NiWU_*Sb4oK`#GBG?$UH$hhsE!X3|ITvT
z*W3Fc)?4Z<G}SQH&gPTYt@OH%zTd@>G8bj1@Z0=WD6PpW76LzV?^DaW-zaAKw5Q(w
zaHI52<#>v9>6NMvdE{}(<s%gbipqk>4WjJ$yC<1G0lSalF14#`;E~9};k07j_xc$Y
zK>E;oyV+(5E{<>pco8PEq$nwO+U>L##l;+3$z9accNG%P6Kmv|!P^TJG+se%`v%_O
zh&n2$WbfL*%PSqTY(02<V=e5mHeWTgOgYm{n3DO!nm6=Fq6hgW4CvY-=h|}COvi%$
z>Ia$~Anm2G2%tH2e9CBtH4cFG5F{g%m|!>KVG>1Xl+A>YB1@t$nfY3s6Sm?-;K&k^
za%Mj`>T+@OFG0dBe?NKE>GFTvGt;(DPj$LIdzfgC0?WmRWh6C<K%Iy&vFmXm#i@#M
zwY_Eu5`5C&!EEB^BzAsT{q<6_yS>@uFw({KaoG&rzH~+TevecJ7<W~)Uv$yExDdm2
z)4F9gw2t4~f8(Iq53|v&F>Es*;(D~CRHQ1BR`jbdCnu`_X{U%>!y~m=hs}3?>o%Jk
zc;2xhCNf^93vscO#i)e)X8{73jU}XckeaR&Kdr*Kai{Ek2M*BgmTvj<U~>r>=<3DS
zZ9*=#rb<t_>)JX?`6=z?CMZ_froLxD9*z7xEA&D|b%ze4x%Q)5me`Nf7`xAIN@ga$
z#7ToXz3t?LEa+cHNM7p?9#O0Ul{>WU3VH~WuNvQ}jKO4VwS_zmW%0oM1a;yFD<06d
zEE8=e_3T^j#YLEp%cD^{{`dPlA1vB*DHv@a6&8v<1MT<by2s*!%bG1R#DDcG80H@W
zxlQu$7Rw{7-0!VpA(QTIiI|T&Bf<igD>RPp6K>A@Fw=@*E^^Dpd@MFHWLyb-@rQx)
zaH{kR%TZnpkh?(RddfulgKgJ~>&-1+_M^NV%8_*{%jjz;+TzvdNW;KY^B1X(ArKBq
zaAKL=_o%VVV(R^83I)9+7n5ioJ`Rcw<tJwcpP)@-^9N7sku%DuP}cNU_u8ZrE(x*;
zdCuzP=4pV#6;3AW>QY7i>q{<7bk)~S=g(fpQ^$)jLxAm>l^c{tG2WtQ+0hNsV^6=l
zsmlZIMitx&4s)O{|H&<PZ42INW4;xEtD0{QkQzn4_0g$FQ<oqE_~JwhxIK)=YDEQI
z2gn_vJu)9?k;FgT?-if)YQ?BI4zkvx%&taZ=?Fk6)bz{D`|WUdn_>GgtA>KP7_XDv
rs=9Y73sa$6djFq@xnOESj@4;D@+qXh7!$kTjR1ODhPX<NdlCNu640Ni

literal 0
HcmV?d00001

diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
index cd1e8dd2c9..39e15a9274 100644
--- a/src/open_inwoner/static/mailcss/email.css
+++ b/src/open_inwoner/static/mailcss/email.css
@@ -64,7 +64,10 @@ td, .td-mail {
 }
 
 .mail__icon {
-    border-right: 5px solid #FFFFFF;
+    padding-right: 8px;
+    margin-right: 0;
+    width: 20px;
+    height: 20px;
 }
 
 .td-mail h1 {
@@ -97,7 +100,7 @@ td.align-center {
 }
 
 .td-mail__bg-info {
-    background-color: #B3D9EB;
+    background-color: #D5E6F6;
 }
 
 .td-mail__bg-danger {
@@ -142,12 +145,24 @@ td.align-center {
     padding: 0;
 }
 
+.td__nowrap {
+    white-space: nowrap;
+}
+
+.td__alignright {
+    text-align: right;
+}
+
+.td__rightcell.td__nowrap {
+    min-width: 300px;
+}
+
 .spacing__extra {
     height: 20px;
 }
 
 .button--primary {
-    border: 1px solid #0065BD;
+    border: 1px solid;
     border-radius: 6px;
     color: #ffffff;
     display: inline-block;
@@ -181,3 +196,18 @@ td.align-center {
     font-size: 14px;
 }
 
+strong .color--primary, strong .color--secondary {
+    line-height: 42px;
+    text-decoration: none;
+}
+
+/* CKEditor only */
+
+.cke_editable a {
+    color: #248641;
+}
+
+.cke_editable .button--primary {
+    background-color: #0065BD;
+    color: #FFFFFF;
+}
diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
index d3cba63152..f4070afe77 100644
--- a/src/open_inwoner/templates/mail/_base.html
+++ b/src/open_inwoner/templates/mail/_base.html
@@ -97,9 +97,14 @@
             display: block;
             width: 100%;
         }
+
         .td--responsive {
             display: block;
         }
+
+        .td__alignright {
+            text-align: left;
+        }
     }
 </style>
 
@@ -113,6 +118,7 @@
         --color-accent: {{ theming.accent_color }};
         --color-primary: {{ theming.primary_color }};
         --color-secondary: {{ theming.secondary_color }};
+        margin: 0;
     }
 
     /* Dynamic theme CSS variables */
@@ -131,6 +137,7 @@
 
     .button--primary {
         background-color: {{ theming.primary_color }};
+        border: 1px solid{{ theming.primary_color }};
     }
 
     .td-mail__bg-accent {
@@ -153,7 +160,7 @@
                         <td class="td-mail--accent td-mail__bg-accent" colspan="6" style="background-color: {{ theming.accent_color }};">&nbsp;</td>
                     </tr>
                     <tr align="center">
-                        <td class="td-mail td__logo-mail" colspan="6" 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>