From c38b9342457c1dfeb52786e98fd94572a688d729 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 5 Mar 2024 18:12:38 +0100
Subject: [PATCH] [#2175] Made mail-table with rounded corners look transparent

---
 .../parts/case_document_notification.html     | 10 ++++----
 .../conf/parts/case_status_notification.html  | 14 +++++------
 ...e_status_notification_action_required.html | 14 +++++++----
 src/open_inwoner/static/mailcss/email.css     | 23 +++++++++++++++----
 src/open_inwoner/templates/mail/_base.html    |  4 ++--
 5 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
index cf655bccc0..31f86a75b0 100644
--- a/src/open_inwoner/conf/parts/case_document_notification.html
+++ b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -26,16 +26,16 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
 
-    <!-- Table with different column-widths -->
+    <!-- Contains Table with different column-widths -->
     <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
-            <div class="td-mail__bg-white">
+        <td class="td-mail td-mail__bg-info cell--rounded-padding" colspan="6">
+            <div class="td-mail__bg-white mail-cell--rounded">
                 <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
                     <tr>
-                        <td width="35" class="td-mail td__padding-left align-center">
+                        <td width="35" class="td-mail mail--transparent td__padding-left align-center">
                             <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 align-center">
+                        <td class="td-mail mail--transparent 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>
diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
index bce1c2a2f5..949ceae9f2 100644
--- a/src/open_inwoner/conf/parts/case_status_notification.html
+++ b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -26,16 +26,16 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
 
-    <!-- Table with different column-widths -->
-    <tr>
-        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
-            <div class="td-mail__bg-white">
-                <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
+    <!-- Contains Table with different column-widths -->
+    <tr class="mail--transparent">
+        <td class="td-mail td-mail__bg-info cell--rounded-padding" colspan="6">
+            <div class="td-mail__bg-white mail-cell--rounded">
+                <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="mail--transparent">
                     <tr>
-                        <td width="35" class="td-mail td__padding-left align-center">
+                        <td width="35" class="td-mail mail--transparent td__padding-left align-center">
                             <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 align-center">
+                        <td class="td-mail mail--transparent 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>
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 7361897045..6cea2016e3 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
@@ -25,15 +25,17 @@ <h2>{{ type_description }}</h2>
             <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
         </td>
     </tr>
+
+    <!-- Contains Table with different column-widths -->
     <tr>
-        <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
-            <div class="td-mail__bg-white">
-                <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
+        <td class="td-mail td-mail__bg-danger cell--rounded-padding" colspan="6">
+            <div class="td-mail__bg-white mail-cell--rounded">
+                <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" class="mail--transparent">
                     <tr>
-                        <td width="35" class="td-mail td__padding-left align-center">
+                        <td width="35" class="td-mail mail--transparent td__padding-left align-center">
                             <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 align-center">
+                        <td class="td-mail mail--transparent 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>
@@ -42,6 +44,8 @@ <h2>{{ type_description }}</h2>
             </div>
         </td>
     </tr>
+    <!-- end of Table with differing column-widths -->
+
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
             <p>Log in om de documenten te uploaden.</p>
diff --git a/src/open_inwoner/static/mailcss/email.css b/src/open_inwoner/static/mailcss/email.css
index 0965bcd66f..1fc533dbf5 100644
--- a/src/open_inwoner/static/mailcss/email.css
+++ b/src/open_inwoner/static/mailcss/email.css
@@ -109,10 +109,7 @@ td.align-center {
 
 .td-mail__bg-white {
     background-color: #ffffff;
-    border: 1px solid #ffffff;
-    border-radius: 6px;
-    color: #704000;
-    display: inline-block;
+    color: #4B4B4B;
     font-family: Lato, Helvetica, Arial, sans-serif;
     font-size: 16px;
     line-height: 24px;
@@ -121,6 +118,18 @@ td.align-center {
     -webkit-text-size-adjust: none;
 }
 
+.mail-cell--rounded {
+    border: 1px solid #ffffff;
+    border-radius: 3px;
+    display: inline-block;
+    margin: 3px;
+    padding: 3px;
+}
+
+.mail--transparent {
+    background-color: transparent;
+}
+
 .td__padding-top {
     padding-top: 24px;
 }
@@ -141,6 +150,10 @@ td.align-center {
     padding: 20px 24px 20px 24px;
 }
 
+.cell--rounded-padding {
+    padding: 20px 30px 20px 20px;
+}
+
 .td__padding-zero {
     padding: 0;
 }
@@ -163,7 +176,7 @@ td.align-center {
 
 .button--primary {
     border: 1px solid;
-    border-radius: 6px;
+    border-radius: 3px;
     color: #ffffff;
     display: inline-block;
     font-family: sans-serif;
diff --git a/src/open_inwoner/templates/mail/_base.html b/src/open_inwoner/templates/mail/_base.html
index 3e11c4c10a..c6bec293ad 100644
--- a/src/open_inwoner/templates/mail/_base.html
+++ b/src/open_inwoner/templates/mail/_base.html
@@ -102,8 +102,8 @@
             display: block;
         }
 
-        .td__alignright {
-            text-align: left;
+        .td__alignright, .td__rightcell {
+            text-align: left !important;
         }
     }
 </style>