Adding style to new comments button.

client/coral-embed-stream/src/NewCount.js

@@ -1,4 +1,7 @@
 import React, {PropTypes} from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations.json';
+const lang = new I18n(translations);
 
 const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, updateCountCache}) => (e) => {
   e.preventDefault();
@@ -14,12 +17,14 @@ const onLoadMoreClick = ({loadMore, commentCount, firstCommentDate, assetId, upd
 const NewCount = (props) => {
   const newComments = props.commentCount - props.countCache;
 
-  return <div>
+  return <div className='coral-new-comments'>
     {
       props.countCache && newComments > 0 &&
-      <div onClick={onLoadMoreClick(props)}>
-        Load {newComments} More Comments
-      </div>
+      <button onClick={onLoadMoreClick(props)} className='coral-load-more'>
+        {newComments === 1
+          ? lang.t('newCount', newComments, lang.t('comment'))
+          : lang.t('newCount', newComments, lang.t('comments'))}
+      </button>
     }
   </div>;
 };

client/coral-embed-stream/style/default.css

@@ -336,18 +336,26 @@ button.coral-load-more {
   text-align: center;
   color: #FFF;
   background-color: #2376D8;
+  cursor: pointer;
 }
 
 button.coral-load-more:hover {
   background-color: #4399FF;
 }
 
-.coral-load-more-replies {
+.coral-load-more-replies, .coral-new-comments {
   width: 100%;
   display: flex;
   justify-content: center;
+  cursor: pointer;
 }
 
-.coral-load-more-replies button.coral-load-more {
+.coral-new-comments {
+  position: relative;
+  top: 1.8em;
+  z-index: 100;
+}
+
+.coral-load-more-replies button.coral-load-more, .coral-new-comments  button.coral-load-more{
   width: initial;
 }

client/coral-framework/translations.json

@@ -11,6 +11,9 @@
       "button": "Submit",
       "error": "Usernames can contain letters, numbers and _ only"
     },
+    "newCount": "View {0} more {1}",
+    "comment": "comment",
+    "comments": "comments",
     "error": {
       "emailNotVerified": "Email address {0} not verified.",
       "email": "Not a valid E-Mail",