Post list design updates

app/assets/javascripts/components/posts/post_list.js.jsx

@@ -10,10 +10,8 @@ var PostList = React.createClass({
 
   render: function() {
     return (
-      <div className="row mt0">
-        <div className="col-xs-12">
-          {this.renderPosts()}
-        </div>
+      <div className="sm-col-12">
+        {this.renderPosts()}
       </div>
     );
   },
@@ -24,15 +22,15 @@ var PostList = React.createClass({
     if (!posts.length) {
       var product = ProductStore.getProduct().name;
 
-      return [
-        <h4 className="gray-2" key="heading">
-          There don't seem to be any posts here
-        </h4>,
-
-        <p key="explanation">
-          {"Blog posts by " + product + "'s partners will appear here just as soon as they're written."}
-        </p>
-      ];
+      return (
+        <div className="bg-white border rounded p3 mb3 center" key="explanation">
+          <div className="h2 mt2 gray-3">
+            <Icon icon="edit" />
+          </div>
+          <h3 className="light mt2">No posts here...yet!</h3>
+          <p className="gray-2">{"Blog posts by " + ProductStore.getProduct().name + "'s partners will appear here as soon as they're written."}</p>
+        </div>
+      );
     }
 
     return _.map(posts, function(post) {

app/assets/javascripts/components/posts/post_list_item.js.jsx

@@ -14,7 +14,6 @@ var PostListIem = React.createClass({
   /**
    * ListItemMixin: this.onModalHidden()
    *                this.renderComments({Number: count})
-   *                this.renderLove({String: news_feed_item_id})
    *                this.renderTags({[Object: tag]})
    *                this.showModal()
    */
@@ -28,21 +27,31 @@ var PostListIem = React.createClass({
 
   render: function() {
     var post = this.props.post;
+    var user = post.user;
 
     return (
       <div className="bg-white rounded shadow mb2">
-        <div className="px3">
-          {this.renderTitle()}
+        <div className="px3 py1">
+          <a href={post.url} className="h4 mt2 black block">
+            {post.title}
+          </a>
+          <p className="mb1 h6 gray-2">
+            written {moment(post.created_at).fromNow()} by <a href={user.url}>@{user.username}</a>
+          </p>
+
           {this.renderSummary()}
         </div>
 
-        <div className="px3 mb1 mt0 gray-2">
-
-          {this.renderComments(post.comments_count)}
+        <div className="border-top px3 py2 gray-2">
+          <div>
+            <div className="inline-block mr2">
+              <Heart size="small" heartable_type='NewsFeedItem' heartable_id={this.props.post.news_feed_item_id} />
+            </div>
+            {this.renderComments(post.comments_count)}
+          </div>
           {this.renderTags(post.marks)}
         </div>
-        {this.renderLove(this.props.post.news_feed_item_id)}
-        {this.renderUser()}
+
         {this.renderModal()}
       </div>
 
@@ -71,40 +80,11 @@ var PostListIem = React.createClass({
 
     if (post.summary) {
       return (
-        <div className="h5 mt0 mb2 gray-2">
+        <div className="h5 mt2 mb2 gray-1">
           {post.summary}
         </div>
       );
     }
-  },
-
-  renderTitle: function() {
-    var post = this.props.post;
-
-    return (
-      <div className="h4 mb1 mt0" style={{ paddingTop: '1rem' }}>
-        <a href={post.url} className="black">
-          {post.title}
-        </a>
-      </div>
-    );
-  },
-
-  renderUser: function() {
-    var post = this.props.post;
-    var user = post.user;
-
-    return (
-      <div className="h6 px3 py2 b0 mt0 border-top clearfix">
-        <div className="left mr2">
-          <Avatar user={user} size={24} />
-        </div>
-
-        <div className="overflow-hidden gray-2">
-          <a href={user.url}>@{user.username}</a> wrote this post {moment(post.created_at).fromNow()}
-        </div>
-      </div>
-    );
   }
 });
 

app/assets/javascripts/components/posts/posts_index.js.jsx

@@ -67,11 +67,11 @@ var PostsIndex = React.createClass({
       <div>
         <div className="clearfix mxn3">
           <div className="sm-col-right sm-col-4 px3">
-            <Button action={window.showCreatePost} block={true}>Write a new post</Button>
+            <Button action={window.showCreatePost} block={true} type="primary">Write a new post</Button>
 
-            <div className="pb1"> {/*Filters*/}
+            <div className="mt2 mb2"> {/*Filters*/}
               <Accordion title="Filters">
-                <ul className="list-reset mxn2">
+                <ul className="list-reset">
                   {this.renderFilters()}
                 </ul>
               </Accordion>
@@ -84,7 +84,7 @@ var PostsIndex = React.createClass({
             </div>
           </div>
 
-          <div className="sm-col sm-col-8 px3">
+          <div className="sm-col sm-col-8 sm-px2 md-px3">
             {this.state.loading ? <Spinner /> : <PostList posts={posts} />}
           </div>
         </div>
@@ -94,23 +94,24 @@ var PostsIndex = React.createClass({
 
   renderFilters: function() {
     var path = window.location.pathname;
+    var filterItemClasses = "block py2 px3 lh1 rounded bg-darken-1-hover";
 
     return [
-      <li className="mb1 lh0_9" key="filter-all">
-        <a href={path + "?discussions=true"} className="pill-hover block py1 px3" onClick={this.fetchDiscussions}>
-          <span className="fs1 fw-500 caps">all posts</span>
+      <li className="mb1" key="filter-all">
+        <a href={path + "?discussions=true"} className={filterItemClasses} onClick={this.fetchDiscussions}>
+          <span className="h5 bold caps lh1">all posts</span>
         </a>
       </li>,
 
-      <li className="mb1 lh0_9" key="filter-announcements">
-        <a href={path + "?announcements=true"} className="pill-hover block py1 px3" onClick={this.fetchAnnouncements}>
-          <span className="fs1 fw-500 caps">announcements</span>
+      <li className="mb1" key="filter-announcements">
+        <a href={path + "?announcements=true"} className={filterItemClasses} onClick={this.fetchAnnouncements}>
+          <span className="h5 bold caps lh1">announcements</span>
         </a>
       </li>,
 
-      <li className="mb1 lh0_9" key="filter-archived">
-        <a href={path + "?archived=true"} className="pill-hover block py1 px3" onClick={this.fetchArchivedPosts}>
-          <span className="fs1 fw-500 caps">archived posts</span>
+      <li className="mb1" key="filter-archived">
+        <a href={path + "?archived=true"} className={filterItemClasses} onClick={this.fetchArchivedPosts}>
+          <span className="h5 bold caps lh1">archived posts</span>
         </a>
       </li>
     ];

app/assets/javascripts/components/story_timeline.js.jsx

@@ -69,8 +69,12 @@ const StoryTimeline = React.createClass({
           <div className="p2 mr1 bold gray-2 border-bottom">
             Activity Minifeed
           </div>
-          <div className="p2 gray-2">
-            No activity to show
+          <div className="p2 gray-2 center">
+            <div className="h3">
+              <Icon icon="bolt" />
+            </div>
+
+            <p>No activity to show yet</p>
           </div>
         </div>
       )

app/assets/javascripts/components/ui/accordion.js.jsx

@@ -18,7 +18,7 @@ const Accordion = React.createClass({
         chevron = null
 
     if (this.state.open) {
-      content = <div className="px3">{this.props.children}</div>
+      content = this.props.children
     }
 
     if (this.state.open) {
@@ -29,7 +29,7 @@ const Accordion = React.createClass({
 
     return (
       <div>
-        <a className="pill block black black-hover pointer px3 py1 mb1 h5 mt0 mb0 visible-hover-wrapper" onClick={this.toggleOpen}>
+        <a className="pill block black black-hover bg-darken-1-hover pointer px3 py1 mb1 h5 mt0 mb0 visible-hover-wrapper" onClick={this.toggleOpen}>
           <div className="visible-hover right gray-2">
             {chevron}
           </div>

app/assets/javascripts/mixins/list_item_mixin.js.jsx

@@ -33,8 +33,8 @@ var ListItemMixin = {
 
     return tags.map(function(tag) {
       return (
-        <a className="mr2" href={tag.url} key={'post-tag-' + tag.name}>
-          <Label name={tag.name} />
+        <a className="gray-2 caps h6 mr2" href={tag.url} key={'post-tag-' + tag.name}>
+          #{tag.name}
         </a>
       )
     });

app/assets/stylesheets/utilities/_type.scss

@@ -37,6 +37,14 @@
   font-size: 1rem;
 }
 
+.light {
+  font-weight: 300;
+}
+
+.lh1 {
+  line-height: 1rem;
+}
+
 .ellipsis {
   text-overflow: ellipsis;
 }