fix(placards): improve placard sizing/shapes

Author: collectedmind

clients/web/src/connectors/placards/placards.js

@@ -55,11 +55,13 @@ export function Placard({ placement, position, shouldDisplay }) {
   }
 
   return shouldDisplay ? (
-    <div className={`${style.wrapper} ${style[format]}`} ref={elementRef}>
-      <a href={url} onClick={handleClick}>
-        <img src={image_url} alt={alt_text} />
-      </a>
-      <p className="label">{alt_text}</p>
+    <div>
+      <div className={`${style.wrapper} ${style[format]}`} ref={elementRef}>
+        <a href={url} onClick={handleClick}>
+          <img src={image_url} alt={alt_text} />
+        </a>
+        <p className={style.label}>{alt_text}</p>
+      </div>
     </div>
   ) : null
 }

clients/web/src/connectors/placards/style.module.css

@@ -0,0 +1,21 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin: 1rem 0;
+}
+.label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: -1;
+  font-size: 0.5rem;
+}
+.skyscraper {
+  position: sticky;
+  top: 6rem;
+  margin: 0 0 4rem;
+  margin-top: -22px;
+}

clients/web/src/containers/syndicated-article/syndicated-article.js

@@ -99,6 +99,10 @@ export function SyndicatedArticle({ queryParams = validParams, locale }) {
         {
           placement: 'pocket_billboard',
           count: 2
+        },
+        {
+          placement: 'pocket_skyscraper',
+          count: 2
         }
       ])
     )
@@ -258,13 +262,21 @@ export function SyndicatedArticle({ queryParams = validParams, locale }) {
               {showCTA ? (
                 <CallOutSyndicated onVisible={onCTAVisible} handleSignup={onCTASignup} />
               ) : null}
-              <AdRailTop allowAds={allowAds} targeting={targeting} />
+              {showPlacards ? (
+                <Placard shouldDisplay={showPlacards} placement="pocket_skyscraper" position={0} />
+              ) : (
+                <AdRailTop allowAds={allowAds} targeting={targeting} />
+              )}
               <PublisherRecs
                 itemId={originalItemId}
                 publisher={publisher}
                 legacyId={originalItemId}
               />
-              <AdRailBottom allowAds={allowAds} targeting={targeting} />
+              {showPlacards ? (
+                <Placard shouldDisplay={showPlacards} placement="pocket_skyscraper" position={1} />
+              ) : (
+                <AdRailBottom allowAds={allowAds} targeting={targeting} />
+              )}
             </aside>
 
             <div className="content-body">

clients/web/src/pages/api/placards.ts

@@ -33,7 +33,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   try {
     const payload = await req.body
     const body = JSON.stringify(payload)
-    const adResponse = await fetch('https://ads.allizom.org/v1/ads', {
+    const adResponse = await fetch('https://ads.mozilla.org/v1/ads', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body