diff --git a/app/javascript/fonts/inter/inter-variable-font-slnt-wght.woff2 b/app/javascript/fonts/inter/inter-variable-font-slnt-wght.woff2 new file mode 100644 index 000000000..e6345f2e3 Binary files /dev/null and b/app/javascript/fonts/inter/inter-variable-font-slnt-wght.woff2 differ diff --git a/app/javascript/images/mailer-new/common/header-bg-end.png b/app/javascript/images/mailer-new/common/header-bg-end.png new file mode 100644 index 000000000..900196678 Binary files /dev/null and b/app/javascript/images/mailer-new/common/header-bg-end.png differ diff --git a/app/javascript/images/mailer-new/common/header-bg-start.png b/app/javascript/images/mailer-new/common/header-bg-start.png new file mode 100644 index 000000000..0037c1ad9 Binary files /dev/null and b/app/javascript/images/mailer-new/common/header-bg-start.png differ diff --git a/app/javascript/images/mailer-new/common/logo-footer.png b/app/javascript/images/mailer-new/common/logo-footer.png new file mode 100644 index 000000000..2baafd8d7 Binary files /dev/null and b/app/javascript/images/mailer-new/common/logo-footer.png differ diff --git a/app/javascript/images/mailer-new/common/logo-header.png b/app/javascript/images/mailer-new/common/logo-header.png new file mode 100644 index 000000000..46a6bddaa Binary files /dev/null and b/app/javascript/images/mailer-new/common/logo-header.png differ diff --git a/app/javascript/images/mailer-new/heading/2fa-disabled.png b/app/javascript/images/mailer-new/heading/2fa-disabled.png new file mode 100644 index 000000000..b1e342a87 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/2fa-disabled.png differ diff --git a/app/javascript/images/mailer-new/heading/2fa-enabled.png b/app/javascript/images/mailer-new/heading/2fa-enabled.png new file mode 100644 index 000000000..3ce3e04f8 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/2fa-enabled.png differ diff --git a/app/javascript/images/mailer-new/heading/2fa-recovery.png b/app/javascript/images/mailer-new/heading/2fa-recovery.png new file mode 100644 index 000000000..cefb21e1e Binary files /dev/null and b/app/javascript/images/mailer-new/heading/2fa-recovery.png differ diff --git a/app/javascript/images/mailer-new/heading/appeal-approved.png b/app/javascript/images/mailer-new/heading/appeal-approved.png new file mode 100755 index 000000000..b2476ec34 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/appeal-approved.png differ diff --git a/app/javascript/images/mailer-new/heading/appeal-rejected.png b/app/javascript/images/mailer-new/heading/appeal-rejected.png new file mode 100644 index 000000000..7ae38ad0c Binary files /dev/null and b/app/javascript/images/mailer-new/heading/appeal-rejected.png differ diff --git a/app/javascript/images/mailer-new/heading/archive.png b/app/javascript/images/mailer-new/heading/archive.png new file mode 100644 index 000000000..b0c7fad84 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/archive.png differ diff --git a/app/javascript/images/mailer-new/heading/boost.png b/app/javascript/images/mailer-new/heading/boost.png new file mode 100644 index 000000000..e33b75997 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/boost.png differ diff --git a/app/javascript/images/mailer-new/heading/email.png b/app/javascript/images/mailer-new/heading/email.png new file mode 100644 index 000000000..c922c5239 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/email.png differ diff --git a/app/javascript/images/mailer-new/heading/favorite.png b/app/javascript/images/mailer-new/heading/favorite.png new file mode 100644 index 000000000..0e483ee9b Binary files /dev/null and b/app/javascript/images/mailer-new/heading/favorite.png differ diff --git a/app/javascript/images/mailer-new/heading/follow.png b/app/javascript/images/mailer-new/heading/follow.png new file mode 100644 index 000000000..ff5b7e004 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/follow.png differ diff --git a/app/javascript/images/mailer-new/heading/key-added.png b/app/javascript/images/mailer-new/heading/key-added.png new file mode 100755 index 000000000..82dcd464b Binary files /dev/null and b/app/javascript/images/mailer-new/heading/key-added.png differ diff --git a/app/javascript/images/mailer-new/heading/key-deleted.png b/app/javascript/images/mailer-new/heading/key-deleted.png new file mode 100755 index 000000000..2930f591a Binary files /dev/null and b/app/javascript/images/mailer-new/heading/key-deleted.png differ diff --git a/app/javascript/images/mailer-new/heading/key-disabled.png b/app/javascript/images/mailer-new/heading/key-disabled.png new file mode 100755 index 000000000..e0f259359 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/key-disabled.png differ diff --git a/app/javascript/images/mailer-new/heading/key-enabled.png b/app/javascript/images/mailer-new/heading/key-enabled.png new file mode 100644 index 000000000..b2476ec34 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/key-enabled.png differ diff --git a/app/javascript/images/mailer-new/heading/login.png b/app/javascript/images/mailer-new/heading/login.png new file mode 100644 index 000000000..89a6e9ee3 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/login.png differ diff --git a/app/javascript/images/mailer-new/heading/mention.png b/app/javascript/images/mailer-new/heading/mention.png new file mode 100644 index 000000000..c4dccff8e Binary files /dev/null and b/app/javascript/images/mailer-new/heading/mention.png differ diff --git a/app/javascript/images/mailer-new/heading/password.png b/app/javascript/images/mailer-new/heading/password.png new file mode 100755 index 000000000..552c7c068 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/password.png differ diff --git a/app/javascript/images/mailer-new/heading/user.png b/app/javascript/images/mailer-new/heading/user.png new file mode 100644 index 000000000..f1dd58a18 Binary files /dev/null and b/app/javascript/images/mailer-new/heading/user.png differ diff --git a/app/javascript/images/mailer-new/heading/warning.png b/app/javascript/images/mailer-new/heading/warning.png new file mode 100755 index 000000000..7764837ab Binary files /dev/null and b/app/javascript/images/mailer-new/heading/warning.png differ diff --git a/app/javascript/images/mailer-new/welcome/checkbox-off.png b/app/javascript/images/mailer-new/welcome/checkbox-off.png new file mode 100644 index 000000000..51c190efe Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/checkbox-off.png differ diff --git a/app/javascript/images/mailer-new/welcome/checkbox-on.png b/app/javascript/images/mailer-new/welcome/checkbox-on.png new file mode 100644 index 000000000..162095e7d Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/checkbox-on.png differ diff --git a/app/javascript/images/mailer-new/welcome/step1-on.png b/app/javascript/images/mailer-new/welcome/step1-on.png new file mode 100644 index 000000000..c3776d17d Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/step1-on.png differ diff --git a/app/javascript/images/mailer-new/welcome/step2-off.png b/app/javascript/images/mailer-new/welcome/step2-off.png new file mode 100755 index 000000000..a262454d2 Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/step2-off.png differ diff --git a/app/javascript/images/mailer-new/welcome/step3-off.png b/app/javascript/images/mailer-new/welcome/step3-off.png new file mode 100755 index 000000000..972de65a5 Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/step3-off.png differ diff --git a/app/javascript/images/mailer-new/welcome/step4-off.png b/app/javascript/images/mailer-new/welcome/step4-off.png new file mode 100755 index 000000000..f45e9a2c9 Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/step4-off.png differ diff --git a/app/javascript/images/mailer-new/welcome/step5-off.png b/app/javascript/images/mailer-new/welcome/step5-off.png new file mode 100755 index 000000000..ca270f547 Binary files /dev/null and b/app/javascript/images/mailer-new/welcome/step5-off.png differ diff --git a/app/javascript/styles/fonts/inter.scss b/app/javascript/styles/fonts/inter.scss new file mode 100644 index 000000000..bb4899b70 --- /dev/null +++ b/app/javascript/styles/fonts/inter.scss @@ -0,0 +1,8 @@ +@font-face { + font-family: Inter; + src: url('../fonts/inter/inter-variable-font-slnt-wght.woff2') + format('woff2-variations'); + font-weight: 100 900; + font-style: normal; + mso-generic-font-family: swiss; /* stylelint-disable-line property-no-unknown -- Proprietary property for Outlook on Windows. */ +} diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 92d00cae8..6d0168969 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -1,574 +1,534 @@ -@import 'mastodon/variables'; -@import 'fonts/roboto'; +@import 'fonts/inter'; -table, -td, -div { - box-sizing: border-box; -} - -html, body { - width: 100% !important; - min-width: 100%; + accent-color: #6364ff; + word-break: break-word; margin: 0; + background-color: #f3f2f5; padding: 0; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -.email-body { - td, - div, - a, - span { - line-height: inherit; - } -} - -a { - &, - &:visited, - span { - text-decoration: none; - color: $ui-highlight-color; - } - - #outlook & { - padding: 0; - } -} - -img { - outline: none; - border: 0; - text-decoration: none; - -ms-interpolation-mode: bicubic; - clear: both; - line-height: 100%; -} - -table { - border-spacing: 0; - mso-table-lspace: 0; - mso-table-rspace: 0; -} - -td { - vertical-align: top; -} - -.auto-dir { - p { - unicode-bidi: plaintext; - } - - a { - unicode-bidi: isolate; - } -} - -.email-table, -.content-section, -.column, -.column-cell { - width: 100%; - min-width: 100%; -} - -.email-body { - font-size: 0 !important; - line-height: 100%; - text-align: center; - padding-left: 16px; - padding-right: 16px; -} - -.email-start { - padding-top: 32px; -} - -.email-end { - padding-bottom: 32px; -} - -.email-body, -html, -body { - background-color: lighten($ui-base-color, 4%); -} - -.email-container, -.email-row, -.col-0, -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6 { - font-size: 0; - display: inline-block; - width: 100%; - min-width: 100%; - min-width: 0 !important; - vertical-align: top; -} - -.content-cell { - width: 100%; - min-width: 100%; - min-width: 0 !important; -} - -.column-cell { - padding-top: 16px; - padding-bottom: 16px; - vertical-align: top; - - &.button-cell { - padding-top: 0; - } -} - -.email-container { - max-width: 632px; - margin: 0 auto; - text-align: center; -} - -.email-row { - display: block; - max-width: 600px !important; - margin: 0 auto; - text-align: center; - clear: both; -} - -.col-0 { - max-width: 50px; -} - -.col-1 { - max-width: 100px; -} - -.col-2 { - max-width: 200px; -} - -.col-3 { - max-width: 300px; -} - -.col-4 { - max-width: 400px; -} - -.col-5 { - max-width: 500px; -} - -.col-6 { - max-width: 600px; -} - -.column-cell, -.column-cell td, -p { - font-family: Helvetica, Arial, sans-serif; - - @media only screen { - font-family: $font-sans-serif, sans-serif !important; - } -} - -.email-body .column-cell, -.column-cell, -p { - font-size: 15px; - line-height: 23px; - color: $ui-primary-color; - mso-line-height-rule: exactly; - text-rendering: optimizelegibility; -} - -p { - display: block; - margin-top: 0; - margin-bottom: 16px; - - &.small { - font-size: 13px; - } - - &.lead { - font-size: 19px; - line-height: 27px; - } + -webkit-text-size-adjust: none; + text-size-adjust: none; } +p, h1, h2, h3, h4, h5, h6 { - color: $ui-secondary-color; - margin-left: 0; - margin-right: 0; - margin-top: 20px; - margin-bottom: 8px; + margin: 0; + background-color: transparent; padding: 0; - font-weight: 500; + border: none; + font-family: Inter, 'Lucida Grande', sans-serif; } -h1 { - font-size: 26px; - line-height: 36px; +img { + max-width: 100%; + height: auto; + border: none; + text-indent: 0; + vertical-align: middle; + color: inherit; + font-family: inherit; } -h2 { - font-size: 23px; - line-height: 30px; +table { + border: none; } -h3 { - font-size: 19px; - line-height: 25px; +table + p { + margin-top: 16px; } -h5 { - font-size: 16px; - line-height: 21px; - font-weight: 700; - color: lighten($ui-base-color, 34%); +.email { + min-width: 280px; + font-family: Inter, 'Lucida Grande', sans-serif; + word-break: break-word; + color: #17063b; + background-color: #f3f2f5; } -.input-cell { - h5 { - margin-top: 4px; - } -} - -.input { - td { - background: darken($ui-base-color, 8%); - border-radius: 4px; - padding: 16px; - line-height: 20px; - mso-line-height-rule: exactly; - text-align: center; - font-weight: 500; - font-size: 17px; - } -} - -.content-cell, -.blank-cell { +.email-container { + max-width: 740px; + margin: 0 auto; width: 100%; - font-size: 0; - text-align: center; - vertical-align: top; - padding-left: 16px; - padding-right: 16px; } -.content-cell { - background-color: darken($ui-base-color, 4%); - - &.darker { - background-color: darken($ui-base-color, 8%); - } +// Outer email card +.email-card-table { + border-collapse: collapse; + width: 100%; } -.hero { - background-color: $ui-base-color; - padding-top: 20px; +.email-card-td { + overflow: hidden; + box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 4%); + background-color: #fff; } -.hero-with-button { - padding-bottom: 16px; - - h1 { - margin-bottom: 4px; - } - - p.lead { - margin-bottom: 32px; - } +// Inner email card +.email-inner-card-table { + border-collapse: separate; + width: 100%; + border-radius: 12px; } -.header { - border-radius: 5px 5px 0 0; - background-color: darken($ui-base-color, 8%); - - .column-cell { - text-align: center; - padding-top: 20px; - padding-bottom: 8px; - } +.email-inner-card-td-without-padding, +.email-inner-card-td { + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 16px 0 rgba(23, 6, 59, 8%); + background-color: #fff; + border: 1px solid #dfdee3; } -.content-start { - padding-top: 32px; +.email-inner-card-td { + padding: 24px; } -.content-end { - border-radius: 0 0 5px 5px; - padding-top: 16px; +// Utility classes +.email-w-full { + width: 100%; } -.footer { - .column-cell, +.email-prose { p { - color: lighten($ui-base-color, 34%); - } - - p { - margin-bottom: 0; - font-size: 13px; - - &.small { - margin-bottom: 0; - } - } - - a { - color: lighten($ui-base-color, 34%); - text-decoration: underline; - } - - img { - opacity: 0.3; - } -} - -.logo { - position: relative; - left: -4px; -} - -.button { - display: table; - margin-left: auto; - margin-right: auto; - - td { + color: #17063b; + font-size: 14px; line-height: 20px; - mso-line-height-rule: exactly; - border-radius: 4px; - text-align: center; - font-weight: 500; - font-size: 17px; - padding: 0 !important; - a, - a span { - color: $primary-text-color; - display: block !important; - text-align: center !important; - vertical-align: top !important; - line-height: inherit !important; + &:not(:last-child) { + margin-bottom: 16px; } - a { - padding: 10px 22px !important; - line-height: 26px !important; - font-weight: 500 !important; - } - } + a:not([class]) { + color: #6364ff; + text-decoration: none; - &.button-small { - td { - border-radius: 4px; - font-size: 14px; - padding: 8px 16px; - - a { - padding: 5px 16px !important; - line-height: 26px !important; + &:hover { + color: #563acc !important; } } } } -.button-default { - background-color: darken($ui-base-color, 8%); +.email-padding-24 { + padding: 24px; } -.button-primary { - background-color: darken($ui-highlight-color, 3%); +.email-padding-top-24 { + padding-top: 24px; } -.text-center { - text-align: center; +.email-border-top { + border-top: 1px solid #dfdee3; } -.text-right { +.email-border-bottom { + border-bottom: 1px solid #dfdee3; +} + +// Header +.email-header-td { + padding: 16px 32px; + background-color: #1b001f; + background-image: url('../images/mailer-new/common/header-bg-start.png'); + background-position: left top; + background-repeat: repeat; +} + +.email-header-logo-table { + width: auto; + margin: 0; +} + +.email-header-logo-td { + padding: 16px 0; + font-size: 0; + + img { + color: #fff; + font-size: 16px; + font-weight: bold; + max-height: 40px; + } +} + +.email-header-logo-a { + display: inline-block; + + img { + display: inline-block; + color: #fff; + } +} + +.email-header-logo-div { + max-height: 0; +} + +.email-header-logo-p { + word-break: break-all; + padding-left: 40px; + padding-top: 26px; + font-size: 11px; + line-height: 13px; + color: #8d808f; + text-align: left; +} + +.email-header-logo-span { + display: block; text-align: right; } -.padded { - padding-left: 16px; - padding-right: 16px; +.email-header-heading-td { + padding: 16px 0; } -.padded-bottom { - padding-bottom: 32px; -} - -.margin-bottom { - margin-bottom: 20px; -} - -.hero-icon { - width: 64px; - - td { - text-align: center; - vertical-align: middle; - line-height: 100%; - mso-line-height-rule: exactly; - padding: 16px; - border-radius: 80px; - background: $success-green; - } - - &.warning-icon td { - background: $gold-star; - } - - &.alert-icon td { - background: $error-red; - } +.email-header-heading-img-td { + width: 56px; + text-align: left; + vertical-align: top; img { - max-width: 32px; - width: 32px; - height: 32px; - display: block; - line-height: 100%; + width: 56px; + height: 56px; + border-radius: 12px; } } -.hr { - width: 100%; +.email-header-heading-txt-td { + vertical-align: middle; + padding-left: 16px; + padding-right: 16px; - td { - font-size: 0; - line-height: 1px; - mso-line-height-rule: exactly; - min-height: 1px; - overflow: hidden; - height: 2px; - background-color: transparent !important; - border-top: 1px solid lighten($ui-base-color, 8%); - } -} - -.status { - padding-bottom: 32px; - - &--highlighted { - border: 1px solid lighten($ui-base-color, 8%); - border-radius: 4px; - padding-bottom: 16px; - margin-bottom: 16px; - } - - .status-header { - td { - font-size: 14px; - padding-bottom: 15px; - } - - bdi { - color: $white; - font-size: 16px; - display: block; - font-weight: 500; - } - - td:first-child { - padding-right: 10px; - } - - img { - width: 48px; - height: 48px; - border-radius: 4px; - } + h1 { + margin-bottom: 5px; + color: #fff; + font-size: 24px; + line-height: 28px; + font-weight: 600; } p { - font-size: 19px; - margin-bottom: 20px; + color: #a399a5; + font-size: 18px; + line-height: 21.6px; + font-weight: 500; + } - &.status-footer { - color: lighten($ui-base-color, 26%); - font-size: 14px; - margin-bottom: 0; + &:only-child { + padding-left: 0; + padding-right: 0; + } +} - a { - color: lighten($ui-base-color, 26%); +// To make the design work with images off +// we create an empty div that overlaps with +// the rest of the content with a dark background. +.email-header-after-div { + max-height: 0; +} + +.email-header-after-inside-div { + height: 30px; + background-color: #1b001f; +} + +// Body content +.email-body-td { + background-image: url('../images/mailer-new/common/header-bg-end.png'); + background-position: left top; + background-repeat: no-repeat; +} + +.email-body-padding-td { + padding: 0 32px 32px; + mso-padding-alt: 32px; +} + +.email-body-padding-td { + & > p { + font-size: 14px; + line-height: 20px; + color: #17063b; + + a { + color: #6364ff; + text-decoration: none; + + &:hover { + color: #563acc !important; } } } } -.border-top { - border-top: 1px solid lighten($ui-base-color, 8%); +// Footer +.email-footer-td { + padding: 28px 32px 32px; + text-align: center; } -ul { - padding-left: 15px; - margin-top: 0; - margin-bottom: 0; - padding-top: 16px; +.email-footer-logo-a { + display: inline-block; +} - li { - margin-bottom: 16px; - color: lighten($ui-base-color, 26%); +.email-footer-p { + color: #9b94ab; + text-align: center; + font-size: 12px; + line-height: 20px; - span { - color: $ui-primary-color; + a { + color: #9b94ab; + text-decoration: underline; + } + + &:first-child { + margin-bottom: 12px; + } +} + +// Button +.email-btn-table { + margin: 0; + max-width: 100%; + border-collapse: separate; + border-radius: 8px; + background-color: #6364ff; +} + +.email-btn-td { + height: 40px; + text-align: center; + mso-padding-alt: 0 35px; +} + +.email-btn-a { + display: block; + border-radius: 8px; + padding-left: 35px; + padding-right: 35px; + padding-top: 10px; + padding-bottom: 10px; + text-align: center; + font-family: Inter, 'Lucida Grande', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 20px; + color: #fff; + text-decoration: none; + transition: background-color 0.3s ease-in-out; +} + +// Status +.email-status-header-img { + vertical-align: top; + width: 48px; + + img { + width: 48px; + height: 48px; + border-radius: 8px; + overflow: hidden; + } +} + +.email-status-header-text { + padding-left: 16px; + padding-right: 16px; + vertical-align: middle; +} + +.email-status-header-name { + font-size: 16px; + font-weight: 600; + line-height: 24px; + color: #17063b; +} + +.email-status-header-handle { + font-size: 14px; + line-height: 20px; + color: #746a89; +} + +.email-status-content { + padding-top: 24px; +} + +.email-status-spoiler { + color: #746a89; + font-style: italic; + margin-bottom: 8px; +} + +.email-status-prose { + p { + font-size: 14px; + line-height: 20px; + color: #17063b; + } + + a { + color: #6364ff; + text-decoration: none; + + &:hover { + color: #563acc !important; } } } -ul.rules-list { - padding-top: 0; -} +.email-status-media { + margin-top: 16px; + font-size: 14px; + line-height: 20px; + color: #17063b; -@media only screen and (device-width >= 768px) and (device-width <= 1024px) and (orientation: landscape) { - body { - min-height: 1024px !important; + img { + border-radius: 8px; + } + + a { + color: #6364ff; + text-decoration: none; + + &:hover { + color: #563acc !important; + } } } -@media (width <= 697px) { - .email-container, - .col-1, - .col-2, - .col-3, - .col-4, - .col-5, - .col-6 { - width: 100% !important; - max-width: none !important; +.email-status-footer { + margin-top: 16px; + font-size: 12px; + line-height: 16px; + color: #746a89; + + a { + color: #746a89; } - .email-start { - padding-top: 16px !important; - } - - .email-end { - padding-bottom: 16px !important; - } - - .padded { - padding-left: 0 !important; - padding-right: 0 !important; + a:hover { + color: #746a89 !important; + text-decoration: underline !important; + } +} + +// Purple frame for emphasis +.email-frame-table { + background-color: #efefff; + border-radius: 8px; +} + +.email-frame-td { + padding: 16px; +} + +.email-frame-wrapper-td { + padding-bottom: 16px; +} + +.email-frame-td > p { + text-align: center; + font-size: 16px; + line-height: 24px; +} + +// Checklist item +.email-checklist-wrapper-td { + padding: 4px 0; +} + +.email-checklist-table { + border-radius: 12px; + border-width: 1px; + border-style: solid; + border-color: #efefff; + background-color: #fff; +} + +.email-checklist-td { + padding: 16px; +} + +.email-checklist-icons-td { + width: 84px; + vertical-align: top; +} + +.email-checklist-icons-checkbox-td { + width: 20px; + vertical-align: middle; + + img { + max-width: 100%; + width: 20px; + } +} + +.email-checklist-icons-step-td { + width: 64px; + text-align: center; + vertical-align: middle; + + img { + max-width: 100%; + width: 40px; + } +} + +.email-checklist-text-td { + h3 { + margin: 0 0 4px; + color: #17063b; + font-size: 14px; + font-weight: 600; + line-height: 16.8px; + } + + p { + margin: 0 0 2px; + color: #746a89; + font-size: 14px; + line-height: 16.8px; + } + + .email-btn-table { + width: 100px; + } + + .email-btn-td { + mso-padding-alt: 10px; + } + + .email-btn-a { + padding-left: 10px; + padding-right: 10px; + } +} + +// Responsive +/* stylelint-disable-next-line media-feature-range-notation -- Basic media queries have better support across email clients. */ +@media only screen and (min-width: 740px) { + .email-desktop-p-8 { + padding: 32px !important; + } + + .email-desktop-rounded-16px { + border-radius: 16px !important; + } + + .email-header-td { + border-radius: 16px 16px 0 0 !important; + } + + .email-desktop-flex { + display: flex; } } diff --git a/app/mailers/notification_mailer.rb b/app/mailers/notification_mailer.rb index 5eecfed10..4eb38ec34 100644 --- a/app/mailers/notification_mailer.rb +++ b/app/mailers/notification_mailer.rb @@ -12,6 +12,8 @@ class NotificationMailer < ApplicationMailer default to: -> { email_address_with_name(@user.email, @me.username) } + layout 'mailer' + def mention return unless @user.functional? && @status.present? diff --git a/app/views/application/mailer/_button.html.haml b/app/views/application/mailer/_button.html.haml new file mode 100644 index 000000000..61430732e --- /dev/null +++ b/app/views/application/mailer/_button.html.haml @@ -0,0 +1,4 @@ +%table.email-btn-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-btn-td + = link_to "#{text} ➜", url, class: 'email-btn-a email-btn-hover' diff --git a/app/views/application/mailer/_checklist.html.haml b/app/views/application/mailer/_checklist.html.haml new file mode 100644 index 000000000..9ee965593 --- /dev/null +++ b/app/views/application/mailer/_checklist.html.haml @@ -0,0 +1,29 @@ +%table.email-w-full.email-checklist-wrapper-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-checklist-wrapper-td + %table.email-w-full.email-checklist-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-checklist-td + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-checklist-icons-td + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-checklist-icons-checkbox-td + - if defined?(checked) && checked + = image_tag full_pack_url('media/images/mailer-new/welcome/checkbox-on.png'), alt: '', width: 20, height: 20 + - else + = image_tag full_pack_url('media/images/mailer-new/welcome/checkbox-off.png'), alt: '', width: 20, height: 20 + %td.email-checklist-icons-step-td + - if defined?(step_image_url) + = image_tag step_image_url, alt: '', width: 40, height: 40 + %td.email-checklist-text-td + .email-desktop-flex + %div + - if defined?(title) + %h3= title + - if defined?(text) + %p= text + %div + - if defined?(button_text) && defined?(button_url) && defined?(checked) && !checked + = render 'application/mailer/button', text: button_text, url: button_url diff --git a/app/views/application/mailer/_frame.html.haml b/app/views/application/mailer/_frame.html.haml new file mode 100644 index 000000000..74403e767 --- /dev/null +++ b/app/views/application/mailer/_frame.html.haml @@ -0,0 +1,4 @@ +%table.email-w-full.email-frame-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-frame-td + %p= text diff --git a/app/views/application/mailer/_heading.html.haml b/app/views/application/mailer/_heading.html.haml new file mode 100644 index 000000000..9fc5dc747 --- /dev/null +++ b/app/views/application/mailer/_heading.html.haml @@ -0,0 +1,13 @@ +%table.email-w-full.email-header-heading-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-header-heading-td + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + - if defined?(heading_image_url) + %td.email-header-heading-img-td + = image_tag heading_image_url, alt: '', width: 56, height: 56 + %td.email-header-heading-txt-td + - if defined?(heading_title) + %h1= heading_title + - if defined?(heading_subtitle) + %p= heading_subtitle diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml index 7fa344a9b..c0f9a0a55 100644 --- a/app/views/layouts/mailer.html.haml +++ b/app/views/layouts/mailer.html.haml @@ -1,54 +1,87 @@ !!! -%html{ lang: I18n.locale } +%html{ lang: I18n.locale, dir: locale_direction } %head - %meta{ 'http-equiv' => 'Content-Type', 'content' => 'text/html; charset=utf-8' }/ - %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, shrink-to-fit=no' } - + %meta{ 'charset' => 'utf-8' } + %title Mastodon + %meta{ name: 'x-apple-disable-message-reformatting' } + %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1' } + %meta{ name: 'format-detection', content: 'telephone=no, date=no, address=no, email=no, url=no' } + %meta{ name: 'supported-color-schemes', content: 'light' } + %style + \table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } + %style{ 'data-premailer': 'ignore' } + \.email a { color: inherit; text-decoration: none; } + \.email-btn-hover:hover { background-color: #563acc !important; } + /[if mso] + + + 96 + + = stylesheet_pack_tag 'mailer' - %body{ dir: locale_direction } - %table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody + %body + .email{ dir: locale_direction } + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.email-body.email-start + %td.email-desktop-p-8 .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.header - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell - = link_to root_url do - = image_tag full_pack_url('media/images/mailer/wordmark.png'), alt: 'Mastodon', height: 34, class: 'logo' + /[if mso] +
+ %table.email-w-full.email-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-card-td.email-desktop-rounded-16px - = yield + -# Header + %table.email-header-table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-header-td - %table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body.email-end + -# Logo + %table.email-header-logo-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-header-logo-td + /[if mso] + + .email-header-logo-div + %p.email-header-logo-p + %span.email-header-logo-span + = '/ ' + = site_hostname + /[if mso] + + = link_to root_url, class: 'email-header-logo-a' do + = image_tag full_pack_url('media/images/mailer-new/common/logo-header.png'), alt: 'Mastodon', width: 157, height: 40 + + -# Heading + = yield :heading + + .email-header-after-div + .email-header-after-inside-div + %table.email-body-table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-td + -# Content + = yield + + /[if mso] +
+ + -# Footer .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-end - != '  ' - %tr - %td.blank-cell.footer - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %td.column-cell - %p= t 'about.hosted_on', domain: site_hostname - %p - = link_to t('application_mailer.notification_preferences'), settings_preferences_notifications_url - - if defined?(@unsubscribe_url) - · - = link_to t('application_mailer.unsubscribe'), @unsubscribe_url - %td.column-cell.text-right - = link_to root_url do - = image_tag full_pack_url('media/images/mailer/logo.png'), alt: 'Mastodon', height: 24 + /[if mso] +
+ %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-footer-td + %p.email-footer-p + = link_to root_url, class: 'email-footer-logo-a' do + = image_tag full_pack_url('media/images/mailer-new/common/logo-footer.png'), alt: 'Mastodon', width: 44, height: 44 + %p.email-footer-p + = t 'about.hosted_on', domain: site_hostname + %p.email-footer-p + = link_to t('application_mailer.notification_preferences'), settings_preferences_notifications_url + - if defined?(@unsubscribe_url) + · + = link_to t('application_mailer.unsubscribe'), @unsubscribe_url + /[if mso] +
diff --git a/app/views/notification_mailer/_status.html.haml b/app/views/notification_mailer/_status.html.haml index e053a30fd..bf38dc9aa 100644 --- a/app/views/notification_mailer/_status.html.haml +++ b/app/views/notification_mailer/_status.html.haml @@ -1,45 +1,31 @@ -- i ||= 0 -- highlighted ||= false +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-status-header-img + = image_tag full_asset_url(status.account.avatar.url), alt: '', width: 48, height: 48 + %td.email-status-header-text + %h2.email-status-header-name + = display_name(status.account) + %p.email-status-header-handle + @#{status.account.pretty_acct} -%table.email-table{ cellspacing: 0, cellpadding: 0, dir: 'ltr' } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell{ class: i.zero? ? 'content-start' : nil } - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.padded.status{ class: highlighted ? 'status--highlighted' : '' } - %table.status-header{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td{ align: 'left', width: 48 } - = image_tag full_asset_url(status.account.avatar.url), alt: '' - %td{ align: 'left' } - %bdi= display_name(status.account) - @#{status.account.pretty_acct} +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-status-content + .auto-dir + - if status.spoiler_text? + %p.email-status-spoiler + = status.spoiler_text - - if status.spoiler_text? - .auto-dir - %p - = status.spoiler_text + .email-status-prose + = status_content_format(status) - .auto-dir - = status_content_format(status) + - if status.ordered_media_attachments.size.positive? + %p.email-status-media + - status.ordered_media_attachments.each do |a| + - if status.local? + = link_to full_asset_url(a.file.url(:original)), full_asset_url(a.file.url(:original)) + - else + = link_to a.remote_url, a.remote_url - - if status.ordered_media_attachments.size.positive? - %p - - status.ordered_media_attachments.each do |a| - - if status.local? - = link_to full_asset_url(a.file.url(:original)), full_asset_url(a.file.url(:original)) - - else - = link_to a.remote_url, a.remote_url - - %p.status-footer - = link_to l(status.created_at.in_time_zone(time_zone.presence), format: :with_time_zone), web_url("@#{status.account.pretty_acct}/#{status.id}") + %p.email-status-footer + = link_to l(status.created_at.in_time_zone(time_zone.presence), format: :with_time_zone), web_url("@#{status.account.pretty_acct}/#{status.id}") diff --git a/app/views/notification_mailer/favourite.html.haml b/app/views/notification_mailer/favourite.html.haml index 325f0aff5..26bb31731 100644 --- a/app/views/notification_mailer/favourite.html.haml +++ b/app/views/notification_mailer/favourite.html.haml @@ -1,45 +1,13 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t('notification_mailer.favourite.title'), heading_subtitle: t('notification_mailer.favourite.body', name: @account.pretty_acct), heading_image_url: full_pack_url('media/images/mailer-new/heading/favorite.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td + = render 'status', status: @status, time_zone: @me.user_time_zone + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_grade.png'), alt: '' - - %h1= t 'notification_mailer.favourite.title' - %p.lead= t('notification_mailer.favourite.body', name: @account.pretty_acct) - -= render 'status', status: @status, time_zone: @me.user_time_zone - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start.border-top - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to web_url("@#{@status.account.pretty_acct}/#{@status.id}") do - %span= t 'application_mailer.view_status' + %td.email-padding-top-24 + = render 'application/mailer/button', text: t('application_mailer.view_status'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}") diff --git a/app/views/notification_mailer/follow.html.haml b/app/views/notification_mailer/follow.html.haml index f250cbbd2..2f7ba0a9c 100644 --- a/app/views/notification_mailer/follow.html.haml +++ b/app/views/notification_mailer/follow.html.haml @@ -1,43 +1,9 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_person_add.png'), alt: '' - - %h1= t 'notification_mailer.follow.title' - %p.lead= t('notification_mailer.follow.body', name: @account.pretty_acct) - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to web_url("@#{@account.pretty_acct}") do - %span= t 'application_mailer.view_profile' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('notification_mailer.follow.title'), heading_subtitle: t('notification_mailer.follow.body', name: @account.pretty_acct), heading_image_url: full_pack_url('media/images/mailer-new/heading/user.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td + = render 'application/mailer/button', text: t('application_mailer.view_profile'), url: web_url("@#{@account.pretty_acct}") diff --git a/app/views/notification_mailer/follow_request.html.haml b/app/views/notification_mailer/follow_request.html.haml index 3885a411d..275d0c5b0 100644 --- a/app/views/notification_mailer/follow_request.html.haml +++ b/app/views/notification_mailer/follow_request.html.haml @@ -1,43 +1,9 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_person_add.png'), alt: '' - - %h1= t 'notification_mailer.follow_request.title' - %p.lead= t('notification_mailer.follow_request.body', name: @account.pretty_acct) - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to web_url('follow_requests') do - %span= t 'notification_mailer.follow_request.action' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('notification_mailer.follow_request.title'), heading_subtitle: t('notification_mailer.follow_request.body', name: @account.pretty_acct), heading_image_url: full_pack_url('media/images/mailer-new/heading/follow.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td + = render 'application/mailer/button', text: t('notification_mailer.follow_request.action'), url: web_url('follow_requests') diff --git a/app/views/notification_mailer/mention.html.haml b/app/views/notification_mailer/mention.html.haml index e830644c3..2420a42bf 100644 --- a/app/views/notification_mailer/mention.html.haml +++ b/app/views/notification_mailer/mention.html.haml @@ -1,45 +1,13 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t('notification_mailer.mention.title'), heading_subtitle: t('notification_mailer.mention.body', name: @status.account.pretty_acct), heading_image_url: full_pack_url('media/images/mailer-new/heading/mention.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td + = render 'status', status: @status, time_zone: @me.user_time_zone + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_reply.png'), alt: '' - - %h1= t 'notification_mailer.mention.title' - %p.lead= t('notification_mailer.mention.body', name: @status.account.pretty_acct) - -= render 'status', status: @status, time_zone: @me.user_time_zone - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start.border-top - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to web_url("@#{@status.account.pretty_acct}/#{@status.id}") do - %span= t 'notification_mailer.mention.action' + %td.email-padding-top-24 + = render 'application/mailer/button', text: t('notification_mailer.mention.action'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}") diff --git a/app/views/notification_mailer/reblog.html.haml b/app/views/notification_mailer/reblog.html.haml index e4f944123..b32c98470 100644 --- a/app/views/notification_mailer/reblog.html.haml +++ b/app/views/notification_mailer/reblog.html.haml @@ -1,45 +1,13 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t('notification_mailer.reblog.title'), heading_subtitle: t('notification_mailer.reblog.body', name: @account.pretty_acct), heading_image_url: full_pack_url('media/images/mailer-new/heading/boost.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td + = render 'status', status: @status, time_zone: @me.user_time_zone + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_cached.png'), alt: '' - - %h1= t 'notification_mailer.reblog.title' - %p.lead= t('notification_mailer.reblog.body', name: @account.pretty_acct) - -= render 'status', status: @status, time_zone: @me.user_time_zone - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start.border-top - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to web_url("@#{@status.account.pretty_acct}/#{@status.id}") do - %span= t 'application_mailer.view_status' + %td.email-padding-top-24 + = render 'application/mailer/button', text: t('application_mailer.view_status'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}") diff --git a/app/views/user_mailer/appeal_approved.html.haml b/app/views/user_mailer/appeal_approved.html.haml index 223ba7f0b..2cf62de39 100644 --- a/app/views/user_mailer/appeal_approved.html.haml +++ b/app/views/user_mailer/appeal_approved.html.haml @@ -1,61 +1,12 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_done.png'), alt: '' - - %h1= t 'user_mailer.appeal_approved.title' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'user_mailer.appeal_approved.explanation', - appeal_date: l(@appeal.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone), - strike_date: l(@appeal.strike.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone) - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to root_url do - %span= t 'user_mailer.appeal_approved.action' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('user_mailer.appeal_approved.title'), heading_subtitle: t('user_mailer.appeal_approved.subtitle'), heading_image_url: full_pack_url('media/images/mailer-new/heading/appeal-approved.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'user_mailer.appeal_approved.explanation', + appeal_date: l(@appeal.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone), + strike_date: l(@appeal.strike.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone) + = render 'application/mailer/button', text: t('user_mailer.appeal_approved.action'), url: root_url diff --git a/app/views/user_mailer/appeal_rejected.html.haml b/app/views/user_mailer/appeal_rejected.html.haml index 59354f1d4..c24cf7647 100644 --- a/app/views/user_mailer/appeal_rejected.html.haml +++ b/app/views/user_mailer/appeal_rejected.html.haml @@ -1,61 +1,12 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_flag.png'), alt: '' - - %h1= t 'user_mailer.appeal_rejected.title' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'user_mailer.appeal_rejected.explanation', - appeal_date: l(@appeal.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone), - strike_date: l(@appeal.strike.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone) - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to root_url do - %span= t 'user_mailer.appeal_approved.action' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('user_mailer.appeal_rejected.title'), heading_subtitle: t('user_mailer.appeal_rejected.subtitle'), heading_image_url: full_pack_url('media/images/mailer-new/heading/appeal-rejected.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'user_mailer.appeal_rejected.explanation', + appeal_date: l(@appeal.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone), + strike_date: l(@appeal.strike.created_at.in_time_zone(@resource.time_zone.presence), format: :with_time_zone) + = render 'application/mailer/button', text: t('user_mailer.appeal_approved.action'), url: root_url diff --git a/app/views/user_mailer/backup_ready.html.haml b/app/views/user_mailer/backup_ready.html.haml index 465ead2c8..4a1e7b1c6 100644 --- a/app/views/user_mailer/backup_ready.html.haml +++ b/app/views/user_mailer/backup_ready.html.haml @@ -1,59 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_file_download.png'), alt: '' - - %h1= t 'user_mailer.backup_ready.title' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'user_mailer.backup_ready.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to download_backup_url(@backup) do - %span= t 'exports.archive_takeout.download' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('user_mailer.backup_ready.title'), heading_subtitle: t('user_mailer.backup_ready.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/archive.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'user_mailer.backup_ready.extra' + = render 'application/mailer/button', text: t('exports.archive_takeout.download'), url: download_backup_url(@backup) diff --git a/app/views/user_mailer/confirmation_instructions.html.haml b/app/views/user_mailer/confirmation_instructions.html.haml index 447e689b4..4fd66d079 100644 --- a/app/views/user_mailer/confirmation_instructions.html.haml +++ b/app/views/user_mailer/confirmation_instructions.html.haml @@ -1,80 +1,16 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_email.png'), alt: '' - - %h1= t 'devise.mailer.confirmation_instructions.title' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t @resource.approved? ? 'devise.mailer.confirmation_instructions.explanation' : 'devise.mailer.confirmation_instructions.explanation_when_pending', host: site_hostname - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - - if @resource.created_by_application - = link_to confirmation_url(@resource, confirmation_token: @token, redirect_to_app: 'true') do - %span= t 'devise.mailer.confirmation_instructions.action_with_app', app: @resource.created_by_application.name - - else - = link_to confirmation_url(@resource, confirmation_token: @token) do - %span= t 'devise.mailer.confirmation_instructions.action' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'devise.mailer.confirmation_instructions.extra_html', terms_path: about_more_url, policy_path: privacy_policy_url += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.confirmation_instructions.title'), heading_image_url: full_pack_url('media/images/mailer-new/heading/email.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t @resource.approved? ? 'devise.mailer.confirmation_instructions.explanation' : 'devise.mailer.confirmation_instructions.explanation_when_pending', host: site_hostname + - if @resource.created_by_application + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url + = link_to confirmation_url(@resource, confirmation_token: @token, redirect_to_app: 'true') do + %span= t 'devise.mailer.confirmation_instructions.action_with_app', app: @resource.created_by_application.name + - else + = render 'application/mailer/button', text: t('devise.mailer.confirmation_instructions.action'), url: confirmation_url(@resource, confirmation_token: @token) + %p= t 'devise.mailer.confirmation_instructions.extra_html', terms_path: about_more_url, policy_path: privacy_policy_url diff --git a/app/views/user_mailer/email_changed.html.haml b/app/views/user_mailer/email_changed.html.haml index 96be8624d..741c2bde1 100644 --- a/app/views/user_mailer/email_changed.html.haml +++ b/app/views/user_mailer/email_changed.html.haml @@ -1,58 +1,11 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_email.png'), alt: '' - - %h1= t 'devise.mailer.email_changed.title' - %p.lead= t 'devise.mailer.email_changed.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.input-cell - %table.input{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td= @resource.unconfirmed_email - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %p= t 'devise.mailer.email_changed.extra' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.email_changed.title'), heading_subtitle: t('devise.mailer.email_changed.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/email.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + = render 'application/mailer/frame', text: @resource.unconfirmed_email + %p= t 'devise.mailer.email_changed.extra' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/password_change.html.haml b/app/views/user_mailer/password_change.html.haml index 559abf027..08b4ecbbd 100644 --- a/app/views/user_mailer/password_change.html.haml +++ b/app/views/user_mailer/password_change.html.haml @@ -1,40 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.password_change.title' - %p.lead= t 'devise.mailer.password_change.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %p= t 'devise.mailer.password_change.extra' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.password_change.title'), heading_subtitle: t('devise.mailer.password_change.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/password.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.password_change.extra' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/reconfirmation_instructions.html.haml b/app/views/user_mailer/reconfirmation_instructions.html.haml index 7f10ba94f..8aa223015 100644 --- a/app/views/user_mailer/reconfirmation_instructions.html.haml +++ b/app/views/user_mailer/reconfirmation_instructions.html.haml @@ -1,60 +1,11 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_email.png'), alt: '' - - %h1= t 'devise.mailer.reconfirmation_instructions.title' - %p.lead= t 'devise.mailer.reconfirmation_instructions.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to confirmation_url(@resource, confirmation_token: @token) do - %span= t 'devise.mailer.confirmation_instructions.action' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %p= t 'devise.mailer.reconfirmation_instructions.extra' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.reconfirmation_instructions.title'), heading_image_url: full_pack_url('media/images/mailer-new/heading/email.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t('devise.mailer.reconfirmation_instructions.explanation') + = render 'application/mailer/button', text: t('devise.mailer.confirmation_instructions.action'), url: confirmation_url(@resource, confirmation_token: @token) + %p= t 'devise.mailer.reconfirmation_instructions.extra' diff --git a/app/views/user_mailer/reset_password_instructions.html.haml b/app/views/user_mailer/reset_password_instructions.html.haml index eeed38c9e..0db79daaf 100644 --- a/app/views/user_mailer/reset_password_instructions.html.haml +++ b/app/views/user_mailer/reset_password_instructions.html.haml @@ -1,60 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.reset_password_instructions.title' - %p.lead= t 'devise.mailer.reset_password_instructions.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_password_url(@resource, reset_password_token: @token) do - %span= t 'devise.mailer.reset_password_instructions.action' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %p= t 'devise.mailer.reset_password_instructions.extra' += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.reset_password_instructions.title'), heading_subtitle: t('devise.mailer.reset_password_instructions.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/password.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.reset_password_instructions.extra' + = render 'application/mailer/button', text: t('devise.mailer.reset_password_instructions.action'), url: edit_password_url(@resource, reset_password_token: @token) diff --git a/app/views/user_mailer/suspicious_sign_in.html.haml b/app/views/user_mailer/suspicious_sign_in.html.haml index 0cd21b4e6..e2cb916bf 100644 --- a/app/views/user_mailer/suspicious_sign_in.html.haml +++ b/app/views/user_mailer/suspicious_sign_in.html.haml @@ -1,71 +1,24 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon.warning-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'user_mailer.suspicious_sign_in.title' - %p= t 'user_mailer.suspicious_sign_in.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'user_mailer.suspicious_sign_in.details' - %tr - %td.column-cell.text-center - %p - %strong #{t('sessions.ip')}: - = @remote_ip - %br/ - %strong #{t('sessions.browser')}: - %span{ title: @user_agent } - = t 'sessions.description', - browser: t("sessions.browsers.#{@detection.id}", default: @detection.id.to_s), - platform: t("sessions.platforms.#{@detection.platform.id}", default: @detection.platform.id.to_s) - %br/ - = l(@timestamp.in_time_zone(@resource.time_zone.presence), format: :with_time_zone) - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'user_mailer.suspicious_sign_in.further_actions_html', - action: link_to(t('user_mailer.suspicious_sign_in.change_password'), edit_user_registration_url) += content_for :heading do + = render 'application/mailer/heading', heading_title: t('user_mailer.suspicious_sign_in.title'), heading_subtitle: t('user_mailer.suspicious_sign_in.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/login.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'user_mailer.suspicious_sign_in.details' + %p + %strong #{t('sessions.ip')}: + = @remote_ip + %br/ + %strong #{t('sessions.browser')}: + %span{ title: @user_agent } + = t 'sessions.description', + browser: t("sessions.browsers.#{@detection.id}", default: @detection.id.to_s), + platform: t("sessions.platforms.#{@detection.platform.id}", default: @detection.platform.id.to_s) + %br/ + %strong #{t('sessions.date')}: + = l(@timestamp.in_time_zone(@resource.time_zone.presence), format: :with_time_zone) + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url + %p= t 'user_mailer.suspicious_sign_in.further_actions_html', + action: link_to(t('user_mailer.suspicious_sign_in.change_password'), edit_user_registration_url) diff --git a/app/views/user_mailer/two_factor_disabled.html.haml b/app/views/user_mailer/two_factor_disabled.html.haml index 651c6f940..0d8ff5c69 100644 --- a/app/views/user_mailer/two_factor_disabled.html.haml +++ b/app/views/user_mailer/two_factor_disabled.html.haml @@ -1,43 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon.alert-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.two_factor_disabled.title' - %p.lead= t 'devise.mailer.two_factor_disabled.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.two_factor_disabled.title'), heading_subtitle: t('devise.mailer.two_factor_disabled.subtitle'), heading_image_url: full_pack_url('media/images/mailer-new/heading/2fa-disabled.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.two_factor_disabled.explanation' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/two_factor_enabled.html.haml b/app/views/user_mailer/two_factor_enabled.html.haml index fc31bd979..6fe03eab2 100644 --- a/app/views/user_mailer/two_factor_enabled.html.haml +++ b/app/views/user_mailer/two_factor_enabled.html.haml @@ -1,43 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.two_factor_enabled.title' - %p.lead= t 'devise.mailer.two_factor_enabled.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.two_factor_enabled.title'), heading_subtitle: t('devise.mailer.two_factor_enabled.subtitle'), heading_image_url: full_pack_url('media/images/mailer-new/heading/2fa-enabled.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.two_factor_enabled.explanation' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/two_factor_recovery_codes_changed.html.haml b/app/views/user_mailer/two_factor_recovery_codes_changed.html.haml index 833708868..dff0620ce 100644 --- a/app/views/user_mailer/two_factor_recovery_codes_changed.html.haml +++ b/app/views/user_mailer/two_factor_recovery_codes_changed.html.haml @@ -1,43 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon.alert-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.two_factor_recovery_codes_changed.title' - %p.lead= t 'devise.mailer.two_factor_recovery_codes_changed.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.two_factor_recovery_codes_changed.title'), heading_subtitle: t('devise.mailer.two_factor_recovery_codes_changed.subtitle'), heading_image_url: full_pack_url('media/images/mailer-new/heading/2fa-recovery.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.two_factor_recovery_codes_changed.explanation' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/warning.html.haml b/app/views/user_mailer/warning.html.haml index 5d64e8324..4dfbfc231 100644 --- a/app/views/user_mailer/warning.html.haml +++ b/app/views/user_mailer/warning.html.haml @@ -1,98 +1,46 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t("user_mailer.warning.title.#{@warning.action}"), heading_image_url: full_pack_url('media/images/mailer-new/heading/warning.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td-without-padding + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon.alert-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_flag.png'), alt: '' + %td.email-prose.email-padding-24 + - unless @warning.none_action? + %p= t "user_mailer.warning.explanation.#{@warning.action}", instance: @instance - %h1= t "user_mailer.warning.title.#{@warning.action}" + - if @warning.text.present? + = linkify(@warning.text) -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody + - if @warning.report && !@warning.report.other? + %p + %strong= t('user_mailer.warning.reason') + = t("user_mailer.warning.categories.#{@warning.report.category}") + + - if @warning.report.violation? && @warning.report.rule_ids.present? + %ul.rules-list + - @warning.report.rules.each do |rule| + %li= rule.text + + - unless @statuses.empty? + %p + %strong= t('user_mailer.warning.statuses') + + - unless @statuses.empty? + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-border-top + - @statuses.each_with_index do |status, i| + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-border-bottom.email-padding-24 + = render 'notification_mailer/status', status: status, i: i + 1, highlighted: true, time_zone: @resource.time_zone.presence + + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.content-start - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - - unless @warning.none_action? - %p= t "user_mailer.warning.explanation.#{@warning.action}", instance: @instance - - - if @warning.text.present? - = linkify(@warning.text) - - - if @warning.report && !@warning.report.other? - %p - %strong= t('user_mailer.warning.reason') - = t("user_mailer.warning.categories.#{@warning.report.category}") - - - if @warning.report.violation? && @warning.report.rule_ids.present? - %ul.rules-list - - @warning.report.rules.each do |rule| - %li= rule.text - - - unless @statuses.empty? - %p - %strong= t('user_mailer.warning.statuses') - -- unless @statuses.empty? - - @statuses.each_with_index do |status, i| - = render 'notification_mailer/status', status: status, i: i + 1, highlighted: true, time_zone: @resource.time_zone.presence - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell{ class: @statuses.blank? ? '' : 'content-start' } - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to disputes_strike_url(@warning) do - %span= t 'user_mailer.warning.appeal' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center - %p= t 'user_mailer.warning.appeal_description', instance: @instance + %td.email-prose.email-padding-24 + %p= t 'user_mailer.warning.appeal_description', instance: @instance + = render 'application/mailer/button', text: t('user_mailer.warning.appeal'), url: disputes_strike_url(@warning) diff --git a/app/views/user_mailer/webauthn_credential_added.html.haml b/app/views/user_mailer/webauthn_credential_added.html.haml index 2ecb62d96..334eb3e32 100644 --- a/app/views/user_mailer/webauthn_credential_added.html.haml +++ b/app/views/user_mailer/webauthn_credential_added.html.haml @@ -1,44 +1,13 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.webauthn_credential.added.title'), heading_subtitle: t('devise.mailer.webauthn_credential.added.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/key-added.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.webauthn_credential.added.title' - %p.lead #{t('devise.mailer.webauthn_credential.added.explanation')}: - %p.lead= @webauthn_credential.nickname - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') + %td.email-frame-wrapper-td + = render 'application/mailer/frame', text: @webauthn_credential.nickname + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/webauthn_credential_deleted.html.haml b/app/views/user_mailer/webauthn_credential_deleted.html.haml index f282985b1..5fad523b4 100644 --- a/app/views/user_mailer/webauthn_credential_deleted.html.haml +++ b/app/views/user_mailer/webauthn_credential_deleted.html.haml @@ -1,44 +1,13 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.webauthn_credential.deleted.title'), heading_subtitle: t('devise.mailer.webauthn_credential.deleted.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/key-deleted.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon.alert-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.webauthn_credential.deleted.title' - %p.lead #{t('devise.mailer.webauthn_credential.deleted.explanation')}: - %p.lead= @webauthn_credential.nickname - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') + %td.email-frame-wrapper-td + = render 'application/mailer/frame', text: @webauthn_credential.nickname + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/webauthn_disabled.html.haml b/app/views/user_mailer/webauthn_disabled.html.haml index 81a2a7954..017412536 100644 --- a/app/views/user_mailer/webauthn_disabled.html.haml +++ b/app/views/user_mailer/webauthn_disabled.html.haml @@ -1,43 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon.alert-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.webauthn_disabled.title' - %p.lead= t 'devise.mailer.webauthn_disabled.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.webauthn_disabled.title'), heading_subtitle: t('devise.mailer.webauthn_disabled.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/key-disabled.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.webauthn_disabled.extra' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/webauthn_enabled.html.haml b/app/views/user_mailer/webauthn_enabled.html.haml index f08e764e8..3257d14df 100644 --- a/app/views/user_mailer/webauthn_enabled.html.haml +++ b/app/views/user_mailer/webauthn_enabled.html.haml @@ -1,43 +1,10 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: '' - - %h1= t 'devise.mailer.webauthn_enabled.title' - %p.lead= t 'devise.mailer.webauthn_enabled.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.content-cell.content-start - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.button-cell - %table.button{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to edit_user_registration_url do - %span= t('settings.account_settings') += content_for :heading do + = render 'application/mailer/heading', heading_title: t('devise.mailer.webauthn_enabled.title'), heading_subtitle: t('devise.mailer.webauthn_enabled.explanation'), heading_image_url: full_pack_url('media/images/mailer-new/heading/key-enabled.png') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td.email-prose + %p= t 'devise.mailer.webauthn_enabled.extra' + = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url diff --git a/app/views/user_mailer/welcome.html.haml b/app/views/user_mailer/welcome.html.haml index 0d8a15cfd..b77d40fb0 100644 --- a/app/views/user_mailer/welcome.html.haml +++ b/app/views/user_mailer/welcome.html.haml @@ -1,99 +1,25 @@ -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody += content_for :heading do + = render 'application/mailer/heading', heading_title: t('user_mailer.welcome.title', name: @resource.account.username), heading_subtitle: t('user_mailer.welcome.explanation') +%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-body-padding-td + %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } + %tr + %td.email-inner-card-td-without-padding + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.hero - .email-row - .col-6 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.text-center.padded - %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td - = image_tag full_pack_url('media/images/mailer/icon_done.png'), alt: '' - - %h1= t 'user_mailer.welcome.title', name: @resource.account.username - %p.lead= t 'user_mailer.welcome.explanation' - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody + %td.email-prose.email-padding-24 + %p + %b= t 'user_mailer.welcome.full_handle' + = render 'application/mailer/frame', text: "#{@resource.account.username}@#{@instance}" + %p= t 'user_mailer.welcome.full_handle_hint', instance: @instance + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.content-start - .email-row - .col-3 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.input-cell.text-center.padded-bottom - %h5= t 'user_mailer.welcome.full_handle' - %table.input{ align: 'center', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td @#{@resource.account.username}@#{@instance} - .col-3 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell - %p= t 'user_mailer.welcome.full_handle_hint', instance: @instance - -%table.email-table{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.email-body - .email-container - %table.content-section{ cellspacing: 0, cellpadding: 0 } - %tbody + %td.email-border-top.email-prose.email-padding-24 + %p= t 'user_mailer.welcome.edit_profile_step' + = render 'application/mailer/button', text: t('user_mailer.welcome.edit_profile_action'), url: settings_profile_url + %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' } %tr - %td.content-cell.content-start.border-top - .email-row - .col-4 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.padded - = t 'user_mailer.welcome.edit_profile_step' - .col-2 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.padded - %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to settings_profile_url do - %span= t 'user_mailer.welcome.edit_profile_action' - - %tr - %td.content-cell.padded-bottom - .email-row - .col-4 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.padded - = t 'user_mailer.welcome.final_step' - .col-2 - %table.column{ cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.column-cell.padded - %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 } - %tbody - %tr - %td.button-primary - = link_to web_url do - %span= t 'user_mailer.welcome.final_action' + %td.email-border-top.email-prose.email-padding-24 + %p= t 'user_mailer.welcome.edit_profile_step' + = render 'application/mailer/button', text: t('user_mailer.welcome.final_action'), url: web_url diff --git a/config/initializers/premailer_rails.rb b/config/initializers/premailer_rails.rb index 52576ef88..5e9576be7 100644 --- a/config/initializers/premailer_rails.rb +++ b/config/initializers/premailer_rails.rb @@ -5,4 +5,5 @@ require_relative '../../lib/premailer_webpack_strategy' Premailer::Rails.config.merge!(remove_ids: true, adapter: :nokogiri, generate_text_part: false, + css_to_attributes: false, strategies: [PremailerWebpackStrategy]) diff --git a/config/locales/devise.en.yml b/config/locales/devise.en.yml index eef821481..4439397c8 100644 --- a/config/locales/devise.en.yml +++ b/config/locales/devise.en.yml @@ -47,16 +47,19 @@ en: subject: 'Mastodon: Reset password instructions' title: Password reset two_factor_disabled: - explanation: Two-factor authentication for your account has been disabled. Login is now possible using only e-mail address and password. + explanation: Login is now possible using only e-mail address and password. subject: 'Mastodon: Two-factor authentication disabled' + subtitle: Two-factor authentication for your account has been disabled. title: 2FA disabled two_factor_enabled: - explanation: Two-factor authentication has been enabled for your account. A token generated by the paired TOTP app will be required for login. + explanation: A token generated by the paired TOTP app will be required for login. subject: 'Mastodon: Two-factor authentication enabled' + subtitle: Two-factor authentication has been enabled for your account. title: 2FA enabled two_factor_recovery_codes_changed: explanation: The previous recovery codes have been invalidated and new ones generated. subject: 'Mastodon: Two-factor recovery codes re-generated' + subtitle: The previous recovery codes have been invalidated and new ones generated. title: 2FA recovery codes changed unlock_instructions: subject: 'Mastodon: Unlock instructions' @@ -70,11 +73,13 @@ en: subject: 'Mastodon: Security key deleted' title: One of your security keys has been deleted webauthn_disabled: - explanation: Authentication with security keys has been disabled for your account. Login is now possible using only the token generated by the paired TOTP app. + explanation: Authentication with security keys has been disabled for your account. + extra: Login is now possible using only the token generated by the paired TOTP app. subject: 'Mastodon: Authentication with security keys disabled' title: Security keys disabled webauthn_enabled: - explanation: Security key authentication has been enabled for your account. Your security key can now be used for login. + explanation: Security key authentication has been enabled for your account. + extra: Your security key can now be used for login. subject: 'Mastodon: Security key authentication enabled' title: Security keys enabled omniauth_callbacks: diff --git a/config/locales/en.yml b/config/locales/en.yml index 50f814a81..78820c3b5 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1609,6 +1609,7 @@ en: unknown_browser: Unknown Browser weibo: Weibo current_session: Current session + date: Date description: "%{browser} on %{platform}" explanation: These are the web browsers currently logged in to your Mastodon account. ip: IP @@ -1775,16 +1776,19 @@ en: webauthn: Security keys user_mailer: appeal_approved: - action: Go to your account + action: Account Settings explanation: The appeal of the strike against your account on %{strike_date} that you submitted on %{appeal_date} has been approved. Your account is once again in good standing. subject: Your appeal from %{date} has been approved + subtitle: Your account is once again in good standing. title: Appeal approved appeal_rejected: explanation: The appeal of the strike against your account on %{strike_date} that you submitted on %{appeal_date} has been rejected. subject: Your appeal from %{date} has been rejected + subtitle: Your appeal has been rejected. title: Appeal rejected backup_ready: - explanation: You requested a full backup of your Mastodon account. It's now ready for download! + explanation: You requested a full backup of your Mastodon account. + extra: It's now ready for download! subject: Your archive is ready for download title: Archive takeout suspicious_sign_in: