improve:schedule-execution-failed-email (#6051)

Improving the email template design


![image](https://github.com/Unleash/unleash/assets/103567375/0c62c1de-6d13-42b8-9898-4567be6ff2aa)

- @andreas-unleash i need you to fix the button for the change request
in case it's not correct like this

- also removing some leftover style from the "scheduled change conflict"
email

---------

Co-authored-by: andreas-unleash <andreas@getunleash.ai>

src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache

@@ -318,52 +318,21 @@
 
             /* ======== Header Styles ======== */
 
-            /**
-            * @tab Mobile Styles
-            * @section header image
-            * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
-            */
-            #headerImage{
-            }
 
-            /**
-            * @tab Mobile Styles
-            * @section header text
-            * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
-            */
-            .headerContent{
-            }
 
             /* ======== Body Styles ======== */
 
-
             #templateBody{
                 margin: 32px 0;
                 padding: 32px 0;
             }   
 
-            /**
-            * @tab Mobile Styles
-            * @section body text
-            * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
-            */
-            .bodyContent{
-            }
-
-
             /* ======== Footer Styles ======== */
 
-            /**
-            * @tab Mobile Styles
-            * @section footer text
-            * @tip Make the body content text larger in size for better readability on small screens.
-            */
-            .footerContent{
-            }
-
             .footerContent a {
                 display:block !important;
                 border-right: 0;
+                padding: 6px 0;
             } /* Place footer social and utility links on their own lines, for easier access */
         }
     </style>

src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.html.mustache

@@ -32,7 +32,7 @@
         * @theme page
         */
         body, #bodyTable{
-            /*@editable*/ background-color:#DEE0E2;
+            /*@editable*/ background-color:#F7F7FA;
         }
 
         /**
@@ -42,7 +42,6 @@
         * @theme page
         */
         #bodyCell{
-            /*@editable*/ border-top:4px solid #BBBBBB;
         }
 
         /**
@@ -51,7 +50,10 @@
         * @tip Set the border for your email.
         */
         #templateContainer{
-            /*@editable*/ border:1px solid #BBBBBB;
+         /*@editable*/ border:2px solid #817AFE;
+            border-radius: 12px;
+            overflow: hidden;
+            padding: 48px;        
         }
 
         /**
@@ -61,19 +63,18 @@
         * @style heading 1
         */
         h1{
-            /*@editable*/ color:#202020 !important;
+            /*@editable*/ color:#202021 !important;
             display:block;
             /*@editable*/ font-family:Helvetica;
-            /*@editable*/ font-size:26px;
+            /*@editable*/ font-size:24px;
             /*@editable*/ font-style:normal;
             /*@editable*/ font-weight:bold;
-            /*@editable*/ line-height:100%;
+            /*@editable*/ line-height:1.4;
             /*@editable*/ letter-spacing:normal;
             margin-top:0;
             margin-right:0;
-            margin-bottom:10px;
+            margin-bottom:32px;
             margin-left:0;
-            /*@editable*/ text-align:left;
         }
 
         /**
@@ -83,17 +84,17 @@
         * @style heading 2
         */
         h2{
-            /*@editable*/ color:#404040 !important;
+            /*@editable*/ color:#202021 !important;
             display:block;
             /*@editable*/ font-family:Helvetica;
             /*@editable*/ font-size:20px;
             /*@editable*/ font-style:normal;
             /*@editable*/ font-weight:bold;
-            /*@editable*/ line-height:100%;
+            /*@editable*/ line-height:1.4;
             /*@editable*/ letter-spacing:normal;
             margin-top:0;
             margin-right:0;
-            margin-bottom:10px;
+            margin-bottom:24px;
             margin-left:0;
             /*@editable*/ text-align:left;
         }
@@ -105,17 +106,17 @@
         * @style heading 3
         */
         h3{
-            /*@editable*/ color:#606060 !important;
+            /*@editable*/ color:#202021 !important;
             display:block;
             /*@editable*/ font-family:Helvetica;
             /*@editable*/ font-size:16px;
-            /*@editable*/ font-style:italic;
+            /*@editable*/ font-style:normal;
-            /*@editable*/ font-weight:normal;
+            /*@editable*/ font-weight:bold;
-            /*@editable*/ line-height:100%;
+            /*@editable*/ line-height:1.4;
             /*@editable*/ letter-spacing:normal;
             margin-top:0;
             margin-right:0;
-            margin-bottom:10px;
+            margin-bottom:16px;
             margin-left:0;
             /*@editable*/ text-align:left;
         }
