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

13 files changed, 56 insertions, 23 deletions

diff --git a/webapp/components/admin_console/cluster_settings.jsx b/webapp/components/admin_console/cluster_settings.jsx
index 0c3346c5a..36f86f0ef 100644
--- a/webapp/components/admin_console/cluster_settings.jsx
+++ b/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'
diff --git a/webapp/components/admin_console/database_settings.jsx b/webapp/components/admin_console/database_settings.jsx
index 303865d91..9f008483c 100644
--- a/webapp/components/admin_console/database_settings.jsx
+++ b/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'
diff --git a/webapp/components/post_view/new_message_indicator.jsx b/webapp/components/post_view/new_message_indicator.jsx
index d5fb6c1d3..537520c29 100644
--- a/webapp/components/post_view/new_message_indicator.jsx
+++ b/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>
         );
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 25ad51ba9..788f14cd9 100644
--- a/webapp/components/sidebar.jsx
+++ b/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'
             />
         );
 
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>
     );
 }
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 202aad177..57ef37a07 100755
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1923,7 +1923,7 @@
   "posts_view.loadMore": "Load more messages",
   "posts_view.loadingMore": "Loading more messages...",
   "posts_view.newMsg": "New Messages",
-  "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}} below",
+  "posts_view.newMsgBelow": "New {count, plural, one {message} other {messages}}",
   "quick_switch_modal.channels": "Channels",
   "quick_switch_modal.channelsShortcut.mac": "- ⌘K",
   "quick_switch_modal.channelsShortcut.windows": "- CTRL+K",
@@ -2026,8 +2026,7 @@
   "sidebar.tutorialScreen1": "<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Channel</strong> for multiple people.</p>",
   "sidebar.tutorialScreen2": "<h4>\"{townsquare}\" and \"{offtopic}\" channels</h4><p>Here are two public channels to start:</p><p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p><p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>",
   "sidebar.tutorialScreen3": "<h4>Creating and Joining Channels</h4><p>Click <strong>\"More...\"</strong> to create a new channel or join an existing one.</p><p>You can also create a new channel by clicking the <strong>\"+\" symbol</strong> next to the public or private channel header.</p>",
