Multiple Ui improvements (#7029)

* PLT-7119 - Updating headings on compact view

* PLT-7103 - Removing line below channel intro

* PLT-7112 - Fixing system console banner

* PLT-7144 - Adding ellipsis to system console boxes

* PLT-7181 - Changing channel header opacity

* PLT-6899 - Updating unread bar

* Updating margin for new messages indicator

webapp/components/post_view/new_message_indicator.jsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import Constants from 'utils/constants.jsx';
 import {FormattedMessage} from 'react-intl';
 
 export default class NewMessageIndicator extends React.PureComponent {
@@ -30,6 +31,7 @@ export default class NewMessageIndicator extends React.PureComponent {
     }
 
     render() {
+        const unreadIcon = Constants.UNREAD_ICON_SVG;
         let className = 'new-messages__button';
         if (this.state.visible > 0) {
             className += ' visible';
@@ -44,14 +46,15 @@ export default class NewMessageIndicator extends React.PureComponent {
                 ref='indicator'
             >
                 <div onClick={this.props.onClick}>
-                    <i
-                        className='fa fa-angle-down'
-                    />
                     <FormattedMessage
                         id='posts_view.newMsgBelow'
-                        defaultMessage='New {count, plural, one {message} other {messages}} below'
+                        defaultMessage='New {count, plural, one {message} other {messages}}'
                         values={{count: this.props.newMessages}}
                     />
+                    <span
+                        className='icon icon__unread'
+                        dangerouslySetInnerHTML={{__html: unreadIcon}}
+                    />
                 </div>
             </div>
         );