[#2175] Made mail-tabele with rounded corners transparent

maykinmedia · Mar 11, 2024 · f47523f · f47523f
1 parent ced91f7
commit f47523f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 22 deletions.
diff --git a/src/open_inwoner/conf/parts/case_document_notification.html b/src/open_inwoner/conf/parts/case_document_notification.html
@@ -17,25 +17,25 @@ <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr class="tr--responsive">
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__leftcell" colspan="3">
+        <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>{{ type_description }}</h2>
         </td>
-        <td class="td--responsive td-mail td-mail__bg-info td__padding-all td__rightcell td__alignright" colspan="3">
+        <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>
         </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">
+            <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">
-                            <img src="/static/img/mail/info_info-blue.png" width="20" height="20" alt="" class="mail__icon">
+                        <td width="35" class="td-mail mail--transparent td__padding-left align-center">
+                            <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 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
@@ -26,16 +26,16 @@ <h2>{{ type_description }}</h2>
         </td>
     </tr>
 
-    <!-- Table with different column-widths -->
-    <tr>
+    <!-- Contains Table with different column-widths -->
+    <tr class="mail--transparent">
         <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%">
+            <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 tmail--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
@@ -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%">
+            <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 tmail--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
@@ -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;
 }
@@ -163,7 +172,7 @@ td.align-center {
 
 .button--primary {
     border: 1px solid;
-    border-radius: 6px;
+    border-radius: 3px;
     color: #ffffff;
     display: inline-block;
     font-family: sans-serif;