@@ -127,58 +128,23 @@
         * @style heading 4
         */
         h4{
-            /*@editable*/ color:#808080 !important;
+           /*@editable*/ color:#202021 !important;
             display:block;
             /*@editable*/ font-family:Helvetica;
             /*@editable*/ font-size:14px;
-            /*@editable*/ font-style:italic;
+            /*@editable*/ font-style:normal;
             /*@editable*/ font-weight:normal;
-            /*@editable*/ line-height:100%;
+            /*@editable*/ line-height:1.4;
             /*@editable*/ letter-spacing:normal;
             margin-top:0;
             margin-right:0;
-            margin-bottom:10px;
+            margin-bottom:16px;
             margin-left:0;
             /*@editable*/ text-align:left;
         }
 
         /* ========== Header Styles ========== */
 
-        /**
-        * @tab Header
-        * @section preheader style
-        * @tip Set the background color and bottom border for your email's preheader area.
-        * @theme header
-        */
-        #templatePreheader{
-            /*@editable*/ background-color:#fff;
-            /*@editable*/ border-bottom:1px solid #CCCCCC;
-        }
-
-        /**
-        * @tab Header
-        * @section preheader text
-        * @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
-        */
-        .preheaderContent{
-            /*@editable*/ color:#808080;
-            /*@editable*/ font-family:Helvetica;
-            /*@editable*/ font-size:10px;
-            /*@editable*/ line-height:125%;
-            /*@editable*/ text-align:left;
-        }
-
-        /**
-        * @tab Header
-        * @section preheader link
-        * @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
-        */
-        .preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
-            /*@editable*/ color:#fff;
-            /*@editable*/ font-weight:normal;
-            /*@editable*/ text-decoration:underline;
-        }
-
         /**
         * @tab Header
         * @section header style
@@ -186,9 +152,7 @@
         * @theme header
         */
         #templateHeader{
-            /*@editable*/ background-color:#fff;
+            /*@editable*/ color:#6E6E70;
-            /*@editable*/ border-top:1px solid #FFFFFF;
-            /*@editable*/ border-bottom:1px solid #CCCCCC;
         }
 
         /**
@@ -197,11 +161,11 @@
         * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
         */
         .headerContent{
-            /*@editable*/ color:#505050;
+            /*@editable*/ color:#6E6E70;
             /*@editable*/ font-family:Helvetica;
             /*@editable*/ font-size:20px;
             /*@editable*/ font-weight:bold;
-            /*@editable*/ line-height:100%;
+            /*@editable*/ line-height:1.4;
             /*@editable*/ padding-top:0;
             /*@editable*/ padding-right:0;
             /*@editable*/ padding-bottom:0;
@@ -222,8 +186,6 @@
         }
 
         #headerImage{
-            height:auto;
-            max-width:600px;
         }
 
         /* ========== Body Styles ========== */
@@ -234,7 +196,10 @@
         * @tip Set the background color and borders for your email's body area.
         */
         #templateBody{
-            /*@editable*/ background-color:#fff;
+            margin: 48px 0;
+            padding: 48px 0;
+            border-top: 1px solid #E1E1E3;
+            border-bottom: 1px solid #E1E1E3;        
         }
 
         /**
@@ -244,15 +209,10 @@
         * @theme main
         */
         .bodyContent{
-            /*@editable*/ color:#505050;
+            /*@editable*/ color:#202021;
             /*@editable*/ font-family:Helvetica;
-            /*@editable*/ font-size:14px;
+            /*@editable*/ font-size:16px;
-            /*@editable*/ line-height:150%;
+            /*@editable*/ line-height:1.4;
-            /*@editable*/ border-bottom: 1px solid #CCCCCC;
-            padding-top:20px;
-            padding-right:20px;
-            padding-bottom:20px;
-            padding-left:20px;
             /*@editable*/ text-align:left;
         }
 
@@ -262,13 +222,25 @@
             max-width:560px;
         }
 