-  "sidebar.unreadAbove": "Unread post(s) above",
-  "sidebar.unreadBelow": "Unread post(s) below",
+  "sidebar.unreads": "More unreads",
   "sidebar_header.tutorial": "<h4>Main Menu</h4><p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p><p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>",
   "sidebar_right_menu.accountSettings": "Account Settings",
   "sidebar_right_menu.addMemberToTeam": "Add Members to Team",
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 9a4d6771e..44b8ab4f0 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -249,8 +249,7 @@
 }
 
 .channel-intro {
-    border-bottom: 1px solid $light-gray;
-    margin: 0 auto 15px;
+    margin: 0 auto 10px;
     padding: 0 15px;
 
     &.channel-intro--centered {
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 272d22479..cb2431555 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -284,7 +284,7 @@
         bottom: 0;
         font-size: 13.5px;
         left: 0;
-        margin: 0 auto;
+        margin: 5px auto;
         position: absolute;
         right: 0;
         text-align: center;
@@ -299,11 +299,15 @@
             top: 1px;
         }
 
+        .icon {
+            margin-left: 5px;
+        }
+
         div {
             @include border-radius(50px);
             cursor: pointer;
             display: inline-block;
-            padding: 5px 10px;
+            padding: 4px 20px 3px;
         }
 
         &.visible {
@@ -774,6 +778,7 @@
         }
 
         .markdown__heading {
+            clear: both;
             font-size: 1em;
             margin: 0;
         }
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index 4be608803..515f87a87 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -154,15 +154,25 @@
         font-size: 13.5px;
         left: 15px;
         margin: 0 auto;
-        padding: 3px 0 4px;
+        padding: 4px 0 3px;
         position: fixed;
         text-align: center;
         width: 190px;
         z-index: 1;
+
+        .icon {
+            margin-left: 5px;
+        }
     }
 
     .nav-pills__unread-indicator-top {
         top: 80px;
+
+        .icon {
+            svg {
+                @include transform(rotate(180deg));
+            }
+        }
     }
 
     .nav-pills__unread-indicator-bottom {
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 7b449e2c8..9e8c74484 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -183,7 +183,7 @@
         border: 1px solid #ddd;
         font-size: .95em;
         margin: 2em 0;
-        padding: .7em 1.5em;
+        padding: .8em 1.5rem;
 
         .banner__heading {
             font-size: 1.5em;
diff --git a/webapp/sass/routes/_statistics.scss b/webapp/sass/routes/_statistics.scss
index 5a35039e7..85232708a 100644
--- a/webapp/sass/routes/_statistics.scss
+++ b/webapp/sass/routes/_statistics.scss
@@ -16,6 +16,14 @@
             padding: 7px 10px;
             text-align: left;
 
+            span {
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                width: calc(100% - 20px);
+            }
+
             .fa {
                 color: #555555;
                 float: right;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index 0ff90087a..69492e95c 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -446,6 +446,7 @@ export const Constants = {
     OPEN_TEAM: 'O',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
+    UNREAD_ICON_SVG: "<svg width='10px' height='10px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><g transform='matrix(1,0,0,1,-20,-18)'><g transform='matrix(0.0330723,0,0,0.0322634,15.8132,12.3164)'><path d='M245.803,377.493C245.803,377.493 204.794,336.485 179.398,311.088C168.55,300.24 150.962,300.24 140.114,311.088C138.327,312.875 136.517,314.686 134.73,316.473C123.882,327.321 123.882,344.908 134.73,355.756C167.972,388.998 233.949,454.975 256.949,477.975C262.158,483.184 269.223,486.111 276.591,486.111C277.38,486.111 278.176,486.111 278.965,486.111C286.332,486.111 293.397,483.184 298.607,477.975C321.607,454.975 387.584,388.998 420.826,355.756C431.674,344.908 431.674,327.321 420.826,316.473C419.039,314.686 417.228,312.875 415.441,311.088C404.593,300.24 387.005,300.24 376.158,311.088C350.761,336.485 309.753,377.493 309.753,377.493C309.753,377.493 309.753,279.687 309.753,203.94C309.753,196.573 306.826,189.508 301.617,184.298C296.408,179.089 289.342,176.162 281.975,176.162C279.191,176.162 276.364,176.162 273.58,176.162C266.213,176.162 259.148,179.089 253.939,184.298C248.729,189.508 245.803,196.573 245.803,203.94L245.803,377.493Z'/></g></g></svg>",
     MEMBERS_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Symbols' stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g id='Channel-Header/Web-HD' transform='translate(-725.000000, -32.000000)' fill-rule='nonzero' fill='inherit'> <g id='Channel-Header'> <g id='user-count' transform='translate(676.000000, 22.000000)'> <path d='M64.9481342,24 C64.6981342,20.955 63.2551342,19.076 60.6731342,18.354 C61.4831342,17.466 61.9881342,16.296 61.9881342,15 C61.9881342,12.238 59.7501342,10 56.9881342,10 C54.2261342,10 51.9881342,12.238 51.9881342,15 C51.9881342,16.297 52.4941342,17.467 53.3031342,18.354 C50.7221342,19.076 49.2771342,20.955 49.0271342,24 C49.0161342,24.146 49.0061342,24.577 49.0001342,25.001 C48.9911342,25.553 49.4361342,26 49.9881342,26 L63.9881342,26 C64.5411342,26 64.9851342,25.553 64.9761342,25.001 C64.9701342,24.577 64.9601342,24.146 64.9481342,24 Z M56.9881342,12 C58.6421342,12 59.9881342,13.346 59.9881342,15 C59.9881342,16.654 58.6421342,18 56.9881342,18 C55.3341342,18 53.9881342,16.654 53.9881342,15 C53.9881342,13.346 55.3341342,12 56.9881342,12 Z M51.0321342,24 C51.2981342,21.174 52.7911342,20 55.9881342,20 L57.9881342,20 C61.1851342,20 62.6781342,21.174 62.9441342,24 L51.0321342,24 Z' id='User_4_x2C__Profile_5-Copy-9'></path> </g> </g> </g> </g> </svg>",
     TEAM_INFO_SVG: "<svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g transform='matrix(1.17647,0,0,1.17647,-1.55431e-15,-1.00573e-14)'> <path d='M8.5,0C3.797,0 0,3.797 0,8.5C0,13.203 3.797,17 8.5,17C13.203,17 17,13.203 17,8.5C17,3.797 13.203,0 8.5,0ZM10,8.5C10,7.672 9.328,7 8.5,7C7.672,7 7,7.672 7,8.5L7,12.45C7,13.278 7.672,13.95 8.5,13.95C9.328,13.95 10,13.278 10,12.45L10,8.5ZM8.5,3C9.328,3 10,3.672 10,4.5C10,5.328 9.328,6 8.5,6C7.672,6 7,5.328 7,4.5C7,3.672 7.672,3 8.5,3Z'/> </g> </svg>",
     FLAG_FILLED_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1073.000000, -33.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(-1.000000, 0.000000)'> <g transform='translate(1064.000000, 22.000000)'> <g transform='translate(10.000000, 11.000000)'> <path d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z'></path> </g> </g> </g> </g> </g> </svg>",
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index da5436737..658ccd74b 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -492,11 +492,10 @@ export function applyTheme(theme) {
     if (theme.sidebarText) {
         changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText);
         changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover, .app__body .sidebar__switcher button:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15));
-        changeCss('.sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+        changeCss('.app__body .sidebar--left .nav-pills__container li > h4, .app__body .sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8));
         changeCss('.app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8));
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
-        changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus, .app__body .sidebar--left .nav-pills__container li > h4', 'color:' + theme.sidebarText);
         changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg, .app__body .sidebar-item .icon', 'fill:' + theme.sidebarText);
         changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
@@ -571,6 +570,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.mentionColor) {
+        changeCss('.sidebar--left .nav-pills__unread-indicator svg', 'fill:' + theme.mentionColor);
         changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor);
         changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor);
         changeCss('.app__body .multi-teams .team-sidebar .badge', 'color:' + theme.mentionColor);
@@ -715,6 +715,7 @@ export function applyTheme(theme) {
 
     if (theme.buttonColor) {
         changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor);
+        changeCss('.app__body .new-messages__button svg', 'fill:' + theme.buttonColor);
     }
 
     if (theme.errorTextColor) {