fix(prejoin_page) Add labels for video & more UI fixes

react/features/base/toolbox/components/ToolboxButtonWithIcon.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react';
+import React, { Component } from 'react';
 import { Icon } from '../../icons';
 
 type Props = {
@@ -29,38 +29,109 @@ type Props = {
      * Additional styles.
      */
     styles?: Object,
-}
+};
+
+type State = {
+
+    /**
+     * Whether the button is hovered or not.
+     */
+    isHovered: boolean,
+};
 
 /**
  * Displayes the `ToolboxButtonWithIcon` component.
  *
  * @returns {ReactElement}
  */
-export default function ToolboxButtonWithIcon({
-    children,
-    icon,
-    iconDisabled,
-    onIconClick,
-    styles
-}: Props) {
-    const iconProps = {};
+export default class ToolboxButtonWithIcon extends Component<Props, State> {
 
-    if (iconDisabled) {
-        iconProps.className = 'settings-button-small-icon settings-button-small-icon--disabled';
-    } else {
-        iconProps.className = 'settings-button-small-icon';
-        iconProps.onClick = onIconClick;
+    /**
+     * 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);
     }
 
-    return (
-        <div
-            className = 'settings-button-container'
-            styles = { styles }>
-            { children }
-            <Icon
-                { ...iconProps }
-                size = { 9 }
-                src = { icon } />
-        </div>
-    );
+    _onMouseEnter: () => void;
+
+    /**
+     * Handler for when the small button has the mouse over.
+     *
+     * @returns {void}.
+     */
+    _onMouseEnter() {
+        this.setState({
+            isHovered: true
+        });
+    }
+
+    _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,
+            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 }>
+                    <Icon
+                        { ...iconProps }
+                        size = { size }
+                        src = { icon } />
+                </div>
+            </div>
+        );
+    }
 }

react/features/settings/components/web/SettingsDialog.js

@@ -127,11 +127,9 @@ class SettingsDialog extends Component<Props> {
 function _mapStateToProps(state) {
     const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
     const jwt = state['features/base/jwt'];
-    const { prejoinPageEnabled } = state['features/base/config'];
 
     // The settings sections to display.
-    const showDeviceSettings = !prejoinPageEnabled
-          && configuredTabs.includes('devices');
+    const showDeviceSettings = configuredTabs.includes('devices');
     const moreTabProps = getMoreTabProps(state);
     const { showModeratorSettings, showLanguageSettings } = moreTabProps;
     const showProfileSettings

react/features/settings/components/web/audio/AudioSettingsContent.js

@@ -243,7 +243,7 @@ class AudioSettingsContent extends Component<Props, State> {
                 <div className = 'audio-preview-content'>
                     <AudioSettingsHeader
                         IconComponent = { IconMicrophoneEmpty }
-                        text = { t('settings.selectMic') } />
+                        text = { t('settings.microphones') } />
                     {microphoneDevices.map((data, i) =>
                         this._renderMicrophoneEntry(data, i),
                     )}

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

@@ -153,6 +153,7 @@ class VideoSettingsContent extends Component<Props, State> {
             className,
             key
         };
+        const label = jitsiTrack && jitsiTrack.getTrackLabel();
 
         if (isSelected) {
             props.className = `${className} video-preview-entry--selected`;
@@ -162,6 +163,7 @@ class VideoSettingsContent extends Component<Props, State> {
 
         return (
             <div { ...props }>
+                <div className = 'video-preview-label'>{label}</div>
                 <div className = 'video-preview-overlay' />
                 <Video
                     className = { videoClassName }
@@ -209,7 +211,7 @@ class VideoSettingsContent extends Component<Props, State> {
         const { trackData } = this.state;
 
         return (
-            <div>
+            <div className = 'video-preview'>
                 {trackData.map((data, i) => this._renderPreviewEntry(data, i))}
             </div>
         );