bug 1496246 - Update Pocket CTA implementation with feedback from Legal and UX (#4470)

content-src/components/CollapsibleSection/CollapsibleSection.jsx

@@ -145,6 +145,9 @@ export class _CollapsibleSection extends React.PureComponent {
                 {this.renderIcon()}
                 {getFormattedMessage(title)}
               </span>
+              <span className="click-target" onClick={this.onHeaderClick}>
+                {isCollapsible && <span className={`collapsible-arrow icon ${collapsed ? "icon-arrowhead-forward-small" : "icon-arrowhead-down-small"}`} />}
+              </span>
               <span>
                 {learnMore &&
                   <span className="learn-more-link">
@@ -154,9 +157,6 @@ export class _CollapsibleSection extends React.PureComponent {
                   </span>
                 }
               </span>
-              <span className="click-target" onClick={this.onHeaderClick}>
-                {isCollapsible && <span className={`collapsible-arrow icon ${collapsed ? "icon-arrowhead-forward-small" : "icon-arrowhead-down-small"}`} />}
-              </span>
             </span>
           </h3>
           <div>

content-src/components/CollapsibleSection/_CollapsibleSection.scss

@@ -87,16 +87,11 @@
 
   .learn-more-link {
     font-size: 11px;
+    margin-inline-start: 12px;
 
     a span {
       color: var(--newtab-link-secondary-color);
     }
-
-    &::before {
-      content: '•';
-      padding: 8px;
-      color: var(--newtab-section-navigation-text-color);
-    }
   }
 
   .section-body-fallback {

content-src/components/PocketLoggedInCta/PocketLoggedInCta.jsx

@@ -7,13 +7,15 @@ export class _PocketLoggedInCta extends React.PureComponent {
     const {pocketCta} = this.props.Pocket;
     return (
       <span className="pocket-logged-in-cta">
-        <a href={pocketCta.ctaUrl ? pocketCta.ctaUrl : "https://getpocket.com/"}>
+        <a className="pocket-cta-button" href={pocketCta.ctaUrl ? pocketCta.ctaUrl : "https://getpocket.com/"}>
          {pocketCta.ctaButton ? pocketCta.ctaButton : <FormattedMessage id="pocket_cta_button" />}
         </a>
 
-        <span className="cta-text">
-         {pocketCta.ctaText ? pocketCta.ctaText : <FormattedMessage id="pocket_cta_text" />}
-        </span>
+        <a href={pocketCta.ctaUrl ? pocketCta.ctaUrl : "https://getpocket.com/"}>
+          <span className="cta-text">
+           {pocketCta.ctaText ? pocketCta.ctaText : <FormattedMessage id="pocket_cta_text" />}
+          </span>
+        </a>
       </span>
     );
   }

content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss

@@ -5,8 +5,8 @@
   margin-inline-end: 20px;
   display: inline-block;
 
-  a {
-    background: $pocket-red;
+  .pocket-cta-button {
+    background: $blue-60;
     letter-spacing: -0.34px;
     color: $white;
     border-radius: 4px;
@@ -16,7 +16,7 @@
     // So I move it up by 1px to align with the rest of the cta text.
     margin-top: -1px;
     min-height: $min-button-height;
-    padding: 0 6px;
+    padding: 0 8px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -24,7 +24,12 @@
     margin-inline-end: 10px;
   }
 
-  a,
+  .cta-text {
+    font-weight: normal;
+    font-size: 13px;
+  }
+
+  .pocket-cta-button,
   .cta-text {
     vertical-align: top;
   }

lib/SectionsManager.jsm

@@ -34,7 +34,7 @@ const BUILT_IN_SECTIONS = {
     learnMore: {
       link: {
         href: "https://getpocket.com/firefox/new_tab_learn_more",
-        id: "pocket_learn_more",
+        id: "pocket_how_it_works",
       },
     },
     privacyNoticeURL: "https://www.mozilla.org/privacy/firefox/#suggest-relevant-content",

locales/en-US/strings.properties

@@ -144,7 +144,7 @@ pocket_read_more=Popular Topics:
 # end of the list of popular topic links.
 pocket_read_even_more=View More Stories
 pocket_more_reccommendations=More Recommendations
-pocket_learn_more=Learn More
+pocket_how_it_works=How it works
 pocket_cta_button=Get Pocket
 pocket_cta_text=Save the stories you love in Pocket, and fuel your mind with fascinating reads.