feat(content): #2496 UX improvements for Pocket

content-src/components/HighlightContext/types.js

@@ -21,6 +21,6 @@ module.exports = {
   },
   stories: {
     intlID: "type_label_recommended",
-    icon: "topic"
+    icon: "trending"
   }
 };

content-src/components/PocketStories/PocketStories.js

@@ -47,16 +47,17 @@ const PocketStories = React.createClass({
   },
 
   renderReadMoreTopic(topic, url) {
-    return (<a key={topic} className="pocket-read-more-link" href={url}>{topic}</a>);
+    return (<li><a key={topic} className="pocket-read-more-link" href={url}>{topic}</a></li>);
   },
 
   renderReadMoreTopics() {
     return (
       <div className="pocket-read-more">
         <span><FormattedMessage id="pocket_read_more" /></span>
-        {this.props.topics.map(t => this.renderReadMoreTopic(t.name, t.url))}
+        <ul>{this.props.topics.map(t => this.renderReadMoreTopic(t.name, t.url))}</ul>
         <a className="pocket-read-even-more" href={pocket_read_more_endpoint}>
           <FormattedMessage id="pocket_read_even_more" />
+          <span className="pocket-read-even-more-logo" />
         </a>
       </div>
     );
@@ -71,7 +72,14 @@ const PocketStories = React.createClass({
     return (<section className="pocket-stories spotlight">
       <h3 className="section-title">
         <FormattedMessage id="header_stories" />
-        <span className="pocket-logo" />
+        <span className="section-title-logo" >
+          <span className="pocket-logo-text">
+              <FormattedMessage id="header_stories_by" />
+          </span>
+          <span className="pocket-logo">
+            <span className="sr-only">Pocket</span>
+          </span>
+        </span>
       </h3>
 
       <ul className="spotlight-list">

content-src/components/PocketStories/PocketStories.scss

@@ -1,26 +1,77 @@
 .pocket-stories {
 
-  .pocket-logo {
-    background-image: url('img/pocketlogo@2x.png');
-    background-size: 64px 18px;
-    background-repeat: no-repeat;
-    filter: grayscale(100%);
-    padding-left: 64px;
-    margin-left: 10px;
+  .section-title-logo {
+    float: right;
+    margin-right: 38px;
+
+    .pocket-logo {
+      background-image: url('img/pocketlogo@2x.png');
+      background-size: 64px 18px;
+      background-repeat: no-repeat;
+      filter: grayscale(100%);
+      padding-left: 64px;
+      margin-left: 8px;
+      opacity: 0.5;
+    }
+
+    .pocket-logo-text {
+      opacity: 0.5;
+      font-family: Helvetica, Arial, sans-serif;
+      text-transform: lowercase;
+      margin-left: 16px;
+      font-weight: 200;
+      font-size: 15px;
+    }
   }
 
   .pocket-read-more {
-    font-size: 12px;
-    color: $light-grey;
+    font-size: 13px;
+    color: $topic-grey;
+
+    ul {
+      display: inline;
+      padding-left: 12px;
+    }
+
+    ul li {
+      display: inline;
+    }
+
+    ul li::after {
+      content: '•';
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    ul li:last-child::after {
+      content: none;
+    }
   }
 
   .pocket-read-more-link {
-    margin-left: 25px;
+    color: $topic-blue;
   }
 
   .pocket-read-even-more {
     float: right;
     margin-right: 40px;
+    color: $topic-blue;
+  }
+
+  .pocket-read-even-more-logo {
+    padding-right: 10px;
+    margin-left: 5px;
+    background-image: url('img/topic-show-more.svg');
+    background-repeat: no-repeat;
+    background-position-y: 2px;
+  }
+
+  ul.spotlight-list {
+    height: 320px;
+  }
+
+  .hc-label {
+    padding-bottom: 2px;
   }
 
 }

content-src/styles/icons.scss

@@ -107,4 +107,8 @@
   &.icon-pocket {
     background-image: url('#{$image-path}pocket-icon.svg');
   }
+
+  &.icon-trending {
+    background-image: url('#{$image-path}trending-icon.svg');
+  }
 }

content-src/styles/variables.scss

@@ -10,6 +10,8 @@ $mid-grey: #56565A;
 $dark-grey: #383E49;
 $link-blue: #00AFF7;
 $star-blue: #2B99FF;
+$topic-grey: #BFC0C7;
+$topic-blue: #008EA4;
 $navy: #383E49;
 $light-navy: #888B92;
 $sidebar-active-item-border-color: #E14164;

locales/en-US/strings.properties

@@ -3,17 +3,19 @@ default_label_loading=Loading…
 
 header_top_sites=Top Sites
 header_highlights=Highlights
-# LOCALIZATION NOTE(header_stories): This header is followed by a logo of the
+# LOCALIZATION NOTE(header_stories): This is followed by (header_stories_by)
+header_stories=Trending Stories
+# LOCALIZATION NOTE(header_stories_by): This is followed by a logo of the
 # corresponding content (trending stories) provider
-header_stories=Trending Stories by
+header_stories_by=by
 
 # LOCALIZATION NOTE (type_label_*): These labels are associated to pages to give
 # context on how the element is related to the user, e.g. type indicates that
 # the page is bookmarked, or is currently open on another device
 type_label_visited=Visited
 type_label_bookmarked=Bookmarked
 type_label_synced=Synced from another device
-type_label_recommended=Recommended
+type_label_recommended=Trending
 # LOCALIZATION NOTE(type_label_open): Open is an adjective, as in "page is open"
 type_label_open=Open
 type_label_topic=Topic
@@ -77,7 +79,7 @@ settings_pane_topsites_options_showmore=Show two rows
 settings_pane_highlights_header=Highlights
 settings_pane_highlights_body=Look back at your recent browsing history and newly created bookmarks.
 settings_pane_pocketstories_header=Trending Stories
-settings_pane_pocketstories_body=Pocket™, a part of the Mozilla family, will help connect you to high-quality content that you may not have found otherwise.
+settings_pane_pocketstories_body=Pocket, a part of the Mozilla family, will help connect you to high-quality content that you may not have found otherwise.
 settings_pane_done_button=Done
 
 # LOCALIZATION NOTE (edit_topsites_*): This is shown in the Edit Top Sites modal