fix(toolbar): Small changes according to design review

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.

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

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;
+        }
+    }
 }

css/_toolbars.scss

@@ -112,7 +112,7 @@
     text-align: center;
 
     >div {
-        margin-left: 6px;
+        margin-left: 8px;
 
         &:first-child {
             margin-left: 0;

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

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<Props, State> {
-
-    /**
-     * Initializes a new {@code ToolboxButtonWithIcon} instance.
-     *
-     * @param {Props} props - The props of the component.
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            isHovered: false
-        };
-        this._onMouseEnter = this._onMouseEnter.bind(this);
-        this._onMouseLeave = this._onMouseLeave.bind(this);
-    }
-
-    _onMouseEnter: () => void;
-
-    /**
-     * Handler for when the small button has the mouse over.
-     *
-     * @returns {void}.
-     */
-    _onMouseEnter() {
-        this.setState({
-            isHovered: true
-        });
+export default function ToolboxButtonWithIcon(props: Props) {
+    const {
+        children,
+        icon,
+        iconDisabled,
+        iconTooltip,
+        onIconClick,
+        styles
+    } = props;
+
+    const iconProps = {};
+
+    if (iconDisabled) {
+        iconProps.className
+            = 'settings-button-small-icon settings-button-small-icon--disabled';
+    } else {
+        iconProps.className = 'settings-button-small-icon';
+        iconProps.onClick = onIconClick;
     }
 
-    _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 (
-            <div
-                className = 'settings-button-container'
-                styles = { styles }>
-                {children}
-
-                <div
-                    onMouseEnter = { this._onMouseEnter }
-                    onMouseLeave = { this._onMouseLeave }>
-                    <Tooltip
-                        content = { iconTooltip }
-                        position = 'top'>
-                        <Icon
-                            { ...iconProps }
-                            size = { size }
-                            src = { icon } />
-                    </Tooltip>
-                </div>
+    return (
+        <div
+            className = 'settings-button-container'
+            styles = { styles }>
+            {children}
+
+            <div>
+                <Tooltip
+                    content = { iconTooltip }
+                    position = 'top'>
+                    <Icon
+                        { ...iconProps }
+                        size = { 9 }
+                        src = { icon } />
+                </Tooltip>
             </div>
-        );
-    }
+        </div>
+    );
 }

react/features/settings/components/web/video/VideoSettingsContent.js

@@ -162,7 +162,10 @@ class VideoSettingsContent extends Component<Props, State> {
         return (
             <div { ...props }>
                 <div className = 'video-preview-label'>
-                    {label && <span className = 'video-preview-label-text'>{label}</span>}
+                    {label && <div className = 'video-preview-label-container'>
+                        <div className = 'video-preview-label-text'>
+                            <span>{label}</span></div>
+                    </div>}
                 </div>
                 <div className = 'video-preview-overlay' />
                 <Video

react/features/settings/components/web/video/VideoSettingsPopup.js

@@ -56,7 +56,7 @@ function VideoSettingsPopup({
                     videoDeviceIds = { videoDeviceIds } /> }
                 isOpen = { isOpen }
                 onClose = { onClose }
-                placement = 'top-end'>
+                placement = 'top-start'>
                 { children }
             </InlineDialog>
         </div>

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<Props> {
         return visible ? (
             <AudioSettingsPopup>
                 <ToolboxButtonWithIcon
-                    icon = { IconArrowDown }
+                    icon = { IconArrowUp }
                     iconDisabled = { settingsDisabled }
                     iconTooltip = { t('toolbar.audioSettings') }
                     onIconClick = { onAudioOptionsClick }>

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<Props> {
         return visible ? (
             <VideoSettingsPopup>
                 <ToolboxButtonWithIcon
-                    icon = { IconArrowDown }
+                    icon = { IconArrowUp }
                     iconDisabled = { this._isIconDisabled() }
                     iconTooltip = { t('toolbar.videoSettings') }
                     onIconClick = { onVideoOptionsClick }>