diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss index 24b76a57d..60a0dc575 100644 --- a/css/_atlaskit_overrides.scss +++ b/css/_atlaskit_overrides.scss @@ -73,9 +73,17 @@ */ .toolbox-button-wth-dialog > div:nth-child(2) { max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px); + margin-bottom: 4px; overflow-y: auto; } +.audio-preview > div:nth-child(2), +.video-preview > div:nth-child(2) { + margin-bottom: 4px; + outline: none; + padding: 0; +} + /** * The following selectors keep the chat modal full-size anywhere between 100px * and 580px for desktop or 680px for mobile. diff --git a/css/_audio-preview.scss b/css/_audio-preview.scss index 9677af9a8..369321774 100644 --- a/css/_audio-preview.scss +++ b/css/_audio-preview.scss @@ -162,10 +162,4 @@ right: 16px; top: 14px; } - - // Override @atlaskit/InlineDialog container which is made with styled components - & > div:nth-child(2) { - outline: none; - padding: 0; - } } diff --git a/css/_settings-button.scss b/css/_settings-button.scss index f987f5a79..d39324f48 100644 --- a/css/_settings-button.scss +++ b/css/_settings-button.scss @@ -25,28 +25,12 @@ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); border-radius: 3px; cursor: pointer; - height: 18px; + padding: 4px; position: absolute; - text-align: center; - top: 0; - right: -4; - width: 18px; + right: -4px; + top: -3px; - &> svg { - fill: #fff; - margin-top: 5px; - } - - &--disabled { - background-color: #36383c; - cursor: default; - - &> svg { - fill: #929292; - } - } - - &--hovered { + &:hover { background: #F2F3F4; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); @@ -60,4 +44,17 @@ } } } + + &> svg { + fill: #fff; + } + + &--disabled { + background-color: #36383c; + cursor: default; + + &> svg { + fill: #929292; + } + } } diff --git a/css/_toolbars.scss b/css/_toolbars.scss index c12b4544a..305da6f8b 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -112,7 +112,7 @@ text-align: center; >div { - margin-left: 6px; + margin-left: 8px; &:first-child { margin-left: 0; diff --git a/css/_video-preview.scss b/css/_video-preview.scss index 12fa0c371..8df165eb6 100644 --- a/css/_video-preview.scss +++ b/css/_video-preview.scss @@ -56,26 +56,26 @@ &-label { bottom: 8px; color: #fff; - overflow: hidden; position: absolute; - text-overflow: ellipsis; - white-space: nowrap; width: 100%; z-index: 2; + &-container { + margin: 0 16px; + } + &-text { background-color: #131519; border-radius: 3px; + padding: 2px 8px; font-size: 13px; line-height: 20px; - padding: 2px 8px; - + margin: 0 auto; + max-width: calc(100% - 16px); + overflow: hidden; + text-overflow: ellipsis; + width: fit-content; + white-space: nowrap; } } - - // Override @atlaskit/InlineDialog container which is made with styled components - & > div:nth-child(2) { - outline: none; - padding: 0; - } } diff --git a/react/features/base/icons/svg/arrow_up.svg b/react/features/base/icons/svg/arrow_up.svg index 509809221..f1d4b1f28 100644 --- a/react/features/base/icons/svg/arrow_up.svg +++ b/react/features/base/icons/svg/arrow_up.svg @@ -1,3 +1,3 @@ - + diff --git a/react/features/base/icons/svg/microphone-empty-slash.svg b/react/features/base/icons/svg/microphone-empty-slash.svg index 95f4b7afa..0cf9fef85 100644 --- a/react/features/base/icons/svg/microphone-empty-slash.svg +++ b/react/features/base/icons/svg/microphone-empty-slash.svg @@ -1,3 +1,3 @@ - - + + diff --git a/react/features/base/toolbox/components/ToolboxButtonWithIcon.js b/react/features/base/toolbox/components/ToolboxButtonWithIcon.js index 4c9e94272..01c1bd1ad 100644 --- a/react/features/base/toolbox/components/ToolboxButtonWithIcon.js +++ b/react/features/base/toolbox/components/ToolboxButtonWithIcon.js @@ -1,6 +1,6 @@ // @flow -import React, { Component } from 'react'; +import React from 'react'; import { Icon } from '../../icons'; import { Tooltip } from '../../tooltip'; @@ -38,113 +38,49 @@ type Props = { styles?: Object, }; -type State = { - - /** - * Whether the button is hovered or not. - */ - isHovered: boolean, -}; - /** - * Displayes the `ToolboxButtonWithIcon` component. + * Displays the `ToolboxButtonWithIcon` component. * + * @param {Object} props - Component's props. * @returns {ReactElement} */ -export default class ToolboxButtonWithIcon extends Component { +export default function ToolboxButtonWithIcon(props: Props) { + const { + children, + icon, + iconDisabled, + iconTooltip, + onIconClick, + styles + } = props; - /** - * Initializes a new {@code ToolboxButtonWithIcon} instance. - * - * @param {Props} props - The props of the component. - */ - constructor(props: Props) { - super(props); + const iconProps = {}; - this.state = { - isHovered: false - }; - this._onMouseEnter = this._onMouseEnter.bind(this); - this._onMouseLeave = this._onMouseLeave.bind(this); + if (iconDisabled) { + iconProps.className + = 'settings-button-small-icon settings-button-small-icon--disabled'; + } else { + iconProps.className = 'settings-button-small-icon'; + iconProps.onClick = onIconClick; } - _onMouseEnter: () => void; - /** - * Handler for when the small button has the mouse over. - * - * @returns {void}. - */ - _onMouseEnter() { - this.setState({ - isHovered: true - }); - } + return ( +
+ {children} - _onMouseLeave: () => void; - - /** - * Handler for when the mouse leaves the small button. - * - * @returns {void} - */ - _onMouseLeave() { - this.setState({ - isHovered: false - }); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {React$Node} - */ - render() { - const { - children, - icon, - iconDisabled, - iconTooltip, - onIconClick, - styles - } = this.props; - - const iconProps = {}; - let size = 9; - - if (iconDisabled) { - iconProps.className - = 'settings-button-small-icon settings-button-small-icon--disabled'; - } else { - iconProps.className = 'settings-button-small-icon'; - iconProps.onClick = onIconClick; - - if (this.state.isHovered) { - iconProps.className = `${iconProps.className} settings-button-small-icon--hovered`; - size = 11; - } - } - - return ( -
- {children} - -
- - - -
+
+ + +
- ); - } +
+ ); } diff --git a/react/features/settings/components/web/video/VideoSettingsContent.js b/react/features/settings/components/web/video/VideoSettingsContent.js index 4d4efec96..d557fe28b 100644 --- a/react/features/settings/components/web/video/VideoSettingsContent.js +++ b/react/features/settings/components/web/video/VideoSettingsContent.js @@ -162,7 +162,10 @@ class VideoSettingsContent extends Component { return (
- {label && {label}} + {label &&
+
+ {label}
+
}
diff --git a/react/features/toolbox/components/web/AudioSettingsButton.js b/react/features/toolbox/components/web/AudioSettingsButton.js index 2f9898253..1f8cb5133 100644 --- a/react/features/toolbox/components/web/AudioSettingsButton.js +++ b/react/features/toolbox/components/web/AudioSettingsButton.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import { isMobileBrowser } from '../../../base/environment/utils'; import { translate } from '../../../base/i18n'; -import { IconArrowDown } from '../../../base/icons'; +import { IconArrowUp } from '../../../base/icons'; import JitsiMeetJS from '../../../base/lib-jitsi-meet/_'; import { connect } from '../../../base/redux'; import { ToolboxButtonWithIcon } from '../../../base/toolbox/components'; @@ -62,7 +62,7 @@ class AudioSettingsButton extends Component { return visible ? ( diff --git a/react/features/toolbox/components/web/VideoSettingsButton.js b/react/features/toolbox/components/web/VideoSettingsButton.js index 4913caf51..8619f096b 100644 --- a/react/features/toolbox/components/web/VideoSettingsButton.js +++ b/react/features/toolbox/components/web/VideoSettingsButton.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import { isMobileBrowser } from '../../../base/environment/utils'; import { translate } from '../../../base/i18n'; -import { IconArrowDown } from '../../../base/icons'; +import { IconArrowUp } from '../../../base/icons'; import { connect } from '../../../base/redux'; import { ToolboxButtonWithIcon } from '../../../base/toolbox/components'; import { getLocalJitsiVideoTrack } from '../../../base/tracks'; @@ -77,7 +77,7 @@ class VideoSettingsButton extends Component { return visible ? (