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>
3 years ago · 376149d6eb
parent 0ce18b21ca
commit 376149d6eb
5 changed files with 84 additions and 149 deletions
--- a/public/logo_full.png
+++ b/public/logo_full.png
--- 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&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
@ -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}
--- 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}
+              | Open in #{applicationTitle}
--- 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&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
@ -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.
--- 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&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
@ -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}