PLT-5747: Fixed inconsistent on-hover, tooltip, and active states for buttons. (#7174)

* Fixed LHS Team Sidebar on hover highlight.
 * Fixed LHS Main Menu on hover tooltip to show "Main menu".
 * Added On-hover highlight for Favorite button in channel heading.
 * Added active state for channel members icon.
   * Added active class based on internal react state with new changeCss rule.
 * Changed cursor to pointer on hovering a theme.
 * Fixed Invite New Member Add Button to have text-underline on hover.

2 files changed, 29 insertions, 12 deletions

diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx
index eca0fa5c2..1b790e923 100644
--- a/webapp/components/popover_list_members/popover_list_members.jsx
+++ b/webapp/components/popover_list_members/popover_list_members.jsx
@@ -239,7 +239,7 @@ export default class PopoverListMembers extends React.Component {
         );
 
         return (
-            <div className='channel-header__icon wide'>
+            <div className={'channel-header__icon wide ' + (this.state.showPopover ? 'active' : '')}>
                 <OverlayTrigger
                     trigger={['hover', 'focus']}
                     delayShow={Constants.OVERLAY_TIME_DELAY}
diff --git a/webapp/components/sidebar_header_dropdown_button.jsx b/webapp/components/sidebar_header_dropdown_button.jsx
index 45e40f655..82dd6eccf 100644
--- a/webapp/components/sidebar_header_dropdown_button.jsx
+++ b/webapp/components/sidebar_header_dropdown_button.jsx
@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Constants from 'utils/constants.jsx';
+import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
 
 export default class SidebarHeaderDropdownButton extends React.PureComponent {
     static propTypes = {
@@ -14,19 +16,34 @@ export default class SidebarHeaderDropdownButton extends React.PureComponent {
     };
 
     render() {
+        const mainMenuToolTip = (
+            <Tooltip id='main-menu__tooltip'>
+                <FormattedMessage
+                    id='sidebar.mainMenu'
+                    defaultMessage='Main menu'
+                />
+            </Tooltip>
+        );
+
         return (
-            <a
-                href='#'
-                id='sidebarHeaderDropdownButton'
-                className='sidebar-header-dropdown__toggle'
-                onClick={this.props.onClick}
+            <OverlayTrigger
+                trigger={['hover', 'focus']}
+                delayShow={Constants.OVERLAY_TIME_DELAY}
+                placement='right'
+                overlay={mainMenuToolTip}
             >
-                <span
-                    className='sidebar-header-dropdown__icon'
-                    dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
-                />
-            </a>
+                <a
+                    href='#'
+                    id='sidebarHeaderDropdownButton'
+                    className='sidebar-header-dropdown__toggle'
+                    onClick={this.props.onClick}
+                >
+                    <span
+                        className='sidebar-header-dropdown__icon'
+                        dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
+                    />
+                </a>
+            </OverlayTrigger>
         );
     }
 }
-