-        .changeRequestLink {
+        .bodyContent a {
+            color: #615BC2;
             text-decoration: none;
-            text-align: center;
         }
 
-        .changeRequestLink:hover {
+        .bodyContent a:hover {
-            text-decoration: none;
+            text-decoration: underline;
+        }
+
+        .bodyContent .buttonStyle {
+            margin-top: 32px;
+            display: inline-block;
+            padding: 13px 20px;
+            color: #fff;
+            background: #6C65E5;
+            border-radius: 4px;
+            font-size: 16px;
+            line-height: 1;
+            text-decoration: none !important;
         }
 
         /* ========== Footer Styles ========== */
@@ -280,8 +252,6 @@
         * @theme footer
         */
         #templateFooter{
-            /*@editable*/ background-color:#fff;
-            /*@editable*/ border-top:1px solid #FFFFFF;
         }
 
         /**
@@ -291,24 +261,32 @@
         * @theme footer
         */
         .footerContent{
-            /*@editable*/ color:#808080;
+            /*@editable*/ color:#6E6E70;
             /*@editable*/ font-family:Helvetica;
-            /*@editable*/ font-size:10px;
+            /*@editable*/ font-size:14px;
-            /*@editable*/ line-height:150%;
+            /*@editable*/ line-height:1.4;
-            padding-top:20px;
-            padding-right:20px;
-            padding-bottom:20px;
-            padding-left:20px;
             /*@editable*/ text-align:left;
         }
 
+        .footerContent a {
+            padding-right: 12px;
+            margin-right: 12px;
+            border-right: 1px solid #E1E1E3;
+            color:#615BC2;
+        }
+
+        .footerContent em {
+            display: block;
+            margin-top: 24px;
+        }
+
         /**
         * @tab Footer
         * @section footer link
         * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
         */
         .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
-            /*@editable*/ color:#606060;
+            /*@editable*/ color:#615BC2;
             /*@editable*/ font-weight:normal;
             /*@editable*/ text-decoration:underline;
         }
@@ -335,133 +313,44 @@
             #templateContainer{
                 max-width:600px !important;
                 /*@editable*/ width:100% !important;
-            }
+                padding: 32px;
-
-            /**
-            * @tab Mobile Styles
-            * @section heading 1
-            * @tip Make the first-level headings larger in size for better readability on small screens.
-            */
-            h1{
-                /*@editable*/ font-size:24px !important;
-                /*@editable*/ line-height:100% !important;
-            }
-
-            /**
-            * @tab Mobile Styles
-            * @section heading 2
-            * @tip Make the second-level headings larger in size for better readability on small screens.
-            */
-            h2{
-                /*@editable*/ font-size:20px !important;
-                /*@editable*/ line-height:100% !important;
-            }
-
-            /**
-            * @tab Mobile Styles
-            * @section heading 3
-            * @tip Make the third-level headings larger in size for better readability on small screens.
-            */
-            h3{
-                /*@editable*/ font-size:18px !important;
-                /*@editable*/ line-height:100% !important;
-            }
-
-            /**
-            * @tab Mobile Styles
-            * @section heading 4
-            * @tip Make the fourth-level headings larger in size for better readability on small screens.
-            */
-            h4{
-                /*@editable*/ font-size:16px !important;
-                /*@editable*/ line-height:100% !important;
             }
 
             /* ======== Header Styles ======== */
 
-            #templatePreheader{display:none !important;} /* Hide the template preheader to save space */
 
-            /**
-            * @tab Mobile Styles
-            * @section header image
-            * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
-            */
-            #headerImage{
-                height:auto !important;
-                /*@editable*/ max-width:600px !important;
-                /*@editable*/ width:100% !important;
-            }
-
-            /**
-            * @tab Mobile Styles
-            * @section header text
-            * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
-            */
-            .headerContent{
-                /*@editable*/ font-size:20px !important;
-                /*@editable*/ line-height:125% !important;
-            }
 
             /* ======== Body Styles ======== */
 
-            /**
+            #templateBody{
-            * @tab Mobile Styles
+                margin: 32px 0;
-            * @section body text
+                padding: 32px 0;
-            * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
-            */
-            .bodyContent{
-                /*@editable*/ font-size:18px !important;
-                /*@editable*/ line-height:125% !important;
             }  
 
             /* ======== Footer Styles ======== */
 
