style(content): A bunch of small tweaks to get closer to spec

.sass-lint.yml

@@ -21,4 +21,6 @@ rules:
   no-qualifying-elements: 0
   no-warn: 1
   placeholder-in-extend: 2
-  property-sort-order: [1, {ignore-custom-properties: true}]
+  property-sort-order: 0
+  no-duplicate-properties: 2
+  # property-sort-order: [1, {ignore-custom-properties: true}]

content-src/components/ActivityFeed/ActivityFeed.scss

@@ -8,14 +8,14 @@
 
 .feed-item {
   display: flex;
-  padding-bottom: $feed-gutter;
-  padding-left: $feed-gutter + $feed-circle-size;
+  padding-left: $feed-gutter-h + $feed-circle-size;
+  padding-bottom: $feed-gutter-v;
   position: relative;
 
   // This is the line/circle on the side
   &:first-child {
     &::before {
-      margin-top: -($feed-gutter / 2 + $feed-circle-size / 2);
+      margin-top: -($feed-gutter-v / 2 + $feed-circle-size / 2);
       top: 50%;
     }
   }
@@ -23,7 +23,7 @@
   &:last-child {
     &::before {
       bottom: 50%;
-      margin-bottom: $feed-gutter / 2 + $feed-circle-size / 2;
+      margin-bottom: $feed-gutter-v / 2 + $feed-circle-size / 2;
     }
   }
 
@@ -46,10 +46,10 @@
     display: block;
     height: $feed-circle-size;
     left: 0;
-    margin-top: -($feed-gutter / 2 + $feed-circle-size / 2);
     position: absolute;
     top: 50%;
     width: $feed-circle-size;
+    margin-top: -($feed-gutter-v / 2 + $feed-circle-size / 2);
   }
 
   &:first-child::after {
@@ -61,10 +61,7 @@
     height: auto;
     left: 0;
     margin-left: -4px;
-    margin-top: -($feed-gutter / 2 + 18 / 2);
-    position: absolute;
-    top: 50%;
-    width: auto;
+    margin-top: -($feed-gutter-v / 2 + 18 / 2);
   }
 }
 

content-src/components/Header/Header.scss

