From 41559a542a0437c4b52fb8ae540e455764126e39 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Mon, 28 Oct 2024 11:52:13 -0400 Subject: [PATCH 1/8] enforce white text on darkmode --- src/emails/templates/HeaderStyles.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx index 52fc7efccd..0af96d49e2 100644 --- a/src/emails/templates/HeaderStyles.tsx +++ b/src/emails/templates/HeaderStyles.tsx @@ -25,10 +25,8 @@ export const HeaderStyles = () => { background-position: center bottom; background-repeat: no-repeat; } - } - @media (prefers-color-scheme: light) { - .hero_background { + .hero_background { background-image: url(${process.env.SERVER_URL}/images/email/hero-bg-gradient.png); background-repeat: repeat; background-color: #e4d2ff; @@ -40,6 +38,10 @@ export const HeaderStyles = () => { .hero_background { background: none !important; } + + * { + color: #ffffff !important; + } } `; From e6c1dcb146ff9a614179fe4852d8b4673d8a922c Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Mon, 28 Oct 2024 12:08:22 -0400 Subject: [PATCH 2/8] add new logo --- src/emails/components/EmailHero.tsx | 11 ++++++++++- src/emails/templates/HeaderStyles.tsx | 12 ++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/emails/components/EmailHero.tsx b/src/emails/components/EmailHero.tsx index 6065df9947..458e61a561 100644 --- a/src/emails/components/EmailHero.tsx +++ b/src/emails/components/EmailHero.tsx @@ -22,7 +22,7 @@ export const EmailHero = (props: Props) => { return ( @@ -39,6 +39,15 @@ export const EmailHero = (props: Props) => { href={`${process.env.SERVER_URL}/user/dashboard/fixed?utm_source=monitor-product&utm_medium=product-email&utm_campaign=${props.utm_campaign}&utm_content=header-logo${utmContentSuffix}`} align="left" width="200px" + css-class="monitor_logo_light_mode" + /> + { background-color: #e4d2ff; background-position-x: 0; } + + .monitor_logo_dark_mode { + display: none; + } } @media (prefers-color-scheme: dark) { @@ -39,6 +43,14 @@ export const HeaderStyles = () => { background: none !important; } + .monitor_logo_light_mode { + display: none; + } + + .monitor_logo_dark_mode { + display: inline; + } + * { color: #ffffff !important; } From 3b4934c17349dbed87ade4e9c919912c503cde5f Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Mon, 28 Oct 2024 12:30:33 -0400 Subject: [PATCH 3/8] add new monitor logo --- src/emails/components/EmailHero.tsx | 9 --------- src/emails/templates/HeaderStyles.tsx | 13 +------------ 2 files changed, 1 insertion(+), 21 deletions(-) diff --git a/src/emails/components/EmailHero.tsx b/src/emails/components/EmailHero.tsx index 458e61a561..9d944f1d2f 100644 --- a/src/emails/components/EmailHero.tsx +++ b/src/emails/components/EmailHero.tsx @@ -39,15 +39,6 @@ export const EmailHero = (props: Props) => { href={`${process.env.SERVER_URL}/user/dashboard/fixed?utm_source=monitor-product&utm_medium=product-email&utm_campaign=${props.utm_campaign}&utm_content=header-logo${utmContentSuffix}`} align="left" width="200px" - css-class="monitor_logo_light_mode" - /> - { background-color: #e4d2ff; background-position-x: 0; } - - .monitor_logo_dark_mode { - display: none; - } } @media (prefers-color-scheme: dark) { @@ -43,15 +39,8 @@ export const HeaderStyles = () => { background: none !important; } - .monitor_logo_light_mode { - display: none; - } - - .monitor_logo_dark_mode { - display: inline; - } - * { + background: #1e1e1e !important; color: #ffffff !important; } } From 10b9a2d4cea770e5ee1f4942aaa1d89dd15a1dca Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Mon, 28 Oct 2024 13:24:10 -0400 Subject: [PATCH 4/8] move styling out of prefers color scheme light --- src/emails/templates/HeaderStyles.tsx | 32 +++++++++++++++------------ 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx index 61449684c4..5ef2926645 100644 --- a/src/emails/templates/HeaderStyles.tsx +++ b/src/emails/templates/HeaderStyles.tsx @@ -19,27 +19,31 @@ export const HeaderStyles = () => { supported-color-schemes: light dark; } - @media (prefers-color-scheme: light) { - .footer_background { - background-image: url(${process.env.SERVER_URL}/images/email/footer-bg-shapes.png); - background-position: center bottom; - background-repeat: no-repeat; - } + .footer_background { + background-image: url(${process.env.SERVER_URL}/images/email/footer-bg-shapes.png); + background-position: center bottom; + background-repeat: no-repeat; + color: #000000; + } - .hero_background { - background-image: url(${process.env.SERVER_URL}/images/email/hero-bg-gradient.png); - background-repeat: repeat; - background-color: #e4d2ff; - background-position-x: 0; - } + .hero_background { + background-image: url(${process.env.SERVER_URL}/images/email/hero-bg-gradient.png); + background-repeat: repeat; + background-color: #e4d2ff; + background-position-x: 0; + color: #ffffff; } @media (prefers-color-scheme: dark) { .hero_background { - background: none !important; + background: none; + } + + .footer_background { + background: none; } - * { + p { background: #1e1e1e !important; color: #ffffff !important; } From f4154df9c7679101c20c92d0a5cf00bf9a5ea6db Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Tue, 29 Oct 2024 07:24:49 -0400 Subject: [PATCH 5/8] revert padding --- src/emails/components/EmailHero.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/emails/components/EmailHero.tsx b/src/emails/components/EmailHero.tsx index 9d944f1d2f..6065df9947 100644 --- a/src/emails/components/EmailHero.tsx +++ b/src/emails/components/EmailHero.tsx @@ -22,7 +22,7 @@ export const EmailHero = (props: Props) => { return ( From 1d1c396ef9cdec4ea4f54f5d3602afcb582bfb35 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Tue, 29 Oct 2024 07:28:36 -0400 Subject: [PATCH 6/8] pair bg with color --- src/emails/templates/HeaderStyles.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx index 5ef2926645..81adf5007e 100644 --- a/src/emails/templates/HeaderStyles.tsx +++ b/src/emails/templates/HeaderStyles.tsx @@ -24,13 +24,14 @@ export const HeaderStyles = () => { background-position: center bottom; background-repeat: no-repeat; color: #000000; + background: #fffff; } .hero_background { background-image: url(${process.env.SERVER_URL}/images/email/hero-bg-gradient.png); background-repeat: repeat; - background-color: #e4d2ff; background-position-x: 0; + background-color: #e4d2ff; color: #ffffff; } From df400a755ece2f9c292cd3391214a52c370be498 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Tue, 29 Oct 2024 09:37:07 -0400 Subject: [PATCH 7/8] universal selector --- src/emails/templates/EmailFooter.tsx | 37 ++++----------------------- src/emails/templates/HeaderStyles.tsx | 2 +- 2 files changed, 6 insertions(+), 33 deletions(-) diff --git a/src/emails/templates/EmailFooter.tsx b/src/emails/templates/EmailFooter.tsx index 15a1057d88..05dfbd30bb 100644 --- a/src/emails/templates/EmailFooter.tsx +++ b/src/emails/templates/EmailFooter.tsx @@ -31,12 +31,7 @@ export const EmailFooter = (props: Props) => { height="36px" align="center" /> - + {l10n.getString("email-footer-support-heading")} @@ -76,12 +71,7 @@ export const EmailFooter = (props: Props) => { }, )} - + {l10n.getFragment("email-footer-source-hibp", { elems: { "hibp-link": ( @@ -100,20 +90,10 @@ export const EmailFooter = (props: Props) => { width="150px" align="center" /> - + 149 New Montgomery St, 4th Floor, San Francisco, CA 94105 - + {l10n.getString("terms-of-service")} @@ -151,12 +131,7 @@ export const RedesignedEmailFooter = (props: Props) => { height="36px" align="center" /> - + {l10n.getString("email-footer-support-heading")} @@ -183,7 +158,6 @@ export const RedesignedEmailFooter = (props: Props) => { align="center" /> { San Francisco, CA 94105 { background: none; } - p { + * { background: #1e1e1e !important; color: #ffffff !important; } From 26fc5b3800111e17487b6980e52da2abd37ea4e4 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Tue, 29 Oct 2024 10:03:26 -0400 Subject: [PATCH 8/8] use light only --- src/emails/templates/HeaderStyles.tsx | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx index 98a67a266e..ca7c93d8b8 100644 --- a/src/emails/templates/HeaderStyles.tsx +++ b/src/emails/templates/HeaderStyles.tsx @@ -6,8 +6,8 @@ export const MetaTags = () => { return ( - - + + ); }; @@ -15,8 +15,8 @@ export const MetaTags = () => { export const HeaderStyles = () => { const hideBgImageOnDarkMode = ` :root { - color-scheme: light dark; - supported-color-schemes: light dark; + color-scheme: light only; + supported-color-schemes: light only; } .footer_background { @@ -34,21 +34,6 @@ export const HeaderStyles = () => { background-color: #e4d2ff; color: #ffffff; } - - @media (prefers-color-scheme: dark) { - .hero_background { - background: none; - } - - .footer_background { - background: none; - } - - * { - background: #1e1e1e !important; - color: #ffffff !important; - } - } `; return {hideBgImageOnDarkMode};