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.

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() {
-        return (
-            <a
-                href='#'
-                id='sidebarHeaderDropdownButton'
-                className='sidebar-header-dropdown__toggle'
-                onClick={this.props.onClick}
-            >
-                <span
-                    className='sidebar-header-dropdown__icon'
-                    dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
+        const mainMenuToolTip = (
+            <Tooltip id='main-menu__tooltip'>
+                <FormattedMessage
+                    id='sidebar.mainMenu'
+                    defaultMessage='Main menu'
                 />
-            </a>
+            </Tooltip>
+        );
+
+        return (
+            <OverlayTrigger
+                trigger={['hover', 'focus']}
+                delayShow={Constants.OVERLAY_TIME_DELAY}
+                placement='right'
+                overlay={mainMenuToolTip}
+            >
+                <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>
         );
     }
 }
-