feat(pong): support custom colors for new sidebar format (#11498)

Allows customizing the text and background color, which were previously hard-coded.
mdn · Jul 24, 2024 · a0f2afd · a0f2afd
1 parent 21f8473
commit a0f2afd
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -11,6 +11,20 @@ section.place {
   }
 
   .pong-box2 {
+    --place-new-side-background-light: #111;
+    --place-new-side-color-light: #fff;
+
+    --place-new-side-background-dark: #111;
+    --place-new-side-color-dark: #fff;
+
+    --place-new-side-background: var(--place-new-side-background-light);
+    --place-new-side-color: var(--place-new-side-color-light);
+
+    @media (prefers-color-scheme: dark) {
+      --place-new-side-background: var(--place-new-side-background-dark);
+      --place-new-side-color: var(--place-new-side-color-dark);
+    }
+
     --border-radius: 0.5rem;
     border: 1px solid var(--border-primary);
     border-radius: var(--border-radius);
@@ -23,6 +37,7 @@ section.place {
 
     .pong-note {
       background-color: #fff6;
+      border: 1px solid #111a;
       border-radius: 0.25rem;
       color: #fff;
       font-size: 0.625rem;
@@ -53,9 +68,13 @@ section.place {
       }
 
       > div.content {
-        background: linear-gradient(to top, #111 9rem, transparent);
+        background: linear-gradient(
+          to top,
+          var(--place-new-side-background) 9rem,
+          transparent
+        );
         border-radius: var(--border-radius);
-        color: #fff;
+        color: var(--place-new-side-color);
         display: flex;
         flex-direction: column;
         gap: 0.25rem;
@@ -78,7 +97,7 @@ section.place {
         }
 
         .pong-cta {
-          --color: #fff;
+          --color: var(--place-new-side-color);
           --icon-primary: var(--color);
           background-color: #fff1;
           border: solid 2px;
@@ -95,8 +114,8 @@ section.place {
           }
 
           &:hover {
-            --color: #111;
-            background-color: #fff;
+            --color: var(--place-new-side-background);
+            background-color: var(--place-new-side-color);
           }
         }
       }
@@ -255,6 +274,11 @@ section.place {
   }
 }
 
+.dark section.place .pong-box2 {
+  --place-new-side-background: var(--place-new-side-background-dark);
+  --place-new-side-color: var(--place-new-side-color-dark);
+}
+
 section.place.hp-main {
   background-color: var(--place-hp-main-background);
   margin: 0;

diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -50,6 +50,19 @@ function viewed(pong?: PlacementData) {
 
 export function SidePlacement() {
   const placementData = usePlacement();
+  const { textColor, backgroundColor, textColorDark, backgroundColorDark } =
+    placementData?.side?.colors || {};
+  const css = Object.fromEntries(
+    [
+      ["--place-new-side-background-light", backgroundColor],
+      ["--place-new-side-color-light", textColor],
+      [
+        "--place-new-side-background-dark",
+        backgroundColorDark || backgroundColor,
+      ],
+      ["--place-new-side-color-dark", textColorDark || textColor],
+    ].filter(([_, v]) => Boolean(v))
+  );
 
   return !placementData?.side ? (
     <section className="place side"></section>
@@ -62,6 +75,7 @@ export function SidePlacement() {
       cta={placementData.side.cta}
       renderer={RenderNewSideBanner}
       typ="side"
+      style={css}
     ></PlacementInner>
   ) : (
     <PlacementInner
@@ -510,12 +524,8 @@ function RenderNewSideBanner({
   heading,
 }: PlacementRenderArgs) {
   return (
-    <section
-      ref={place}
-      className={["place", ...extraClassNames].join(" ")}
-      style={style}
-    >
-      <div className="pong-box2">
+    <section ref={place} className={["place", ...extraClassNames].join(" ")}>
+      <div className="pong-box2" style={style}>
         <a
           className="pong"
           data-glean={`pong: pong->click ${typ}`}