From e164ff30856fc9ecc400d003e2f864ddc1f37d2a Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Thu, 14 Apr 2022 15:03:06 -0400 Subject: [PATCH] FIX: Email styles for Gmail app dark mode (#16482) --- app/helpers/email_helper.rb | 26 +++++++++++++------ app/views/user_notifications/digest.html.erb | 16 ++++-------- lib/email/styles.rb | 10 +++---- public/images/emails/comment_dark.png | Bin 492 -> 0 bytes public/images/emails/comment_lightdark.png | Bin 0 -> 557 bytes public/images/emails/heart_dark.png | Bin 606 -> 0 bytes public/images/emails/heart_lightdark.png | Bin 0 -> 671 bytes 7 files changed, 27 insertions(+), 25 deletions(-) delete mode 100644 public/images/emails/comment_dark.png create mode 100644 public/images/emails/comment_lightdark.png delete mode 100644 public/images/emails/heart_dark.png create mode 100644 public/images/emails/heart_lightdark.png diff --git a/app/helpers/email_helper.rb b/app/helpers/email_helper.rb index 3f15a570a80..10209c40ca3 100644 --- a/app/helpers/email_helper.rb +++ b/app/helpers/email_helper.rb @@ -63,14 +63,6 @@ module EmailHelper color: #dddddd !important; } - [dm='light-img'] { - display: none !important; - } - - [dm='dark-img'] { - display: block !important; - } - [dm='text-color'] { color: #dddddd; } @@ -79,15 +71,33 @@ module EmailHelper background: #151515 !important; } + [dm='topic-body'] { + background: #151515 !important; + border-bottom: 1px solid #454545 !important; + } + + [dm='triangle'] { + border-top-color: #151515 !important; + } + [dm='body'] { background: #222222 !important; color: #dddddd !important; } + [dm='secure-media-notice'] { + border-color: #454545 !important; + } + [dm='body_primary'] { background: #062e3d !important; color: #dddddd !important; } + + [dm='bg'] { + background: #232323 !important; + border-color: #454545 !important; + } } " diff --git a/app/views/user_notifications/digest.html.erb b/app/views/user_notifications/digest.html.erb index 5580d1c5c21..e7750ecbdda 100644 --- a/app/views/user_notifications/digest.html.erb +++ b/app/views/user_notifications/digest.html.erb @@ -160,13 +160,11 @@ - likes - + likes  <%= t.like_count -%> - replies - + replies  <%= t.posts_count - 1 -%> @@ -240,8 +238,7 @@ - - +
@@ -319,19 +316,16 @@

- likes - + likes

<%= t.like_count -%>

- replies - + replies

<%= t.posts_count - 1 -%>

  - <% end %> diff --git a/lib/email/styles.rb b/lib/email/styles.rb index df516ffa9dc..81aefeb2b84 100644 --- a/lib/email/styles.rb +++ b/lib/email/styles.rb @@ -338,15 +338,13 @@ module Email # When we ship the email template and its styles we strip all css classes so to give our # dark mode styles we are including in the template a selector we add a data-attr of 'dm=value' to # the appropriate place - style(".digest-header, .digest-topic, .digest-topic-body, .digest-topic-title-wrapper, .digest-topic-stats, .popular-post-excerpt", nil, dm: "header") + style(".digest-header, .digest-topic, .digest-topic-title-wrapper, .digest-topic-stats, .popular-post-excerpt", nil, dm: "header") style(".digest-content, .header-popular-posts, .spacer, .popular-post-spacer, .popular-post-meta, .digest-new-header, .digest-new-topic, .body", nil, dm: "body") style(".with-accent-colors, .digest-content-header", nil, dm: "body_primary") + style(".digest-topic-body", nil, dm: "topic-body") style(".summary-footer", nil, dm: "text-color") - style(".digest-topic-body", "border-bottom: 1px solid #454545 !important;") - style(".secure-media-notice", "border: 5px solid #454545 !important;") - style("code", "background-color: #454545 !important;") - style("pre code", "background-color: #454545 !important;") - style("blockquote", "background-color: #454545; !important") + style(".secure-media-notice", nil, dm: "secure-media-notice") + style("code, pre code, blockquote", nil, dm: "bg") end def replace_relative_urls diff --git a/public/images/emails/comment_dark.png b/public/images/emails/comment_dark.png deleted file mode 100644 index 46bdeaaec0ad5eebef1a4dfb64ec027a8496ec4c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 492 zcmVPx$rb$FWR5(xVmAz|KK@`M)lSGq%h>aMv6H?h5u(8$J&O)$=iC86~T`Ega3lT+Z zE&Lvxl9pA>R)KrKE8rxsI{++8#()iA9tf$q0Nw(g1E(eZ z8VIy+ne7w658!S9ZvroXSxMh)PaTG#q`$V$0iS_84e%v!LDF~I#}5g(X?q4(2NsSJ z@C&f`AMofNrB60};*OB_)>xlxdWCH}9&HxPct_H9pYTV8JqNr8mdkplDjk)tmI=Yea$4IoUn zfJc=?pK6@B0JfxQ@wM8;m+gtrmz0Hxvg^QW-~sRuI0M|zk<$2}@UVR>+XL7xe==!f zJM7-n#<#iK3XQOuET50&Wg0~lyL$mAN&-ormCl#ayJDR?$_pRJusv1)(>Wb;>}}g; i6Pm>~$&(uTS@1tO5)T>>t!!HW0000B`u1jjb9t^~h?*NQD{>hoMvL$nLPVf42 z@WQcdO`gLqHm1I+yrH_HhXPnfXB>qBhv zIsP4MeLCHrB(bGSE&cm}cb;bMu_EQn1q~1UY$mw&lpWFB*}AHJ^RmpP`IDs`iaCzW zh*aQeS}<8S#5O^wN&Lp;+beFxU-Px%7)eAyR5(wKl)rC|Q545N-?l1Z@&`ynQnW}U5(5ho1Cy=>gG3@)zXl0|!62rF zs-lyngN+a?78bQpghBWNhzX@fzEAFL?)$i}_kE}5Je;{&B7j6i+2Ydm1&N<(K{gOT#y9W3GEJ!-sZaE_6fTJlsFX?zC=Mk_27%^}P zI3#H_RXd!jk))**y8;YIx>&UCN*()^V()>62D-h=lI}*t>O8NM^L=5La_X6hJh;X|Lz=7<;tH1?dRMNYCpapCMu)0j>4X^^e2Al!5Nm`5uUkdJGDI&&z*T4-)XWM390k$_IRXUl4 zO7Fd%ZgaMy&0=#pfR#$~OgDOOfsep+t+L$dKfp?*hMq_VEWo*RcdqPs>DMZ-QmJpG sW&5mlLG%U8w~Li8glh^YW9@DF3$ed#Ye~k@TL1t607*qoM6N<$f?3TCZU6uP diff --git a/public/images/emails/heart_lightdark.png b/public/images/emails/heart_lightdark.png new file mode 100644 index 0000000000000000000000000000000000000000..bdfc9307a8a0d4cfe3a7263cb5f9ddd44e4248e9 GIT binary patch literal 671 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VV{wqX6T`Z5GB1G~m(&Q)G+$o^ zEg+kNfw4W4fd!-lh^2s-fq{7eBLg##W(0{XV1mnvEMP{kK?*nB{qPq^$z;0thX83N zkQfkvT%rM`fow)I2D!M^K$^+Z#WBP}aLc5YZp09HY8NE zIWltE%HntP?gdt)2a2?RdDpW3wbj>q_8$5l)^h@|L^qWdSIaZ|8KQ}#|6l^3<{0p1cs)6|NbrE z6jnQvpOKNk{Lz!q!B$6D-ER)3iL$h-e82{|l#KFnbMr11xpRMhezt62JInGams#pe z%R-Ti1Ve%K3|c}5Cb$UCuqxH!4|toj;8vE2W{BQ}Z9EG17(#UVw3;9I&NOnB(AdwG z5y9vr!k>L30@>V=c~0>