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/icons/svg/arrow_up.svg

@@ -1,3 +1,3 @@
 <svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.41115 6.05746C8.71903 6.39955 9.24594 6.42729 9.58803 6.1194C9.93012 5.81152 9.95786 5.28461 9.64997 4.94252L5.72917 0.562752C5.39813 0.194935 4.82138 0.194935 4.49034 0.562752L0.63061 4.94252C0.322728 5.28461 0.35046 5.81152 0.692552 6.1194C1.03464 6.42729 1.56155 6.39955 1.86943 6.05746L5.10975 2.36593L8.41115 6.05746Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.41115 6.05746C8.71903 6.39955 9.24594 6.42729 9.58803 6.1194C9.93012 5.81152 9.95786 5.28461 9.64997 4.94252L5.72917 0.562752C5.39813 0.194935 4.82138 0.194935 4.49034 0.562752L0.63061 4.94252C0.322728 5.28461 0.35046 5.81152 0.692552 6.1194C1.03464 6.42729 1.56155 6.39955 1.86943 6.05746L5.10975 2.36593L8.41115 6.05746Z" />
 </svg>

react/features/base/icons/svg/microphone-empty-slash.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33334 7.65098V10C6.33334 11.7111 7.50533 13.1484 9.09033 13.553C9.08572 13.5902 9.08334 13.6282 9.08334 13.6667V15.424C6.48211 14.9876 4.50001 12.7253 4.50001 10C4.50001 9.49378 4.0896 9.08337 3.58334 9.08337C3.07708 9.08337 2.66668 9.49378 2.66668 10C2.66668 13.7397 5.46589 16.8255 9.08334 17.2766V18.25C9.08334 18.7563 9.49375 19.1667 10 19.1667C10.5063 19.1667 10.9167 18.7563 10.9167 18.25V17.2766C12.2504 17.1103 13.4729 16.5859 14.4849 15.8025L17.576 18.8937C17.94 19.2576 18.53 19.2577 18.8939 18.8939C19.2577 18.53 19.2576 17.94 18.8936 17.5761L15.8025 14.4849C15.8059 14.4806 15.8092 14.4762 15.8126 14.4719L14.5016 13.1609C14.4984 13.1654 14.4952 13.1699 14.492 13.1744L13.1669 11.8493C13.1697 11.8444 13.1726 11.8396 13.1754 11.8347L11.7803 10.4396C11.7788 10.4458 11.7772 10.4519 11.7757 10.4581L8.16668 6.8491V6.82598L6.33334 4.99265V5.01577L2.42398 1.10641C2.06002 0.742445 1.47001 0.742351 1.10617 1.1062C0.74232 1.47004 0.742414 2.06005 1.10638 2.42401L6.33334 7.65098ZM8.16668 9.48431V10C8.16668 11.0126 8.98749 11.8334 10 11.8334C10.1582 11.8334 10.3116 11.8133 10.4581 11.7757L8.16668 9.48431ZM11.8493 13.1669C11.5591 13.3367 11.2436 13.4678 10.9097 13.553C10.9143 13.5902 10.9167 13.6282 10.9167 13.6667V15.424C11.7471 15.2847 12.5145 14.9592 13.1744 14.492L11.8493 13.1669ZM13.6667 9.69077L11.8333 7.85743V4.50004C11.8333 3.48752 11.0125 2.66671 10 2.66671C9.08511 2.66671 8.32673 3.33688 8.189 4.21309L6.75923 2.78332C7.37496 1.62336 8.59523 0.833374 10 0.833374C12.0251 0.833374 13.6667 2.475 13.6667 4.50004V9.69077ZM15.3317 11.3558L16.7787 12.8028C17.1361 11.9393 17.3333 10.9927 17.3333 10C17.3333 9.49378 16.9229 9.08337 16.4167 9.08337C15.9104 9.08337 15.5 9.49378 15.5 10C15.5 10.4679 15.4416 10.9221 15.3317 11.3558Z" />
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.33331 8.65095V11C7.33331 12.711 8.5053 14.1483 10.0903 14.553C10.0857 14.5902 10.0833 14.6282 10.0833 14.6667V16.424C7.48208 15.9876 5.49998 13.7253 5.49998 11C5.49998 10.4937 5.08957 10.0833 4.58331 10.0833C4.07705 10.0833 3.66665 10.4937 3.66665 11C3.66665 14.7397 6.46586 17.8255 10.0833 18.2766V19.25C10.0833 19.7563 10.4937 20.1667 11 20.1667C11.5062 20.1667 11.9166 19.7563 11.9166 19.25V18.2766C13.2504 18.1103 14.4729 17.5858 15.4849 16.8025L18.576 19.8936C18.94 20.2576 19.53 20.2577 19.8938 19.8939C20.2577 19.53 20.2576 18.94 19.8936 18.576L16.8025 15.4849C16.8058 15.4805 16.8092 15.4762 16.8125 15.4718L15.5016 14.1609C15.4984 14.1654 15.4952 14.1699 15.492 14.1744L14.1668 12.8493C14.1697 12.8444 14.1725 12.8395 14.1754 12.8347L12.7803 11.4396C12.7788 11.4458 12.7772 11.4519 12.7756 11.4581L9.16665 7.84907V7.82595L7.33331 5.99262V6.01574L3.42395 2.10638C3.05999 1.74241 2.46998 1.74232 2.10614 2.10617C1.74229 2.47001 1.74238 3.06002 2.10635 3.42398L7.33331 8.65095ZM9.16665 10.4843V11C9.16665 12.0125 9.98746 12.8333 11 12.8333C11.1581 12.8333 11.3116 12.8133 11.458 12.7757L9.16665 10.4843ZM12.8492 14.1669C12.5591 14.3367 12.2435 14.4677 11.9097 14.553C11.9143 14.5902 11.9166 14.6282 11.9166 14.6667V16.424C12.7471 16.2846 13.5145 15.9592 14.1744 15.492L12.8492 14.1669ZM14.6666 10.6907L12.8333 8.8574V5.50001C12.8333 4.48749 12.0125 3.66668 11 3.66668C10.0851 3.66668 9.3267 4.33685 9.18897 5.21306L7.7592 3.78329C8.37493 2.62333 9.5952 1.83334 11 1.83334C13.025 1.83334 14.6666 3.47497 14.6666 5.50001V10.6907ZM16.3316 12.3557L17.7787 13.8028C18.1361 12.9393 18.3333 11.9927 18.3333 11C18.3333 10.4937 17.9229 10.0833 17.4166 10.0833C16.9104 10.0833 16.5 10.4937 16.5 11C16.5 11.4679 16.4416 11.9221 16.3316 12.3557Z" />
 </svg>

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