From 872a0d5bd801c998d911f7da582a60d2f714a710 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 20 Jan 2018 01:32:21 +0100
Subject: [PATCH] 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
---
 app/javascript/images/mailer/icon_cached.png  | Bin 0 -> 754 bytes
 app/javascript/images/mailer/icon_done.png    | Bin 0 -> 279 bytes
 app/javascript/images/mailer/icon_email.png   | Bin 0 -> 520 bytes
 app/javascript/images/mailer/icon_grade.png   | Bin 0 -> 541 bytes
 .../images/mailer/icon_lock_open.png          | Bin 0 -> 550 bytes
 .../images/mailer/icon_person_add.png         | Bin 0 -> 512 bytes
 app/javascript/images/mailer/icon_reply.png   | Bin 0 -> 391 bytes
 app/javascript/images/mailer/logo_full.png    | Bin 0 -> 3052 bytes
 .../images/mailer/logo_transparent.png        | Bin 0 -> 627 bytes
 app/javascript/styles/mailer.scss             |  34 +++++++++++++++++-
 app/views/layouts/mailer.html.haml            |   9 ++---
 .../notification_mailer/favourite.html.haml   |   2 +-
 .../notification_mailer/follow.html.haml      |   2 +-
 .../follow_request.html.haml                  |   2 +-
 .../notification_mailer/mention.html.haml     |   2 +-
 .../notification_mailer/reblog.html.haml      |   2 +-
 .../confirmation_instructions.html.haml       |   2 +-
 app/views/user_mailer/email_changed.html.haml |   2 +-
 .../user_mailer/password_change.html.haml     |   2 +-
 .../reconfirmation_instructions.html.haml     |   2 +-
 .../reset_password_instructions.html.haml     |   2 +-
 app/views/user_mailer/welcome.html.haml       |  12 +++----
 config/webpack/configuration.js               |   2 +-
 lib/mastodon/premailer_webpack_strategy.rb    |   3 ++
 24 files changed, 56 insertions(+), 24 deletions(-)
 create mode 100644 app/javascript/images/mailer/icon_cached.png
 create mode 100644 app/javascript/images/mailer/icon_done.png
 create mode 100644 app/javascript/images/mailer/icon_email.png
 create mode 100644 app/javascript/images/mailer/icon_grade.png
 create mode 100644 app/javascript/images/mailer/icon_lock_open.png
 create mode 100644 app/javascript/images/mailer/icon_person_add.png
 create mode 100644 app/javascript/images/mailer/icon_reply.png
 create mode 100644 app/javascript/images/mailer/logo_full.png
 create mode 100644 app/javascript/images/mailer/logo_transparent.png

