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/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}

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 (
+        const mainMenuToolTip = (
-            <a
+            <Tooltip id='main-menu__tooltip'>
-                href='#'
+                <FormattedMessage
-                id='sidebarHeaderDropdownButton'
+                    id='sidebar.mainMenu'
-                className='sidebar-header-dropdown__toggle'
+                    defaultMessage='Main menu'
-                onClick={this.props.onClick}
-            >
-                <span
-                    className='sidebar-header-dropdown__icon'
-                    dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}}
                 />
-            </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>
         );
     }
 }
-

webapp/i18n/en.json

@@ -2155,6 +2155,7 @@
   "shortcuts.browser.highlight_next": "Highlight text to the next line:\tShift|Down",
   "shortcuts.browser.newline": "Create a new line:\tShift|Enter",
   "sidebar.channels": "PUBLIC CHANNELS",
+  "sidebar.mainMenu": "Main Menu",
   "sidebar.createChannel": "Create new public channel",
   "sidebar.createGroup": "Create new private channel",
   "sidebar.direct": "DIRECT MESSAGES",

webapp/sass/components/_modal.scss

@@ -692,3 +692,9 @@
         padding-left: 0;
     }
 }
+
+.modal-invite-member {
+  .btn:hover {
+    text-decoration: underline;
+  }
+}

webapp/sass/layout/_headers.scss

@@ -157,12 +157,10 @@
 .channel-header__info {
     margin-top: 12px;
     white-space: nowrap;
-
+    .header-dropdown__icon {
+        color: $dark-gray;
+    }
     .channel-header__title {
-        .header-dropdown__icon {
-            color: $dark-gray;
-        }
-
         > a {
             display: inline-block;
             text-decoration: none;
@@ -458,7 +456,6 @@
     &.inactive {
         color: inherit;
 
-        &:hover,
         &:active {
             color: inherit;
         }

webapp/sass/layout/_team-sidebar.scss

@@ -25,6 +25,9 @@
                     display: block;
                     margin-left: 11px;
                     text-decoration: none;
+                    &:hover .team-btn {
+                      border-color: white;
+                    }
                 }
 
                 .team-btn {

webapp/sass/routes/_settings.scss

@@ -225,6 +225,9 @@
 
                         img {
                             border: 3px solid transparent;
+                            &:hover {
+                              cursor: pointer;
+                            }
                         }
 
                         .active {

webapp/utils/utils.jsx

@@ -631,7 +631,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .shortcut-key, .app__body .post__body hr, .app__body .loading-screen .loading__content .round, .app__body .tutorial__circles .circle', 'background:' + theme.centerChannelColor);
         changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
-        changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
+        changeCss('.app__body .channel-header__info .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
         changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
         changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
         changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
@@ -712,13 +712,15 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
         changeCss('@media(min-width: 768px){.app__body .search__form.focused .search__icon svg', 'stroke:' + theme.linkColor);
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
-        changeCss('.app__body .channel-header .channel-header__icon:hover #member_popover', 'color:' + theme.linkColor);
+        changeCss('.app__body .channel-header .channel-header__icon:hover #member_popover, .app__body .channel-header .channel-header__icon.active #member_popover', 'color:' + theme.linkColor);
         changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6));
         changeCss('.app__body .member-list__popover .more-modal__actions svg, .app__body .channel-header .channel-header__icon:hover svg, .app__body .channel-header .channel-header__icon.active svg', 'fill:' + theme.linkColor);
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));
         changeCss('.app__body .member-list__popover .more-modal__list .more-modal__row:hover, .app__body .channel-header .channel-header__icon:hover, .app__body .channel-header .channel-header__icon.active, .app__body .search-bar__container .search__form.focused', 'border-color:' + theme.linkColor);
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor);
+        changeCss('.app__body .channel-header__title.open .heading, .app__body .channel-header__info .channel-header__title.open .header-dropdown__icon', 'color:' + theme.linkColor);
+        changeCss('.app__body .channel-header .dropdown-toggle:hover .heading, .app__body .channel-header .dropdown-toggle:hover .header-dropdown__icon', 'color:' + theme.linkColor);
     }
 
     if (theme.buttonBg) {