Fix display of text in News Feed; style JSONFeedReader

ui/src/status/components/JSONFeedReader.js

@@ -1,18 +1,28 @@
 import React, {PropTypes} from 'react'
 
-import FancyScrollbar from 'shared/components/FancyScrollbar'
+import moment from 'moment'
 
 const JSONFeedReader = ({data}) =>
-  <FancyScrollbar>
-    {data
-      ? data.items.map(({date_published, title, content_html}, i) =>
-          <div key={i}>
-            <span>{`${new Date(date_published)}`}</span><h6>{title}</h6>
-            <div dangerouslySetInnerHTML={{__html: content_html}} />
+  data
+    ? <div className="row" style={{padding: '10px'}}>
+        {data.items.map(({date_published, title, content_html}, i) =>
+          <div key={i} style={{display: 'block'}}>
+            <div className="col-sm-12">
+              <div className="col-sm-3" style={{display: 'inline'}}>
+                <span>{`${moment(date_published).format('MMM D')}`}</span>
+              </div>
+              <div className="col-sm-9" style={{display: 'inline'}}>
+                <span><b>{title}</b></span>
+                <div dangerouslySetInnerHTML={{__html: content_html}} />
+              </div>
+            </div>
+            <div className="col-sm-12">
+              <hr />
+            </div>
           </div>
-        )
-      : null}
-  </FancyScrollbar>
+        )}
+      </div>
+    : null
 
 const {shape} = PropTypes
 

ui/src/status/components/NewsFeed.js

@@ -4,6 +4,7 @@ import {bindActionCreators} from 'redux'
 
 import {fetchJSONFeedAsync} from 'src/status/actions'
 
+import FancyScrollbar from 'shared/components/FancyScrollbar'
 import JSONFeedReader from 'src/status/components/JSONFeedReader'
 
 class NewsFeed extends Component {
@@ -26,7 +27,7 @@ class NewsFeed extends Component {
     }
 
     return (
-      <div>
+      <FancyScrollbar>
         {isFetching
           ? // TODO: Factor this out of here and AutoRefresh
             <div className="graph-panel__refreshing">
@@ -37,7 +38,7 @@ class NewsFeed extends Component {
           : null}
         {isFailed ? <span>Failed to refresh NewsFeed</span> : null}
         <JSONFeedReader data={data} />
-      </div>
+      </FancyScrollbar>
     )
   }