style changes for feed component

add usernames to feed messages

src/js/components/feed.jsx

@@ -30,14 +30,14 @@ module.exports = React.createClass({
       }
 
       this.setState({
-        messages: _(messages).sortBy('timestamp').reverse().value()
+        messages: _(messages).sortBy('timestamp').reverse().value().slice(0, 40)
       });
     }).catch(throwError);
   },
   render() {
     var messages = this.state.messages.map((message) => {
 
-      var image = <img className="message__image" src={message.image} />;
+      var image = <img src={message.image} />;
 
       if(message.imageLink) {
         image = <a target="_blank" href={message.imageLink}>{image}</a>;
@@ -45,8 +45,11 @@ module.exports = React.createClass({
 
       return (
         <div className="message">
-          {image}
+          <div className="message__image">{image}</div>
           <div className="message__content">
+            <div className="message__user">
+              <a href={message.userLink}>{message.user}</a>
+            </div>
             <div className="message__body" dangerouslySetInnerHTML={{__html:message.body}}></div>
             <div className="message__icon">
               <i className={`fa fa-${message.type}`}></i>

src/styles/style.styl

@@ -215,23 +215,29 @@ footer
     padding-right 0
 
 .message
-  padding 0.5em
+  padding 1em
   padding-right 2em
-
   border-top 1px solid #E5E5E5
   position relative
-  overflow auto
+  display flex
+
+.message__content
+  flex 1
 
 .message__body
   font-weight 400
   font-size 14px
+  line-height 1.4em
 
 .message__image
-  width 2.5em
-  float left
-  margin-right 0.5em
-  margin-top 0.2em
-  vertical-align top
+  width 50px
+  margin-right 1em
+  margin-top 0.5em
+  text-align center
+  a
+    outline 0
+  img
+    width 50px
 
 .message__icon
   margin 6px
@@ -248,7 +254,8 @@ footer
 
 .message__details
   font-size 0.7em
-  margin-top 0.3em
+  margin-top 0.5em
+
 .message__meta
   margin-left 0.5em