1 files changed, 19 insertions, 4 deletions
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index 68c1efaad..e54bc8c04 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -1,17 +1,32 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar             from './avatar';
+import DisplayName        from './display_name';
+import RelativeTimestamp  from './relative_timestamp';
 
 const Status = React.createClass({
   propTypes: {
     status: ImmutablePropTypes.map.isRequired
   },
 
-  render: function() {
+  render () {
     var content = { __html: this.props.status.get('content') };
+    var status  = this.props.status;
 
     return (
-      <div style={{ padding: '5px' }}>
-        <div><strong>{this.props.status.getIn(['account', 'username'])}</strong></div>
-        <div dangerouslySetInnerHTML={content} />
+      <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b' }}>
+        <Avatar src={status.getIn(['account', 'avatar'])} />
+
+        <div style={{ flex: '1 1 auto', marginLeft: '10px' }}>
+          <div style={{ overflow: 'hidden' }}>
+            <div style={{ float: 'right' }}>
+              <a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+            </div>
+
+            <DisplayName account={status.get('account')} />
+          </div>
+
+          <div className='status__content' dangerouslySetInnerHTML={content} style={{ fontSize: '14px' }} />
+        </div>
       </div>
     );
   }