From 640d312734963cb36edfb3b4e1721a71ec5f6339 Mon Sep 17 00:00:00 2001
From: Vincent <git@vincenttunru.com>
Date: Fri, 3 May 2024 15:50:31 +0200
Subject: [PATCH] Add/use dark mode versions of email images

I'm not 100% happy with email authors needing to not forget to add
the <EmailStyles> component, but I suppose in practice people will
start by copy-pasting an existing template anyway.

I also bumped the size of the question mark icon in the footer to
render at 300 DPI at 34x34px.
---
 .../question-mark-circle-purple-dark-mode.png | Bin 0 -> 3558 bytes
 .../icons/question-mark-circle-purple.png     | Bin 1032 -> 3884 bytes
 src/emails/templates/EmailFooter.tsx          |   9 +++++++
 src/emails/templates/EmailHeader.tsx          |   9 +++++++
 src/emails/templates/EmailStyles.tsx          |  25 ++++++++++++++++++
 .../monthlyActivity/MonthlyActivityEmail.tsx  |   2 ++
 6 files changed, 45 insertions(+)
 create mode 100644 public/images/email/icons/question-mark-circle-purple-dark-mode.png
 create mode 100644 src/emails/templates/EmailStyles.tsx

diff --git a/public/images/email/icons/question-mark-circle-purple-dark-mode.png b/public/images/email/icons/question-mark-circle-purple-dark-mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..3696d44d68e272735851c06834ada55a672fad72
GIT binary patch
literal 3558
zcmV<C4H@!@P)<h;3K|Lk000e1NJLTq002+`002-31^@s6juG;$00009a7bBm001r{
z001r{0eGc9b^rhX8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H14Rc9E
zK~#90)t!HET-9~QKj-bPq%{y31Fi`+AwO!7kfCv0Y_Eh9L*fQ#0%Zu3G{J=$0>#u0
z!qy6BI-}WX8(S;MrqP4}cM7IXOIkCb7=wWZti(tw$5qXb+C>h50w%$3!IBO7wc2<3
z$3DgSwR`WreY-fH8IP^^&b{}%uilS)&pr2ARFw~lu2yDCh6O6rI8dWd1Iz|a1J3mR
z2KWFt27G{WM1(^Kuei{g8D;;{_5AOLbO}f~1?)*MW4Matj&QlcWx!_vDY9AxUPjq1
z!gCto-(&R*7VoVcr57-Pv$u*`S6G4aO@xn>v_0iG!egRrf9n%GdHwZdO4(e=1nfvq
zRS{*Sz&haLC27RWYofFso52HDu4cFt4FoP=Pl6dERjfj|3ph8>%Kh^jQCcHI+_$ia
zfgmdmRKV_LzNW$tfC~bvG*}KR)Yry&B&Z4l5wLqB7pOx!@YUj7Dm@B2R9Riu$eYF1
zRkVPqB!2=tK(^cQyMuCE;5$ni`PX8q@h#x4b}DBM(S~wIF%INmP_z9%B-<a1mY@w4
zXg?Mu?)M|(OTb@j;4C-9PK70Y8lA)egbv^($#5v+aHwvOcWA<$V3ok>j4~(WGGB!n
z5iV9`8Nz1*@S&3kSI6pkuh4=83%G9+^F~K`8u)afjd{4hZh>tw%2SKK#}S|PWc_Jj
zPFlIrffWj01RS4L9dO`^#c>W7Qm7ySQyaKYLp&oeuVD9}PvM7=F!x__7jO9}Z=|!C
z^961b;SQkMM-^|n@JDrVdTk3>3%G9+^U|Yq`Vg-lXm+CfaPex67g*L8J<U`PJFFI$
zhC)X^3U7s=*7i=c67UxrI4cuk4~0LrJHugCmFkW&vFH1o8xGS9+(02?Zsi~qEVX$j
z8U@_dPUV?{bQJi(IErv%tbwNrC{r>zTewP;hXl?ppjcO5l*>(DXX6WZ<`8WKiuW@Y
z7Mv>L0n|0{q(t}}u&01xwPy~JG#TZ+1G|!ZU0{0wjc%)$$;}IIC0#(7vax+Tp}DVf
zKX9{c8G-AT#Q90i^SK1{hG#Ee|21og#c3oPpYzSZ1QqX9GFKcTVVBcg=nsc@|B?pY
zDW=|WNOzJJg|(LUeH!9(wQG4}+RAbXm`d_E_G8<YSe&?}?G!qboDovK;|f;@)B!W5
z7%6Y7@I1=4w?DyC#m4!%leF53sIa3p&Nb7Wn^wTCX08$8->fQEw$?VX5+8S7&lV!-
zei~F+3(P8@=&P>q-MR*zEVRvWNGi!gzzRESz7}g>=aj>f1?)*MV<gH!;A0k*b_@@&
zd|4BtR!)qgtCiW}vK{zBp=HNVW$Vl#Zu?9VBYw*FY#}nz$Fsmv3-i~BaM9%Hf+=6&
zkt$YUBOV-em2dkIZ(j>@#APo<hzB6TP5m=?x+gKsBX7aNTS+_cErtKHF#kAdZkv2?
zf`A<fs=P?D8R5pdIKQ@Y^&|%qRE#Q*5LD1rSvC@7D?TTu7RNb^a+76S>vpwMIsVWD
z0V|@c#3l?c{IlPFUSAbWWIq%^a(!2l+x-@<ZR82Chzknm%^a90_DKN~INk)1iT=^F
zmE9EfY~UOb*7zxFLg24^+6o$JOeDfxzzK_n8W?xC|5m`xC||^G_N;m7_xOzu7l}Bm
z0ZuoVDX^bx2Yw6i2+G?Q)z3=1-0H_KfLJ|mBeYtWezL3i<VPnw_K#3Do@S!2Lb=zM
zhk%N)U-`NSUtiL|e~v%cvxP{ykDC?#4yedkzp@h8fX~i+CPRBjSZj>n2rGb}gV&Am
zx-RbkXXGoV@VB*b{>qPYJ#CyllHmxs$KM&p;q!~v@lvijQmtHzn|oMAw(@y}21O^d
z(ZU9lyA5XjL^wBA&!7V^T*Yz>;sI_X%>8~H8&-aw{K1RPeBuGb*6}Ftw4o`#k#Ydk
z;Xar&oiLSZ9pQ5DF36GW4+eG@6W0^h&{tD>tm-jDR9wgSj?GK$THZjikEg+rlLC5)
zJ_dWX72_B}B=2d*sxylkf*axnkPD;y$YdgT0(P}Bn{1X;-YR9ZxcHtr{CD2-@Jmx2
z2NP5P*XFYkhyN+ev#GeS%fjs9o;J>QB*OyCz4(L0&YpSUpspOJdkIe+sE?;3LAXE4
zy}+mPm<_*IX+I&9i@G?!MtH?w=8R@o;HXeztT8)pTQuP?-xPRp{4s??8RZ-Ka{9Vk
zSzH-qALc;luAs886n2|zT&M|qnV}}~ejRPO<SyRoNbrXhReS~ELf{RF@WiD##Op{9
zu8Oizp&q;W-iLzl6Tnekve2a_tjc_gVR+Gx#TZ`n<_YglP7WrhsEqOxg+I2bSD<@I
zoX3Lj5g-G-#^0DS-$9sTvKvivC>Xcw>CZ-3ti%Hb)nye$PA81ViCA2-Fvr0>HYJlT
zZxVN^g_XdcTAHiEZLz!AAEXZzr*YK6><kBtGxvjjf~J1yOmYUw221l%gj;IkMfOpr
z!JApk`$1AqK+_#)4)Fv?NV%QtQU?<+xDbmq@IVRO$(xEIo`9zmD#l5k5ruWbgIrP<
z=ReBgR35@)@36D-*qDM0f#Kz{<Q)~Ma${{HKQ5C?rs&iO2lFEu?MR%A8<r9$!UBWI
zv*i-6XA2RaDxZyb0={pmEEM6Kpd8DGD8HBAfXB<>2f)Y&R`1~x4r)%Bh&UF*y#Nr+
zAM#R{cgx`ifDT(+v+|CEV;*H#jhBPK$-l<Uamtsp<XBv@La!qh!!!{t4#utgxSD^=
ztu6=4;Rk?PT(dy0<5~!)%CbPbGEf(%huk5rU9m=9E{7i;<{)#3UMDlkeoSLX;nVwC
z%wy&NP<6N#<);%4!aogH@U1em4?t=&=YjDNcAYf)9dEI+={GBB<;q~(%TMh(j>Z~U
z?!txQuv~>t)yBDD*`4&2qkRAwwYt_97p>>rZ2wN#jp3OW;RfKr0Q|GUTWSzk7_AUg
z%_(mJ&w)3wF2ZvP-_2hu%Q~AmKZpf-COQ&?qo*^U4Ckelqn8fx@|2ZJC8B#H7vPxF
z-7=CD&;f`H@>A5fhQkr2rgsHRcMG>vM){SS;eZRzgoGDTQQqiovCN<<7KgvUJV(@*
z9vCN}w+Pv|hE{|-I__a+(N5+dm1MIje-E5L>C{|R9!w?qeyQ39NNr}8!YY%U!1iTL
z48gd022rb+T6IO5zbwMXoOHHu6>z7)Y<+htUoJ)a0GehE7QvH@oYd;K0xlWm=fG>G
z!s61<ndGB>oy>)!c1h~$S|)%N$i7X?6T77ISL+&he(Z;n@xUfrQH%60;UfZ@e0iAz
zZ^GPmG0&wzwmn8B&1Nj7HxODF*KeK>P#qfLK`^K73Vg$R<N{&vTofjz&gP+#gzqJ-
z)6$*fY89@tFg@H?HF4^6f+NeC7!sw;rcp=P>h;)*#+!ezOWIUk4YEtKZxizr%V`0j
zb@Ighl;31zi2J}QzvLX!JnRJ?gWz9mjMU-bfZEF@ypQr@@<-&y_|@>h)bze70xoP~
zK-4;qdFe<W|3LBEHxbJ4H;OTR?w6G=?Zvj`A$?IE0BUWFU17~w*JV7@zDt%g^0>kd
zOGj38Cuy;?&B>zmysOHUd6Ifw4mo^fVI%#;wgr%CrcL16R>sPsxmHExd>N~<8tew}
z3TwNQv{K}qSl7sbiUAfXtVDQ>>~QH}5&nF5kk2n#$Lqz^?;)vXHX+no+8+x?au0L!
zE_Y3}@Kux@SPCP;k0RBqJXM#wb|eT_R&hVVO3NaO!*yP2@wDXa4#XPRDcHYrRJmcK
zkLSBLo_bq9?M*VbBFgRp!~^A?eByyc%Gj|eadJnAr(==purJke>TCnmo#bj4UXa2%
z;d`owjM@5jn@;pJQ=Jxmrtk*^H~_HIRqiN92y8k!lYG>Hjo2<}J;?zgd?AocC&t*D
zWNrq!d~ADi0--gNq5aakIaXj<U!*oOOVh0Jmad&<EHIHbiBKD>w^|)l*v31ZNopK;
zhN<BuGs<xs?p25TaxI@PmaaBF=480t3rYD&NqIArVfmu<_W6(nZ~e44$y`@?x`;ii
zT(WCDwz;s&&yv~kq&9P&j&PMX<**e0U8(;f!WFi6-Wa|%A4_d!7HJ;GvKOD<171Pt
z5O~pbIV6?z4j<>p<ebEg1mS3uIT@Gvj>CNKeS8__*)tpVWL&QC^NJ~I`@1s-Nh+)+
zfT7$p45^p5BiS%h-b5dtD9Sz6L)`6m+km1sVDvVqc#z-04H$8_CDu^TzBp4TI<8jR
z$YUB}K>=gu4<F^xaD>kmD;@;A39UEu`vD)`w#O!3Q)P{}#6J)MjqJu6*hz$ofO^YS
z=H=or!kxo|Toj~uP{NJ4cePVFbAX$?JqA8ml19wDiqKL$z*fH>2@_@6OMmZ17OKOa
zX*T|56a6iQeqe_<{Ns{!JWGI!Z>FQH{~19?f~txtz9jG^gv)@7DgHI$0xv4;R^i$7
z0MAVqIW84t6>u^=ZJa%tVS$@nuXmwBjRUhaI}Dr2$!W&-fj)r~svJQ$gz}1n=ylTU
gU$nk_slSu?e>hv8G{-?Je*gdg07*qoM6N<$f;2d}zW@LL

literal 0
HcmV?d00001

diff --git a/public/images/email/icons/question-mark-circle-purple.png b/public/images/email/icons/question-mark-circle-purple.png
index 93e235db9e8090a4a809cc853ee3c4a269e8d2f6..5247f3790629a9f97eb7c9dbe67ac9582dc3b523 100644
GIT binary patch
literal 3884
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

literal 1032
zcmV+j1o!)iP)<h;3K|Lk000e1NJLTq001HY001Hg1^@s6I!6n_00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1D#1kK~#7F?U%oA
z6EPIW-}AXFL~X=UP$^3PgKLCX34cM$22-yPBsSW=pzX-ic0fX<(Bv;5-PlO>l3X{K
zdh`d)#!+=Z;?Cyzl3bjtlRF~Dex+7t``Pbf`}x@cxYo5s3t<e|cgrOv<svXPC8aEM
z20|Y|9twcEd%9bPe^h1=JMZKn$6q1H6>^#%WlM0LM65s%RNZ#PgZ~9$-+8`>7VM<~
z7=b`;xMv?KX||~#v<+(vU_DXY00uRSVci1DR}~?I`7i{VygO8Us2kIEt<!dGz_=g=
zh=wX3q{M(-cv-+8pcRBtRv2sOU^CAghPb6wZ8T4JogWuXFX^=HANYEmDz`71)jN|#
zHPMo)Q&7`4=MUSLt*<73#uc$|I|a0?&xlyiAl3(L?v+<i$hBVFNIESt2$qw<S-e|T
z{nolgUt9)ru3zz!J{g$A`H}|FxB{WJOu(idylTdb^OimH!q#n7Uj^AM=2?!fm|Pk`
zuoG~R1n15GM8V0&af9g52&)pI+H-^`H<RNLh#niSAPa~}R{CnV-dk_LAmH(gDXA?t
zk9W6PC%X>0+m6_1h~$_m!Rf1_e58UfEz&_HrKEV^k~d%d1)O^kJS96RVWA7+fkDV%
zUz@<9!SA4?HX|XxO}4vU#TOQz7glagt(HCG*qF19daFqN_rV|$V!iK`O(om8p-<mv
z!txF6pl=s~^)Ws<QdV1M@7GOzqOpRY^DX6Eve|rUGRmH%)ZdFI39AI*z?ixUg77{5
z{u7S8TbPh>yO`j$QMUS6w0-G$gpRJ?Z<Hk%Au(~I9vxxR>AIpYjy(!!Hx)zx#xtY*
zumB^ZoKrwQ7D3=ZiV)e7=CppL-PEZ#TmDJwm+yeVqhSvnd$zpEB&?*`(Un12_oz$c
zHBa7U3|0x-8tEDg5yi;k_#1I)m>qJy*B@I}jboWA1rN5Oq}2f_sk;S?9-!9$L}UI?
zedFf<tp;5g6_cIu8PN9K-_uj`-)QhBJ(%gqBGA>|(CyAITAyYni;a-yR$Iq!Toc5=
zdj^s0cIsf9(+DN5@S#_|0idL|RDT$O;VF?B!~_!qNkMyUxpDT5@<d1%CR<1Vq(Wo@
ziC|`5I1x<ur$c5@oFTB~FDE;-G*b&Q==`GTPTzX4k3#%{PD;<G0nq=~g6E!^V#nNN
z4Be*~pu9ob0JiMr8~XO7M4z&8?O==_Sl7B%n*IWH-hhoIgK2jF0000<MNUMnLSTaH
CSl;gd

diff --git a/src/emails/templates/EmailFooter.tsx b/src/emails/templates/EmailFooter.tsx
index b9aa88ec2..bf8915801 100644
--- a/src/emails/templates/EmailFooter.tsx
+++ b/src/emails/templates/EmailFooter.tsx
@@ -23,6 +23,15 @@ export const EmailFooter = (props: Props) => {
           <mj-image
             alt=""
             src={`${process.env.SERVER_URL}/images/email/icons/question-mark-circle-purple.png`}
+            css-class="light-mode-only"
+            width="34px"
+            height="34px"
+            align="center"
+          />
+          <mj-image
+            alt=""
+            src={`${process.env.SERVER_URL}/images/email/icons/question-mark-circle-purple-dark-mode.png`}
+            css-class="dark-mode-only"
             width="34px"
             height="34px"
             align="center"
diff --git a/src/emails/templates/EmailHeader.tsx b/src/emails/templates/EmailHeader.tsx
index aa4654b76..09317de44 100644
--- a/src/emails/templates/EmailHeader.tsx
+++ b/src/emails/templates/EmailHeader.tsx
@@ -21,6 +21,15 @@ export const EmailHeader = (props: Props) => {
         <mj-image
           alt={l10n.getString("public-nav-name")}
           src={`${process.env.SERVER_URL}/images/email/monitor-logo-transparent.png`}
+          css-class="light-mode-only"
+          href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=header-logo`}
+          width="200px"
+          align="left"
+        />
+        <mj-image
+          alt={l10n.getString("public-nav-name")}
+          src={`${process.env.SERVER_URL}/images/email/monitor-logo-transparent-dark-mode.png`}
+          css-class="dark-mode-only"
           href={`${process.env.SERVER_URL}/user/dashboard?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=header-logo`}
           width="200px"
           align="left"
diff --git a/src/emails/templates/EmailStyles.tsx b/src/emails/templates/EmailStyles.tsx
new file mode 100644
index 000000000..4ca524cd6
--- /dev/null
+++ b/src/emails/templates/EmailStyles.tsx
@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+export const EmailStyles = () => {
+  return (
+    <mj-style>
+      {`
+        .dark-mode-only {
+          display: none;
+        }
+        @media (prefers-color-scheme: dark) {
+          .dark-mode-only {
+            display: unset;
+          }
+          .light-mode-only {
+            display: none;
+          }
+        }
+      `}
+    </mj-style>
+  );
+};
diff --git a/src/emails/templates/monthlyActivity/MonthlyActivityEmail.tsx b/src/emails/templates/monthlyActivity/MonthlyActivityEmail.tsx
index d82a5bc03..2628c9df2 100644
--- a/src/emails/templates/monthlyActivity/MonthlyActivityEmail.tsx
+++ b/src/emails/templates/monthlyActivity/MonthlyActivityEmail.tsx
@@ -8,6 +8,7 @@ import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
 import { EmailFooter } from "../EmailFooter";
 import { EmailHeader } from "../EmailHeader";
+import { EmailStyles } from "../EmailStyles";
 
 export type Props = {
   subscriber: SanitizedSubscriberRow;
@@ -38,6 +39,7 @@ const MonthlyActivityPlusWithManualRemovalsEmail = (props: Props) => {
   return (
     <mjml>
       <mj-head>
+        <EmailStyles />
         <mj-preview>
           {l10n.getString("email-monthly-plus-manual-preview")}
         </mj-preview>