chore(placements): consolidate placement's ad overlay design (#12104)

* make "Ad" overlay the same on all placements, added to home page placements, use theme-aware colors * fix bottom banner * improve contrast * bottom banner color * minor tweaks --------- Co-authored-by: Florian Dieminger <[email protected]>
mdn · Feb 20, 2025 · 31765c8 · 31765c8
1 parent c83c18b
commit 31765c8
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 70 deletions.
diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -10,6 +10,25 @@ section.place {
     text-decoration: none;
   }
 
+  a.pong-note {
+    background-color: #f9f9fbd0;
+    border: 1px solid #313131;
+    border-radius: 0.25rem;
+    color: #313131;
+    font-size: 0.625rem;
+    opacity: 0.85;
+    padding: 0 0.25rem;
+    text-decoration: underline;
+    text-transform: uppercase;
+    width: max-content;
+
+    &:focus,
+    &:hover {
+      opacity: unset;
+      text-decoration: none;
+    }
+  }
+
   .pong-box2 {
     --place-new-side-background-light: #111;
     --place-new-side-color-light: #fff;
@@ -36,20 +55,10 @@ section.place {
     }
 
     .pong-note {
-      background-color: var(--place-new-side-color);
-      border: 1px solid var(--place-new-side-background);
-      border-radius: 0.25rem;
-      color: var(--place-new-side-background);
-      font-size: 0.625rem;
-      margin: 0.5rem;
-      opacity: 0.4;
-      padding: 0 0.25rem;
+      margin: 0.25rem;
       position: absolute;
       right: 0;
-      text-decoration: underline;
-      text-transform: uppercase;
       top: 0;
-      width: max-content;
 
       &:hover {
         opacity: unset;
@@ -148,36 +157,6 @@ section.place {
         padding: 0.5rem;
       }
     }
-
-    .pong-note {
-      color: var(--text-secondary);
-      display: flex;
-      font-size: 0.625rem;
-      justify-content: space-between;
-      margin: 1rem 0.25rem 0 auto;
-      text-decoration: underline;
-      width: max-content;
-    }
-  }
-
-  &.top .pong-note,
-  .no-pong {
-    text-decoration: none;
-
-    &:focus,
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &.side .pong-note,
-  &.bottom-banner .pong-note {
-    text-decoration: underline;
-
-    &:focus,
-    &:hover {
-      text-decoration: none;
-    }
   }
 
   .no-pong {
@@ -187,6 +166,12 @@ section.place {
     max-width: 12rem;
     padding: 0;
     width: 100%;
+
+    &:focus,
+    &:hover {
+      opacity: unset;
+      text-decoration: none;
+    }
   }
 
   &.side {
@@ -255,14 +240,8 @@ section.place {
       }
 
       .pong-note {
-        background-color: var(--text-primary);
-        border: 1px solid var(--border-primary);
-        border-radius: 0 0 0.5rem 0.5rem;
-        border-top: none;
-        color: var(--background-secondary);
         grid-area: note;
-        margin: 0 0 auto auto;
-        padding: 0 0.5rem 0.125rem;
+        margin: 0.25rem 0 auto auto;
       }
     }
 
@@ -284,20 +263,31 @@ section.place {
   --place-new-side-color: var(--place-new-side-color-dark);
 }
 
-section.place.hp-main {
+section.place.hp-main,
+section.place.bottom-banner {
   background-color: var(--place-hp-main-background);
+  display: grid;
+  grid-template-areas: "left place right";
+  grid-template-columns: auto min(var(--place-banner-width), 100vw) auto;
   margin: 0;
   width: 100%;
 
-  a {
+  a.pong {
     display: flex;
+    grid-area: place;
+    grid-column: 1/4;
     justify-content: center;
-    width: 100%;
 
     img {
       height: auto;
     }
   }
+
+  .pong-note {
+    grid-area: place;
+    grid-column: 2;
+    margin: 0.5rem 0.5rem auto auto;
+  }
 }
 
 .top-banner {

diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -227,6 +227,7 @@ export function BottomBanner() {
   const { backgroundColor, textColor } = placementData?.colors || {};
   const css = Object.fromEntries(
     [
+      ["--place-hp-main-background", backgroundColor],
       ["--place-bottom-banner-background", backgroundColor],
       ["--place-bottom-banner-color", textColor],
     ].filter(([_, v]) => Boolean(v))
@@ -360,7 +361,7 @@ function RenderSideOrTopBanner({
           target="_blank"
           rel="noreferrer"
         >
-          Mozilla ads
+          Ad
         </a>
       </p>
 
@@ -400,7 +401,12 @@ function RenderHpPlacement({
     <section
       ref={place}
       className={["place", ...extraClassNames].join(" ")}
-      style={style}
+      style={
+        {
+          "--place-banner-width": `${imageWidth}px`,
+          ...style,
+        } as React.CSSProperties
+      }
     >
       <a
         className="pong"
@@ -418,6 +424,15 @@ function RenderHpPlacement({
           height={imageHeight}
         ></img>
       </a>
+      <a
+        href="/en-US/advertising"
+        className="pong-note"
+        data-glean="pong: pong->about"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Ad
+      </a>{" "}
     </section>
   );
 }
@@ -438,7 +453,15 @@ function RenderBottomBanner({
   showNoAds,
 }: PlacementRenderArgs) {
   return (
-    <div className="bottom-banner-container" style={style}>
+    <div
+      className="bottom-banner-container"
+      style={
+        {
+          "--place-banner-width": `${imageWidth}px`,
+          ...style,
+        } as React.CSSProperties
+      }
+    >
       <section
         ref={place}
         className={["place", "bottom-banner", ...extraClassNames].join(" ")}
@@ -466,23 +489,8 @@ function RenderBottomBanner({
           target="_blank"
           rel="noreferrer"
         >
-          Mozilla ads
+          Ad
         </a>
-        {showNoAds && (
-          <a
-            className="no-pong"
-            data-glean={
-              "pong: " + (user?.isSubscriber ? "pong->settings" : "pong->plus")
-            }
-            href={
-              user?.isSubscriber
-                ? "/en-US/plus/settings?ref=nope"
-                : "/en-US/plus?ref=nope"
-            }
-          >
-            Don't want to see ads?
-          </a>
-        )}
       </section>
     </div>
   );