Improve HTML e-mails based on Litmus tests (#6301)

* Use PNG images in HTML e-mails

* Make webpack use URLs with host so fonts load inside HTML e-mails

Convert this back to a relative URL in the premailer CSS loader
since local requests are quicker

* Improve responsive design

* Add missing PNG icon

24 files changed, 56 insertions, 24 deletions

diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png
new file mode 100644
index 000000000..e62c064c8
--- /dev/null
+++ b/app/javascript/images/mailer/icon_cached.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png
new file mode 100644
index 000000000..0d2ef0cb8
--- /dev/null
+++ b/app/javascript/images/mailer/icon_done.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png
new file mode 100644
index 000000000..aae9d2bb9
--- /dev/null
+++ b/app/javascript/images/mailer/icon_email.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png
new file mode 100644
index 000000000..895b57d0a
--- /dev/null
+++ b/app/javascript/images/mailer/icon_grade.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png
new file mode 100644
index 000000000..9f62eadc2
--- /dev/null
+++ b/app/javascript/images/mailer/icon_lock_open.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png
new file mode 100644
index 000000000..3453060ae
--- /dev/null
+++ b/app/javascript/images/mailer/icon_person_add.png
Binary files differdiff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png
new file mode 100644
index 000000000..8bce4955c
--- /dev/null
+++ b/app/javascript/images/mailer/icon_reply.png
Binary files differdiff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png
new file mode 100644
index 000000000..1c4f33287
--- /dev/null
+++ b/app/javascript/images/mailer/logo_full.png
Binary files differdiff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png
new file mode 100644
index 000000000..8fda4f67f
--- /dev/null
+++ b/app/javascript/images/mailer/logo_transparent.png
Binary files differdiff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index b3bcc9209..dbe070f9a 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -17,7 +17,7 @@ body {
   -ms-text-size-adjust: 100%;
 }
 
-.email_body {
+.email-body {
   td,
   div,
   a,
@@ -235,6 +235,12 @@ h5 {
   color: lighten($ui-base-color, 34%);
 }
 
+.input-cell {
+  h5 {
+    margin-top: 4px;
+  }
+}
+
 .input {
   td {
     background: darken($ui-base-color, 8%);
@@ -512,3 +518,29 @@ ul {
     min-height: 1024px !important;
   }
 }
+
+@media (max-width: 697px) {
+  .email-container,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .email-start {
+    padding-top: 16px !important;
+  }
+
+  .email-end {
+    padding-bottom: 16px !important;
+  }
+
+  .padded {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
index e41b91069..6687546fb 100644
--- a/app/views/layouts/mailer.html.haml
+++ b/app/views/layouts/mailer.html.haml
@@ -24,7 +24,7 @@
                               %tr
                                 %td.column-cell
                                   = link_to root_url do
-                                    = image_tag full_pack_url('logo_full.svg'), alt: 'Mastodon', height: 34, class: 'logo'
+                                    = image_tag full_pack_url('logo_full.png'), alt: 'Mastodon', height: 34, class: 'logo'
 
     = yield
 
@@ -41,15 +41,12 @@
                   %tr
                     %td.blank-cell.footer
                       .email-row
-                        .col-4
+                        .col-6
                           %table.column{ cellspacing: 0, cellpadding: 0 }
                             %tbody
                               %td.column-cell
                                 %p= t 'about.hosted_on', domain: site_hostname
                                 %p= link_to t('application_mailer.notification_preferences'), settings_notifications_url
-                        .col-2
-                          %table.column{ cellspacing: 0, cellpadding: 0 }
-                            %tbody
                               %td.column-cell.text-right
                                 = link_to root_url do
-                                  = image_tag full_pack_url('logo_transparent.svg'), alt: 'Mastodon', height: 24
+                                  = image_tag full_pack_url('logo_transparent.png'), alt: 'Mastodon', height: 24
diff --git a/app/views/notification_mailer/favourite.html.haml b/app/views/notification_mailer/favourite.html.haml
index f26b08b18..7d1b494d0 100644
--- a/app/views/notification_mailer/favourite.html.haml
+++ b/app/views/notification_mailer/favourite.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_grade.svg'), alt:''
+                                      = image_tag full_pack_url('icon_grade.png'), alt:''
 
                               %h1= t 'notification_mailer.favourite.title'
                               %p.lead= t('notification_mailer.favourite.body', name: @account.acct)
diff --git a/app/views/notification_mailer/follow.html.haml b/app/views/notification_mailer/follow.html.haml
index 1290e2bc4..31a2b7445 100644
--- a/app/views/notification_mailer/follow.html.haml
+++ b/app/views/notification_mailer/follow.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_person_add.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_person_add.png'), alt: ''
 
                               %h1= t 'notification_mailer.follow.title'
                               %p.lead= t('notification_mailer.follow.body', name: @account.acct)
diff --git a/app/views/notification_mailer/follow_request.html.haml b/app/views/notification_mailer/follow_request.html.haml
index 41efeafaf..44f1911c4 100644
--- a/app/views/notification_mailer/follow_request.html.haml
+++ b/app/views/notification_mailer/follow_request.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_person_add.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_person_add.png'), alt: ''
 
                               %h1= t 'notification_mailer.follow_request.title'
                               %p.lead= t('notification_mailer.follow_request.body', name: @account.acct)
diff --git a/app/views/notification_mailer/mention.html.haml b/app/views/notification_mailer/mention.html.haml
index 619c580ce..479fed41c 100644
--- a/app/views/notification_mailer/mention.html.haml
+++ b/app/views/notification_mailer/mention.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_reply.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_reply.png'), alt: ''
 
                               %h1= t 'notification_mailer.mention.title'
                               %p.lead= t('notification_mailer.mention.body', name: @status.account.acct)
diff --git a/app/views/notification_mailer/reblog.html.haml b/app/views/notification_mailer/reblog.html.haml
index 61c6ee6be..85b202cf9 100644
--- a/app/views/notification_mailer/reblog.html.haml
+++ b/app/views/notification_mailer/reblog.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_cached.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_cached.png'), alt: ''
 
                               %h1= t 'notification_mailer.reblog.title'
                               %p.lead= t('notification_mailer.reblog.body', name: @account.acct)
diff --git a/app/views/user_mailer/confirmation_instructions.html.haml b/app/views/user_mailer/confirmation_instructions.html.haml
index 0f999bcbc..1f088a16f 100644
--- a/app/views/user_mailer/confirmation_instructions.html.haml
+++ b/app/views/user_mailer/confirmation_instructions.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_email.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_email.png'), alt: ''
 
                               %h1= t 'devise.mailer.confirmation_instructions.title'
 
diff --git a/app/views/user_mailer/email_changed.html.haml b/app/views/user_mailer/email_changed.html.haml
index 45dc06650..7e82f23e4 100644
--- a/app/views/user_mailer/email_changed.html.haml
+++ b/app/views/user_mailer/email_changed.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_email.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_email.png'), alt: ''
 
                               %h1= t 'devise.mailer.email_changed.title'
                               %p.lead= t 'devise.mailer.email_changed.explanation'
diff --git a/app/views/user_mailer/password_change.html.haml b/app/views/user_mailer/password_change.html.haml
index 2e9377dff..26314a217 100644
--- a/app/views/user_mailer/password_change.html.haml
+++ b/app/views/user_mailer/password_change.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_lock_open.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_lock_open.png'), alt: ''
 
                               %h1= t 'devise.mailer.password_change.title'
                               %p.lead= t 'devise.mailer.password_change.explanation'
diff --git a/app/views/user_mailer/reconfirmation_instructions.html.haml b/app/views/user_mailer/reconfirmation_instructions.html.haml
index 3ae226093..e3be8e295 100644
--- a/app/views/user_mailer/reconfirmation_instructions.html.haml
+++ b/app/views/user_mailer/reconfirmation_instructions.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_email.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_email.png'), alt: ''
 
                               %h1= t 'devise.mailer.reconfirmation_instructions.title'
                               %p.lead= t 'devise.mailer.reconfirmation_instructions.explanation'
diff --git a/app/views/user_mailer/reset_password_instructions.html.haml b/app/views/user_mailer/reset_password_instructions.html.haml
index c0e6775d4..5d9ce6a75 100644
--- a/app/views/user_mailer/reset_password_instructions.html.haml
+++ b/app/views/user_mailer/reset_password_instructions.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_lock_open.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_lock_open.png'), alt: ''
 
                               %h1= t 'devise.mailer.reset_password_instructions.title'
                               %p.lead= t 'devise.mailer.reset_password_instructions.explanation'
diff --git a/app/views/user_mailer/welcome.html.haml b/app/views/user_mailer/welcome.html.haml
index 0823efa1a..d734da67d 100644
--- a/app/views/user_mailer/welcome.html.haml
+++ b/app/views/user_mailer/welcome.html.haml
@@ -17,7 +17,7 @@
                                 %tbody
                                   %tr
                                     %td
-                                      = image_tag full_pack_url('icon_done.svg'), alt: ''
+                                      = image_tag full_pack_url('icon_done.png'), alt: ''
 
                               %h1= t 'user_mailer.welcome.title', name: @resource.account.username
                               %p.lead= t 'user_mailer.welcome.explanation'
@@ -30,7 +30,7 @@
           %table.content-section{ cellspacing: 0, cellpadding: 0 }
             %tbody
               %tr
-                %td.content-cell
+                %td.content-cell.content-start
                   .email-row
                     .col-3
                       %table.column{ cellspacing: 0, cellpadding: 0 }
@@ -46,7 +46,7 @@
                       %table.column{ cellspacing: 0, cellpadding: 0 }
                         %tbody
                           %tr
-                            %td.column-cell.content-start
+                            %td.column-cell
                               %p= t 'user_mailer.welcome.full_handle_hint', instance: @instance
 
 %table.email-table{ cellspacing: 0, cellpadding: 0 }
@@ -69,7 +69,7 @@
                       %table.column{ cellspacing: 0, cellpadding: 0 }
                         %tbody
                           %tr
-                            %td.column-cell
+                            %td.column-cell.padded
                               %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 }
                                 %tbody
                                   %tr
@@ -89,7 +89,7 @@
                       %table.column{ cellspacing: 0, cellpadding: 0 }
                         %tbody
                           %tr
-                            %td.column-cell
+                            %td.column-cell.padded
                               %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 }
                                 %tbody
                                   %tr
@@ -109,7 +109,7 @@
                       %table.column{ cellspacing: 0, cellpadding: 0 }
                         %tbody
                           %tr
-                            %td.column-cell
+                            %td.column-cell.padded
                               %table.button.button-small{ align: 'left', cellspacing: 0, cellpadding: 0 }
                                 %tbody
                                   %tr
diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js
index 822329490..26747e76b 100644
--- a/config/webpack/configuration.js
+++ b/config/webpack/configuration.js
@@ -27,7 +27,7 @@ function formatPublicPath(host = '', path = '') {
 
 const output = {
   path: resolve('public', settings.public_output_path),
-  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST || env.LOCAL_DOMAIN, settings.public_output_path),
 };
 
 module.exports = {
diff --git a/lib/mastodon/premailer_webpack_strategy.rb b/lib/mastodon/premailer_webpack_strategy.rb
index 4ea3ce80c..84d83cc66 100644
--- a/lib/mastodon/premailer_webpack_strategy.rb
+++ b/lib/mastodon/premailer_webpack_strategy.rb
@@ -2,6 +2,9 @@
 
 module PremailerWebpackStrategy
   def load(url)
+    public_path_host = ENV['ASSET_HOST'] || ENV['LOCAL_DOMAIN']
+    url = url.gsub(/\A\/\/#{public_path_host}/, '')
+
     if Webpacker.dev_server.running?
       url = File.join("#{Webpacker.dev_server.protocol}://#{Webpacker.dev_server.host_with_port}", url)
       HTTP.get(url).to_s