Bug 1734205 - VQA fixes for reader recs variant r=thecount

Differential Revision: https://phabricator.services.mozilla.com/D128633

toolkit/components/reader/AboutReader.jsm

@@ -1309,6 +1309,7 @@ AboutReader.prototype = {
   _enableRecShowHide() {
     let elPocketRecs = this._doc.querySelector(`.pocket-recs`);
     let elCollapseRecs = this._doc.querySelector(`.pocket-collapse-recs`);
+    let elSignUp = this._doc.querySelector(`div.pocket-sign-up-wrapper`);
 
     let toggleRecsVisibility = () => {
       let isClosed = elPocketRecs.classList.contains(`closed`);
@@ -1318,6 +1319,7 @@ AboutReader.prototype = {
       if (isClosed) {
         elPocketRecs.classList.add(`closed`);
         elCollapseRecs.classList.add(`closed`);
+        elSignUp.setAttribute(`hidden`, true);
 
         Services.telemetry.recordEvent(
           "readermode",
@@ -1329,6 +1331,7 @@ AboutReader.prototype = {
       } else {
         elPocketRecs.classList.remove(`closed`);
         elCollapseRecs.classList.remove(`closed`);
+        elSignUp.removeAttribute(`hidden`);
       }
     };
 
@@ -1373,6 +1376,9 @@ AboutReader.prototype = {
 
     elThumb.classList.add(`pocket-rec-thumb`);
     elThumb.setAttribute(`loading`, `lazy`);
+    elThumb.addEventListener(`load`, () => {
+      elThumb.classList.add(`pocket-rec-thumb-loaded`);
+    });
     elThumb.setAttribute(
       `src`,
       `https://img-getpocket.cdn.mozilla.net/132x132/filters:format(jpeg):quality(60):no_upscale():strip_exif()/${thumb}`
@@ -1468,6 +1474,9 @@ AboutReader.prototype = {
 
       elPocketCTAWrapper.hidden = false;
       elPocketCTAWrapper.classList.add(`pocket-cta-container-${ctaVersion}`);
+      elPocketCTAWrapper.classList.add(
+        `pocket-cta-container-${isLoggedInUser ? `logged-in` : `logged-out`}`
+      );
 
       // Set up tracking for sign up buttons
       this._doc.querySelectorAll(`.pocket-sign-up`).forEach(el => {

toolkit/components/reader/content/aboutReader.html

@@ -78,6 +78,7 @@
         <header class="pocket-cta-header">Save anything from across the web in Pocket, your personal library.</header>
         <p class="pocket-cta-subhead">As part of the Firefox family, Pocket provides a quiet, calm space that’s perfect for reading. It strips away all the distractions of the internet so you can really focus.</p>
         <a href="https://getpocket.com/signup?utm_source=firefox_reader&utm_medium=variant_cta_only" class="pocket-btn pocket-sign-up"><strong>Sign up</strong> - it’s free</a>
+        <a href="https://getpocket.com/explore?utm_source=firefox_reader&utm_medium=variant_cta_only" class="pocket-btn pocket-discover-more"><strong>Discover more</strong></a>
       </div>
       <button class="pocket-dismiss-cta"></button>
     </div>
@@ -95,8 +96,8 @@
 
       <div class="pocket-recs"></div>
 
-      <div class="pocket-sign-up">
-        <a href="https://getpocket.com/signup?utm_source=firefox_reader&utm_medium=variant_cta_plus_recs" class="pocket-btn pocket-sign-up"><strong>Sign up</strong> - it’s free</a>
+      <div class="pocket-sign-up-wrapper">
+        <a href="https://getpocket.com/explore?utm_source=firefox_reader&utm_medium=variant_cta_plus_recs" class="pocket-btn pocket-sign-up"><strong>Discover more</strong></a>
       </div>
     </div>
   </div>

toolkit/themes/shared/aboutReaderPocket.css

@@ -37,10 +37,13 @@ body.sepia .pocket-cta {
 
 .pocket-cta-header {
   font-weight: 900;
+  font-size: 20px;
+  line-height: 1.2;
 }
 
 .pocket-cta-subhead {
   margin: 4px 0 24px;
+  line-height: 1.5;
 }
 
 .pocket-btn {
@@ -51,6 +54,7 @@ body.sepia .pocket-cta {
   font-size: 16px;
   padding: 12px 24px;
   text-decoration: none;
+  text-align: center;
 }
 
 .pocket-btn:hover,
@@ -72,7 +76,8 @@ body.sepia .pocket-cta {
 }
 
 .pocket-btn-add {
-  background: no-repeat left center url("chrome://global/skin/icons/pocket-outline.svg");
+  background: no-repeat left center url("chrome://browser/skin/pocket-outline.svg");
+  fill: #5B5B66;
   background-size: 16px;
   border: 0;
   padding-inline-start: 20px;
@@ -81,7 +86,18 @@ body.sepia .pocket-cta {
   cursor: pointer;
 }
 
-.pocket-btn-add.saved {
+body.dark .pocket-btn-add {
+  fill: #eee;
+  color: #eee;
+}
+
+.pocket-btn-add:hover,
+body.dark .pocket-btn-add:hover {
+  fill: #EF4056;
+}
+
+.pocket-btn-add.saved,
+body.dark .pocket-btn-add.saved {
   background-image: url("chrome://global/skin/icons/pocket.svg");
 }
 
@@ -104,12 +120,13 @@ body.sepia .pocket-cta {
 }
 
 .pocket-recs-top .col:nth-child(2) {
-  padding-inline-start: 68px;
+  padding-inline-start: 8px;
 }
 
 .pocket-recs {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 14px;
 }
 
 .pocket-recs.closed {
@@ -121,7 +138,7 @@ body.sepia .pocket-cta {
 }
 
 .pocket-rec {
-  padding: 30px 0;
+  padding: 16px 0;
   width: 31%;
 }
 
@@ -130,7 +147,7 @@ body.sepia .pocket-cta {
   text-decoration: none;
 }
 
-.pocket-sign-up {
+.pocket-sign-up-wrapper {
   text-align: center;
 }
 
@@ -139,7 +156,7 @@ body.sepia .pocket-cta {
   font-weight: bold;
   font-size: 16px;
   line-height: 24px;
-  color: #000000;
+  color: var(--main-foreground);
 }
 
 .pocket-rec .pocket-rec-thumb {
@@ -148,6 +165,11 @@ body.sepia .pocket-cta {
   filter: drop-shadow(0px 2px 6px rgba(58, 57, 68, 0.2));
   border-radius: 4px;
   margin-inline-start: 16px;
+  visibility: hidden;
+}
+
+.pocket-rec .pocket-rec-thumb.pocket-rec-thumb-loaded {
+  visibility: visible;
 }
 
 .pocket-rec .pocket-rec-meta {
@@ -158,6 +180,15 @@ body.sepia .pocket-cta {
   color: #5B5B66;
 }
 
+body.dark .pocket-rec .pocket-rec-meta {
+  color: #eee;
+}
+
+.pocket-cta-container-logged-in #pocket-cta-only .pocket-sign-up,
+.pocket-cta-container-logged-out #pocket-cta-only .pocket-discover-more {
+  display: none;
+}
+
 /* Medium breakpoint */
 @media (max-width: 1128px) {
   .pocket-cta-inner {
@@ -172,7 +203,7 @@ body.sepia .pocket-cta {
     width: 48%;
   }
 
-  .pocket-rec:nth-child(2) {
+  .pocket-rec:nth-child(3) {
     display: none;
   }
 }