add bg image only to light mode

mozilla · Oct 1, 2024 · 50607fd · 50607fd
1 parent 973965f
commit 50607fd
Showing 1 changed file with 110 additions and 102 deletions.
diff --git a/src/emails/templates/EmailFooter.tsx b/src/emails/templates/EmailFooter.tsx
@@ -137,107 +137,115 @@ export const RedesignedBreachEmailFooter = (props: Props) => {
   supportLinkUrlObject.searchParams.set("utm_content", "support-center");
 
   return (
-    <mj-wrapper
-      background-url={`${process.env.SERVER_URL}/images/email/footer-bg-shapes.png`}
-      background-position-y="bottom"
-      background-position-x="center"
-      background-repeat="no-repeat"
-      full-width="full-width"
-      padding="50px 32px"
-    >
-      <mj-section>
-        <mj-column>
-          <mj-image
-            alt=""
-            src={`${process.env.SERVER_URL}/images/email/icons/question-mark-circle-with-bg.png`}
-            width="36px"
-            height="36px"
-            align="center"
-          />
-          <mj-text
-            color="#321C64"
-            font-size="22px"
-            font-weight="700"
-            align="center"
-          >
-            {l10n.getString("email-footer-support-heading")}
-          </mj-text>
-          <mj-text font-size="16px" font-weight="400" align="center">
-            {l10n.getFragment("email-footer-support-content", {
-              elems: {
-                "support-link": (
-                  <a
-                    href={supportLinkUrlObject.href}
-                    style={{ color: "#0060DF" }}
-                  />
-                ),
-              },
-            })}
-          </mj-text>
-        </mj-column>
-      </mj-section>
-      <mj-section padding-top="32px">
-        <mj-column>
-          <mj-image
-            alt={l10n.getString("email-footer-logo-mozilla-alt")}
-            src={`${process.env.SERVER_URL}/images/email/mozilla-logo-bw.png`}
-            href={`https://www.mozilla.org/?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=header-logo`}
-            width="150px"
-            align="center"
-          />
-          <mj-text
-            color="#0C0C0D"
-            font-size="14px"
-            line-height="21px"
-            font-weight="400"
-            align="center"
-          >
-            149 New Montgomery St, 4th Floor
-            <br />
-            San Francisco, CA 94105
-          </mj-text>
-          <mj-text
-            color="#0C0C0D"
-            font-size="14px"
-            line-height="21px"
-            font-weight="400"
-            align="center"
-          >
-            {l10n.getString("email-footer-trigger-transactional")}
-          </mj-text>
-          <mj-text
-            font-size="14px"
-            line-height="21px"
-            font-weight="400"
-            align="center"
-          >
-            {l10n.getFragment("email-footer-source-hibp", {
-              elems: {
-                "hibp-link": (
-                  <a
-                    href="https://haveibeenpwned.com"
-                    style={{ color: "#0060DF", fontWeight: 400 }}
-                  />
-                ),
-              },
-            })}
-          </mj-text>
-          <mj-text
-            font-size="14px"
-            line-height="21px"
-            font-weight="400"
-            align="center"
-          >
-            <a href={CONST_URL_TERMS} style={{ color: "#0060DF" }}>
-              {l10n.getString("terms-of-service")}
-            </a>
-            &emsp;
-            <a href={CONST_URL_PRIVACY_POLICY} style={{ color: "#0060DF" }}>
-              {l10n.getString("email-footer-meta-privacy-notice")}
-            </a>
-          </mj-text>
-        </mj-column>
-      </mj-section>
-    </mj-wrapper>
+    <mjml>
+      <mj-style>
+        {`
+       @media (prefers-color-scheme: light) {
+        .footer_background {
+          background-image: url(${process.env.SERVER_URL}/images/email/footer-bg-shapes.png);
+          background-position-y: bottom;
+          background-position-x: centre;
+          background-repeat: no-repeat;
+          padding: 50px 32px;
+          }
+        }
+    `}
+      </mj-style>
+      <mj-wrapper css-class="footer_background" full-width="full-width">
+        <mj-section>
+          <mj-column>
+            <mj-image
+              alt=""
+              src={`${process.env.SERVER_URL}/images/email/icons/question-mark-circle-with-bg.png`}
+              width="36px"
+              height="36px"
+              align="center"
+            />
+            <mj-text
+              color="#321C64"
+              font-size="22px"
+              font-weight="700"
+              align="center"
+            >
+              {l10n.getString("email-footer-support-heading")}
+            </mj-text>
+            <mj-text font-size="16px" font-weight="400" align="center">
+              {l10n.getFragment("email-footer-support-content", {
+                elems: {
+                  "support-link": (
+                    <a
+                      href={supportLinkUrlObject.href}
+                      style={{ color: "#0060DF" }}
+                    />
+                  ),
+                },
+              })}
+            </mj-text>
+          </mj-column>
+        </mj-section>
+        <mj-section padding-top="32px">
+          <mj-column>
+            <mj-image
+              alt={l10n.getString("email-footer-logo-mozilla-alt")}
+              src={`${process.env.SERVER_URL}/images/email/mozilla-logo-bw.png`}
+              href={`https://www.mozilla.org/?utm_source=monitor-product&utm_medium=email&utm_campaign=${props.utm_campaign}&utm_content=header-logo`}
+              width="150px"
+              align="center"
+            />
+            <mj-text
+              color="#0C0C0D"
+              font-size="14px"
+              line-height="21px"
+              font-weight="400"
+              align="center"
+            >
+              149 New Montgomery St, 4th Floor
+              <br />
+              San Francisco, CA 94105
+            </mj-text>
+            <mj-text
+              color="#0C0C0D"
+              font-size="14px"
+              line-height="21px"
+              font-weight="400"
+              align="center"
+            >
+              {l10n.getString("email-footer-trigger-transactional")}
+            </mj-text>
+            <mj-text
+              font-size="14px"
+              line-height="21px"
+              font-weight="400"
+              align="center"
+            >
+              {l10n.getFragment("email-footer-source-hibp", {
+                elems: {
+                  "hibp-link": (
+                    <a
+                      href="https://haveibeenpwned.com"
+                      style={{ color: "#0060DF", fontWeight: 400 }}
+                    />
+                  ),
+                },
+              })}
+            </mj-text>
+            <mj-text
+              font-size="14px"
+              line-height="21px"
+              font-weight="400"
+              align="center"
+            >
+              <a href={CONST_URL_TERMS} style={{ color: "#0060DF" }}>
+                {l10n.getString("terms-of-service")}
+              </a>
+              &emsp;
+              <a href={CONST_URL_PRIVACY_POLICY} style={{ color: "#0060DF" }}>
+                {l10n.getString("email-footer-meta-privacy-notice")}
+              </a>
+            </mj-text>
+          </mj-column>
+        </mj-section>
+      </mj-wrapper>
+    </mjml>
   );
 };