feat(toolbox): Redesign mobile toolbox

react/features/base/color-scheme/defaultScheme.js

         button: 'rgb(255, 255, 255)',
         buttonToggled: 'rgb(38, 58, 76)',
         buttonToggledBorder: getRGBAFormat('#a4b8d1', 0.6),
-        hangup: 'rgb(225, 45, 45)'
+        hangup: 'rgb(227,79,86)'
     }
 };

react/features/base/styles/components/styles/ColorPalette.js

     blueHighlight: '#1081b2',
     buttonUnderlay: '#495258',
     darkGrey: '#555555',
+    darkBackground: 'rgb(19,21,25)',
     green: '#40b183',
     lightGrey: '#AAAAAA',
     overflowMenuItemUnderlay: '#EEEEEE',

react/features/base/toolbox/components/_.web.js

+// @flow
+
+export * from './web';

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

 export { default as AbstractHangupButton } from './AbstractHangupButton';
 export { default as AbstractVideoMuteButton } from './AbstractVideoMuteButton';
 export { default as BetaTag } from './BetaTag';
-export { default as OverflowMenuItem } from './OverflowMenuItem';
-export { default as ToolboxButtonWithIcon } from './ToolboxButtonWithIcon';
+export * from './_';

react/features/base/toolbox/components/OverflowMenuItem.web.js → react/features/base/toolbox/components/web/OverflowMenuItem.js

 
 import React, { Component } from 'react';
 
-import { Icon } from '../../icons';
-import { Tooltip } from '../../tooltip';
+import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
 
 /**
  * The type of the React {@code Component} props of {@link OverflowMenuItem}.

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

 
 import React from 'react';
 
-import { Icon } from '../../icons';
-import { Tooltip } from '../../tooltip';
+import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
 
 type Props = {
 

react/features/base/toolbox/components/web/ToolboxItem.js

+// @flow
+
+import React, { Fragment } from 'react';
+
+import { Icon } from '../../../icons';
+import { Tooltip } from '../../../tooltip';
+import AbstractToolboxItem from '../AbstractToolboxItem';
+import type { Props } from '../AbstractToolboxItem';
+
+/**
+ * Web implementation of {@code AbstractToolboxItem}.
+ */
+export default class ToolboxItem extends AbstractToolboxItem<Props> {
+    /**
+     * Initializes a new {@code ToolboxItem} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onKeyDown = this._onKeyDown.bind(this);
+    }
+
+    _onKeyDown: (Object) => void;
+
+    /**
+     * Handles 'Enter' key on the button to trigger onClick for accessibility.
+     * We should be handling Space onKeyUp but it conflicts with PTT.
+     *
+     * @param {Object} event - The key event.
+     * @private
+     * @returns {void}
+     */
+    _onKeyDown(event) {
+        // If the event coming to the dialog has been subject to preventDefault
+        // we don't handle it here.
+        if (event.defaultPrevented) {
+            return;
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.props.onClick();
+        }
+    }
+
+    /**
+     * Handles rendering of the actual item. If the label is being shown, which
+     * is controlled with the `showLabel` prop, the item is rendered for its
+     * display in an overflow menu, otherwise it will only have an icon, which
+     * can be displayed on any toolbar.
+     *
+     * @protected
+     * @returns {ReactElement}
+     */
+    _renderItem() {
+        const {
+            disabled,
+            elementAfter,
+            onClick,
+            showLabel,
+            tooltipPosition,
+            toggled
+        } = this.props;
+        const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
+        const props = {
+            'aria-pressed': toggled,
+            'aria-disabled': disabled,
+            'aria-label': this.accessibilityLabel,
+            className: className + (disabled ? ' disabled' : ''),
+            onClick: disabled ? undefined : onClick,
+            onKeyDown: this._onKeyDown,
+            tabIndex: 0,
+            role: 'button'
+        };
+
+        const elementType = showLabel ? 'li' : 'div';
+        const useTooltip = this.tooltip && this.tooltip.length > 0;
+        let children = (
+            <Fragment>
+                { this._renderIcon() }
+                { showLabel && <span>
+                    { this.label }
+                </span> }
+                { elementAfter }
+            </Fragment>
+        );
+
+        if (useTooltip) {
+            children = (
+                <Tooltip
+                    content = { this.tooltip }
+                    position = { tooltipPosition }>
+                    { children }
+                </Tooltip>
+            );
+        }
+
+        return React.createElement(elementType, props, children);
+    }
+
+    /**
+     * Helper function to render the item's icon.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderIcon() {
+        const { customClass, disabled, icon, showLabel, toggled } = this.props;
+        const iconComponent = <Icon src = { icon } />;
+        const elementType = showLabel ? 'span' : 'div';
+        const className = `${showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon'} ${
+            toggled ? 'toggled' : ''} ${disabled ? 'disabled' : ''} ${customClass ?? ''}`;
+
+        return React.createElement(elementType, { className }, iconComponent);
+    }
+}

react/features/base/toolbox/components/web/index.js

+// @flow
+
+export { default as OverflowMenuItem } from './OverflowMenuItem';
+export { default as ToolboxButtonWithIcon } from './ToolboxButtonWithIcon';

react/features/conference/components/native/Conference.js

 
                     <LonelyMeetingExperience />
 
-                    {/*
-                      * The Toolbox is in a stacking layer below the Filmstrip.
-                      */}
+                    { _shouldDisplayTileView ? undefined : <Filmstrip /> }
+
                     <Toolbox />
 
