From ae6fb04ca14c96a6447575050c545eac8f8ede29 Mon Sep 17 00:00:00 2001
From: Charlie Schliesser <charlie@csdv.co>
Date: Mon, 31 Dec 2018 18:26:38 -0600
Subject: [PATCH 1/3] Use v:roundrect for actionItems in Outlook.

---
 themes/default/index.html | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/themes/default/index.html b/themes/default/index.html
index 81dcc78..0e9230a 100644
--- a/themes/default/index.html
+++ b/themes/default/index.html
@@ -203,7 +203,6 @@
     .button {
       display: inline-block;
       width: 200px;
-      background-color: #3869D4;
       border-radius: 3px;
       color: #ffffff;
       font-size: 15px;
@@ -311,16 +310,28 @@ <h1><%- title %></h1>
                     <!-- Action -->
                     <% if (locals.action) { %>
                       <% action.forEach(function (actionItem) { -%>
-                          <p><%- actionItem.instructions %></p>
-                          <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
-                            <tr>
-                              <td align="center">
-                                <div>
-                                  <a href="<%- actionItem.button.link %>" class="button" style="background-color: <%- actionItem.button.color %>" target="_blank"><%- actionItem.button.text %></a>
-                                </div>
-                              </td>
-                            </tr>
-                          </table>
+                        <p><%- actionItem.instructions %></p>
+                        <!--[if mso]>
+                          <center>
+                            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="<%- actionItem.button.link %>" style="height: 45px; v-text-anchor: middle; width: 200px;" arcsize="10%" stroke="f" fillcolor="<%- actionItem.button.color %>">
+                              <w:anchorlock/>
+                              <center style="color: #ffffff; font-family: sans-serif; font-size: 15px;">
+                                <%- actionItem.button.text %>
+                              </center>
+                            </v:roundrect>
+                          </center>
+                        <![endif]-->
+                        <![if !mso]>
+                        <table class="body-action" align="center" cellpadding="0" cellspacing="0">
+                          <tr>
+                            <td align="center">
+                              <a href="<%- actionItem.button.link %>" class="button" target="_blank" style="background-color: <%- actionItem.button.color %>;">
+                                <%- actionItem.button.text %>
+                              </a>
+                            </td>
+                          </tr>
+                        </table>
+                        <![endif]>
                       <% }) -%>
                     <% } %>
 

From d1cef200e41cb392f58a206fa965af15cc750150 Mon Sep 17 00:00:00 2001
From: Charlie Schliesser <charlie@csdv.co>
Date: Wed, 2 Jan 2019 11:57:05 -0600
Subject: [PATCH 2/3] Indentation.

---
 themes/default/index.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/themes/default/index.html b/themes/default/index.html
index 0e9230a..e2477d5 100644
--- a/themes/default/index.html
+++ b/themes/default/index.html
@@ -322,15 +322,15 @@ <h1><%- title %></h1>
                           </center>
                         <![endif]-->
                         <![if !mso]>
-                        <table class="body-action" align="center" cellpadding="0" cellspacing="0">
-                          <tr>
-                            <td align="center">
-                              <a href="<%- actionItem.button.link %>" class="button" target="_blank" style="background-color: <%- actionItem.button.color %>;">
-                                <%- actionItem.button.text %>
-                              </a>
-                            </td>
-                          </tr>
-                        </table>
+                          <table class="body-action" align="center" cellpadding="0" cellspacing="0">
+                            <tr>
+                              <td align="center">
+                                <a href="<%- actionItem.button.link %>" class="button" target="_blank" style="background-color: <%- actionItem.button.color %>;">
+                                  <%- actionItem.button.text %>
+                                </a>
+                              </td>
+                            </tr>
+                          </table>
                         <![endif]>
                       <% }) -%>
                     <% } %>

From dc5c2ed5c698f01e36ac934207e0ac01f0bb24e3 Mon Sep 17 00:00:00 2001
From: Charlie Schliesser <charlie@csdv.co>
Date: Wed, 2 Jan 2019 12:00:16 -0600
Subject: [PATCH 3/3] Use v:roundrect in Cerberus theme.

---
 themes/cerberus/index.html | 93 +++++++++++++++++++++++++-------------
 1 file changed, 62 insertions(+), 31 deletions(-)

diff --git a/themes/cerberus/index.html b/themes/cerberus/index.html
index df08dc6..05ff3f6 100644
--- a/themes/cerberus/index.html
+++ b/themes/cerberus/index.html
@@ -18,7 +18,7 @@
 
 	<!-- Web Font / @font-face : BEGIN -->
 	<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
-	
+
 	<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
 	<!--[if mso]>
 		<style>
@@ -27,14 +27,14 @@
 			}
 		</style>
 	<![endif]-->
-	
+
 	<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
 	<!--[if !mso]><!-->
 		<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
 	<!--<![endif]-->
 
 	<!-- Web Font / @font-face : END -->
-	
+
   	<!-- CSS Reset -->
     <style type="text/css">
 
@@ -47,25 +47,26 @@
             height: 100% !important;
             width: 100% !important;
         }
-        
+
         /* What it does: Stops email clients resizing small text. */
         * {
             -ms-text-size-adjust: 100%;
             -webkit-text-size-adjust: 100%;
+            font-family: sans-serif;
         }
-        
+
         /* What is does: Centers email on Android 4.4 */
         div[style*="margin: 16px 0"] {
             margin:0 !important;
         }
-        
+
         /* What it does: Stops Outlook from adding extra spacing to tables. */
         table,
         td {
             mso-table-lspace: 0pt !important;
             mso-table-rspace: 0pt !important;
         }
-                
+
         /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
         table {
             border-spacing: 0 !important;
@@ -74,9 +75,9 @@
             Margin: 0 auto !important;
         }
         table table table {
-            table-layout: auto; 
+            table-layout: auto;
         }
-        
+
         /* What it does: Uses a better rendering method when resizing images in IE. */
         img {
             -ms-interpolation-mode:bicubic;
@@ -89,24 +90,24 @@
         }
 
         .branding a {
-            color: inherit;
+            color: #fff;
             text-decoration:none;
         }
 
         .copyright a {
-            color:#888888; 
+            color:#888888;
             text-decoration:underline;
         }
 
         .email-logo {
             max-height: 50px;
         }
-        
+
         /* What it does: Overrides styles added when Yahoo's auto-senses a link. */
         .yshortcuts a {
             border-bottom: none !important;
         }
-        
+
         /* What it does: A work-around for iOS meddling in triggered links. */
         .mobile-link--footer a,
         a[x-apple-data-detectors] {
@@ -157,12 +158,30 @@
             font-size: 15px;
             line-height: 18px;
         }
-      
+
+        /* Button */
+        .button-td {
+            border-radius: 3px;
+            text-align: center;
+        }
+
+        .button-a {
+            border-radius: 3px;
+            display: block;
+            font-family: sans-serif;
+            font-size: 13px;
+            font-weight: bold;
+            line-height: 1.1;
+            padding: 15px;
+            text-align: center;
+            text-decoration: none;
+        }
+
     </style>
-    
+
     <!-- Progressive Enhancements -->
     <style>
-        
+
         /* What it does: Hover styles for buttons */
         .button-td,
         .button-a {
@@ -180,7 +199,7 @@
 <body width="100%" bgcolor="#222222" style="Margin: 0;" dir="<%- textDirection %>">
     <center style="width: 100%; background: #222222;">
 
-        <!--    
+        <!--
             Set the email width. Defined in two places:
             1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
             2. MSO tags for Desktop Windows Outlook enforce a 600px width.
@@ -207,10 +226,10 @@
 				</tr>
             </table>
             <!-- Email Header : END -->
-            
+
             <!-- Email Body : BEGIN -->
             <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 600px;">
-                
+
                 <!-- Hero Image, Flush : BEGIN -->
                 <tr>
 					<td>
@@ -294,16 +313,28 @@ <h3 style="font-family: sans-serif; font-size: 26px; padding: 40px 10px 0; text-
                                         <% action.forEach(function (actionItem) { -%>
                                             <p><%- actionItem.instructions %></p>
                                             <br />
-                                             <!-- Button : Begin -->
-                                            <table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
-                                                <tr>
-                                                    <td style="border-radius: 3px; background: <%- actionItem.button.color %>; text-align: center;" class="button-td">
-                                                        <a href="<%- actionItem.button.link %>" target="_blank" style="background: <%- actionItem.button.color %>; border: 15px solid <%- actionItem.button.color %>; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
-                                                            &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff"><%- actionItem.button.text %></span>&nbsp;&nbsp;&nbsp;&nbsp;
-                                                        </a>
-                                                    </td>
-                                                </tr>
-                                            </table>
+                                            <!-- Button : Begin -->
+                                            <!--[if mso]>
+                                                <center>
+                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="<%- actionItem.button.link %>" style="height: 45px; v-text-anchor: middle; width: 200px;" arcsize="10%" stroke="f" fillcolor="<%- actionItem.button.color %>">
+                                                        <w:anchorlock/>
+                                                        <center style="color: #ffffff; font-family: sans-serif; font-size: 13px; font-weight: bold;">
+                                                            <%- actionItem.button.text %>
+                                                        </center>
+                                                    </v:roundrect>
+                                                </center>
+                                            <![endif]-->
+                                            <![if !mso]>
+                                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
+                                                    <tr>
+                                                        <td style="background-color: <%- actionItem.button.color %>;" class="button-td">
+                                                            <a href="<%- actionItem.button.link %>" target="_blank" style="background-color: <%- actionItem.button.color %>; border-color: <%- actionItem.button.color %>;" class="button-a">
+                                                                &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff"><%- actionItem.button.text %></span>&nbsp;&nbsp;&nbsp;&nbsp;
+                                                            </a>
+                                                        </td>
+                                                    </tr>
+                                                </table>
+                                            <![endif]>
                                             <br />
                                             <!-- Button : END -->
                                         <% }) -%>
@@ -314,7 +345,7 @@ <h3 style="font-family: sans-serif; font-size: 26px; padding: 40px 10px 0; text-
                     </td>
                 </tr>
                 <!-- 1 Column Text + Button : BEGIN -->
-               
+
                 <!-- 2 Even Columns : BEGIN -->
                 <tr>
                     <td>
@@ -342,7 +373,7 @@ <h3 style="font-family: sans-serif; font-size: 26px; padding: 40px 10px 0; text-
 
             </table>
             <!-- Email Body : END -->
-          
+
             <!-- Email Footer : BEGIN -->
             <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
                 <tr>