Ui improvements (#5588)

* PLT-5354 - Making statistics flow on page

* PLT-5262 - Updating icon on join team page

* PLT-5218 - Making menu colors consistent on mobile

* PLT-5377 - Adding bg to current posts in the RHS

* PLT-5645 - Adjusting spacing after/before ul/ol

7 files changed, 43 insertions, 17 deletions

diff --git a/webapp/components/analytics/system_analytics.jsx b/webapp/components/analytics/system_analytics.jsx
index 89cc98f0b..a3517899a 100644
--- a/webapp/components/analytics/system_analytics.jsx
+++ b/webapp/components/analytics/system_analytics.jsx
@@ -217,7 +217,7 @@ class SystemAnalytics extends React.Component {
             );
 
             advancedStats = (
-                <div className='row'>
+                <div>
                     <StatisticCount
                         title={
                             <FormattedMessage
@@ -388,7 +388,7 @@ class SystemAnalytics extends React.Component {
         let secondRow;
         if (isLicensed && skippedIntensiveQueries) {
             firstRow = (
-                <div className='row'>
+                <div>
                     {userCount}
                     {teamCount}
                     {channelCount}
@@ -397,7 +397,7 @@ class SystemAnalytics extends React.Component {
             );
 
             secondRow = (
-                <div className='row'>
+                <div>
                     {commandCount}
                     {incomingCount}
                     {outgoingCount}
@@ -405,7 +405,7 @@ class SystemAnalytics extends React.Component {
             );
         } else if (isLicensed && !skippedIntensiveQueries) {
             firstRow = (
-                <div className='row'>
+                <div>
                     {userCount}
                     {teamCount}
                     {channelCount}
@@ -414,7 +414,7 @@ class SystemAnalytics extends React.Component {
             );
 
             secondRow = (
-                <div className='row'>
+                <div>
                     {sessionCount}
                     {commandCount}
                     {incomingCount}
@@ -423,7 +423,7 @@ class SystemAnalytics extends React.Component {
             );
         } else if (!isLicensed) {
             firstRow = (
-                <div className='row'>
+                <div>
                     {userCount}
                     {teamCount}
                     {channelCount}
@@ -433,7 +433,7 @@ class SystemAnalytics extends React.Component {
         }
 
         const thirdRow = (
-            <div className='row'>
+            <div>
                 {dailyActiveUsers}
                 {monthlyActiveUsers}
             </div>
@@ -448,10 +448,12 @@ class SystemAnalytics extends React.Component {
                     />
                 </h3>
                 {banner}
-                {firstRow}
-                {secondRow}
-                {thirdRow}
-                {advancedStats}
+                <div className='row'>
+                    {firstRow}
+                    {secondRow}
+                    {thirdRow}
+                    {advancedStats}
+                </div>
                 {advancedGraphs}
                 {postTotalGraph}
                 {activeUserGraph}
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 67fd394b9..cb527d850 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -286,7 +286,7 @@ export default class RhsComment extends React.Component {
         const isSystemMessage = PostUtils.isSystemMessage(post);
 
         var currentUserCss = '';
-        if (this.props.currentUser === post.user_id) {
+        if (this.props.currentUser.id === post.user_id) {
             currentUserCss = 'current--user';
         }
 
diff --git a/webapp/components/select_team/components/select_team_item.jsx b/webapp/components/select_team/components/select_team_item.jsx
index c6943722d..bff9e28d8 100644
--- a/webapp/components/select_team/components/select_team_item.jsx
+++ b/webapp/components/select_team/components/select_team_item.jsx
@@ -5,6 +5,7 @@ import React from 'react';
 
 import {Link} from 'react-router/es6';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {Constants} from 'utils/constants.jsx';
 
 export default class SelectTeamItem extends React.Component {
     static propTypes = {
@@ -26,6 +27,7 @@ export default class SelectTeamItem extends React.Component {
 
     render() {
         let icon;
+        const infoIcon = Constants.TEAM_INFO_SVG;
         if (this.props.loading) {
             icon = (
                 <span className='fa fa-refresh fa-spin right signup-team__icon'/>
@@ -53,7 +55,10 @@ export default class SelectTeamItem extends React.Component {
                     overlay={descriptionTooltip}
                     ref='descriptionOverlay'
                 >
-                    <span className='fa fa-info-circle signup-team__icon'/>
+                    <span
+                        className='icon icon--info'
+                        dangerouslySetInnerHTML={{__html: infoIcon}}
+                    />
                 </OverlayTrigger>
             );
         }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 5157c3080..bca10cae2 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1106,7 +1106,12 @@
 
         ul + p,
         ol + p {
-            margin-top: 1.2em;
+            margin-top: 1em;
+        }
+
+        p + ul,
+        p + ol {
+            margin-top: 1em;
         }
 
         .pending-post-actions {
diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss
index cbf6f1571..c73c32656 100644
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -455,12 +455,24 @@
             border: none;
         }
 
+        .icon {
+            cursor: pointer;
+            float: left;
+            margin: 18px 7px 0 15px;
+            opacity: .45;
+
+            svg {
+                height: 20px;
+                width: 20px;
+            }
+        }
+
         a {
             color: inherit;
             display: block;
             font-size: 1.1em;
             height: 3.5em;
-            line-height: 3.5em;
+            line-height: 3.6em;
             padding: 0 15px;
         }
     }
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index fb256c60e..0f3e217b9 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -398,6 +398,7 @@ export const Constants = {
     OPEN_TEAM: 'O',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
+    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_ICON_OUTLINE_SVG: "<svg width='12px' height='12px' viewBox='0 0 48 48' 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g> <g transform='matrix(1,0,0,0.957537,-0.5,1.42123)'> <path d='M2.5,0.5C1.4,0.5 0.5,1.4 0.5,2.5L0.5,45.6C0.5,46.7 1.4,47.6 2.5,47.6C3.6,47.6 4.5,46.7 4.5,45.6L4.5,2.5C4.4,1.4 3.5,0.5 2.5,0.5Z'/> </g> <g transform='matrix(0.923469,0,0,0.870026,1.64285,2.0085)'> <path d='M46.4,3.5C43.3,2.1 40.1,1.4 36.5,1.4C32.1,1.4 27.8,2.4 23.6,3.4C19.4,4.4 15.5,5.3 11.6,5.3C10.5,5.3 9.4,5.2 8.4,5.1L8.4,37C9.4,37.1 10.5,37.2 11.6,37.2C16,37.2 20.3,36.2 24.5,35.2C28.7,34.2 32.6,33.3 36.5,33.3C39.5,33.3 42.3,33.9 44.8,35.1C45.4,35.4 46.1,35.3 46.7,35C47.3,34.6 47.6,34 47.6,33.3L47.6,5.3C47.5,4.6 47.1,3.9 46.4,3.5Z' style='stroke-width:3.23px; fill:none;'/> </g> </g> </svg>",
     FLAG_ICON_SVG: "<svg width='12px' height='12px' viewBox='0 0 48 48' 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g> <g transform='matrix(1,0,0,0.957537,-0.5,1.42123)'> <path d='M2.5,0.5C1.4,0.5 0.5,1.4 0.5,2.5L0.5,45.6C0.5,46.7 1.4,47.6 2.5,47.6C3.6,47.6 4.5,46.7 4.5,45.6L4.5,2.5C4.4,1.4 3.5,0.5 2.5,0.5Z'/> </g> <g transform='matrix(0.923469,0,0,0.870026,1.64285,2.0085)'> <path d='M46.4,3.5C43.3,2.1 40.1,1.4 36.5,1.4C32.1,1.4 27.8,2.4 23.6,3.4C19.4,4.4 15.5,5.3 11.6,5.3C10.5,5.3 9.4,5.2 8.4,5.1L8.4,37C9.4,37.1 10.5,37.2 11.6,37.2C16,37.2 20.3,36.2 24.5,35.2C28.7,34.2 32.6,33.3 36.5,33.3C39.5,33.3 42.3,33.9 44.8,35.1C45.4,35.4 46.1,35.3 46.7,35C47.3,34.6 47.6,34 47.6,33.3L47.6,5.3C47.5,4.6 47.1,3.9 46.4,3.5Z' style='stroke-width:3.23px;'/> </g> </g> </svg>",
     ATTACHMENT_ICON_SVG: "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521   c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545   c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192   c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421   c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119   c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225   c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004   L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873   L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422   L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z'></path></g></svg>",
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 1d91ff788..3d7941158 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -472,8 +472,8 @@ 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', '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, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6));
-        changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText);
+        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('@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('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6));
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
         changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText);
@@ -500,6 +500,7 @@ export function applyTheme(theme) {
     if (theme.sidebarTextActiveColor) {
         changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .app__body .modal .settings-modal .nav-pills>li.active a, .app__body .modal .settings-modal .nav-pills>li.active a:hover, .app__body .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor);
         changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1));
+        changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .nav-pills > li.active a', 'color:' + changeOpacity(theme.sidebarText, 0.8));
     }
 
     if (theme.sidebarHeaderBg) {