@@ -1,9 +1,10 @@
 .head {
   align-items: center;
   background: $white;
-  border-bottom: $header-border;
+  border-bottom: solid 1px $header-border-color;
   box-shadow: $header-box-shadow;
   display: flex;
+  position: relative;
   flex-shrink: 0;
   height: 50px;
   padding: 0;

content-src/components/NewTabPage/NewTabPage.js

@@ -16,10 +16,10 @@ const NewTabPage = React.createClass({
         </div>
         <div className="right">
           <h3 className="section-title">Top Activity</h3>
-          <ActivityFeed sites={props.Bookmarks.rows} />
+          <ActivityFeed sites={props.Bookmarks.rows} length={2} />
 
           <h3 className="section-title">Yesterday</h3>
-          <ActivityFeed sites={props.History.rows} />
+          <ActivityFeed sites={props.History.rows} length={6} />
         </div>
       </div>
     </main>);

content-src/components/Spotlight/Spotlight.scss

@@ -11,18 +11,22 @@
 }
 
 .spotlight-item {
+  @include item-shadow;
   background: $white;
-  border-radius: 3px;
-  box-shadow: $tile-box-shadow;
   display: inline-block;
   margin-right: 20px;
-  overflow: hidden;
   width: $spotlight-item-width;
+  border-radius: 3px;
+  height: $spotlight-item-height;
+  overflow: hidden;
+  position: relative;
 
   .spotlight-image {
-    background-size: cover;
-    height: $spotlight-img-height;
     position: relative;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: $spotlight-img-height;
   }
 
   .spotlight-icon {
@@ -44,8 +48,8 @@
   }
 
   .spotlight-info {
+    padding: $spotlight-padding;
     height: $spotlight-info-height;
-    padding: 10px;
   }
 
   .spotlight-description {
@@ -56,8 +60,14 @@
   }
 
   .spotlight-type {
+    padding: $spotlight-padding;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
     color: $light-grey;
     font-size: 11px;
+    overflow: hidden;
   }
 
   &.spotlight-placeholder {

content-src/components/TimelinePage/TimelinePage.scss

@@ -8,7 +8,7 @@ main.timeline {
 
   nav.sidebar {
     background: $navy;
-    color: $sidebar-color;
+    color: $light-navy;
     display: block;
     flex-shrink: 0;
     width: $header-nav-width;

content-src/components/TopSites/TopSites.js

@@ -1,6 +1,7 @@
 const React = require("react");
 const SiteIcon = require("components/SiteIcon/SiteIcon");
 const DEFAULT_LENGTH = 6;
+const {toRGBString} = require("lib/utils");
 
 const TopSites = React.createClass({
   getDefaultProps() {
@@ -15,14 +16,18 @@ const TopSites = React.createClass({
     return (<section className="top-sites">
       <h3 className="section-title">Top Sites</h3>
       <div className="tiles-wrapper">
-        {sites.map((site) => (<a key={site.url} className="tile" href={site.url}>
-          <div className="tile-img-container">
-            <SiteIcon site={site} width={100} height={100} />
-          </div>
-          <div className="tile-title">
-            {site.provider_name}
-          </div>
-        </a>))}
+        {sites.map((site) => {
+          const color = site.favicon_colors && site.favicon_colors[0] && site.favicon_colors[0].color || [333, 333, 333];
+          const backgroundColor = toRGBString(...color, 0.6);
+          return (<a key={site.url} className="tile" href={site.url} style={{backgroundColor}}>
+            <div className="tile-img-container">
+              <SiteIcon site={site} width={32} height={32} />
+            </div>
+            <div className="tile-title">
+              {site.provider_name}
+            </div>
+          </a>);
+        })}
         {blankSites}
       </div>
     </section>);

content-src/components/TopSites/TopSites.scss

@@ -5,11 +5,10 @@
   }
 
   .tile {
-    border: $tile-border;
+    @include item-shadow;
     border-radius: $tile-border-radius;
-    box-shadow: $tile-box-shadow;
-    color: $tile-text-color;
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
     font-size: $tile-font-size;
     height: $tile-height;
     margin: 0 $tile-gutter-h $tile-gutter-v 0;
@@ -17,12 +16,16 @@
     position: relative;
     text-decoration: none;
     width: $tile-width;
+    color: inherit;
 
     .tile-img-container {
-      height: $tile-img-height;
+      width: 100%;
       overflow: hidden;
       position: relative;
-      width: $tile-img-width;
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .tile-title {
@@ -34,7 +37,6 @@
 
     &:hover .tile-title {
       background-color: $tile-title-hover-color;
-      color: $tile-title-hover-text-color;
     }
 
     &.tile-placeholder {

content-src/lib/utils.js

@@ -1,6 +1,7 @@
 module.exports = {
   toRGBString(...color) {
-    return `rgb(${color.join(", ")})`;
+    const name = color.length === 4 ? "rgba" : "rgb";
+    return `${name}(${color.join(", ")})`;
   },
   getBlackOrWhite(r, g, b) {
     const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;

content-src/styles/variables.scss

@@ -5,47 +5,59 @@ $dark-grey: #383E49;
 $link-blue: #00AFF7;
 $star-blue: #2B99FF;
 $navy: #383E49;
+$light-navy: #888B92;
+$sidebar-active-item-border-color: #E14164;
 $white: #FFF;
+$header-border-color: #DFE0E1;
 
-$wrapper-max-width: 1100px;
+$wrapper-max-width: 1062px;
 
 $header-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.05);
 $header-nav-width: 250px;
 $header-border: solid 1px #DFE0E1;
 
-$sidebar-color: #888B92;
-$sidebar-active-item-border-color: #E14164;
-
-$tile-img-width: 100px;
-$tile-img-height: 100px;
+$tile-width: 100px;
+$tile-height: $tile-width;
 $tile-title-height: 26px;
-$tile-width: $tile-img-width + 2px;
-$tile-height: $tile-img-height + $tile-title-height + 2px;
 
 $tile-font-size: 13px;
 $tile-border-radius: 3px;
-$tile-box-shadow: 0 1px 3px #C1C1C1;
-$tile-border: 1px solid #FFF;
+$tile-border: 1px #FFF;
 $tile-gutter-h: 20px;
-$tile-gutter-v: 20px;
-$tile-text-color: #5C5C5C;
-$tile-title-bg-color: #F2F2F2;
-$tile-title-hover-color: #333;
-$tile-title-hover-text-color: #FFF;
+$tile-gutter-v: 10px;
+$tile-title-bg-color: rgba(255, 255, 255, 0.8);
+$tile-title-hover-color: #FFF;
 
-$feed-gutter: 20px;
+$feed-gutter-h: 20px;
+$feed-gutter-v: 16px;
 $feed-circle-size: 8px;
 $feed-icon-size: 40px;
 
-$spotlight-info-height: 160px;
+$spotlight-padding: 10px;
+$spotlight-item-height: $feed-icon-size * 6 + $feed-gutter-v * 5;
 $spotlight-item-width: 226px;
-$spotlight-img-height: 140px;
+$spotlight-img-height: 124px;
+$spotlight-info-height: 158px;
+
 $spotlight-icon-height: 35px;
 $spotlight-icon-width: 35px;
 $spotlight-icon-gutter: 10px;
-$spotlight-description-height: 70px;
+$spotlight-description-height: 87px;
 $spotlight-title-max-height: 39px;
 
 $timeline-max-width: 3 * $spotlight-item-width + 20px * 2;
 
-$placeholder-border: 2px dashed #C1C1C1;
+$item-shadow-border: darken($bg-grey, 7%);
+$item-shadow: none;
+$item-shadow-hover: 0 4px 9px -3px darken($bg-grey, 5%);
+
+@mixin item-shadow {
+  box-shadow: $item-shadow;
+  transition: box-shadow 0.1s ease-in-out;
+  border: 1px solid $item-shadow-border;
+
+  &:hover {
+    box-shadow: $item-shadow-hover;
+    border-color: darken($item-shadow-border, 5%);
+  }
+}

content-test/lib/utils.test.js

@@ -5,6 +5,9 @@ describe("toRGBString", () => {
   it("should convert R, G, B values to a css string", () => {
     assert.equal(utils.toRGBString(12, 20, 30), "rgb(12, 20, 30)");
   });
+  it("should convert R, G, B, A values to a css string", () => {
+    assert.equal(utils.toRGBString(12, 20, 30, 0.2), "rgba(12, 20, 30, 0.2)");
+  });
 });
 
 describe("getBlackOrWhite", () => {