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

---
 src/open_inwoner/conf/parts/case_status_notification.html   | 6 +++---
 .../parts/case_status_notification_action_required.html     | 6 +++---
 src/open_inwoner/static/img/mail/alarm_danger-orange.svg    | 3 ---
 src/open_inwoner/static/img/mail/info_info-blue.svg         | 3 ---
 src/open_inwoner/static/mailcss/email.css                   | 4 ++++
 src/open_inwoner/templates/mail/_base.html                  | 4 ++--
 6 files changed, 12 insertions(+), 14 deletions(-)
 delete mode 100644 src/open_inwoner/static/img/mail/alarm_danger-orange.svg
 delete mode 100644 src/open_inwoner/static/img/mail/info_info-blue.svg

diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
index 9a791b2211..bcb5c511b3 100644
--- a/src/open_inwoner/conf/parts/case_status_notification.html
+++ b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -1,4 +1,4 @@
-<table border="0" width="100%" class="table-mail">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
     <tbody>
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
@@ -31,10 +31,10 @@ <h2>{{ type_description }}</h2>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
                 <p>
-                <table border="0" width="100%">
+                <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" alt="">
+                            <img src="/static/img/mail/info_info-blue.jpg" width="20" height="20" alt="" class="mail__icon">
                         </td>
                         <td class="td__padding-top td__padding-right td__padding-bottom">
                             <p class="text-color__info">De status is gewijzigd naar <span class="status_current"><strong><a href="{{ case_link }}" class="text-color__info">{{ type_description }}</a></strong></span>.</p>
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 aed640a5ff..ceb986877f 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
@@ -1,4 +1,4 @@
-<table border="0" width="100%" class="table-mail">
+<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
     <tbody>
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
@@ -29,10 +29,10 @@ <h2>{{ type_description }}</h2>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <div class="td-mail__bg-white">
                 <p>
-                <table border="0" width="100%">
+                <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" alt="">
+                            <img src="/static/img/mail/alarm_danger-orange.jpg" width="20" height="18" alt="" class="mail__icon">
                         </td>
                         <td class="td__padding-top td__padding-right td__padding-bottom">
                             <p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>
diff --git a/src/open_inwoner/static/img/mail/alarm_danger-orange.svg b/src/open_inwoner/static/img/mail/alarm_danger-orange.svg
deleted file mode 100644
index 78e7785df7..0000000000
--- a/src/open_inwoner/static/img/mail/alarm_danger-orange.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0001 5.49005L19.5301 18.5001H4.47012L12.0001 5.49005ZM2.74012 17.5001C1.97012 18.8301 2.93012 20.5001 4.47012 20.5001H19.5301C21.0701 20.5001 22.0301 18.8301 21.2601 17.5001L13.7301 4.49005C12.9601 3.16005 11.0401 3.16005 10.2701 4.49005L2.74012 17.5001ZM11.0001 10.5001V12.5001C11.0001 13.0501 11.4501 13.5001 12.0001 13.5001C12.5501 13.5001 13.0001 13.0501 13.0001 12.5001V10.5001C13.0001 9.95005 12.5501 9.50005 12.0001 9.50005C11.4501 9.50005 11.0001 9.95005 11.0001 10.5001ZM11.0001 15.5001H13.0001V17.5001H11.0001V15.5001Z" fill="#704000"/>
-</svg>
diff --git a/src/open_inwoner/static/img/mail/info_info-blue.svg b/src/open_inwoner/static/img/mail/info_info-blue.svg
deleted file mode 100644
index 2a307ed620..0000000000
--- a/src/open_inwoner/static/img/mail/info_info-blue.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 5H11V7H9V5ZM9 9H11V15H9V9ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18Z" fill="#2566A7"/>
-</svg>
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
index 0dfd0d3652..3661e0262e 100644
--- a/src/open_inwoner/static/mailcss/email.css
+++ b/src/open_inwoner/static/mailcss/email.css
@@ -63,6 +63,10 @@ td, .td-mail {
     max-width: 600px;
 }
 
+.mail__icon {
+    border-right: 5px solid #FFFFFF;
+}
+
 .td-mail h1 {
     font-size: 20px;
 }
diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
index 819ac4a9f3..66ff0d059e 100644
--- a/src/open_inwoner/templates/mail/_base.html
+++ b/src/open_inwoner/templates/mail/_base.html
@@ -153,13 +153,13 @@
 <body>
 
 <center>
-    <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+    <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
         <tbody>
         <tr>
             <!-- Do not remove empty TD's !!! -->
             <td></td>
             <td width="600">
-                <table border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
+                <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="table-mail">
                     <tr>
                         <td class="td-mail--accent td-mail__bg-accent" colspan="6" style="background-color: {{ theming.accent_color }};">&nbsp;</td>
                     </tr>