Skip to content

Commit

Permalink
feat(notif): Restyle HTML email notifications Part 2 (#1917)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@tangentThought @TheCatLady
tangentThought and TheCatLady committed Aug 9, 2021
1 parent 0ce18b2 commit 376149d
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 149 deletions.
Binary file added public/logo_full.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 31 additions & 48 deletions server/templates/email/generatedpassword/html.pug
View file
Expand Up @@ -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&amp;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
Expand All @@ -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}
4 changes: 2 additions & 2 deletions server/templates/email/media-request/html.pug
View file
Expand Up @@ -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;')
Expand Down Expand Up @@ -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}
| Open in #{applicationTitle}
81 changes: 28 additions & 53 deletions server/templates/email/resetpassword/html.pug
View file
Expand Up @@ -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&amp;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
Expand All @@ -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.
69 changes: 23 additions & 46 deletions server/templates/email/test-email/html.pug
View file
Expand Up @@ -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&amp;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
Expand All @@ -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}

0 comments on commit 376149d

Please sign in to comment.