From 376149d6ebb4db28d949391115f475afdd4e7d48 Mon Sep 17 00:00:00 2001 From: tangentThought Date: Mon, 9 Aug 2021 01:55:37 -0700 Subject: [PATCH] feat(notif): Restyle HTML email notifications Part 2 (#1917) * Restyle HTML email notifications * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Font and actionUrl Incorporated font and action Url change suggestions. * Timestamp Padding Added padding-right to timestamp field * Hover and Word Wrap Changes * Hover and Title Wrap Added hover effects on title and wrapped it instead of truncating. * Fixed indentation for mediaExtra * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Font Size Scaling Changes * Removed superflous class name and CSS * Hover and Title Wrap Added hover effects on title and wrapped it instead of truncating. * Fixed indentation for mediaExtra * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Update server/templates/email/media-request/html.pug Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> * Font Size Scaling Changes * Removed superflous class name and CSS * Align all email templates * Reformat all other email notificaitons Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com> --- public/logo_full.png | Bin 0 -> 9639 bytes .../email/generatedpassword/html.pug | 79 +++++++---------- server/templates/email/media-request/html.pug | 4 +- server/templates/email/resetpassword/html.pug | 81 ++++++------------ server/templates/email/test-email/html.pug | 69 +++++---------- 5 files changed, 84 insertions(+), 149 deletions(-) create mode 100644 public/logo_full.png diff --git a/public/logo_full.png b/public/logo_full.png new file mode 100644 index 0000000000000000000000000000000000000000..3ac4cdce1b68b64445bb9dba55355b0b5c33434a GIT binary patch literal 9639 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 literal 0 HcmV?d00001 diff --git a/server/templates/email/generatedpassword/html.pug b/server/templates/email/generatedpassword/html.pug index 109729bf..129695ab 100644 --- a/server/templates/email/generatedpassword/html.pug +++ b/server/templates/email/generatedpassword/html.pug @@ -5,7 +5,7 @@ head meta(http-equiv='x-ua-compatible' content='ie=edge') meta(name='viewport' content='width=device-width, initial-scale=1') meta(name='format-detection' content='telephone=no, date=no, address=no, email=no') - link(href='https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap' rel='stylesheet' media='screen') + link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen') //if mso xml o:officedocumentsettings @@ -26,54 +26,37 @@ head mso-line-height-rule: exactly; } style. - @media (max-width: 600px) { - .sm-w-full { + .title:hover * { + text-decoration: underline; + } + @media only screen and (max-width:600px) { + table { + font-size: 20px !important; width: 100% !important; } } -div(role='article' aria-roledescription='email' aria-label='' lang='en') - table(style="\ - background-color: #f2f4f6;\ - font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;\ - width: 100%;\ - " width='100%' bgcolor='#f2f4f6' cellpadding='0' cellspacing='0' role='presentation') +div(style='display: block; background-color: #111827;') + table(style='margin: 0 auto; font-family: Inter, Arial, Sans-Serif; color: #fff; font-size: 16px; width: 26rem;') + tr + td(style="text-align: center;") + a(href=applicationUrl) + img(src=applicationUrl +'/logo_full.png' style='width: 26rem; padding: 1rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;') + tr + td(style='text-align: center;') + div(style='margin: 0rem 1rem 1rem; font-size: 1.25em;') + span + | An account has been created for you at #{applicationTitle}. tr - td(align='center') - table(style='width: 100%' width='100%' cellpadding='0' cellspacing='0' role='presentation') - tr - td(align='center' style='\ - padding-top: 25px;\ - padding-bottom: 25px;\ - text-align: center;\ - ') - a(href=applicationUrl style='\ - text-shadow: 0 1px 0 #ffffff;\ - font-weight: 700;\ - font-size: 24px;\ - color: #a8aaaf;\ - text-decoration: none;\ - ') - | #{applicationTitle} - tr - td(style='width: 100%' width='100%') - table.sm-w-full(align='center' style='\ - background-color: #ffffff;\ - margin-left: auto;\ - margin-right: auto;\ - width: 570px;\ - ' width='570' bgcolor='#ffffff' cellpadding='0' cellspacing='0' role='presentation') - tr - td(style='padding: 45px') - div(style='font-size: 16px; text-align: center; padding-bottom: 14px;') - | Your new password is: - div(style='font-size: 16px; text-align: center') - | #{password} - p(style='\ - font-size: 13px;\ - line-height: 24px;\ - margin-top: 6px;\ - margin-bottom: 20px;\ - color: #51545e;\ - ') - if applicationUrl - a(href=applicationUrl style='color: #3869d4') Open #{applicationTitle} + td(style='text-align: center;') + div(style='margin: 1rem 1rem 1rem; font-size: 1.25em;') + span + | Your new password is: + div(style='margin: 0rem 1rem 1rem; font-size: 1.25em;') + span + | #{password} + if applicationUrl + tr + td + a(href=applicationUrl style='display: block; margin: 1.5rem 3rem 2.5rem 3rem; text-decoration: none; font-size: 1.0em; line-height: 2.25em;') + span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255, 255, 255, 0.2);') + | Open #{applicationTitle} diff --git a/server/templates/email/media-request/html.pug b/server/templates/email/media-request/html.pug index d4ec2166..6d3a9740 100644 --- a/server/templates/email/media-request/html.pug +++ b/server/templates/email/media-request/html.pug @@ -40,7 +40,7 @@ div(style='display: block; background-color: #111827;') tr td(style="text-align: center;") a(href=applicationUrl) - img(src=applicationUrl +'/logo_full.svg' style='width: 26rem; padding: 1rem;') + img(src=applicationUrl +'/logo_full.png' style='width: 26rem; padding: 1rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;') tr td(style='text-align: center;') div(style='margin: 0rem 1rem 1rem; font-size: 1.25em;') @@ -78,4 +78,4 @@ div(style='display: block; background-color: #111827;') td a(href=actionUrl style='display: block; margin: 1.5rem 3rem 2.5rem 3rem; text-decoration: none; font-size: 1.0em; line-height: 2.25em;') span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255, 255, 255, 0.2);') - | Open in #{applicationTitle} \ No newline at end of file + | Open in #{applicationTitle} diff --git a/server/templates/email/resetpassword/html.pug b/server/templates/email/resetpassword/html.pug index 63e07e93..a6fcc646 100644 --- a/server/templates/email/resetpassword/html.pug +++ b/server/templates/email/resetpassword/html.pug @@ -5,7 +5,7 @@ head meta(http-equiv='x-ua-compatible' content='ie=edge') meta(name='viewport' content='width=device-width, initial-scale=1') meta(name='format-detection' content='telephone=no, date=no, address=no, email=no') - link(href='https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap' rel='stylesheet' media='screen') + link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen') //if mso xml o:officedocumentsettings @@ -26,59 +26,34 @@ head mso-line-height-rule: exactly; } style. - @media (max-width: 600px) { - .sm-w-full { + .title:hover * { + text-decoration: underline; + } + @media only screen and (max-width:600px) { + table { + font-size: 20px !important; width: 100% !important; } } -div(role='article' aria-roledescription='email' aria-label='' lang='en') - table(style="\ - background-color: #f2f4f6;\ - font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;\ - width: 100%;\ - " width='100%' bgcolor='#f2f4f6' cellpadding='0' cellspacing='0' role='presentation') +div(style='display: block; background-color: #111827;') + table(style='margin: 0 auto; font-family: Inter, Arial, Sans-Serif; color: #fff; font-size: 16px; width: 26rem;') + tr + td(style="text-align: center;") + a(href=applicationUrl) + img(src=applicationUrl +'/logo_full.png' style='width: 26rem; padding: 1rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;') + tr + td(style='text-align: center;') + div(style='margin: 0rem 1rem 1rem; font-size: 1.25em;') + span + | Your #{applicationTitle} account password was requested to be reset. Click below to reset your password. + if resetPasswordLink + tr + td + a(href=resetPasswordLink style='display: block; margin: 1.5rem 3rem 2.5rem 3rem; text-decoration: none; font-size: 1.0em; line-height: 2.25em;') + span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255, 255, 255, 0.2);') + | Reset Password tr - td(align='center') - table(style='width: 100%' width='100%' cellpadding='0' cellspacing='0' role='presentation') - tr - td(align='center' style='\ - padding-top: 25px;\ - padding-bottom: 25px;\ - text-align: center;\ - ') - a(href=applicationUrl style='\ - text-shadow: 0 1px 0 #ffffff;\ - font-weight: 700;\ - font-size: 24px;\ - color: #a8aaaf;\ - text-decoration: none;\ - ') - | #{applicationTitle} - tr - td(style='width: 100%' width='100%') - table.sm-w-full(align='center' style='\ - background-color: #ffffff;\ - margin-left: auto;\ - margin-right: auto;\ - width: 570px;\ - ' width='570' bgcolor='#ffffff' cellpadding='0' cellspacing='0' role='presentation') - tr - td(style='padding: 45px') - div(style='font-size: 16px; padding-bottom: 14px;') - p - | We received a request to reset your password. - p - | Please - a(href=resetPasswordLink style='color: #3869d4; padding: 0px 5px;') click here - | to change your #{applicationTitle} password. - p - | If you did not request that your password be reset, you can safely ignore this email. - p(style='\ - font-size: 13px;\ - line-height: 24px;\ - margin-top: 6px;\ - margin-bottom: 20px;\ - color: #51545e;\ - ') - if applicationUrl - a(href=applicationUrl style='color: #3869d4') Open #{applicationTitle} + td(style='text-align: center;') + div(style='margin: 1rem; font-size: .85em;') + span + | If you did not request that your password be reset, you can safely ignore this email. diff --git a/server/templates/email/test-email/html.pug b/server/templates/email/test-email/html.pug index 03eee48c..9dc9044c 100644 --- a/server/templates/email/test-email/html.pug +++ b/server/templates/email/test-email/html.pug @@ -5,7 +5,7 @@ head meta(http-equiv='x-ua-compatible' content='ie=edge') meta(name='viewport' content='width=device-width, initial-scale=1') meta(name='format-detection' content='telephone=no, date=no, address=no, email=no') - link(href='https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap' rel='stylesheet' media='screen') + link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen') //if mso xml o:officedocumentsettings @@ -26,52 +26,29 @@ head mso-line-height-rule: exactly; } style. - @media (max-width: 600px) { - .sm-w-full { + .title:hover * { + text-decoration: underline; + } + @media only screen and (max-width:600px) { + table { + font-size: 20px !important; width: 100% !important; } } -div(role='article' aria-roledescription='email' aria-label='' lang='en') - table(style="\ - background-color: #f2f4f6;\ - font-family: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;\ - width: 100%;\ - " width='100%' bgcolor='#f2f4f6' cellpadding='0' cellspacing='0' role='presentation') +div(style='display: block; background-color: #111827;') + table(style='margin: 0 auto; font-family: Inter, Arial, Sans-Serif; color: #fff; font-size: 16px; width: 26rem;') + tr + td(style="text-align: center;") + a(href=applicationUrl) + img(src=applicationUrl +'/logo_full.png' style='width: 26rem; padding: 1rem; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast;') tr - td(align='center') - table(style='width: 100%' width='100%' cellpadding='0' cellspacing='0' role='presentation') - tr - td(align='center' style='\ - padding-top: 25px;\ - padding-bottom: 25px;\ - text-align: center;\ - ') - a(href=applicationUrl style='\ - text-shadow: 0 1px 0 #ffffff;\ - font-weight: 700;\ - font-size: 24px;\ - color: #a8aaaf;\ - text-decoration: none;\ - ') - | #{applicationTitle} - tr - td(style='width: 100%' width='100%') - table.sm-w-full(align='center' style='\ - background-color: #ffffff;\ - margin-left: auto;\ - margin-right: auto;\ - width: 570px;\ - ' width='570' bgcolor='#ffffff' cellpadding='0' cellspacing='0' role='presentation') - tr - td(style='padding: 45px') - div(style='font-size: 16px') - | #{body} - p(style='\ - font-size: 13px;\ - line-height: 24px;\ - margin-top: 6px;\ - margin-bottom: 20px;\ - color: #51545e;\ - ') - if applicationUrl - a(href=applicationUrl style='color: #3869d4') Open #{applicationTitle} + td(style='text-align: center;') + div(style='margin: 0rem 1rem 1rem; font-size: 1.25em;') + span + | #{body} + if applicationUrl + tr + td + a(href=applicationUrl style='display: block; margin: 1.5rem 3rem 2.5rem 3rem; text-decoration: none; font-size: 1.0em; line-height: 2.25em;') + span(style='padding: 0.2rem; font-weight: 500; text-align: center; border-radius: 10px; background-color: rgb(99,102,241); color: #fff; display: block; border: 1px solid rgba(255, 255, 255, 0.2);') + | Open #{applicationTitle}