Update new email templates (#28416)

Co-authored-by: Matt Jankowski <matt@jankowski.online>

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. */
+}

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?
 

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'

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

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

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

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{ 'charset' => 'utf-8' }
-    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, shrink-to-fit=no' }
+    %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]
+      <xml>
+      <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+      </xml>
     = stylesheet_pack_tag 'mailer'
-  %body{ dir: locale_direction }
+  %body
-    %table.email-table{ cellspacing: 0, cellpadding: 0 }
+    .email{ dir: locale_direction }
-      %tbody
+      %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 }
+              /[if mso]
-                %tbody
+                <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:740px;" role="presentation"><tr><td>
+              %table.email-w-full.email-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
                 %tr
-                    %td.content-cell.header
+                  %td.email-card-td.email-desktop-rounded-16px
-                      .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'
 
+                    -# Header
+                    %table.email-header-table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+                      %tr
+                        %td.email-header-td
+
+                          -# Logo
+                          %table.email-header-logo-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+                            %tr
+                              %td.email-header-logo-td
+                                /[if mso]
+                                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:absolute; left:40px; top:26px; width:636px;"><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
+                                .email-header-logo-div
+                                  %p.email-header-logo-p
+                                    %span.email-header-logo-span
+                                      = '/ '
+                                      = site_hostname
+                                /[if mso]
+                                  </v:textbox></v:rect>
+                                = 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
 
-    %table.email-table{ cellspacing: 0, cellpadding: 0 }
+              /[if mso]
-      %tbody
+                </td></tr></table>
-        %tr
+
-          %td.email-body.email-end
+            -# Footer
             .email-container
-              %table.content-section{ cellspacing: 0, cellpadding: 0 }
+              /[if mso]
-                %tbody
+                <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:740px;" role="presentation"><tr><td>
+              %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
                 %tr
-                    %td.content-cell.content-end
+                  %td.email-footer-td
-                      != '&nbsp; '
+                    %p.email-footer-p
-                  %tr
+                      = link_to root_url, class: 'email-footer-logo-a' do
-                    %td.blank-cell.footer
+                        = image_tag full_pack_url('media/images/mailer-new/common/logo-footer.png'), alt: 'Mastodon', width: 44, height: 44
-                      .email-row
+                    %p.email-footer-p
-                        .col-6
+                      = t 'about.hosted_on', domain: site_hostname
-                          %table.column{ cellspacing: 0, cellpadding: 0 }
+                    %p.email-footer-p
-                            %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
+              /[if mso]
-                                = link_to root_url do
+                </td></tr></table>
-                                  = image_tag full_pack_url('media/images/mailer/logo.png'), alt: 'Mastodon', height: 24

app/views/notification_mailer/_status.html.haml

@@ -1,45 +1,31 @@
-- i ||= 0
+%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-- highlighted ||= false
-
-%table.email-table{ cellspacing: 0, cellpadding: 0, dir: 'ltr' }
-  %tbody
   %tr
-      %td.email-body
+    %td.email-status-header-img
-        .email-container
+      = image_tag full_asset_url(status.account.avatar.url), alt: '', width: 48, height: 48
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
+    %td.email-status-header-text
-            %tbody
+      %h2.email-status-header-name
-              %tr
+        = display_name(status.account)
-                %td.content-cell{ class: i.zero? ? 'content-start' : nil }
+      %p.email-status-header-handle
-                  .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}
 
-                              - if status.spoiler_text?
+%table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
+  %tr
+    %td.email-status-content
       .auto-dir
-                                  %p
+        - if status.spoiler_text?
+          %p.email-status-spoiler
             = status.spoiler_text
 
-                              .auto-dir
+        .email-status-prose
           = status_content_format(status)
 
         - if status.ordered_media_attachments.size.positive?
-                                  %p
+          %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
 
-                              %p.status-footer
+      %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}")

app/views/notification_mailer/favourite.html.haml

@@ -1,45 +1,13 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td
-                  .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-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
-  %tbody
               %tr
-      %td.email-body
+                %td.email-padding-top-24
-        .email-container
+                  = render 'application/mailer/button', text: t('application_mailer.view_status'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}")
-          %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'