-            /**
+            .footerContent a{
-            * @tab Mobile Styles
+                display:block !important;
-            * @section footer text
+                border-right: 0;
-            * @tip Make the body content text larger in size for better readability on small screens.
+                padding: 6px 0;
-            */
+            } /* Place footer social and utility links on their own lines, for easier access */
-            .footerContent{
-                /*@editable*/ font-size:14px !important;
-                /*@editable*/ line-height:115% !important;
-            }
-
-            .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
         }
     </style>
 </head>
 <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
 <center>
-    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background:#F7F7FA;">
         <tr>
             <td align="center" valign="top" id="bodyCell">
                 <!-- BEGIN TEMPLATE // -->
-                <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
+                <table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="background:#FFFFFF;">
-                    <tr>
-                        <td align="center" valign="top">
-                            <!-- BEGIN PREHEADER // -->
-                            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
-                                <tr>
-                                    <td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
-                                        Scheduled change request failed to apply
-                                    </td>
-                                    <!-- *|IFNOT:ARCHIVE_PAGE|* -->
-                                    <td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0;" mc:edit="preheader_content01">
-                                        Email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
-                                    </td>
-                                    <!-- *|END:IF|* -->
-                                </tr>
-                            </table>
-                            <!-- // END PREHEADER -->
-                        </td>
-                    </tr>
                     <tr>
                         <td align="center" valign="top">
                             <!-- BEGIN HEADER // -->
                             <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
                                 <tr>
                                     <td valign="top" class="headerContent">
-                                        <img src="https://cdn.getunleash.io/unleash_logo_600.png" style="max-width:600px;padding:1rem;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
+                                        <img src="https://cdn.getunleash.io/unleash_logo_600.png" style="width:140px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
                                     </td>
                                 </tr>
                             </table>
@@ -475,12 +364,8 @@
                                 <tr>
                                     <td valign="top" class="bodyContent" mc:edit="body_content">
                                         <h1>Scheduled change request failed to apply</h1>
-
+                                        <p>Scheduled <a class="changeRequestLink" href="{{{ changeRequestLink }}}" target="_blank" rel="noopener noreferrer">change request {{{ changeRequestTitle }}}</a> failed to apply at <span style="font-weight:bold;">{{{ scheduledAt }}}</span> due to {{{ errorMessage }}}.</p>
-                                        <br />
+                                        <p>You can reschedule the change request to try again later or reject the changes to close it.</p>                                   
-                                        Scheduled <span><a class="changeRequestLink" href="{{{ changeRequestLink }}}" target="_blank" rel="noopener noreferrer">change request {{{ changeRequestTitle }}}</a></span> failed to apply at {{{ scheduledAt }}} due to {{{ errorMessage }}}.
-                                        <br />
-                                        You can reschedule the change request to try again later or reject the changes to close it.
-                                        <br />
                                     </td>
                                 </tr>
                             </table>
@@ -493,21 +378,17 @@
                             <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
                                 <tr>
                                     <td valign="top" class="footerContent" mc:edit="footer_content00">
-                                        <a href="https://github.com/Unleash/unleash">Follow us on Github</a>
+                                        <a href="https://www.getunleash.io/blog">Unleash blog</a>
+                                        <a href="https://github.com/Unleash/unleash">Github</a>
+                                        <a href="https://slack.unleash.run">Slack community</a>
+                                        <a href="https://www.getunleash.io/support" style="border-right:0;">Help center</a>
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td valign="top" class="footerContent" style="padding-top:0;" mc:edit="footer_content01">
+                                    <td valign="top" class="footerContent" mc:edit="footer_content01">
                                         <em>Copyright &copy; {{ year }} | Bricks Software | All rights reserved.</em>
-                                        <br />
-
-                                        <br />
-                                        <strong>Our mailing address is: team@getunleash.io</strong>
-                                        <br />
-
                                     </td>
                                 </tr>
-
                             </table>
                             <!-- // END FOOTER -->
                         </td>

src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.plain.mustache

@@ -3,4 +3,3 @@ Scheduled change request failed to apply
 Scheduled change request {{{ changeRequestTitle }}} ({{{ changeRequestLink }}}) failed to apply at {{{ scheduledAt }}} due to {{{ errorMessage }}}.
 
 You can reschedule the change request to try again later or reject the changes to close it.
-