From e6c1dcb146ff9a614179fe4852d8b4673d8a922c Mon Sep 17 00:00:00 2001
From: Kaitlyn <kandres@mozilla.com>
Date: Mon, 28 Oct 2024 12:08:22 -0400
Subject: [PATCH] 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 (
     <mj-wrapper padding="24px 16px">
       <mj-section
-        padding="10px 12px"
+        padding="10px 6px"
         css-class="hero_background"
         border-radius="16px 16px 0 0"
       >
@@ -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"
+            />
+            <mj-image
+              alt={l10n.getString("public-nav-name")}
+              src={`${process.env.SERVER_URL}/images/email/monitor-logo-transparent-dark-mode.png`}
+              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_dark_mode"
             />
           </mj-column>
           <mj-column
diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx
index 0af96d49e2..7ac7d844d2 100644
--- a/src/emails/templates/HeaderStyles.tsx
+++ b/src/emails/templates/HeaderStyles.tsx
@@ -32,6 +32,10 @@ export const HeaderStyles = () => {
           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;
         }