diff --git a/app/javascript/images/mailer/icon_cached.png b/app/javascript/images/mailer/icon_cached.png
new file mode 100644
index 0000000000000000000000000000000000000000..e62c064c837a38e059c578c3702259d80f389385
GIT binary patch
literal 754
zcmeAS@N?(olHy`uVBq!ia0y~yU@&E1U{K&-V_;y|^w%JQfq{Xg*vT`5gM)*kh9jke
zfq{Xuz$3Dlfq@|jgc*NK+IWG1fkCpwHKHUqKdq!Zu_%?Hyu4g5GcUV1Ik6yBFTW^#
z_B$IX1_q{lPZ!6Kh}N?+Z8JmyMcmHcRdH!ztH01-sG!u<q|mW;DwmmHjtDm^ceLO|
zk)~@ek9cuJbo6qFH7Rr`Dn&%Da_s2ja1`+TqpV~o*Inw^cJuDcxo6MS-91<RefRe_
z((eq)6`HRUew|zuFY6I`f3e;zOW)L$y9F;q9QrU%s?+wi70=cHmKQUASs(opb?V;Y
zS4H8@k$ac!yJGlv@jRc-oj0}yyizM&*7<Q#m4WKFYpax>wg&yaa<b>y=T`-dKf<O;
zXDOvOiD%UxO5S|de^-Z;lj`mptPkAQ)h}FSEm&ywa4Xx5TTS7<$_GN`Zavy@<Hi+7
z+oX-}N|!P?MA=$L*{+;*Ft6J_J?zTGyoOaPq#N1~{Awx<Y1sX0Uz1&HC}SS;?psf`
z^Hn4)DlCZ-eNZslww&qq?Kd;Mw@%JlK9A8j_uHAJ4OxpBt}R>R&(vI+)X)66GyC*`
z*&RP(w-}VNe^_^}=<u|A+ya96uO-%-ocOJ!lx7@$(=qgvUV`bB=rYDE{SD$Tymfe&
z=d54pZabl<R#R!2cWY2}!}0?Q=PYbKaN25~`RRRs%O=UMn0an0@7H<Xw*OaO>g0Mv
zKSAWjEw$5;4{C0zySn%=FK=+`@7MXo*5h{M`K5&nN{<W+wl*B)DzH+DbKW@3Zjl(r
z^JJGlYyNh06qf22EMr~oE%;I6vR~=K2i9TAXIDCR*8B}S&Rl6Sk^BDD)=OW09-Ht>
zG5OEulp1q~mG?YP?vDR^Q6<ms?j-IN%>k>X2N%uXV5Q`7xjee|@H>T&S2fOi=auH0
zJFTn>b{G12_!WESf75G57wj*u<a5$pRUMQi5g;Ei_jP~z%HR5S0*^nx($U+*z`(%Z
M>FVdQ&MBb@0A9#dw*UYD

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/icon_done.png b/app/javascript/images/mailer/icon_done.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d2ef0cb87e34633a142ceda4651308421315514
GIT binary patch
literal 279
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9EWB_ParFHOFJfq_A?#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#W
zDFz0HDV{ElArY-_FKpy$HV|=p_{M1&$G#@-<>zYiu3MG(x7oF9{{3>&qop2Q0{IK}
zrce9*_n77BP5%@Zu&>ko$g<|ZT2{H6v$lLx`M~~w*Zhx<P1xZ^ZUbg#?i!Y9H9AZS
zKjg0HdcIh;K-_(PwSM5=^Zh**qW{gDSjClV*zUQS#`OHC;k4aj;KYAla$$eB;6BN`
dNc-E|&+_k{^9WGqXJBAp@O1TaS?83{1OUH#WoQ5Z

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/icon_email.png b/app/javascript/images/mailer/icon_email.png
new file mode 100644
index 0000000000000000000000000000000000000000..aae9d2bb9fdadbfe1c8cbc901e2824fbccef0830
GIT binary patch
literal 520
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9EWB_ParFHOFJfq_A?#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#W
zDFz0{R!<klkcif|(`@}i97WpZGw<Hmc;wIo32R}Y9{IUJH!fx<^9Bfh5bs!PX!uco
z#ZuY&gKR?FNl&wun?(gIY@B!DpmVXh<g|mkb#{9@y_<X|#qXKz^F5QR-<@@EKCCKS
zxxkMp`+#ji&4Imqjq?xu?zmyUb@jF@>-pyQ-SVnEZp6>uc$0Ddt|N<IS*AWn+g8V#
z!?)q3*ax-l{HZ)oK5vi}^lz+u@SaubJ>&UC%LnD26Qm8I{TW@3s6Vj#urYf--|9Km
zf*a)om(5B~f8k`N;r?n@mGbTSHUC~Ep7^(-IPzZU*SS?QGN--bQ7O9`YO3WMUAyv~
z_!jn8(O;v&KF{10eBoP;!p5cNQf}RTb<FacevZQ24_j}YE1GuosZL(_tmau!uFT!0
zo}I$)cl1kICMK-e9l-CyJb!K5m8=sD`UmcQ7R$cs-Nmwj$!6uF|Mf}E1`}TFE_}4c
z{^5xi>1<NW;nxrB7yNctQ}PAFeYXpHm}~qUzb`Fes$jH9u$X>H{y_VqrCSz0++@La
Y$|Wsau}wdkfq{X+)78&qol`;+0Ibj7@&Et;

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/icon_grade.png b/app/javascript/images/mailer/icon_grade.png
new file mode 100644
index 0000000000000000000000000000000000000000..895b57d0a479cd084589866a6d48d346b8a23a95
GIT binary patch
literal 541
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9EWB_ParFHOFJfq_A?#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#W
zDFz0{S)MMAArY-_r=HhxNt8G?|9plA@5KpIT3e@Tq#l>;P}<fKQOI4yET-p>(rmq9
zQtJ*TGqF$0J$a?Y*gkHaVf?el__+Cf$;D4rUVd3}?|Wt4-rDE3m-Z)dcrcx`kTW%u
zR8#dm^5uhg0guezunK#5sUN%zzT63mZ#~R>aFOW*W3FA?zV?E+puJyX)HAPLUTwq3
z`C!iaT?|>P84cuw;x0t&tW)i5Y+15p$+ZVr{O^nf>rOi?U$SP&><9CvmSp!-@@5-^
zC3s!hwM0()MvG}>2UEuqVb9`YGuqdOUSOT$)?=~mT*JGJkPNnO^$LFkJa(Ve{y+KV
zs)QeU0sm`1rE@T^VaPW;e4XL{W)>f2f4PJD2b#(Y1dnWBKd_;D`)jRpl?C=;LJ23B
z53D>cns9;nz{=;hFMHOh-uKMX5`GXD<h@cfX2NNfUtTTgD!$%QQ%eLt?F$TA-(0_?
zVd<jFe`RWJYp!0__~+aS(W`o4ObN%0Y#6GPvUWGxuCCiH#1QVlHses?Vn*cyss*y<
sdzd4(9*=d)*Lv}`gZ1Nj`}O6kH~la3Ra~-~fq{X+)78&qol`;+04RgtCjbBd

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/icon_lock_open.png b/app/javascript/images/mailer/icon_lock_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f62eadc2fa86656f7279d67ba79aebdac9531e5
GIT binary patch
literal 550
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9EWB_ParFHOFJfq_A?#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#W
zDFz0{#hxyXArY-lr|;Kebrd<azuD<gynji@gI9X}3zg&;WCOdx7YYSl&}bEZQ1;JN
zDKKck@`Ar2X{mbFXV%3=|Cn@k-b~BtefiJMoSQdQtL<qehs0zP<;)|cvEH}LH?LmQ
z(%SL6LH5Da^%bn!8t)mMJa0Gg-tN=KGc}d&oDr5`czo{$OTmlYd{JM!XS%-`FU)&%
znNOzjrG#$KfnDaiKj#0*ns-0S=gl?`UgvlJ64ItCsvBER|MFti;fWi&SqmPAC72(x
zFJtv`cF$mVF~LN4rG4@ly>fY$G}XJFR)(9Wzu<7-zu;k+^XU=G3%|!)OA}m!Y)@~g
zKQLv<(=CkwTv_vMzk7d5G4@Ln{IJm|ZQFP0G6lo^GI6>tp$m%`4_^PE&S2`vy>4e>
zns~k1fr;iSrMuRtE|}-;a!*93>PgWzrvuwX7+t<iRZDQbwE247q%AYm1J>Clq=`Gk
zuAOc0W2Rn=gObywtb5OeL+bcK^c1Evr6ujiuM*5yR@%lg$9q<JSxBa6<K+zh1-C^7
zT_0M6OknxXTd99?nF?>pylm|}Ra2v>DgU|hLqs?HRiALOo`HdZ!PC{xWt~$(69A>k
B;%5K=

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/icon_person_add.png b/app/javascript/images/mailer/icon_person_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..3453060aec2615928acac75176905005381ea6c0
GIT binary patch
literal 512
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9EWB_ParFHOFJfq_A?#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#W
zDFz0{T2B|pkcif|Q}%i>JBqZPH_f~>>xKu*Th*lH5#6n~IR4o+ZtYJ{w`;t%Xu_d$
zQQCqc+Jf>9IageSI|P~LyOyaQd2?Q6_l+mnWixkHpSwBJTA5e!)A<M?r2{jT<a%zt
zcVX`mW8-RXC;L-1!Ye*b_fN3R{j9p+>ft-fS#_4B<{b#`*m++0!M3Xh<O0}EDVi>o
zcxHFm(duTyM@!GZ-{z8kwfFmYR=qGae57#cY`b%=X-3inhV7GH8NSMz^sY&5b5Qm9
zt8r!XEB`Ou&3`86aCIGH`=oEmOfoYfjkg@i-Vsq!JDt(b`ILWykIR97%oX>gHZaF9
zmfo6vNp(Z(>yNKRSLidcvt=G~;n>AKhrvy?*ITQ~`TV4~GixS!F(~L~`d-?!gw?aP
zVOO~4^+|dvb7$YIwy&GpBz(Z|gY5Q9>kKA$2g6${xBt`%czbxqY_1KDvh0{mgbcoC
zGN@|))4VZtN^#5<gQ9t9Zy0{EoUP^3V+>M$XSm1npf&GVMdv#|87o(&*S%fSqsqX*
Oz~JfX=d#Wzp$P!l#nLJO

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/icon_reply.png b/app/javascript/images/mailer/icon_reply.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bce4955c98c70453b7f060d874539d7355ce1a0
GIT binary patch
literal 391
zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4mJh`hT^KKFANL}EX7WqAsieW95oy%9SjT%
zoCO|{#S9EWB_ParFHOFJfq_A?#5JNMI6tkVJh3R1p}f3YFEcN@I61K(RWH9NefB#W
zDFy~c7Ec$)kcif|SJ(R;HIQig`02QeGgC!C43m^|liEWKlLdk--Ub=#9&xN|cp{;4
zu+d$aLq$U5r=r<L9ow6c*K^YPW3PYD{QWhXLs?mwGeP-!%xcbu=87$gW0=++7WHZ8
zc^|((?B03@l|A;2tPejlTjmvZTswM4)#jM>x(${t6;t)+@QcPhWt^P)DJlK??Mzly
zb;TC<m9oZ{^$rMM3szlc?0H9()8x$&c01AQ8$0b~o=lq&wl6<XUVO$wYomXX+Lo$f
zWllZ?UE6QjA3w<?*m*3h$8=6;U*<i}1!^0=L^s&(nYMMqWbZ{+lS8hZ<kqw1o+7+0
p&)~+fTCv8E4c03Tobc$W&zg5TFjQ7dnt_3V!PC{xWt~$(69CVEk--1}

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/logo_full.png b/app/javascript/images/mailer/logo_full.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c4f332872011decb9658a01e0d4d9e26500485d
GIT binary patch
literal 3052
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

literal 0
HcmV?d00001

diff --git a/app/javascript/images/mailer/logo_transparent.png b/app/javascript/images/mailer/logo_transparent.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fda4f67f66d159184eb72272f337281c44f16be
GIT binary patch
literal 627
zcmeAS@N?(olHy`uVBq!ia0y~yU=U+qV36QoV_;zTw~yDGfq{Xg*vT`5gM)*kh9jke
zfq{Xuz$3Dlfq^jtgc(_arS~&1Fi4iTMwA5Sr<If^7Ns(jmzV2h=4BTrCl;jY<rk&T
zerF@az`*#y)5S5wqjT*v+w2fWk+%6eZ%&m63==rgv7kvo(dhs`OY)+!BwaJkvSr`&
zGtwX45AfLDDsfb8YJ5j)mxhO#n~8>+!cB)GHe%&sZH3d{9IJhJ;Ne{3_qNXq(w?yi
ztzb0}%;mYk|E4#rJ8|^^uPvz$Obz(Yv<sM>T<EuoJ5QebRf=AfXYRlD3~t}AN)7?-
z4gCi`*r(?3$2TOi8eDbzqG;fE^YP^ae^cJd6=<#NWiGyXulayUmaX>liB=QbRyocM
zP5=Dm3gg$pWr6OwDNkHBB}VOC7k1@g#?%wOTZIDjQ>40AWJ^YNA2jAH*FO27?9h3a
zb<;A}h#yD@iZpK7AocfRi~aS3@~j=zvpC~*H%(j0Jnvhj#>euq4$tp-B9a&N*F2Z}
z&aEwa>fW21N*`K&8T~rGTi{<DV_liz9&U@9tqI)oqYkwz2ZrXm)Gy&~oT##I)`$EK
z^|kYVta+#1z;8Qchv+@V$BHfTtRGf6Uzjh)a-YfgKm^A^#;02=86ucIUEIyJhrN%X
zT_b<(-6_Fa9Di2nFr9biIGt<1+%DttYHQn+J94iizm}{0@wVL`dv-#{eU^7=uV)|N
zexUiGchmdk1A(Vb|1081Tsiy9`jzq35^MXG8$4-=VqM3Ou369MrkTH8_JGs{hIx#o
g4?J(H%m3iMG9|?}KD2)}0|Nttr>mdKI;Vst0N%z2@&Et;

literal 0
HcmV?d00001

diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index b3bcc9209c..dbe070f9a3 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 e41b910699..6687546fbf 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 f26b08b18e..7d1b494d09 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 1290e2bc41..31a2b74454 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 41efeafaf6..44f1911c40 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 619c580ce7..479fed41cc 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 61c6ee6be8..85b202cf93 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 0f999bcbcb..1f088a16f4 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 45dc066509..7e82f23e4a 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 2e9377dff1..26314a2179 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 3ae2260939..e3be8e295e 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 c0e6775d4a..5d9ce6a753 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 0823efa1ae..d734da67db 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 8223294905..26747e76b3 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 4ea3ce80c7..84d83cc660 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
-- 
GitLab