HTML e-mails for UserMailer (#6256)

- premailer gem to turn CSS into inline styles automatically - rework UserMailer templates - reword UserMailer templates
author: Eugen Rochko <eugen@zeonfederated.com> 2018-01-16 03:29:11 +0100
committer: GitHub <noreply@github.com> 2018-01-16 03:29:11 +0100
commit: 5276c0a0900a0886b59a8ead2346540aa381ea46 (patch)
tree: fbc338f77623f670b6421b87606028a68fb68bd5
parent: 7861c5f108a8f8cb0450f3b1ef865b1177c706fc (diff)
104 files changed, 848 insertions, 706 deletions
diff --git a/Gemfile b/Gemfile
index a5bf2daff..84578fc36 100644
--- a/Gemfile
+++ b/Gemfile
@@ -49,6 +49,7 @@ gem 'oj', '~> 3.3'
 gem 'ostatus2', '~> 2.0'
 gem 'ox', '~> 2.8'
 gem 'pundit', '~> 1.1'
+gem 'premailer-rails'
 gem 'rack-attack', '~> 5.0'
 gem 'rack-cors', '~> 0.4', require: 'rack/cors'
 gem 'rack-timeout', '~> 0.4'
diff --git a/Gemfile.lock b/Gemfile.lock
index f3887b2b8..12c6d0e47 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -122,6 +122,8 @@ GEM
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
     crass (1.0.3)
+    css_parser (1.6.0)
+      addressable
     debug_inspector (0.0.3)
     devise (4.3.0)
       bcrypt (~> 3.0)
@@ -324,6 +326,13 @@ GEM
       activerecord
     pkg-config (1.2.8)
     powerpack (0.1.1)
+    premailer (1.11.1)
+      addressable
+      css_parser (>= 1.6.0)
+      htmlentities (>= 4.0.0)
+    premailer-rails (1.10.1)
+      actionmailer (>= 3, < 6)
+      premailer (~> 1.7, >= 1.7.9)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -600,6 +609,7 @@ DEPENDENCIES
   pg (~> 0.20)
   pghero (~> 1.7)
   pkg-config (~> 1.2)
+  premailer-rails
   pry-rails (~> 0.3)
   puma (~> 3.10)
   pundit (~> 1.1)
diff --git a/app/helpers/mailer_helper.rb b/app/helpers/mailer_helper.rb
new file mode 100644
index 000000000..b7e3a8da3
--- /dev/null
+++ b/app/helpers/mailer_helper.rb
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module MailerHelper
+end
diff --git a/app/javascript/images/icon_email.svg b/app/javascript/images/icon_email.svg
new file mode 100644
index 000000000..6d0ad9d9b
--- /dev/null
+++ b/app/javascript/images/icon_email.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/app/javascript/images/icon_lock_open.svg b/app/javascript/images/icon_lock_open.svg
new file mode 100644
index 000000000..3288b46d6
--- /dev/null
+++ b/app/javascript/images/icon_lock_open.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z"/>
+</svg>
\ No newline at end of file
diff --git a/app/javascript/images/logo_transparent.svg b/app/javascript/images/logo_transparent.svg
new file mode 100644
index 000000000..abd6d1f67
--- /dev/null
+++ b/app/javascript/images/logo_transparent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M107.86523 0C78.203984.2425 49.672422 3.4535937 33.044922 11.089844c0 0-32.97656262 14.752031-32.97656262 65.082031 0 11.525-.224375 25.306175.140625 39.919925 1.19750002 49.22 9.02375002 97.72843 54.53124962 109.77343 20.9825 5.55375 38.99711 6.71547 53.505856 5.91797 26.31125-1.45875 41.08203-9.38867 41.08203-9.38867l-.86914-19.08984s-18.80171 5.92758-39.91796 5.20508c-20.921254-.7175-43.006879-2.25516-46.390629-27.94141-.3125-2.25625-.46875-4.66938-.46875-7.20313 0 0 20.536953 5.0204 46.564449 6.21289 15.915.73001 30.8393-.93343 45.99805-2.74218 29.07-3.47125 54.38125-21.3818 57.5625-37.74805 5.0125-25.78125 4.59961-62.916015 4.59961-62.916015 0-50.33-32.97461-65.082031-32.97461-65.082031C166.80539 3.4535938 138.255.2425 108.59375 0h-.72852zM74.296875 39.326172c12.355 0 21.710234 4.749297 27.896485 14.248047l6.01367 10.080078 6.01563-10.080078c6.185-9.49875 15.54023-14.248047 27.89648-14.248047 10.6775 0 19.28156 3.753672 25.85156 11.076172 6.36875 7.3225 9.53907 17.218828 9.53907 29.673828v60.941408h-24.14454V81.869141c0-12.46875-5.24453-18.798829-15.73828-18.798829-11.6025 0-17.41797 7.508516-17.41797 22.353516v32.375002H96.207031V85.423828c0-14.845-5.815468-22.353515-17.417969-22.353516-10.49375 0-15.740234 6.330079-15.740234 18.798829v59.148439H38.904297V80.076172c0-12.455 3.171016-22.351328 9.541015-29.673828 6.568751-7.3225 15.172813-11.076172 25.851563-11.076172z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/app/javascript/packs/mailer.js b/app/javascript/packs/mailer.js
new file mode 100644
index 000000000..732fc1698
--- /dev/null
+++ b/app/javascript/packs/mailer.js
@@ -0,0 +1 @@
+require('../styles/mailer.scss');
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
new file mode 100644
index 000000000..2fd3f2661
--- /dev/null
+++ b/app/javascript/styles/mailer.scss
@@ -0,0 +1,392 @@
+@import 'mastodon/variables';
+@import 'fonts/roboto';
+
+table,
+td,
+div {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100% !important;
+  min-width: 100%;
+  margin: 0;
+  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;
+}
+
+.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: 'mastodon-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;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $ui-secondary-color;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 20px;
+  margin-bottom: 8px;
+  padding: 0;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 26px;
+  line-height: 36px;
+}
+
+h2 {
+  font-size: 23px;
+  line-height: 30px;
+}
+
+h3 {
+  font-size: 19px;
+  line-height: 25px;
+}
+
+.input {
+  td {
+    background: darken($ui-base-color, 8%);
+    border-radius: 4px;
+    padding: 16px;
+    line-height: 20px;
+    mso-line-height-rule: exactly;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: 500;
+    font-size: 17px;
+  }
+}
+
+.content-cell,
+.blank-cell {
+  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%);
+}
+
+.hero {
+  background-color: $ui-base-color;
+  padding-top: 20px;
+}
+
+.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;
+  }
+}
+
+.content-start {
+  padding-top: 32px;
+}
+
+.content-end {
+  border-radius: 0 0 5px 5px;
+  padding-top: 16px;
+}
+
+.footer {
+  .column-cell,
+  p {
+    color: lighten($ui-base-color, 26%);
+  }
+
+  p {
+    margin-bottom: 0;
+    font-size: 13px;
+
+    &.small {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: lighten($ui-base-color, 26%);
+    text-decoration: underline;
+  }
+
+  img {
+    opacity: 0.3;
+  }
+}
+
+.logo {
+  position: relative;
+  left: -4px;
+}
+
+.button {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+
+  td {
+    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;
+    }
+
+    a {
+      padding: 10px 22px !important;
+      line-height: 26px !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.button-default {
+  background-color: darken($ui-base-color, 8%);
+}
+
+.button-primary {
+  background-color: $ui-highlight-color;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padded {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.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;
+  }
+
+  img {
+    max-width: 32px;
+    width: 32px;
+    height: 32px;
+    display: block;
+    line-height: 100%;
+  }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  body {
+    min-height: 1024px !important;
+  }
+}
diff --git a/app/mailers/admin_mailer.rb b/app/mailers/admin_mailer.rb
index fd9223533..a30468eb8 100644
--- a/app/mailers/admin_mailer.rb
+++ b/app/mailers/admin_mailer.rb
@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class AdminMailer < ApplicationMailer
-  helper StreamEntriesHelper
+  layout 'plain_mailer'
+
+  helper :stream_entries
 
   def new_report(recipient, report)
     @report   = report
diff --git a/app/mailers/application_mailer.rb b/app/mailers/application_mailer.rb
index 95b770ff1..683b60c86 100644
--- a/app/mailers/application_mailer.rb
+++ b/app/mailers/application_mailer.rb
@@ -2,7 +2,9 @@
 
 class ApplicationMailer < ActionMailer::Base
   layout 'mailer'
+
   helper :instance
+  helper :mailer
 
   protected
 
diff --git a/app/mailers/notification_mailer.rb b/app/mailers/notification_mailer.rb
index fd2b0649a..07992102d 100644
--- a/app/mailers/notification_mailer.rb
+++ b/app/mailers/notification_mailer.rb
@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class NotificationMailer < ApplicationMailer
-  helper StreamEntriesHelper
+  layout 'plain_mailer'
+
+  helper :stream_entries
 
   def mention(recipient, notification)
     @me     = recipient
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
new file mode 100644
index 000000000..8a7ce4369
--- /dev/null
+++ b/app/views/layouts/mailer.html.haml
@@ -0,0 +1,55 @@
+!!!
+%html{ lang: I18n.locale }
+  %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' }
+
+    %title/
+
+    = stylesheet_pack_tag 'mailer'
+  %body
+    %table.email-table{ cellspacing: 0, cellpadding: 0 }
+      %tbody
+        %tr
+          %td.email-body.email-start
+            .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 asset_pack_path('logo_full.svg'), height: 34, class: 'logo'
+
+    = yield
+
+    %table.email-table{ cellspacing: 0, cellpadding: 0 }
+      %tbody
+        %tr
+          %td.email-body.email-end
+            .email-container
+              %table.content-section{ cellspacing: 0, cellpadding: 0 }
+                %tbody
+                  %tr
+                    %td.content-cell.content-end
+                      != "&nbsp; "
+                  %tr
+                    %td.blank-cell.footer
+                      .email-row
+                        .col-4
+                          %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_notifications_url
+                        .col-2
+                          %table.column{ cellspacing: 0, cellpadding: 0 }
+                            %tbody
+                              %td.column-cell.text-right
+                                = link_to root_url do
+                                  = image_tag asset_pack_path('logo_transparent.svg'), height: 24
diff --git a/app/views/layouts/plain_mailer.html.haml b/app/views/layouts/plain_mailer.html.haml
new file mode 100644
index 000000000..0a90f092c
--- /dev/null
+++ b/app/views/layouts/plain_mailer.html.haml
@@ -0,0 +1 @@
+= yield
diff --git a/app/views/user_mailer/confirmation_instructions.ar.html.erb b/app/views/user_mailer/confirmation_instructions.ar.html.erb
deleted file mode 100644
index 2b892b209..000000000
--- a/app/views/user_mailer/confirmation_instructions.ar.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>مرحبا <%= @resource.email %> !</p>
-
-<p>لقد قمت بإنشاء حساب على <%= @instance %>.</p>
-
-<p>لتأكيد التسجيل يرجى النقر على الرابط التالي : <br>
-<%= link_to 'تأكيد إنشاء الحساب', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>يرجى الإطلاع على <%= link_to 'شروط الإستخدام', terms_url %>.</p>
-
-<p>مع أجمل التحيات،<p>
-
-<p>فريق <%= @instance %> </p>
diff --git a/app/views/user_mailer/confirmation_instructions.ca.html.erb b/app/views/user_mailer/confirmation_instructions.ca.html.erb
deleted file mode 100644
index 3591e2433..000000000
--- a/app/views/user_mailer/confirmation_instructions.ca.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Benvingut <%= @resource.email %> !</p>
-
-<p>Has creat un compte a <%= @instance %>.</p>
-
-<p>Per confirmar la subscripció si us plau fes clic en el següent vincle : <br>
-<%= link_to 'Confirmar el meu compte', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Si us plau, també fes un cop d'ull als nostres <%= link_to 'termes i condicions', terms_url %>.</p>
-
-<p>Sincerament,<p>
-
-<p>L'equip <%= @instance %> </p>
diff --git a/app/views/user_mailer/confirmation_instructions.en.html.erb b/app/views/user_mailer/confirmation_instructions.en.html.erb
deleted file mode 100644
index cd0d70377..000000000
--- a/app/views/user_mailer/confirmation_instructions.en.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Welcome <%= @resource.email %> !</p>
-
-<p>You just created an account on <%= @instance %>.</p>
-
-<p>To confirm your inscription, please click on the following link : <br>
-<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>If the above link did not work, copy and paste this URL into your address bar: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Please also check out our <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Sincerely,<p>
-
-<p>The <%= @instance %> team</p>
diff --git a/app/views/user_mailer/confirmation_instructions.es.html.erb b/app/views/user_mailer/confirmation_instructions.es.html.erb
deleted file mode 100644
index 1d46a12c0..000000000
--- a/app/views/user_mailer/confirmation_instructions.es.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>¡Bienvenido, <%= @resource.email %>!</p>
-
-<p>Acabas de crear una cuenta en <%= @instance %>.</p>
-
-<p>Para confirmar tu registro, por favor ingresa al siguiente enlace:<br>
-<%= link_to 'Confirmar mi cuenta', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>También revisa nuestros <%= link_to 'términos y condiciones', terms_url %>.</p>
-
-<p>Sinceramente,<p>
-
-<p>El equipo de <%= @instance %></p>
\ No newline at end of file
diff --git a/app/views/user_mailer/confirmation_instructions.fa.html.erb b/app/views/user_mailer/confirmation_instructions.fa.html.erb
deleted file mode 100644
index 3e77e043b..000000000
--- a/app/views/user_mailer/confirmation_instructions.fa.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p dir="rtl">خوش آمدید <%= @resource.email %> !</p>
-
-<p dir="rtl">شما الان در <%= @instance %> حساب باز کردید.</p>
-
-<p dir="rtl">برای تأیید عضویت، لطفاً روی پیوند زیر کلیک کنید: <br>
-<%= link_to 'تأیید حساب', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p dir="rtl">لطفاً همچنین <%= link_to 'شرایط و مقررات استفادهٔ', terms_url %> ما را هم بخوانید.</p>
-
-<p dir="rtl">با احترام,<p>
-
-<p dir="rtl">گردانندگان سرور <%= @instance %></p>
\ No newline at end of file
diff --git a/app/views/user_mailer/confirmation_instructions.fi.html.erb b/app/views/user_mailer/confirmation_instructions.fi.html.erb
deleted file mode 100644
index 8b72722da..000000000
--- a/app/views/user_mailer/confirmation_instructions.fi.html.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-<p>Tervetuloa <%= @resource.email %>!</p>
-
-<p>Voit vahvistaa Mastodon tilisi klikkaamalla alla olevaa linkkiä:</p>
-
-<p><%= link_to 'Varmista tilini', confirmation_url(@resource, confirmation_token: @token) %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.fr.html.erb b/app/views/user_mailer/confirmation_instructions.fr.html.erb
deleted file mode 100644
index fe3f0a010..000000000
--- a/app/views/user_mailer/confirmation_instructions.fr.html.erb
+++ /dev/null
@@ -1,14 +0,0 @@
-<p>Bonjour <%= @resource.email %>&nbsp;!<p>
-
-<p>Vous venez de vous créer un compte sur <%= @instance %> et nous vous en remercions :)</p>
-
-<p>Pour confirmer votre inscription, merci de cliquer sur le lien suivant : <br>
-<%= link_to 'Confirmer mon compte', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Après votre première connexion, vous pourrez accéder à la documentation de l’outil.</p>
-
-<p>Pensez également à jeter un œil à nos <%= link_to 'conditions d\'utilisation', terms_url %>.</p>
-
-<p>Amicalement,</p>
-
-<p>L’équipe <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.he.html.erb b/app/views/user_mailer/confirmation_instructions.he.html.erb
deleted file mode 100644
index 7933faa23..000000000
--- a/app/views/user_mailer/confirmation_instructions.he.html.erb
+++ /dev/null
@@ -1,14 +0,0 @@
-<div lang="he" dir="rtl">
-<p>שלום <%= @resource.email %> !</p>
-
-<p>הרגע יצרת חשבון בקהילה <%= @instance %>.</p>
-
-<p>כדי לוודא את הרשמתך, יש ללחוץ על הקישורית הבאה : <br>
-<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>יש לעבור גם על תנאי השימוש <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>בתודה מראש,<p>
-
-<p>צוות ניהול <%= @instance %></p>
-</div>
\ No newline at end of file
diff --git a/app/views/user_mailer/confirmation_instructions.html.haml b/app/views/user_mailer/confirmation_instructions.html.haml
new file mode 100644
index 000000000..7a148ec72
--- /dev/null
+++ b/app/views/user_mailer/confirmation_instructions.html.haml
@@ -0,0 +1,76 @@
+%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 asset_pack_path('icon_email.svg')
+
+                              %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 'devise.mailer.confirmation_instructions.explanation', 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
+                                  = 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: terms_url
diff --git a/app/views/user_mailer/confirmation_instructions.id.html.erb b/app/views/user_mailer/confirmation_instructions.id.html.erb
deleted file mode 100644
index 998267d76..000000000
--- a/app/views/user_mailer/confirmation_instructions.id.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Selamat datang <%= @resource.email %> !</p>
-
-<p>Anda barus saja membuat akun di <%= @instance %>.</p>
-
-<p>Untuk mengkonfirmasi, silakan klik link berikut ini : <br>
-<%= link_to 'Konfirmasikan akun saya', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Silakan cek juga <%= link_to 'ketentuan layanan', terms_url %> kami.</p>
-
-<p>Hormat kami,<p>
-
-<p>Tim <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.it.html.erb b/app/views/user_mailer/confirmation_instructions.it.html.erb
deleted file mode 100644
index 2fa745476..000000000
--- a/app/views/user_mailer/confirmation_instructions.it.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Benvenuto <%= @resource.email %> !</p>
-
-<p>Hai appena creato un account su <%= @instance %>.</p>
-
-<p>Per confermare la tua iscrizione, fai clic sul seguente link: <br>
-<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Per piacere leggi anche i nostri <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Sinceramente,<p>
-
-<p>The <%= @instance %> team</p>
diff --git a/app/views/user_mailer/confirmation_instructions.ja.html.erb b/app/views/user_mailer/confirmation_instructions.ja.html.erb
deleted file mode 100644
index 1232f94b4..000000000
--- a/app/views/user_mailer/confirmation_instructions.ja.html.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-<p>ようこそ<%= @resource.email %>さん</p>
-
-<p><%= @instance %>にアカウントが作成されました。</p>
-
-<p>以下のリンクをクリックしてMastodonアカウントのメールアドレスを確認してください。</p>
-
-<p><%= link_to 'メールアドレスの確認', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>また、インスタンスの<%= link_to '利用規約', terms_url %>についてもご確認ください。</p>
-
-<p><%= @instance %> チーム</p>
diff --git a/app/views/user_mailer/confirmation_instructions.ko.html.erb b/app/views/user_mailer/confirmation_instructions.ko.html.erb
deleted file mode 100644
index a749cd97b..000000000
--- a/app/views/user_mailer/confirmation_instructions.ko.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<p>안녕하세요 <%= @resource.email %> 님!</p>
-
-<p><%= @instance %>에 새로 계정을 만들었습니다.</p>
-
-<p>아래 링크를 눌러 회원가입을 완료 하세요:<br>
-<%= link_to '계정 활성화', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>만약 위의 링크가 작동하지 않는다면 아래 URL을 복사하여 주소창에 붙여넣으세요</p>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p> <%= link_to '약관', terms_url %>도 확인 바랍니다.</p>
-
-<p><%= @instance %> 드림</p>
diff --git a/app/views/user_mailer/confirmation_instructions.nl.html.erb b/app/views/user_mailer/confirmation_instructions.nl.html.erb
deleted file mode 100644
index d65d08b6a..000000000
--- a/app/views/user_mailer/confirmation_instructions.nl.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Welkom <%= @resource.email %> !</p>
-
-<p>Je hebt zojuist een account aangemaakt op <%= @instance %>.</p>
-
-<p>Klik op de volgende link om jouw registratie te bevestigen :<br />
-<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %> </p>
-
-<p>Lees ook onze gebruikersvoorwaarden op <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Vriendelijke groet,</p>
-
-<p>De beheerder(s) van <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.no.html.erb b/app/views/user_mailer/confirmation_instructions.no.html.erb
deleted file mode 100644
index 366d9a4d3..000000000
--- a/app/views/user_mailer/confirmation_instructions.no.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Velkommen <%= @resource.email %> !</p>
-
-<p>Du har akkurat opprettet en konto på <%= @instance %>.</p>
-
-<p>For å bekrefte innskriving i manntallet vennligst trykk på følgende lenke : <br>
-<%= link_to 'Bekreft min bruker', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Vennligst også les våre <%= link_to 'brukervilkår', terms_url %>.</p>
-
-<p>Med vennlig hilsen,<p>
-
-<p>Gjengen bak <%= @instance %> </p>
diff --git a/app/views/user_mailer/confirmation_instructions.oc.html.erb b/app/views/user_mailer/confirmation_instructions.oc.html.erb
deleted file mode 100644
index 5657e40d4..000000000
--- a/app/views/user_mailer/confirmation_instructions.oc.html.erb
+++ /dev/null
@@ -1,14 +0,0 @@
-<p>Bonjorn <%= @resource.email %> !<p>
-
-<p>Venètz de vos crear un compte sus <%= @instance %> e vos mercegem :)</p>
-
-<p>Per confirmar vòstra inscripcion, mercés de clicar sul ligam seguent : <br>
-<%= link_to 'Confirmar mon compte', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Aprèp vòstra primièra connexion, poiretz accedir a la documentacion de l’aisina.</p>
-
-<p>Pensatz tanben de gaitar nòstres <%= link_to 'tèrmes e condicions d\'utilizacion', terms_url %>.</p>
-
-<p>Amistosament,</p>
-
-<p>La còla <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.pl.html.erb b/app/views/user_mailer/confirmation_instructions.pl.html.erb
deleted file mode 100644
index 2285b5c6e..000000000
--- a/app/views/user_mailer/confirmation_instructions.pl.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Witaj, <%= @resource.email %>!</p>
-
-<p>Właśnie utworzyłeś konto na instancji <%= @instance %>.</p>
-
-<p>Aby aktywować konto, odwiedź poniższy link: <br>
-<%= link_to 'Potwierdź rejestrację', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Pamiętaj przeczytać nasz <%= link_to 'regulamin i zasady użytkowania', terms_url %>.</p>
-
-<p>Z pozdrowieniami,<p>
-
-<p>Zespół <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.pt-BR.html.erb b/app/views/user_mailer/confirmation_instructions.pt-BR.html.erb
deleted file mode 100644
index 0be16d994..000000000
--- a/app/views/user_mailer/confirmation_instructions.pt-BR.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Boas vindas, <%= @resource.email %>!</p>
-
-<p>Você acabou de criar uma conta na instância <%= @instance %>.</p>
-
-<p>Para confirmar o seu cadastro, por favor clique no link a seguir: <br>
-<%= link_to 'Confirmar cadastro', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Por favor, leia também os nossos <%= link_to 'termos de serviços', terms_url %>.</p>
-
-<p>Atenciosamente,<p>
-
-<p>A equipe da instância <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.ru.html.erb b/app/views/user_mailer/confirmation_instructions.ru.html.erb
deleted file mode 100644
index 2a755460e..000000000
--- a/app/views/user_mailer/confirmation_instructions.ru.html.erb
+++ /dev/null
@@ -1,12 +0,0 @@
-<p>Добро пожаловать, <%= @resource.email %> !</p>
-
-<p>Вы только что завели аккаунт на <%= @instance %>.</p>
-
-<p>Чтобы подтвердить создание аккаунта, пожалуйста, перейдите по этой ссылке: <br>
-<%= confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Также просим Вас прочитать об условиях использования аккаунта здесь: <%= terms_url %></p>
-
-<p>Искренне Ваши,</p>
-
-<p>Команда <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.sr-Latn.html.erb b/app/views/user_mailer/confirmation_instructions.sr-Latn.html.erb
deleted file mode 100644
index a16008250..000000000
--- a/app/views/user_mailer/confirmation_instructions.sr-Latn.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Dobrodošao <%= @resource.email %> !</p>
-
-<p>Upravo ste napravili nalog na instanci <%= @instance %>.</p>
-
-<p>Da potvrdite Vašu registraciju, molimo Vas kliknite na sledeći link: <br>
-<%= link_to 'Potvrdi moj nalog', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Ako link iznad ne radi, kopirajte i nalepite ovu adresu u adresnu traku: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Takođe pogledajte i <%= link_to 'pravila i uslove korišćenja', terms_url %>.</p>
-
-<p>S poštovanjem,<p>
-
-<p><%= @instance %> tim</p>
diff --git a/app/views/user_mailer/confirmation_instructions.sr.html.erb b/app/views/user_mailer/confirmation_instructions.sr.html.erb
deleted file mode 100644
index 09203cc9a..000000000
--- a/app/views/user_mailer/confirmation_instructions.sr.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Добродошао <%= @resource.email %> !</p>
-
-<p>Управо сте направили налог на инстанци <%= @instance %>.</p>
-
-<p>Да потврдите Вашу регистрацију, молимо Вас кликните на следећи линк: <br>
-<%= link_to 'Потврди мој налог', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Ако линк изнад не ради, копирајте и налепите ову адресу у адресну траку: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Такође погледајте и <%= link_to 'правила и услове коришћења', terms_url %>.</p>
-
-<p>С поштовањем,<p>
-
-<p><%= @instance %> тим</p>
diff --git a/app/views/user_mailer/confirmation_instructions.sv.html.erb b/app/views/user_mailer/confirmation_instructions.sv.html.erb
deleted file mode 100644
index e0ad611a7..000000000
--- a/app/views/user_mailer/confirmation_instructions.sv.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Välkommen <%= @resource.email %> !</p>
-
-<p>Du har precis startat upp ett konto på <%= @instance %>.</p>
-
-<p>För att bekräfta din inskrift, vänligen klicka på följande länk : <br>
-<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Om länken ovan inte fungerar, kopiera och klistra in den här webbadressen i adressfältet: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Vänligen kolla även våra <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Vänliga hälsningar,<p>
-
-<p>Teamet på <%= @instance %></p>
diff --git a/app/views/user_mailer/confirmation_instructions.tr.html.erb b/app/views/user_mailer/confirmation_instructions.tr.html.erb
deleted file mode 100644
index 7879f0d29..000000000
--- a/app/views/user_mailer/confirmation_instructions.tr.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-
-<p> Aramıza hoşgeldin <%= @resource.email %> </p>
-
-<p>Bu sunucumuzda yeni bir hesap oluşturduğunu görüyoruz: <%= @instance %>.</p>
-
-<p>Siz olduğunuzu teyit edebilmemiz için lütfen aşağıdaki linke tıklaman yeterli: <br>
-
-<%= link_to 'Hesabımı doğrula', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>Ayrıca  <%= link_to 'kullanım şartları ve koşullarımızı', terms_url %> inceleyebilirsin.</p>
-
-<p>En içten dileklerimizle,<p>
-
-<p> <%= @instance %> ekibi</p>
-
diff --git a/app/views/user_mailer/confirmation_instructions.zh-cn.html.erb b/app/views/user_mailer/confirmation_instructions.zh-cn.html.erb
deleted file mode 100644
index 8a676498a..000000000
--- a/app/views/user_mailer/confirmation_instructions.zh-cn.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<p><%= @resource.email %>，你好呀！</p>
-
-<p>你刚刚在 <%= @instance %> 创建了一个帐户呢。</p>
-
-<p>点击下面的链接来完成注册啦：<br>
-<%= link_to '确认帐户', confirmation_url(@resource, confirmation_token: @token) %>
-
-<p>上面的链接按不动？把下面的链接复制到地址栏再试试：<br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>记得读一读我们的<%= link_to '使用条款', terms_url %>哦。</p>
-
-<p>来自 <%= @instance %> 管理团队</p>
diff --git a/app/views/user_mailer/email_changed.en.html.erb b/app/views/user_mailer/email_changed.en.html.erb
deleted file mode 100644
index c10680086..000000000
--- a/app/views/user_mailer/email_changed.en.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Hello <%= @resource.email %>!</p>
-
-<% if @resource&.unconfirmed_email? %>
-  <p>We're contacting you to notify you that the email you use on <%= @instance %> is being changed to <%= @resource.unconfirmed_email %>.</p>
-<% else %>
-  <p>We're contacting you to notify you that the email you use on <%= @instance %> has been changed to <%= @resource.email %>.</p>
-<% end %>
-
-<p>
-  If you did not change your email, it is likely that someone has gained access to your account. Please change your password immediately or contact the instance admin if you're locked out of your account.
-</p>
-
-<p>Sincerely,<p>
-
-<p>The <%= @instance %> team</p>
diff --git a/app/views/user_mailer/email_changed.html.haml b/app/views/user_mailer/email_changed.html.haml
new file mode 100644
index 000000000..e526f3a2c
--- /dev/null
+++ b/app/views/user_mailer/email_changed.html.haml
@@ -0,0 +1,58 @@
+%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 asset_pack_path('icon_email.svg')
+
+                              %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'
diff --git a/app/views/user_mailer/email_changed.ja.html.erb b/app/views/user_mailer/email_changed.ja.html.erb
deleted file mode 100644
index c66f409c6..000000000
--- a/app/views/user_mailer/email_changed.ja.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<p>こんにちは<%= @resource.email %>さん</p>
-
-<% if @resource&.unconfirmed_email? %>
-  <p><%= @instance %>で使っているメールアドレスが<%= @resource.unconfirmed_email %>に変更されようとしています。</p>
-<% else %>
-  <p><%= @instance %>で使っているメールアドレスが<%= @resource.email %>に変更されました。</p>
-<% end %>
-
-<p>
-  メールアドレスを変更した覚えがない場合、誰かがあなたのアカウントにアクセスしたおそれがあります。すぐにパスワードを変更するか、アカウントにアクセスできない場合はインスタンスの管理者に連絡してください。
-</p>
-
-<p><%= @instance %>チームより</p>
diff --git a/app/views/user_mailer/email_changed.oc.html.erb b/app/views/user_mailer/email_changed.oc.html.erb
deleted file mode 100644
index 0f4c891dc..000000000
--- a/app/views/user_mailer/email_changed.oc.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Bonjorn <%= @resource.email %> !</p>
-
-<% if @resource&.unconfirmed_email? %>
-  <p>Vos contactem per vos senhalar que l’adreça qu’utilizatz per <%= @instance %> es cambiada per aquesta d’aquí <%= @resource.unconfirmed_email %>.</p>
-<% else %>
-  <p>Vos contactem per vos senhalar que l’adreça qu’utilizatz per <%= @instance %> es cambiada per aquesta d’aquí <%= @resource.email %>.</p>
-<% end %>
-
-<p>
-  S’avètz pas demandat aqueste cambiament d’adreça, poiriá arribar que qualqu’un mai aguèsse agut accès a vòstre compte. Mercés de cambiar sulpic vòstre senhal o de contactar vòstre administrator d’instància se l’accès a vòstre compte vos es barrat.
-</p>
-
-<p>Amistosament,<p>
-
-<p>La còla <%= @instance %></p>
diff --git a/app/views/user_mailer/email_changed.pl.html.erb b/app/views/user_mailer/email_changed.pl.html.erb
deleted file mode 100644
index 9ed122b0f..000000000
--- a/app/views/user_mailer/email_changed.pl.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Witaj, <%= @resource.email %>!</p>
-
-<% if @resource&.unconfirmed_email? %>
-  <p>Informujemy, że e-mail używany przez Ciebie na <%= @instance %> został zmieniony na <%= @resource.unconfirmed_email %>.</p>
-<% else %>
-  <p>Informujemy, że e-mail używany przez Ciebie na <%= @instance %> został zmieniony na <%= @resource.email %>.</p>
-<% end %>
-
-<p>
-  Jeżeli to nie Ty, prawdopodobnie ktoś uzyskał dostęp do Twojego konta. Zalecana jest natychmiastowa zmiana hasła lub skontaktowanie się z administratorem, jeżeli nie masz dostępu do swojego konta.
-</p>
-
-<p>Z pozdrowieniami,<p>
-
-<p>Zespół <%= @instance %></p>
diff --git a/app/views/user_mailer/email_changed.zh-cn.html.erb b/app/views/user_mailer/email_changed.zh-cn.html.erb
deleted file mode 100644
index 74b1b6150..000000000
--- a/app/views/user_mailer/email_changed.zh-cn.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<p><%= @resource.email %>，你好呀！</p>
-
-<% if @resource&.unconfirmed_email? %>
-  <p>我们发送这封邮件是为了提醒你，你在 <%= @instance %> 上使用的电子邮件地址即将变更为 <%= @resource.unconfirmed_email %>。</p>
-<% else %>
-  <p>我们发送这封邮件是为了提醒你，你在 <%= @instance %> 上使用的电子邮件地址已经变更为 <%= @resource.unconfirmed_email %>。</p>
-<% end %>
-
-<p>
-  如果你并没有请求更改你的电子邮件地址，则他人很有可能已经入侵你的帐户。请立即更改你的密码；如果你已经无法访问你的帐户，请联系实例的管理员请求协助。
-</p>
-
-<p>来自 <%= @instance %> 管理团队</p>
diff --git a/app/views/user_mailer/password_change.ar.html.erb b/app/views/user_mailer/password_change.ar.html.erb
deleted file mode 100644
index 8e7bd2f08..000000000
--- a/app/views/user_mailer/password_change.ar.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>صباح الخير <%= @resource.email %>&nbsp;!</p>
-
-<p>نود أن نخبرك أنه قد تم تعديل كلمة مرور ماستدون الخاصة بك بنجاح.</p>
diff --git a/app/views/user_mailer/password_change.ca.html.erb b/app/views/user_mailer/password_change.ca.html.erb
deleted file mode 100644
index e10c21e1c..000000000
--- a/app/views/user_mailer/password_change.ca.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hola <%= @resource.email %>!</p>
-
-<p>Aquest correu es per a notificar-te que la teva contrasenya a mastodont.cat ha canviat.</p>
diff --git a/app/views/user_mailer/password_change.en.html.erb b/app/views/user_mailer/password_change.en.html.erb
deleted file mode 100644
index 414e05a29..000000000
--- a/app/views/user_mailer/password_change.en.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hello <%= @resource.email %>!</p>
-
-<p>We're contacting you to notify you that your password on <%= @instance %> has been changed.</p>
diff --git a/app/views/user_mailer/password_change.es.html.erb b/app/views/user_mailer/password_change.es.html.erb
deleted file mode 100644
index 0a9eb4c4c..000000000
--- a/app/views/user_mailer/password_change.es.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>¡Hola, <%= @resource.email %>!</p>
-
-<p>Te contactamos para notificarte que tu contraseña en <%= @instance %> ha sido modificada.</p>
\ No newline at end of file
diff --git a/app/views/user_mailer/password_change.fa.html.erb b/app/views/user_mailer/password_change.fa.html.erb
deleted file mode 100644
index 8167ae160..000000000
--- a/app/views/user_mailer/password_change.fa.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p dir="rtl">سلام <%= @resource.email %>!</p>
-
-<p dir="rtl">این پیغام برای این است که به شما بگوییم رمز شما در ماستدون تغییر کرده است.</p>
diff --git a/app/views/user_mailer/password_change.fi.html.erb b/app/views/user_mailer/password_change.fi.html.erb
deleted file mode 100644
index c56b96593..000000000
--- a/app/views/user_mailer/password_change.fi.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hei <%= @resource.email %>!</p>
-
-<p>Lähetämme tämän viestin ilmoittaaksemme että salasanasi on vaihdettu.</p>
diff --git a/app/views/user_mailer/password_change.fr.html.erb b/app/views/user_mailer/password_change.fr.html.erb
deleted file mode 100644
index cb8a261fe..000000000
--- a/app/views/user_mailer/password_change.fr.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Bonjour <%= @resource.email %>&nbsp;!</p>
-
-<p>Nous vous contactons pour vous informer que votre mot de passe sur Mastodon a bien été modifié.</p>
diff --git a/app/views/user_mailer/password_change.he.html.erb b/app/views/user_mailer/password_change.he.html.erb
deleted file mode 100644
index a356edf58..000000000
--- a/app/views/user_mailer/password_change.he.html.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-<div lang="he" dir="rtl">
-<p>שלום <%= @resource.email %>!</p>
-
-<p>רצינו להודיע לך שסיסמתך במסטודון אצלנו הוחלפה.</p>
diff --git a/app/views/user_mailer/password_change.html.haml b/app/views/user_mailer/password_change.html.haml
new file mode 100644
index 000000000..a0afd5930
--- /dev/null
+++ b/app/views/user_mailer/password_change.html.haml
@@ -0,0 +1,40 @@
+%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 asset_pack_path('icon_lock_open.svg')
+
+                              %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'
diff --git a/app/views/user_mailer/password_change.id.html.erb b/app/views/user_mailer/password_change.id.html.erb
deleted file mode 100644
index 469c98c5d..000000000
--- a/app/views/user_mailer/password_change.id.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hai <%= @resource.email %>!</p>
-
-<p>Kami menghubungi anda untuk memberitahu bahwa kata sandi anda di Mastodon telah diubah.</p>
diff --git a/app/views/user_mailer/password_change.it.html.erb b/app/views/user_mailer/password_change.it.html.erb
deleted file mode 100644
index b4ca99769..000000000
--- a/app/views/user_mailer/password_change.it.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Ciao <%= @resource.email %>!</p>
-
-<p>Ti stiamo contattando per avvisarti che la tua password su Mastodon è stata cambiata.</p>
diff --git a/app/views/user_mailer/password_change.ja.html.erb b/app/views/user_mailer/password_change.ja.html.erb
deleted file mode 100644
index 3aa83f187..000000000
--- a/app/views/user_mailer/password_change.ja.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>こんにちは<%= @resource.email %>さん</p>
-
-<p>Mastodonアカウントのパスワードが変更されました。</p>
diff --git a/app/views/user_mailer/password_change.nl.html.erb b/app/views/user_mailer/password_change.nl.html.erb
deleted file mode 100644
index 3ffc547cd..000000000
--- a/app/views/user_mailer/password_change.nl.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hallo <%= @resource.email %>!</p>
-
-<p>Hierbij laten we jou weten dat jouw wachtwoord op Mastodon is veranderd.</p>
diff --git a/app/views/user_mailer/password_change.no.html.erb b/app/views/user_mailer/password_change.no.html.erb
deleted file mode 100644
index cd0a28f82..000000000
--- a/app/views/user_mailer/password_change.no.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hei <%= @resource.email %>!</p>
-
-<p>Ditt Mastodon-passord har blitt endret.</p>
diff --git a/app/views/user_mailer/password_change.oc.html.erb b/app/views/user_mailer/password_change.oc.html.erb
deleted file mode 100644
index 094c221a8..000000000
--- a/app/views/user_mailer/password_change.oc.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Bonjorn <%= @resource.email %> !</p>
-
-<p>Vos contactem per vos avisar qu’avèm ben cambiat vòstre senhal Mastodon.</p>
diff --git a/app/views/user_mailer/password_change.pl.html.erb b/app/views/user_mailer/password_change.pl.html.erb
deleted file mode 100644
index a7cb15a05..000000000
--- a/app/views/user_mailer/password_change.pl.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Witaj, <%= @resource.email %>!</p>
-
-<p>Informujemy, że ostatnio zmieniono Twoje hasło na <%= @instance %>.</p>
diff --git a/app/views/user_mailer/password_change.pt-BR.html.erb b/app/views/user_mailer/password_change.pt-BR.html.erb
deleted file mode 100644
index a1aaa265e..000000000
--- a/app/views/user_mailer/password_change.pt-BR.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Olá, <%= @resource.email %>!</p>
-
-<p>Estamos te contatando para te notificar que a sua senha na instância <%= @instance %> foi modificada.</p>
diff --git a/app/views/user_mailer/password_change.ru.html.erb b/app/views/user_mailer/password_change.ru.html.erb
deleted file mode 100644
index 1c98e364e..000000000
--- a/app/views/user_mailer/password_change.ru.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Здравствуйте, <%= @resource.email %>!</p>
-
-<p>Мы пишем, чтобы оповестить Вас о смене пароля на Вашем аккаунте Mastodon.</p>
diff --git a/app/views/user_mailer/password_change.sr-Latn.html.erb b/app/views/user_mailer/password_change.sr-Latn.html.erb
deleted file mode 100644
index ab4e23bdf..000000000
--- a/app/views/user_mailer/password_change.sr-Latn.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Zdravo <%= @resource.email %>!</p>
-
-<p>Želimo samo da Vas obavestimo da je Vaša lozinka na Mastodont instanci <%= @instance %> promenjena.</p>
diff --git a/app/views/user_mailer/password_change.sr.html.erb b/app/views/user_mailer/password_change.sr.html.erb
deleted file mode 100644
index 4bb61b74f..000000000
--- a/app/views/user_mailer/password_change.sr.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Здраво <%= @resource.email %>!</p>
-
-<p>Желимо само да Вас обавестимо да је Ваша лозинка на Мастодонт инстанци <%= @instance %> промењена.</p>
diff --git a/app/views/user_mailer/password_change.sv.html.erb b/app/views/user_mailer/password_change.sv.html.erb
deleted file mode 100644
index f6168c638..000000000
--- a/app/views/user_mailer/password_change.sv.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>Hej <%= @resource.email %>!</p>
-
-<p>Vi kontaktar dig för att meddela dig att ditt lösenord på <%= @instance %> har blivit ändrat.</p>
diff --git a/app/views/user_mailer/password_change.th.html.erb b/app/views/user_mailer/password_change.th.html.erb
deleted file mode 100644
index 948b1508a..000000000
--- a/app/views/user_mailer/password_change.th.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>สวัสดี <%= @resource.email %>!</p>
-
-<p>เราติดต่อเข้ามาเพื่อจะแจ้งให้คุณทราบว่าพาสเวิร์ด Mastodon เปลี่ยนแล้ว </p>
diff --git a/app/views/user_mailer/password_change.tr.html.erb b/app/views/user_mailer/password_change.tr.html.erb
deleted file mode 100644
index 40f55c484..000000000
--- a/app/views/user_mailer/password_change.tr.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Merhaba <%= @resource.email %>!</p>
-
-<p> <%= @instance %>'deki parolanızın değiştirildiğini hatırlatmak isteriz.</p>
-
-<p>En içten dileklerimizle,<p>
-
-<p> <%= @instance %> ekibi</p>
-
diff --git a/app/views/user_mailer/password_change.zh-cn.html.erb b/app/views/user_mailer/password_change.zh-cn.html.erb
deleted file mode 100644
index 64e8b6b2f..000000000
--- a/app/views/user_mailer/password_change.zh-cn.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<p><%= @resource.email %>，你好呀！</p>
-
-<p>提醒一下，你在 <%= @instance %> 上的密码被更改了哦。</p>
diff --git a/app/views/user_mailer/reconfirmation_instructions.en.html.erb b/app/views/user_mailer/reconfirmation_instructions.en.html.erb
deleted file mode 100644
index 31866a3c8..000000000
--- a/app/views/user_mailer/reconfirmation_instructions.en.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Hello <%= @resource.unconfirmed_email %>!</p>
-
-<p>You requested a change to the email address you use on <%= @instance %>.</p>
-
-<p>To confirm your new email, please click on the following link:<br>
-<%= link_to 'Confirm my email address', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>If the above link did not work, copy and paste this URL into your address bar: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Please also check out our <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Sincerely,<p>
-
-<p>The <%= @instance %> team</p>
diff --git a/app/views/user_mailer/reconfirmation_instructions.html.haml b/app/views/user_mailer/reconfirmation_instructions.html.haml
new file mode 100644
index 000000000..52855e223
--- /dev/null
+++ b/app/views/user_mailer/reconfirmation_instructions.html.haml
@@ -0,0 +1,60 @@
+%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 asset_pack_path('icon_email.svg')
+
+                              %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'
diff --git a/app/views/user_mailer/reconfirmation_instructions.ja.html.erb b/app/views/user_mailer/reconfirmation_instructions.ja.html.erb
deleted file mode 100644
index caa53032a..000000000
--- a/app/views/user_mailer/reconfirmation_instructions.ja.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<p>こんにちは<%= @resource.unconfirmed_email %>さん</p>
-
-<p><%= @instance %>で使っているメールアドレスの変更をあなたがリクエストしました。</p>
-
-<p>新しいメールアドレスを確認するには次のリンクをクリックしてください:<br>
-<%= link_to 'わたしのメールアドレスを確認する', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>上記のリンクがうまくいかなかった場合はこのURLをコピーしてアドレスバーに貼り付けてください:<br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>また<%= link_to '利用規約', terms_url %>もご確認ください。</p>
-
-<p><%= @instance %>チームより</p>
diff --git a/app/views/user_mailer/reconfirmation_instructions.oc.html.erb b/app/views/user_mailer/reconfirmation_instructions.oc.html.erb
deleted file mode 100644
index d5404e49c..000000000
--- a/app/views/user_mailer/reconfirmation_instructions.oc.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Bonjorn <%= @resource.unconfirmed_email %> !</p>
-
-<p>Avètz demandat a cambiar vòstra adreça de corrièl qu’utilizatz per <%= @instance %>.</p>
-
-<p>Per confirmar vòstra novèla adreça, mercés de clicar lo ligam seguent :<br>
-<%= link_to 'Confirmar mon adreça', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Se lo ligam al dessús fonciona pas, copiatz e pegatz aquesta URL a la barra d’adreça :<br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Mercés de gaitar tanben nòstres <%= link_to 'terms and conditions', terms_url %>.</p>
-
-<p>Amistosament,<p>
-
-<p>La còla <%= @instance %></p>
diff --git a/app/views/user_mailer/reconfirmation_instructions.pl.html.erb b/app/views/user_mailer/reconfirmation_instructions.pl.html.erb
deleted file mode 100644
index 57cdc42e1..000000000
--- a/app/views/user_mailer/reconfirmation_instructions.pl.html.erb
+++ /dev/null
@@ -1,15 +0,0 @@
-<p>Witaj, <%= @resource.unconfirmed_email %>!</p>
-
-<p>Dokonano próby zmiany adresu e-mail, którego używasz na <%= @instance %>.</p>
-
-<p>Aby potwierdzić posiadanie tego adresu e-mail, kliknij na poniższy odnośnik:<br>
-<%= link_to 'Potwierdź mój adres e-mail', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>Jeżeli ten odnośnik nie działa, wklej następujący adres w pasek adresu Twojej przeglądarki: <br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>Pamiętaj o przeczytaniu naszych <%= link_to 'zasad użytkowania', terms_url %>.</p>
-
-<p>Z pozdrowieniami,<p>
-
-<p>Zespół <%= @instance %></p>
diff --git a/app/views/user_mailer/reconfirmation_instructions.zh-cn.html.erb b/app/views/user_mailer/reconfirmation_instructions.zh-cn.html.erb
deleted file mode 100644
index 7b79a490e..000000000
--- a/app/views/user_mailer/reconfirmation_instructions.zh-cn.html.erb
+++ /dev/null
@@ -1,13 +0,0 @@
-<p><%= @resource.email %>，你好呀！</p>
-
-<p>你正在更改你在 <%= @instance %> 使用的电子邮件地址。</p>
-
-<p>点击下面的链接以确认操作：<br>
-<%= link_to '确认我的电子邮件地址', confirmation_url(@resource, confirmation_token: @token) %></p>
-
-<p>上面的链接按不动？把下面的链接复制到地址栏再试试：<br>
-<span><%= confirmation_url(@resource, confirmation_token: @token) %></span>
-
-<p>记得读一读我们的<%= link_to '使用条款', terms_url %>哦。</p>
-
-<p>来自 <%= @instance %> 管理团队</p>
diff --git a/app/views/user_mailer/reset_password_instructions.ar.html.erb b/app/views/user_mailer/reset_password_instructions.ar.html.erb
deleted file mode 100644
index d9d5520ec..000000000
--- a/app/views/user_mailer/reset_password_instructions.ar.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>صباح الخير <%= @resource.email %>&nbsp;!</p>
-
-<p>لقد طلب أحدهم رابط تعديل كلمة مرور ماستدون الخاصة بك. يمكنك المتابعة و مواصلة التعديل على الرابط التالي.</p>
-
-<p><%= link_to 'تعديل الكلمة السرية', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>يمكنك تجاهل هذه الرسالة إن لم تكن من طلب ذلك.</p>
-<p>لن يتم تعديل كلمة المرور الخاصة بك و ستبقى نفسها إلا إذا قمت بالضغط على الرابط أعلاه.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.ca.html.erb b/app/views/user_mailer/reset_password_instructions.ca.html.erb
deleted file mode 100644
index 6f76c441d..000000000
--- a/app/views/user_mailer/reset_password_instructions.ca.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Hola <%= @resource.email %>!</p>
-
-<p>Algú ha sol·licitat un enllaç per canviar la contrasenya a mastodont.cat. Això es pot fer a través del següent enllaç.</p>
-
-<p><%= link_to 'Canviar la contrasenya', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Si no has sol·licitat aquest canvi, si us plau, ignora aquest correu.</p>
-<p>La teva contrasenya no canviarà fins que accedeix a l'enllaç de dalt per crear-ne una de nova.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.en.html.erb b/app/views/user_mailer/reset_password_instructions.en.html.erb
deleted file mode 100644
index cfb129e22..000000000
--- a/app/views/user_mailer/reset_password_instructions.en.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Hello <%= @resource.email %>!</p>
-
-<p>Someone has requested a link to change your password on <%= @instance %>. You can do this through the link below.</p>
-
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>If you didn't request this, please ignore this email.</p>
-<p>Your password won't change until you access the link above and create a new one.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.es.html.erb b/app/views/user_mailer/reset_password_instructions.es.html.erb
deleted file mode 100644
index 4eeb6601d..000000000
--- a/app/views/user_mailer/reset_password_instructions.es.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>¡Hola, <%= @resource.email %>!</p>
-
-<p>Alguien pidió un enlace para cambiar tu contraseña en <%= @instance %>. Puedes hacer esto con el siguiente enlace.</p>
-
-<p><%= link_to 'Cambiar mi contraseña', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Si no fuiste tú, por favor ignora este mensaje.</p>
-<p>Tu contraseña no cambiará hasta que ingreses al enlace y crees una nueva.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.fa.html.erb b/app/views/user_mailer/reset_password_instructions.fa.html.erb
deleted file mode 100644
index 835e81311..000000000
--- a/app/views/user_mailer/reset_password_instructions.fa.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p dir="rtl">سلام <%= @resource.email %>!</p>
-
-<p dir="rtl">یک نفر درخواست کرده تا رمز شما در ماستدون عوض شود. برای این کار پیوند زیر را به‌کار ببرید.</p>
-
-<p dir="rtl"><%= link_to 'تغییر رمز', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p dir="rtl">اگر شما چنین درخواستی نداده‌اید، لطفاً این ایمیل را نادیده بگیرید.</p>
-<p dir="rtl">تا وقتی که شما پیوند بالا را نبینید و رمز تازه‌ای نسازید، رمز شما عوض نخواهد شد.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.fi.html.erb b/app/views/user_mailer/reset_password_instructions.fi.html.erb
deleted file mode 100644
index 53be0b62b..000000000
--- a/app/views/user_mailer/reset_password_instructions.fi.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Hei <%= @resource.email %>!</p>
-
-<p>Joku on pyytänyt salasanvaihto Mastodonissa. Voit tehdä sen allaolevassa linkissä.</p>
-
-<p><%= link_to 'Vaihda salasanani', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Jos et pyytänyt vaihtoa, poista tämä viesti.</p>
-<p>Salasanaasi ei vaihdeta ennen kuin menet ylläolevaan linkkiin ja luot uuden.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.fr.html.erb b/app/views/user_mailer/reset_password_instructions.fr.html.erb
deleted file mode 100644
index db55c5884..000000000
--- a/app/views/user_mailer/reset_password_instructions.fr.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Bonjour <%= @resource.email %>&nbsp;!</p>
-
-<p>Quelqu’un a demandé à réinitialiser votre mot de passe sur Mastodon. Vous pouvez effectuer la réinitialisation en cliquant sur le lien ci-dessous.</p>
-
-<p><%= link_to 'Modifier mon mot de passe', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Si vous n’êtes pas à l’origine de cette demande, vous pouvez ignorer ce message.</p>
-<p>Votre mot de passe ne sera pas modifié tant que vous n’accéderez pas au lien ci-dessus et n’en choisirez pas un nouveau.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.he.html.erb b/app/views/user_mailer/reset_password_instructions.he.html.erb
deleted file mode 100644
index 5d0930839..000000000
--- a/app/views/user_mailer/reset_password_instructions.he.html.erb
+++ /dev/null
@@ -1,10 +0,0 @@
-<div lang="he" dir="rtl">
-<p>שלום <%= @resource.email %>!</p>
-
-<p>מישהו ביקש לינק להחלפת סיסמתך במסטודון. באפשרותך לעשות זאת ע"י בלחיצה על הקישורית שבהמשך.</p>
-
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>אם בקשה זו לא הגיעה ממך, אפשר להתעלם מההודעה.</p>
-<p>סיסמתך לא תוחלף לפני שהקישורית תיפתח בדפדפן וסיסמא חדשה תוכנס.</p>
-</div>
\ No newline at end of file
diff --git a/app/views/user_mailer/reset_password_instructions.html.haml b/app/views/user_mailer/reset_password_instructions.html.haml
new file mode 100644
index 000000000..c6a9d4bf6
--- /dev/null
+++ b/app/views/user_mailer/reset_password_instructions.html.haml
@@ -0,0 +1,60 @@
+%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 asset_pack_path('icon_lock_open.svg')
+
+                              %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'
diff --git a/app/views/user_mailer/reset_password_instructions.id.html.erb b/app/views/user_mailer/reset_password_instructions.id.html.erb
deleted file mode 100644
index f07e175ae..000000000
--- a/app/views/user_mailer/reset_password_instructions.id.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Hai <%= @resource.email %>!</p>
-
-<p>Seseorang telah melakukan permintaan link untuk merubah kata sandi anda di Mastodon. Anda bisa melakukan ini melalui link dibawah ini.</p>
-
-<p><%= link_to 'Ubah kata sandi saya', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Jika anda tidak memintanya, mohon abaikan email ini.</p>
-<p>Password anda tidak akan diubah kecuali anda mengakses link di atas dan menggantinya.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.it.html.erb b/app/views/user_mailer/reset_password_instructions.it.html.erb
deleted file mode 100644
index cc411dad3..000000000
--- a/app/views/user_mailer/reset_password_instructions.it.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Ciao <%= @resource.email %>!</p>
-
-<p>Qualcuno ha richiesto un link per cambiare la tua password su Mastodon. Lo puoi fare tramite il link qui sotto.</p>
-
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Se non l'hai richiesto tu, ignora questa email.</p>
-<p>La tua password non verrà cambiata finché non accedi al link qui sopra e ne crei una nuova.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.ja.html.erb b/app/views/user_mailer/reset_password_instructions.ja.html.erb
deleted file mode 100644
index d0d7203f4..000000000
--- a/app/views/user_mailer/reset_password_instructions.ja.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>こんにちは<%= @resource.email %>さん</p>
-
-<p>Mastodonアカウントのパスワードの変更がリクエストされました。以下のリンクをクリックして操作を完了できます。</p>
-
-<p><%= link_to 'パスワードを変更', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>このメールに身に覚えのない場合は無視してください。</p>
-<p>上記のリンクにアクセスし、変更をしない限りパスワードは変更されません。</p>
diff --git a/app/views/user_mailer/reset_password_instructions.nl.html.erb b/app/views/user_mailer/reset_password_instructions.nl.html.erb
deleted file mode 100644
index ca1748145..000000000
--- a/app/views/user_mailer/reset_password_instructions.nl.html.erb
+++ /dev/null
@@ -1,9 +0,0 @@
-<p>Hallo <%= @resource.email %>!</p>
-
-<p>Er heeft iemand een nieuw wachtwoord aangevraagd voor Mastodon. Je kan op de link hieronder klikken om jouw wach
-twoord te veranderen.</p>
-
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Je kan deze e-mail negeren wanneer jij dit niet hebt aangevraagd.</p>
-<p>Jouw wachtwoord blijft onveranderd wanneer je niet op bovenstaande link klikt.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.no.html.erb b/app/views/user_mailer/reset_password_instructions.no.html.erb
deleted file mode 100644
index 398e95e4e..000000000
--- a/app/views/user_mailer/reset_password_instructions.no.html.erb
+++ /dev/null
@@ -1,9 +0,0 @@
-
-<p>Hei <%= @resource.email %>!</p>
-
-<p>Noen har forespurt en lenke til å bytte passord på din Mastodon-bruker. Du kan gjøre det ved å følge lenken under.</p>
-
-<p><%= link_to 'Endre mitt passord', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Hvis du ikke vil endre ditt passord kan du ignorere denne epost.</p>
-<p>Passordet ditt blir ikke endret før du følger lenken over og endrer det.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.oc.html.erb b/app/views/user_mailer/reset_password_instructions.oc.html.erb
deleted file mode 100644
index 92e4b8f8b..000000000
--- a/app/views/user_mailer/reset_password_instructions.oc.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Bonjorn <%= @resource.email %> !</p>
-
-<p>Qualqu’un a demandat la reïnicializacion de vòstre senhal per Mastodon. Podètz realizar la reïnicializacion en clicant sul ligam çai-jos.</p>
-
-<p><%= link_to 'Modificar mon senhal', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>S’avètz pas res demandat, fasquètz pas cas a aqueste corrièl.</p>
-<p>Vòstre senhal cambiarà pas se clicatz pas sul ligam e que ne causissètz pas un novèl.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.pl.html.erb b/app/views/user_mailer/reset_password_instructions.pl.html.erb
deleted file mode 100644
index 2a9913a1d..000000000
--- a/app/views/user_mailer/reset_password_instructions.pl.html.erb
+++ /dev/null
@@ -1,9 +0,0 @@
-<p>Witaj, <%= @resource.email %>!</p>
-
-<p>Ktoś próbował zmienić Twoje hasło na <%= @instance %>. Możesz zrobić to klikając w 
-poniższy link.</p>
-
-<p><%= link_to 'Zmień moje hasło', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Jeżeli to nie Ty, zignoruj ten e-mail.</p>
-<p>Twoje hasło nie zostanie zmienione, dopóki nie użyjesz linku z podobnej wiadomości.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.pt-BR.html.erb b/app/views/user_mailer/reset_password_instructions.pt-BR.html.erb
deleted file mode 100644
index 9b21aae92..000000000
--- a/app/views/user_mailer/reset_password_instructions.pt-BR.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Olá, <%= @resource.email %>!</p>
-
-<p>Alguém solicitou um link para mudar a sua senha na instância <%= @instance %>. Você pode fazer isso através do link abaixo:</p>
-
-<p><%= link_to 'Mudar a minha senha', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Se você não solicitou isso, por favor ignore este e-mail.</p>
-<p>A senha não será modificada até que você acesse o link acima e crie uma nova.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.ru.html.erb b/app/views/user_mailer/reset_password_instructions.ru.html.erb
deleted file mode 100644
index a24c9cc6c..000000000
--- a/app/views/user_mailer/reset_password_instructions.ru.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Здравствуйте, <%= @resource.email %>!</p>
-
-<p>Кто-то отправил запрос о сбросе пароля для Вашего аккаунта Mastodon. Вы можете использовать для этого следующую ссылку:</p>
-
-<p><%= edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Если Вы не запрашивали сброс пароля, пожалуйста, проигнорируйте это сообщение.</p>
-<p>Ваш пароль не будет изменен, пока вы не проследуете по вышеприведенной ссылке и не создадите новый.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.sr-Latn.html.erb b/app/views/user_mailer/reset_password_instructions.sr-Latn.html.erb
deleted file mode 100644
index 7dede16b2..000000000
--- a/app/views/user_mailer/reset_password_instructions.sr-Latn.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Zdravo <%= @resource.email %>!</p>
-
-<p>Neko je zatražio link za promenu lozinke na instanci <%= @instance %>. Ovo možete uraditi klikom na link ispod.</p>
-
-<p><%= link_to 'Promeni moju lozinku', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Ignorišite ovu poruku, ako niste Vi bili ti koji ste zatražili promenu lozinke.</p>
-<p>Lozinka se neće promeniti sve dok ne kliknete link iznad i ne napravite novu lozinku.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.sr.html.erb b/app/views/user_mailer/reset_password_instructions.sr.html.erb
deleted file mode 100644
index be8d0c3ed..000000000
--- a/app/views/user_mailer/reset_password_instructions.sr.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Здраво <%= @resource.email %>!</p>
-
-<p>Неко је затражио линк за промену лозинке на инстанци <%= @instance %>. Ово можете урадити кликом на линк испод.</p>
-
-<p><%= link_to 'Промени моју лозинку', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Игноришите ову поруку, ако нисте Ви били ти који сте затражили промену лозинке.</p>
-<p>Лозинка се неће променити све док не кликнете линк изнад и не направите нову лозинку.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.sv.html.erb b/app/views/user_mailer/reset_password_instructions.sv.html.erb
deleted file mode 100644
index f38d2a39f..000000000
--- a/app/views/user_mailer/reset_password_instructions.sv.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>Hej <%= @resource.email %>!</p>
-
-<p>SNågon har begärt en länk för att ändra ditt lösenord på <%= @instance %>. Du kan göra det genom länken nedan.</p>
-
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Om du inte begärt detta, ignorerar du det här e-postmeddelandet.</p>
-<p>Ditt lösenord ändras inte förrän du öppnar länken ovan och skapar en ny.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.th.html.erb b/app/views/user_mailer/reset_password_instructions.th.html.erb
deleted file mode 100644
index 1fe1c2725..000000000
--- a/app/views/user_mailer/reset_password_instructions.th.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>สวัสดี <%= @resource.email %>!</p>
-
-<p>มีการแจ้งขอลิงค์เปลี่ยนแปลงพาสเวิร์ดเข้า Mastodon ของคุณ. คุณสามารถแก้ไขพาสเวิร์ดได้ผ่านทางลิงค์ด้านล่างนี้.</p>
-
-<p><%= link_to 'Change my password', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>ถ้าคุณไม่ได้เป็นคนขอลิงค์นี้, กรุณาข้ามเมล์นี้ไป.</p>
-<p>พาร์สเวิร์ดของคุณจะยังไม่ถูกเปลี่ยนจนกว่าคุณจะเข้าไปในลิงค์ด้านบนนี้เพื่อสร้างพาสเวิร์ดใหม่.</p>
diff --git a/app/views/user_mailer/reset_password_instructions.tr.html.erb b/app/views/user_mailer/reset_password_instructions.tr.html.erb
deleted file mode 100644
index d19c6c498..000000000
--- a/app/views/user_mailer/reset_password_instructions.tr.html.erb
+++ /dev/null
@@ -1,14 +0,0 @@
-<p>Merhaba <%= @resource.email %></p>
-
-<p>Biri <%= @instance %> üzerinden sizin hesabınız için parola değişim isteği gönderdi. Aşağıdaki linke tıklayarak bunu gerçekleştirebilirsiniz.</p>
-
-<p><%= link_to 'Parolamı değiştir', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>Eğer bu isteği siz göndermediyseniz, lütfen bu e-postayı görmezden geliniz.</p>
-
-<p>Siz bu linke tıklayıp yeni bir parola girene kadar parolanız değişmeyecektir.</p>
-
-<p>En içten dileklerimizle,<p>
-
-<p> <%= @instance %> ekibi</p>
-
diff --git a/app/views/user_mailer/reset_password_instructions.zh-cn.html.erb b/app/views/user_mailer/reset_password_instructions.zh-cn.html.erb
deleted file mode 100644
index 124305675..000000000
--- a/app/views/user_mailer/reset_password_instructions.zh-cn.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<p><%= @resource.email %>，你好呀！</p>
-
-<p>有人想修改你在 <%= @instance %> 上的密码呢。如果你确实想修改密码的话，点击下面的链接吧：</p>
-
-<p><%= link_to '修改密码', edit_password_url(@resource, reset_password_token: @token) %></p>
-
-<p>如果你不想修改密码的话，还请忽略这封邮件哦。</p>
-<p>在你点击上面的链接并修改密码前，你的密码是不会改变的。</p>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index f2bf17364..53b39718d 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -8,6 +8,6 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-# Rails.application.config.assets.precompile += %w(application_public.js custom.css)
+# Rails.application.config.assets.precompile += %w()
 
 Rails.application.config.assets.initialize_on_precompile = true
diff --git a/config/initializers/premailer_rails.rb b/config/initializers/premailer_rails.rb
new file mode 100644
index 000000000..31c02dffa
--- /dev/null
+++ b/config/initializers/premailer_rails.rb
@@ -0,0 +1,6 @@
+require_relative '../../lib/mastodon/premailer_webpack_strategy'
+
+Premailer::Rails.config.merge!(remove_ids: true,
+                               adapter: :nokogiri,
+                               generate_text_part: false,
+                               strategies: [PremailerWebpackStrategy])
diff --git a/config/locales/devise.en.yml b/config/locales/devise.en.yml
index c5ae583ff..4b3f81edb 100644
--- a/config/locales/devise.en.yml
+++ b/config/locales/devise.en.yml
@@ -17,15 +17,32 @@ en:
       unconfirmed: You have to confirm your email address before continuing.
     mailer:
       confirmation_instructions:
+        action: Verify email address
+        explanation: You have created an account on %{host} with this email address. You are one click away from activating it. If this wasn't you, please ignore this e-mail.
+        extra_html: Please also check out our <a href="%{terms_path}">terms of service</a> and <a href="%{policy_path}">privacy policy</a>.
         subject: 'Mastodon: Confirmation instructions for %{instance}'
+        title: Verify e-mail address
       email_changed:
+        explanation: 'The email address for your account is being changed to:'
+        extra: If you did not change your email, it is likely that someone has gained access to your account. Please change your password immediately or contact the instance admin if you're locked out of your account.
         subject: 'Mastodon: Email changed'
+        title: New email address
       password_change:
+        explanation: The password for your account has been changed.
+        extra: If you did not change your password, it is likely that someone has gained access to your account. Please change your password immediately or contact the instance admin if you're locked out of your account.
         subject: 'Mastodon: Password changed'
+        title: Password changed
       reconfirmation_instructions:
+        explanation: Confirm the new address to change your email.
+        extra: If this change wasn't initiated by you, please ignore this email. The email address for the Mastodon account won't change until you access the link above.
         subject: 'Mastodon: Confirm email for %{instance}'
+        title: Verify email address
       reset_password_instructions:
+        action: Change password
+        explanation: You requested a new password for your account.
+        extra: If you didn't request this, please ignore this email. Your password won't change until you access the link above and create a new one.
         subject: 'Mastodon: Reset password instructions'
+        title: Password reset
       unlock_instructions:
         subject: 'Mastodon: Unlock instructions'
     omniauth_callbacks:
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 23dce73e9..93ff88fd8 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -338,6 +338,7 @@ en:
       body: "%{reporter} has reported %{target}"
       subject: New report for %{instance} (#%{id})
   application_mailer:
+    notification_preferences: Change e-mail preferences
     salutation: "%{name},"
     settings: 'Change e-mail preferences: %{link}'
     signature: Mastodon notifications from %{instance}
diff --git a/lib/mastodon/premailer_webpack_strategy.rb b/lib/mastodon/premailer_webpack_strategy.rb
new file mode 100644
index 000000000..4ea3ce80c
--- /dev/null
+++ b/lib/mastodon/premailer_webpack_strategy.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module PremailerWebpackStrategy
+  def load(url)
+    if Webpacker.dev_server.running?
+      url = File.join("#{Webpacker.dev_server.protocol}://#{Webpacker.dev_server.host_with_port}", url)
+      HTTP.get(url).to_s
+    else
+      url = url[1..-1] if url.start_with?('/')
+      File.read(Rails.root.join('public', url))
+    end
+  end
+
+  module_function :load
+end
diff --git a/spec/mailers/previews/notification_mailer_preview.rb b/spec/mailers/previews/notification_mailer_preview.rb
index a08a80d17..99495d862 100644
--- a/spec/mailers/previews/notification_mailer_preview.rb
+++ b/spec/mailers/previews/notification_mailer_preview.rb
@@ -1,4 +1,5 @@
 # Preview all emails at http://localhost:3000/rails/mailers/notification_mailer
+
 class NotificationMailerPreview < ActionMailer::Preview
   # Preview this email at http://localhost:3000/rails/mailers/notification_mailer/mention
   def mention
diff --git a/spec/mailers/previews/user_mailer_preview.rb b/spec/mailers/previews/user_mailer_preview.rb
new file mode 100644
index 000000000..6ed0090f4
--- /dev/null
+++ b/spec/mailers/previews/user_mailer_preview.rb
@@ -0,0 +1,32 @@
+# Preview all emails at http://localhost:3000/rails/mailers/user_mailer
+
+class UserMailerPreview < ActionMailer::Preview
+  # Preview this email at http://localhost:3000/rails/mailers/user_mailer/confirmation_instructions
+  def confirmation_instructions
+    UserMailer.confirmation_instructions(User.first, 'spec')
+  end
+
+  # Preview this email at http://localhost:3000/rails/mailers/user_mailer/email_changed
+  def email_changed
+    user = User.first
+    user.unconfirmed_email = 'foo@bar.com'
+    UserMailer.email_changed(user)
+  end
+
+  # Preview this email at http://localhost:3000/rails/mailers/user_mailer/password_change
+  def password_change
+    UserMailer.password_change(User.first)
+  end
+
+  # Preview this email at http://localhost:3000/rails/mailers/user_mailer/reconfirmation_instructions
+  def reconfirmation_instructions
+    user = User.first
+    user.unconfirmed_email = 'foo@bar.com'
+    UserMailer.confirmation_instructions(user, 'spec')
+  end
+
+  # Preview this email at http://localhost:3000/rails/mailers/user_mailer/reset_password_instructions
+  def reset_password_instructions
+    UserMailer.reset_password_instructions(User.first, 'spec')
+  end
+end
author	Eugen Rochko <eugen@zeonfederated.com>	2018-01-16 03:29:11 +0100
committer	GitHub <noreply@github.com>	2018-01-16 03:29:11 +0100
commit	5276c0a0900a0886b59a8ead2346540aa381ea46 (patch)
tree	fbc338f77623f670b6421b87606028a68fb68bd5
parent	7861c5f108a8f8cb0450f3b1ef865b1177c706fc (diff)