Remove background images for footer and header (#5266)

* Remove background images for footer and header * requests * remove images * remove text
mozilla · Oct 30, 2024 · 3446c47 · 3446c47
1 parent 08ad1b4
commit 3446c47
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 19 deletions.
diff --git a/public/images/email/footer-bg-shapes.png b/public/images/email/footer-bg-shapes.png
diff --git a/public/images/email/hero-bg-gradient.png b/public/images/email/hero-bg-gradient.png
diff --git a/src/emails/components/EmailHero.tsx b/src/emails/components/EmailHero.tsx
@@ -23,8 +23,8 @@ export const EmailHero = (props: Props) => {
     <mj-wrapper padding="24px 16px">
       <mj-section
         padding="10px 12px"
-        css-class="hero_background"
         border-radius="16px 16px 0 0"
+        background-color="#E7DFFF"
       >
         <mj-group>
           <mj-column
@@ -58,7 +58,7 @@ export const EmailHero = (props: Props) => {
           </mj-column>
         </mj-group>
       </mj-section>
-      <mj-section css-class="hero_background" border-radius="0 0 16px 16px">
+      <mj-section background-color="#E7DFFF" border-radius="0 0 16px 16px">
         <mj-column>
           <mj-text font-size="20px">
             <h2>{props.heading}</h2>

diff --git a/src/emails/templates/EmailFooter.tsx b/src/emails/templates/EmailFooter.tsx
@@ -120,7 +120,7 @@ export const RedesignedEmailFooter = (props: Props) => {
     <mj-wrapper
       full-width="full-width"
       padding="50px 32px"
-      css-class="footer_background"
+      background-color="#F9F9FA"
     >
       <mj-section>
         <mj-column>

diff --git a/src/emails/templates/HeaderStyles.tsx b/src/emails/templates/HeaderStyles.tsx
@@ -13,26 +13,12 @@ export const MetaTags = () => {
 };
 
 export const HeaderStyles = () => {
-  const hideBgImageOnDarkMode = `
+  const enforceLightMode = `
       :root {
         color-scheme: light only;
         supported-color-schemes: light only;
       }
-
-      .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 !important;
-      }
-
-      .hero_background {
-        background-image: url(${process.env.SERVER_URL}/images/email/hero-bg-gradient.png);
-        background-repeat: repeat;
-        background-position-x: 0;
-        color: #000000 !important;
-      }
     `;
 
-  return <mj-style>{hideBgImageOnDarkMode}</mj-style>;
+  return <mj-style>{enforceLightMode}</mj-style>;
 };