-                    {/*
-                      * The Filmstrip is in a stacking layer above the
-                      * LargeVideo. The LargeVideo and the Filmstrip form what
-                      * the Web/React app calls "videospace". Presumably, the
-                      * name and grouping stem from the fact that these two
-                      * React Components depict the videos of the conference's
-                      * participants.
-                      */
-                        _shouldDisplayTileView ? undefined : <Filmstrip />
-                    }
                 </SafeAreaView>
 
                 <SafeAreaView

react/features/conference/components/native/styles.js

         flexDirection: 'column',
         justifyContent: 'flex-end',
         left: 0,
-        paddingBottom: BoxModel.padding,
         position: 'absolute',
         right: 0,
 

react/features/display-name/components/native/styles.js

 export default {
     displayNameBackdrop: {
         alignSelf: 'center',
-        backgroundColor: 'rgba(28, 32, 37, 0.6)',
+        backgroundColor: ColorPalette.darkBackground,
         borderRadius: 4,
         paddingHorizontal: 16,
         paddingVertical: 4

react/features/toolbox/components/native/Toolbox.js

      */
     _renderToolbar() {
         const { _styles } = this.props;
-        const { buttonStyles, buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
+        const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
 
         return (
             <View
                 accessibilityRole = 'toolbar'
                 pointerEvents = 'box-none'
                 style = { styles.toolbar }>
-                <ChatButton
-                    styles = { buttonStylesBorderless }
-                    toggledStyles = { this._getChatButtonToggledStyle(toggledButtonStyles) } />
                 <AudioMuteButton
-                    styles = { buttonStyles }
+                    styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />
-                <HangupButton
-                    styles = { hangupButtonStyles } />
                 <VideoMuteButton
-                    styles = { buttonStyles }
+                    styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />
+                <ChatButton
+                    styles = { buttonStylesBorderless }
+                    toggledStyles = { this._getChatButtonToggledStyle(toggledButtonStyles) } />
                 <OverflowMenuButton
                     styles = { buttonStylesBorderless }
                     toggledStyles = { toggledButtonStyles } />
+                <HangupButton
+                    styles = { hangupButtonStyles } />
             </View>
         );
     }

react/features/toolbox/components/native/styles.js

 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { BoxModel, ColorPalette } from '../../../base/styles';
 
-const BUTTON_SIZE = 50;
+const BUTTON_SIZE = 48;
 
 // Toolbox, toolbar:
 
  * The style of toolbar buttons.
  */
 const toolbarButton = {
-    backgroundColor: schemeColor('button'),
-    borderRadius: BUTTON_SIZE / 2,
+    borderRadius: 3,
     borderWidth: 0,
     flex: 0,
     flexDirection: 'row',
 const toolbarButtonIcon = {
     alignSelf: 'center',
     color: ColorPalette.darkGrey,
-    fontSize: 22
+    fontSize: 24
 };
 
-/**
- * The style of toolbar buttons which display white icons.
- */
-const whiteToolbarButton = {
-    ...toolbarButton,
-    backgroundColor: schemeColor('buttonToggled')
-};
 
 /**
  * The icon style of toolbar buttons which display white icons.
      */
     toolbar: {
         alignItems: 'center',
+        backgroundColor: ColorPalette.darkBackground,
         flexDirection: 'row',
         flexGrow: 0,
-        justifyContent: 'center',
-        marginBottom: BoxModel.margin / 2,
-        paddingHorizontal: BoxModel.margin
+        justifyContent: 'space-between',
+        paddingHorizontal: BoxModel.margin,
+        paddingVertical: 8
     },
 
     /**
     toggledButtonStyles: {
         iconStyle: whiteToolbarButtonIcon,
         style: {
-            ...whiteToolbarButton,
-            borderColor: schemeColor('buttonToggledBorder'),
-            borderWidth: 1
+            ...toolbarButton
         }
     }
 });