From b2e53086b3b4527af04d4689f0d836fefd10f8fb Mon Sep 17 00:00:00 2001
From: Sudheer <sudheer.105@gmail.com>
Date: Mon, 21 Aug 2017 19:42:40 +0530
Subject: 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.
---
 .../popover_list_members/popover_list_members.jsx  |  2 +-
 .../components/sidebar_header_dropdown_button.jsx  | 39 ++++++++++++++++------
 2 files changed, 29 insertions(+), 12 deletions(-)

(limited to 'webapp/components')

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>
         );
     }
 }
-
-- 
cgit v1.2.3-1-g7c22