diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx index 6270fd4977ee4f4c8872fb0e33bbe2ee367345c0..894ec742b1b63a6e38625575567840ad315f9048 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/component.jsx @@ -4,7 +4,7 @@ import cx from 'classnames'; import { withModalMounter } from '/imports/ui/components/modal/service'; import Clipboard from 'clipboard'; import _ from 'lodash'; -import Button from '/imports/ui/components/button/component'; +import Icon from '/imports/ui/components/icon/component'; import Dropdown from '/imports/ui/components/dropdown/component'; import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component'; import DropdownContent from '/imports/ui/components/dropdown/content/component'; @@ -118,17 +118,12 @@ class ChatDropdown extends Component { onShow={this.onActionsShow} onHide={this.onActionsHide} > - <DropdownTrigger tabIndex={0}> - <Button - label={intl.formatMessage(intlMessages.options)} - icon="more" - circle - hideLabel - className={styles.btn} - // FIXME: Without onClick react proptypes keep warning - // even after the DropdownTrigger inject an onClick handler - onClick={() => null} - /> + <DropdownTrigger + tabIndex={0} + ariaLabel={intl.formatMessage(intlMessages.options)} + className={styles.btn} + > + <Icon iconName="more" /> </DropdownTrigger> <DropdownContent placement="bottom right"> <DropdownList> diff --git a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss index 020412197717d4e7be0b66a512b1c7d76e6ac9ef..d45076abba5c8f1576b77289aaf34479039fb0a6 100644 --- a/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss @@ -2,18 +2,5 @@ .btn { flex: 0 0; - margin-left: $sm-padding-x / 2; - - i{ - color: black !important; - } - - &:hover, - &:focus { - span { - background-color: transparent !important; - color: $color-white !important; - opacity: .75; - } - } + margin-top: auto; } diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/trigger/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/trigger/component.jsx index b2e3b07265ec01eca3b8e6d7a6dec184a3073b8e..a55cb8a379976891038a02d2af3d539ba4038ce9 100644 --- a/bigbluebutton-html5/imports/ui/components/dropdown/trigger/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/dropdown/trigger/component.jsx @@ -41,16 +41,14 @@ export default class DropdownTrigger extends Component { } render() { - const { children, style, className, tabIndex } = this.props; + const { children, className, ...restProps } = this.props; const TriggerComponent = React.Children.only(children); - const TriggerComponentBounded = React.cloneElement(children, { + const TriggerComponentBounded = React.cloneElement(TriggerComponent, { + ...restProps, onClick: this.handleClick, onKeyDown: this.handleKeyDown, 'aria-haspopup': true, - tabIndex, - style, - className: cx(children.props.className, className), });