app/views/notification_mailer/follow.html.haml

@@ -1,43 +1,9 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td
-                  .email-row
+            = render 'application/mailer/button', text: t('application_mailer.view_profile'), url: web_url("@#{@account.pretty_acct}")
-                    .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'

app/views/notification_mailer/follow_request.html.haml

@@ -1,43 +1,9 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td
-                  .email-row
+            = render 'application/mailer/button', text: t('notification_mailer.follow_request.action'), url: web_url('follow_requests')
-                    .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'

app/views/notification_mailer/mention.html.haml

@@ -1,45 +1,13 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td
-                  .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-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
-  %tbody
               %tr
-      %td.email-body
+                %td.email-padding-top-24
-        .email-container
+                  = render 'application/mailer/button', text: t('notification_mailer.mention.action'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}")
-          %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'

app/views/notification_mailer/reblog.html.haml

@@ -1,45 +1,13 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td
-                  .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-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
-  %tbody
               %tr
-      %td.email-body
+                %td.email-padding-top-24
-        .email-container
+                  = render 'application/mailer/button', text: t('application_mailer.view_status'), url: web_url("@#{@status.account.pretty_acct}/#{@status.id}")
-          %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'

app/views/user_mailer/appeal_approved.html.haml

@@ -1,61 +1,12 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .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)
-
+            = render 'application/mailer/button', text: t('user_mailer.appeal_approved.action'), url: root_url
-%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'

app/views/user_mailer/appeal_rejected.html.haml

@@ -1,61 +1,12 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .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)
-
+            = render 'application/mailer/button', text: t('user_mailer.appeal_approved.action'), url: root_url
-%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'

app/views/user_mailer/backup_ready.html.haml

@@ -1,59 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t 'user_mailer.backup_ready.extra'
-                    .col-6
+            = render 'application/mailer/button', text: t('exports.archive_takeout.download'), url: download_backup_url(@backup)
-                      %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'

app/views/user_mailer/confirmation_instructions.html.haml

@@ -1,80 +1,16 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .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
+              = 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
-                                    = link_to confirmation_url(@resource, confirmation_token: @token) do
+              = render 'application/mailer/button', text: t('devise.mailer.confirmation_instructions.action'), url: confirmation_url(@resource, confirmation_token: @token)
-                                      %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

app/views/user_mailer/email_changed.html.haml

@@ -1,58 +1,11 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            = render 'application/mailer/frame', text: @resource.unconfirmed_email
-                    .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'
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url

app/views/user_mailer/password_change.html.haml

@@ -1,40 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .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'
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url

app/views/user_mailer/reconfirmation_instructions.html.haml

@@ -1,60 +1,11 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t('devise.mailer.reconfirmation_instructions.explanation')
-                    .col-6
+            = render 'application/mailer/button', text: t('devise.mailer.confirmation_instructions.action'), url: confirmation_url(@resource, confirmation_token: @token)
-                      %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'

app/views/user_mailer/reset_password_instructions.html.haml

@@ -1,60 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .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'
+            = render 'application/mailer/button', text: t('devise.mailer.reset_password_instructions.action'), url: edit_password_url(@resource, reset_password_token: @token)

app/views/user_mailer/suspicious_sign_in.html.haml

@@ -1,45 +1,12 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .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
@@ -50,22 +17,8 @@
                     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
-%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)

app/views/user_mailer/two_factor_disabled.html.haml

@@ -1,43 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t 'devise.mailer.two_factor_disabled.explanation'
-                    .col-6
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                      %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')

app/views/user_mailer/two_factor_enabled.html.haml

@@ -1,43 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t 'devise.mailer.two_factor_enabled.explanation'
-                    .col-6
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                      %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')

app/views/user_mailer/two_factor_recovery_codes_changed.html.haml

@@ -1,43 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t 'devise.mailer.two_factor_recovery_codes_changed.explanation'
-                    .col-6
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                      %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')

app/views/user_mailer/warning.html.haml

