Restyling the app

app/components/AddTodo.jsx

@@ -14,7 +14,7 @@ var AddTodo = React.createClass({
   render: function() {
     var {id, text, time, complete} = this.props;
     return (
-      <div>
+      <div className="container__footer">
         <form ref="form" onSubmit={this.handleAddTodo} className="addtodo-form">
           <input type="text" placeholder="Enter a To Do Item" ref="todoText"/>
           <button className="button expanded">Add To Do</button>

app/components/Todo.jsx

@@ -4,6 +4,7 @@ var moment = require('moment');
 var Todo = React.createClass({
   render: function() {
     var {id, text, createdAt, completedAt, complete} = this.props;
+    var todoClassName = (complete) ? 'todo todo-complete' : 'todo';
 
       var renderDate = () => {
           var message = 'Created: ';
@@ -16,12 +17,14 @@ var Todo = React.createClass({
       }
 
     return (
-      <div onClick={() => {this.props.onToggle(this.props.id);}}>
-        <label>
-          <input type="checkbox" ref="markCompleted" checked={complete}/>
+      <div className={todoClassName} onClick={() => {this.props.onToggle(this.props.id);}}>
+        <div>
+            <input type="checkbox" ref="markCompleted" checked={complete}/>
+        </div>
+        <div>
             <p>{text}</p>
-          <p><small>{renderDate()}</small></p>
-        </label>
+            <p className="todo__subtext">{renderDate()}</p>
+        </div>
       </div>
     );
   }

app/components/TodoApp.jsx

@@ -51,24 +51,14 @@ var TodoApp = React.createClass({
     var filteredTodos = TodoAPI.filterTodos(todos, showCompleted, searchText);
     return (
       <div>
+        <h1 className="page-title">Todo App</h1>
         <div className="row">
-          <div className="small-centered medium-6 large-4 columns">
-            <h1 className="text-center">Todo App</h1>
-          </div>
-        </div>
-        <div className="row">
-          <div className="small-centered medium-6 large-4 columns">
-            <TodoSearch onSearch={this.handleFilterTodo}/>
-          </div>
-        </div>
-        <div className="row">
-          <div className="small-centered medium-6 large-4 columns">
-            <TodoList list={filteredTodos} onToggle={this.handleToggle}/>
-          </div>
-        </div>
-        <div className="row">
-          <div className="small-centered medium-6 large-4 columns">
-            <AddTodo onNewTodo={this.handleAddTodo}/>
+          <div className="column small-centered small-11 medium-6 large-5">
+            <div className="container">
+                <TodoSearch onSearch={this.handleFilterTodo}/>
+                <TodoList list={filteredTodos} onToggle={this.handleToggle}/>
+                <AddTodo onNewTodo={this.handleAddTodo}/>
+            </div>
           </div>
         </div>
       </div>

app/components/TodoList.jsx

@@ -6,6 +6,12 @@ var TodoList = React.createClass({
     var {list} = this.props;
 
     var renderTodoList = () => {
+        if (list.length === 0) {
+            return (
+                <p className="container__message">Nothing to do</p>
+            )
+        }
+
       return list.map((todo) => {
         return (
           <div className="row" key={todo.id}>

app/components/TodoSearch.jsx

@@ -9,7 +9,7 @@ var TodoSearch = React.createClass({
   render: function() {
     var {id, text, time, complete} = this.props;
     return (
-      <div>
+      <div className="container__header">
         <div>
           <input type="search" placeholder="Enter search filter" ref="searchText" onChange={this.handleSearch}/>
         </div>

app/styles/app.scss

@@ -6,3 +6,6 @@
 @include foundation-everything;
 
 // Components
+@import "components/container";
+@import "components/page-title";
+@import "components/todo";

app/styles/base/_variables.scss

@@ -1,6 +1,8 @@
 //Colors
-$grey: #333333;
-$light-grey: #555555;
-$white: #FFFFFF;
+$grey: #333;
+$light-grey: #FAFAFA;
+$light-grey-border: #EEE;
+$white: #FFF;
 $light-blue: #B5D0E2;
 $dark-blue: #2099E8;
+$light-color: #AAA;

app/styles/components/_container.scss

@@ -0,0 +1,33 @@
+.container {
+    background: $light-grey;
+    border: 1px solid $light-grey-border;
+    border-radius: 5px;
+    padding: 0;
+    margin-bottom: 2rem;
+}
+
+.container__header {
+    border-bottom: 1px solid $light-grey-border;
+    padding: 1rem;
+
+    label {
+        cursor: pointer;
+        font-size: 1rem;
+    }
+
+    > :last-child {
+        align-items: center;
+        display: flex;
+    }
+}
+
+.container__footer {
+    border-top: 1px solid $light-grey-border;
+    padding: 1rem 1rem 0 1rem;
+}
+
+.container__message {
+    color: $light-color;
+    margin: 2rem auto;
+    text-align: center;
+}

app/styles/components/_page-title.scss

@@ -0,0 +1,5 @@
+.page-title {
+    margin: 0;
+    padding: 2rem 0;
+    text-align: center;
+}

app/styles/components/_todo.scss

@@ -0,0 +1,30 @@
+.todo {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: 1rem;
+    transition: background .3s ease;
+
+    p, input {
+        margin: 0;
+    }
+
+    > :first-child {
+       margin-right: 1rem; 
+    }
+
+    &:hover {
+        background: #F0F0F0;
+    }
+}
+
+.todo__subtext {
+    color: #999;
+}
+
+.todo-complete {
+    p, .todo__subtext {
+        color: $light-color;
+        text-decoration: line-through;
+    }
+}

app/tests/components/TodoList.test.jsx

@@ -24,11 +24,12 @@ describe('TodoList', () => {
     expect(todosComponents.length).toBe(todos.length);
   });
 
-
-  // describe('render', () => {
-  //   it('should render TodoList to output', () => {
-  //     var todoList = TestUtils.renderIntoDocument(<TodoList/>);
-  //     expect(todoList).toBe(1);
-  //   });
-  // });
+  it('should render render empty message if no todos', () => {
+    var todos = [];
+    var todoList = TestUtils.renderIntoDocument(<TodoList list={todos}/>);
+    var $el = $(ReactDOM.findDOMNode(todoList));
+
+    var emptyMessage = $el.find('.container__message');
+    expect(emptyMessage.length).toBe(1);
+  });
 });