Add header + fix spec

package.json

@@ -128,6 +128,7 @@
   "dependencies": {
     "better-npm-run": "0.0.8",
     "camelcase": "2.1.1",
+    "classnames": "2.2.5",
     "common-tags": "0.0.3",
     "config": "1.20.1",
     "express": "4.13.4",

src/disco/components/Addon.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import classNames from 'classnames';
 
 import InstallButton from './InstallButton';
 
@@ -37,9 +38,12 @@ export default class Addon extends React.Component {
   }
 
   render() {
-    const { heading, subHeading } = this.props;
+    const { heading, subHeading, type } = this.props;
+    const addonClasses = classNames('addon', {
+      theme: type === 'Theme',
+    });
     return (
-      <div className="addon">
+      <div className={addonClasses}>
         {this.getThemeImage()}
         <div className="content">
           {this.getLogo()}

src/disco/containers/DiscoPane.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { asyncConnect } from 'redux-async-connect';
-import { camelCaseProps } from 'core/utils';
+import { gettext as _, camelCaseProps } from 'core/utils';
 
 import Addon from 'disco/components/Addon';
 import fakeData from 'disco/fakeData';
@@ -20,6 +20,20 @@ class DiscoPane extends React.Component {
     const { results } = this.props;
     return (
       <div id="app-view" ref="container">
+        <header>
+          <div className="content">
+            <h1>{_('Personalize Your Firefox')}</h1>
+            <p>{_(`There are thousands of add-ons that let you make Firefox all your
+               own—everything from fun visual themes to powerful tools and features.
+               Here are a few great ones to check out.`)}</p>
+          </div>
+          <a href="#" className="play-video">
+            <p>
+              <span>{_('Click to play')}</span>
+              <span className="visually-hidden">{_('to find out more about add-ons')}</span>
+            </p>
+          </a>
+        </header>
         {results.map((item, i) => <Addon {...camelCaseProps(item)} key={i} />)}
       </div>
     );

src/disco/css/Addon.scss

@@ -8,23 +8,36 @@ $secondary-text-color: #6a6a6a;
   overflow: hidden;
 
   .theme-image {
+    display: block;
     width: 100%;
   }
 
+  .install-button {
+    margin: 0 20px 0 30px;
+  }
+
   .content {
     align-items: center;
     display: flex;
     flex-direction: row;
     line-height: 1.5;
-    padding: 20px;
 
     .logo {
+      align-items: center;
+      align-self: stretch;
+      background: #fcfcfc;
+      display: flex;
+      padding: 0 15px;
+
+      img {
+        display: block;
         height: 64px;
         width: 64px;
       }
+    }
 
     .copy {
-      padding: 0 20px;
+      padding: 30px 20px;
       flex-grow: 1;
 
       .heading {
@@ -46,16 +59,14 @@ $secondary-text-color: #6a6a6a;
         margin: 0.5em 0;
       }
 
-      // Remove the left-padding if the copy block
-      // is the first-child of its parent (e.g. a theme)
-      &:first-child {
-        padding-left: 0;
-      }
-
       // Remove the bottom margin of the last element.
       & :last-child {
         margin-bottom: 0;
       }
     }
   }
+
+  &.theme .content .copy {
+    padding: 20px;
+  }
 }

src/disco/css/App.scss

@@ -1,7 +1,7 @@
 @import "~normalize.css";
 @import "~core/css/inc/lib";
 
-$page-background: #d4d4d4;
+$page-background: #f5f5f5;
 
 html,
 body {
@@ -10,6 +10,7 @@ body {
     "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans",
     "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 14px;
 }
 
 * {
@@ -21,7 +22,57 @@ img {
 }
 
 .disco-pane {
-  padding: 50px;
+  box-sizing: content-box;
+  padding: 50px 20px;
   margin: 0 auto;
   max-width: 680px;
 }
+
+header {
+  display: flex;
+  border-bottom: 2px solid #ddd;
+  flex-direction: row;
+  margin-bottom: 40px;
+  padding-bottom: 40px;
+
+  .content {
+    flex-grow: 1;
+  }
+
+  h1 {
+    display: block;
+    letter-spacing: 0.11ex;
+    line-height: 1.5;
+    font-size: 22px;
+    font-weight: 400;
+    margin: 0 0 20px;
+  }
+
+  p:last-child {
+    display: block;
+    margin-bottom: 0;
+  }
+
+  .play-video {
+    background: #ccc;
+    border-radius: 5px;
+    display: block;
+    flex-grow: 0;
+    margin-left: 50px;
+    min-height: 120px;
+    min-width: 215px;
+
+    &:hover {
+      color: #fff;
+      background: #666;
+    }
+
+    p {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      margin-top: 0;
+    }
+  }
+}