From 3ff19f3eb6eccb683b82514495b80e3b23da000b Mon Sep 17 00:00:00 2001 From: Nicolae Socaciu <103567375+nicolaesocaciu@users.noreply.github.com> Date: Tue, 30 Jan 2024 11:13:15 +0200 Subject: [PATCH] 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 --- .../scheduled-change-conflict.html.mustache | 33 +- .../scheduled-execution-failed.html.mustache | 285 +++++------------- .../scheduled-execution-failed.plain.mustache | 1 - 3 files changed, 84 insertions(+), 235 deletions(-) diff --git a/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache b/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache index 4dee59bb15..711844a067 100644 --- a/src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache +++ b/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 */ } diff --git a/src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.html.mustache b/src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.html.mustache index acab22bd22..706aa6c627 100644 --- a/src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.html.mustache +++ b/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-weight:normal; - /*@editable*/ line-height:100%; + /*@editable*/ font-style:normal; + /*@editable*/ font-weight:bold; + /*@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*/ border-top:1px solid #FFFFFF; - /*@editable*/ border-bottom:1px solid #CCCCCC; + /*@editable*/ color:#6E6E70; } /** @@ -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*/ line-height:150%; - /*@editable*/ border-bottom: 1px solid #CCCCCC; - padding-top:20px; - padding-right:20px; - padding-bottom:20px; - padding-left:20px; + /*@editable*/ font-size:16px; + /*@editable*/ line-height:1.4; /*@editable*/ text-align:left; } @@ -262,13 +222,25 @@ max-width:560px; } - .changeRequestLink { + .bodyContent a { + color: #615BC2; text-decoration: none; - text-align: center; } - .changeRequestLink:hover { - text-decoration: none; + .bodyContent a:hover { + 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*/ line-height:150%; - padding-top:20px; - padding-right:20px; - padding-bottom:20px; - padding-left:20px; + /*@editable*/ font-size:14px; + /*@editable*/ line-height:1.4; /*@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; - } - - /** - * @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; + padding: 32px; } /* ======== 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 ======== */ - /** - * @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{ - /*@editable*/ font-size:18px !important; - /*@editable*/ line-height:125% !important; - } + #templateBody{ + margin: 32px 0; + padding: 32px 0; + } /* ======== Footer Styles ======== */ - /** - * @tab Mobile Styles - * @section footer text - * @tip Make the body content text larger in size for better readability on small screens. - */ - .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 */ + .footerContent a{ + display:block !important; + border-right: 0; + padding: 6px 0; + } /* Place footer social and utility links on their own lines, for easier access */ }
- +
diff --git a/src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.plain.mustache b/src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.plain.mustache index 857c714345..510e4aa983 100644 --- a/src/mailtemplates/scheduled-execution-failed/scheduled-execution-failed.plain.mustache +++ b/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. -
- - - - +
- - - - - - - - -
- Scheduled change request failed to apply - - Email not displaying correctly?
View it in your browser. -
- -
- +
@@ -475,12 +364,8 @@

Scheduled change request failed to apply

- -
- Scheduled change request {{{ changeRequestTitle }}} 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. -
+

Scheduled change request {{{ changeRequestTitle }}} 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.
@@ -493,21 +378,17 @@ - -
- Follow us on Github + Unleash blog + Github + Slack community + Help center
+ Copyright © {{ year }} | Bricks Software | All rights reserved. -
- -
- Our mailing address is: team@getunleash.io -
-