MNTOR-3640 - Use light mode only (#5255)

* enforce white text on darkmode * add new logo * add new monitor logo * move styling out of prefers color scheme light * revert padding * pair bg with color * universal selector * use light only
mozilla · Oct 29, 2024 · 2ffbf2a · 2ffbf2a
1 parent 11a8025
commit 2ffbf2a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 55 deletions.
diff --git 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"
           />
-          <mj-text
-            color="#321C64"
-            font-size="22px"
-            font-weight="700"
-            align="center"
-          >
+          <mj-text 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">
@@ -76,12 +71,7 @@ export const EmailFooter = (props: Props) => {
               },
             )}
           </mj-text>
-          <mj-text
-            color="#3D3D3D"
-            font-size="14px"
-            font-weight="400"
-            align="center"
-          >
+          <mj-text font-size="14px" font-weight="400" align="center">
             {l10n.getFragment("email-footer-source-hibp", {
               elems: {
                 "hibp-link": (
@@ -100,20 +90,10 @@ export const EmailFooter = (props: Props) => {
             width="150px"
             align="center"
           />
-          <mj-text
-            color="#0C0C0D"
-            font-size="14px"
-            font-weight="400"
-            align="center"
-          >
+          <mj-text font-size="14px" font-weight="400" align="center">
             149 New Montgomery St, 4th Floor, San Francisco, CA 94105
           </mj-text>
-          <mj-text
-            color="#0C0C0D"
-            font-size="14px"
-            font-weight="600"
-            align="center"
-          >
+          <mj-text font-size="14px" font-weight="600" align="center">
             <a href={CONST_URL_TERMS} style={{ color: "black" }}>
               {l10n.getString("terms-of-service")}
             </a>
@@ -151,12 +131,7 @@ export const RedesignedEmailFooter = (props: Props) => {
             height="36px"
             align="center"
           />
-          <mj-text
-            color="#321C64"
-            font-size="22px"
-            font-weight="700"
-            align="center"
-          >
+          <mj-text 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">
@@ -183,7 +158,6 @@ export const RedesignedEmailFooter = (props: Props) => {
             align="center"
           />
           <mj-text
-            color="#0C0C0D"
             font-size="14px"
             line-height="21px"
             font-weight="400"
@@ -194,7 +168,6 @@ export const RedesignedEmailFooter = (props: Props) => {
             San Francisco, CA 94105
           </mj-text>
           <mj-text
-            color="#0C0C0D"
             font-size="14px"
             line-height="21px"
             font-weight="400"

diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx
@@ -6,40 +6,33 @@
 export const MetaTags = () => {
   return (
     <mj-raw>
-      <meta name="color-scheme" content="light dark" />
-      <meta name="supported-color-schemes" content="light dark" />
+      <meta name="color-scheme" content="light only" />
+      <meta name="supported-color-schemes" content="light only" />
     </mj-raw>
   );
 };
 
 export const HeaderStyles = () => {
   const hideBgImageOnDarkMode = `
       :root {
-        color-scheme: light dark;
-        supported-color-schemes: light dark;
+        color-scheme: light only;
+        supported-color-schemes: light only;
       }
 
-      @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;
+        background: #fffff;
       }
 
-       @media (prefers-color-scheme: light) {
-        .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;
-        }
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .hero_background {
-          background: none !important;
-        }
+      .hero_background {
+        background-image: url(${process.env.SERVER_URL}/images/email/hero-bg-gradient.png);
+        background-repeat: repeat;
+        background-position-x: 0;
+        background-color: #e4d2ff;
+        color: #ffffff;
       }
     `;