@@ -1,41 +1,14 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td-without-padding
-                  .email-row
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-                    .col-6
-                      %table.column{ cellspacing: 0, cellpadding: 0 }
-                        %tbody
               %tr
-                            %td.column-cell.text-center.padded
+                %td.email-prose.email-padding-24
-                              %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: ''
-
-                              %h1= t "user_mailer.warning.title.#{@warning.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.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
 
@@ -57,42 +30,17 @@
                       %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-table{ cellspacing: 0, cellpadding: 0 }
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-  %tbody
               %tr
-      %td.email-body
+                %td.email-prose.email-padding-24
-        .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
+                  = render 'application/mailer/button', text: t('user_mailer.warning.appeal'), url: disputes_strike_url(@warning)

app/views/user_mailer/webauthn_credential_added.html.haml

@@ -1,44 +1,13 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-                    .col-6
-                      %table.column{ cellspacing: 0, cellpadding: 0 }
-                        %tbody
               %tr
-                            %td.column-cell.text-center.padded
+                %td.email-frame-wrapper-td
-                              %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 }
+                  = render 'application/mailer/frame', text: @webauthn_credential.nickname
-                                %tbody
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                                  %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')

app/views/user_mailer/webauthn_credential_deleted.html.haml

@@ -1,44 +1,13 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-                    .col-6
-                      %table.column{ cellspacing: 0, cellpadding: 0 }
-                        %tbody
               %tr
-                            %td.column-cell.text-center.padded
+                %td.email-frame-wrapper-td
-                              %table.hero-icon.alert-icon{ align: 'center', cellspacing: 0, cellpadding: 0 }
+                  = render 'application/mailer/frame', text: @webauthn_credential.nickname
-                                %tbody
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                                  %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')

app/views/user_mailer/webauthn_disabled.html.haml

@@ -1,43 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t 'devise.mailer.webauthn_disabled.extra'
-                    .col-6
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                      %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')

app/views/user_mailer/webauthn_enabled.html.haml

@@ -1,43 +1,10 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td.email-prose
-                  .email-row
+            %p= t 'devise.mailer.webauthn_enabled.extra'
-                    .col-6
+            = render 'application/mailer/button', text: t('settings.account_settings'), url: edit_user_registration_url
-                      %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')

app/views/user_mailer/welcome.html.haml

@@ -1,99 +1,25 @@
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
+= content_for :heading do
-  %tbody
+  = 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
+    %td.email-body-padding-td
-        .email-container
+      %table.email-inner-card-table{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
-            %tbody
         %tr
-                %td.content-cell.hero
+          %td.email-inner-card-td-without-padding
-                  .email-row
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-                    .col-6
-                      %table.column{ cellspacing: 0, cellpadding: 0 }
-                        %tbody
               %tr
-                            %td.column-cell.text-center.padded
+                %td.email-prose.email-padding-24
-                              %table.hero-icon{ align: 'center', cellspacing: 0, cellpadding: 0 }
+                  %p
-                                %tbody
+                    %b= t 'user_mailer.welcome.full_handle'
-                                  %tr
+                  = render 'application/mailer/frame', text: "#{@resource.account.username}@#{@instance}"
-                                    %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
-              %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-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
-%table.email-table{ cellspacing: 0, cellpadding: 0 }
-  %tbody
               %tr
-      %td.email-body
+                %td.email-border-top.email-prose.email-padding-24
-        .email-container
+                  %p= t 'user_mailer.welcome.edit_profile_step'
-          %table.content-section{ cellspacing: 0, cellpadding: 0 }
+                  = render 'application/mailer/button', text: t('user_mailer.welcome.edit_profile_action'), url: settings_profile_url
-            %tbody
+            %table.email-w-full{ cellspacing: 0, cellpadding: 0, border: 0, role: 'presentation' }
               %tr
-                %td.content-cell.content-start.border-top
+                %td.email-border-top.email-prose.email-padding-24
-                  .email-row
+                  %p= t 'user_mailer.welcome.edit_profile_step'
-                    .col-4
+                  = render 'application/mailer/button', text: t('user_mailer.welcome.final_action'), url: web_url
-                      %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'

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])

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:

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: