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

1 files changed, 7 insertions, 0 deletions

diff --git a/webapp/components/unread_channel_indicator.jsx b/webapp/components/unread_channel_indicator.jsx
index d1ffd4c0a..9462761ac 100644
--- a/webapp/components/unread_channel_indicator.jsx
+++ b/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>
     );
 }