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/admin_console/cluster_settings.jsx

@@ -120,12 +120,12 @@ export default class ClusterSettings extends AdminSettings {
             <SettingsGroup>
                 {configLoadedFromCluster}
                 {clusterTableContainer}
-                <p>
+                <div className='banner'>
                     <FormattedMessage
                         id='admin.cluster.noteDescription'
                         defaultMessage='Changing properties in this section will require a server restart before taking effect. When High Availability mode is enabled, the System Console is set to read-only and can only be changed from the configuration file unless ReadOnlyConfig is disabled in the configuration file.'
                     />
-                </p>
+                </div>
                 {warning}
                 <BooleanSetting
                     id='Enable'

webapp/components/admin_console/database_settings.jsx

@@ -108,12 +108,12 @@ export default class DatabaseSettings extends AdminSettings {
 
         return (
             <SettingsGroup>
-                <p>
+                <div className='banner'>
                     <FormattedMessage
                         id='admin.sql.noteDescription'
                         defaultMessage='Changing properties in this section will require a server restart before taking effect.'
                     />
-                </p>
+                </div>
                 <div className='form-group'>
                     <label
                         className='control-label col-sm-4'

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>
         );

webapp/components/sidebar.jsx

@@ -745,15 +745,15 @@ export default class Sidebar extends React.Component {
 
         const above = (
             <FormattedMessage
-                id='sidebar.unreadAbove'
-                defaultMessage='Unread post(s) above'
+                id='sidebar.unreads'
+                defaultMessage='More unreads'
             />
         );
 
         const below = (
             <FormattedMessage
-                id='sidebar.unreadBelow'
-                defaultMessage='Unread post(s) below'
+                id='sidebar.unreads'
+                defaultMessage='More unreads'
             />
         );
 

webapp/components/unread_channel_indicator.jsx

@@ -6,18 +6,25 @@ import PropTypes from 'prop-types';
 // Indicator for the left sidebar which indicate if there's unread posts in a channel that is not shown
 // because it is either above or below the screen
 import React from 'react';
+import Constants from 'utils/constants.jsx';
 
 export default function UnreadChannelIndicator(props) {
+    const unreadIcon = Constants.UNREAD_ICON_SVG;
     let displayValue = 'none';
     if (props.show) {
         displayValue = 'block';
     }
+
     return (
         <div
             className={'nav-pills__unread-indicator ' + props.extraClass}
             style={{display: displayValue}}
         >
             {props.text}
+            <span
+                className='icon icon__unread'
+                dangerouslySetInnerHTML={{__html: unreadIcon}}
+            />
         </div>
     );
 }