From b5d2ce26a4f1a0d071ba1b84c0150806ad99f9a2 Mon Sep 17 00:00:00 2001
From: ScottDowne <scott.downe@gmail.com>
Date: Fri, 5 Oct 2018 12:58:49 -0400
Subject: [PATCH] bug 1496246 - Update Pocket CTA implementation with feedback
 from Legal and UX (#4470)

---
 .../CollapsibleSection/CollapsibleSection.jsx       |  6 +++---
 .../CollapsibleSection/_CollapsibleSection.scss     |  7 +------
 .../PocketLoggedInCta/PocketLoggedInCta.jsx         | 10 ++++++----
 .../PocketLoggedInCta/_PocketLoggedInCta.scss       | 13 +++++++++----
 lib/SectionsManager.jsm                             |  2 +-
 locales/en-US/strings.properties                    |  2 +-
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/content-src/components/CollapsibleSection/CollapsibleSection.jsx b/content-src/components/CollapsibleSection/CollapsibleSection.jsx
index 8b0848a0f..b424e23ca 100644
--- a/content-src/components/CollapsibleSection/CollapsibleSection.jsx
+++ b/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>
diff --git a/content-src/components/CollapsibleSection/_CollapsibleSection.scss b/content-src/components/CollapsibleSection/_CollapsibleSection.scss
index e8287c1f1..8378d3638 100644
--- a/content-src/components/CollapsibleSection/_CollapsibleSection.scss
+++ b/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 {
diff --git a/content-src/components/PocketLoggedInCta/PocketLoggedInCta.jsx b/content-src/components/PocketLoggedInCta/PocketLoggedInCta.jsx
index 3d3fb50de..c8935e3c3 100644
--- a/content-src/components/PocketLoggedInCta/PocketLoggedInCta.jsx
+++ b/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>
     );
   }
diff --git a/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss b/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss
index 43e843c0f..10a4c721d 100644
--- a/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss
+++ b/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;
   }
diff --git a/lib/SectionsManager.jsm b/lib/SectionsManager.jsm
index 46c698f8b..88c645888 100644
--- a/lib/SectionsManager.jsm
+++ b/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",
diff --git a/locales/en-US/strings.properties b/locales/en-US/strings.properties
index 0b6ce6ffc..b46f742b3 100644
--- a/locales/en-US/strings.properties
+++ b/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.