feat(toolbox): Redesign.

css/_toolbars.scss

@@ -23,192 +23,241 @@
  * TODO: when the old filmstrip has been removed, remove the "new-" prefix.
  */
 .new-toolbox {
-    background-color: $newToolbarBackgroundColor;
     bottom: calc((#{$newToolbarSize} * 2) * -1);
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
     left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 12px 8px;
     position: absolute;
     right: 0;
     transition: bottom .3s ease-in;
     width: 100%;
-    z-index: $toolbarZ;
+
 
     &.visible {
         bottom: 0;
+        .toolbox-background {
+            bottom: 0px;
+        }
     }
 
     &.no-buttons {
         display: none;
     }
 
-    .button-group-center,
-    .button-group-left,
-    .button-group-right {
-        display: flex;
-        width: 33%;
-    }
-
-    .button-group-center {
-        justify-content: center;
-    }
-
-    .button-group-right {
-        justify-content: flex-end;
+    .toolbox-background {
+        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+        transition: bottom .3s ease-in;
+        height: 160px;
+        width: 100%;
+        bottom: -160px;
+        position: absolute;
+        z-index: $toolbarBackgroundZ;
     }
 
-    i {
-        border-radius: 5px;
-        cursor: pointer;
-        display: block;
-        font-size: inherit;
-        height: 100%;
-        line-height: inherit;
+    .toolbox-content {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 20px 16px;
+        position: relative;
         width: 100%;
-    }
+        z-index: $toolbarZ;
 
-    i:hover {
-        background-color: $newToolbarButtonHoverColor;
-    }
+        .button-group-center,
+        .button-group-left,
+        .button-group-right {
+            display: flex;
+            width: 33%;
+        }
 
-    i.toggled {
-        background: $newToolbarButtonToggleColor;
-    }
+        .button-group-center {
+            justify-content: center;
+            .toolbox-icon {
+                margin: 0px 12px;
+            }
+        }
 
-    i.toggled:hover {
-        background-color: $newToolbarButtonHoverColor;
-    }
+        .button-group-right {
+            justify-content: flex-end;
+        }
 
-    i.disabled {
-        cursor: initial;
-        color: #3b475c;
-    }
+        i {
+            border-radius: 5px;
+            cursor: pointer;
+            display: block;
+            font-size: inherit;
+            height: 100%;
+            line-height: inherit;
+            width: 100%;
+        }
 
-    .disabled i {
-        cursor: initial;
-        color: #3b475c;
-    }
+        i:hover {
+            background: $newToolbarButtonHoverColor;
+        }
 
-    i.disabled:hover {
-        background-color: initial;
-    }
+        i.toggled {
+            background: $newToolbarButtonToggleColor;
+        }
 
-    .icon-hangup {
-        color: $hangupColor;
-        font-size: $newToolbarHangupFontSize;
-    }
+        i.toggled:hover {
+            background: $newToolbarButtonHoverColor;
+        }
 
-    .overflow-menu {
-        font-size: 1.2em;
-        list-style-type: none;
-        /**
-         * Undo atlaskit padding by reducing margins.
-         */
-        margin: -15px -24px;
-        padding: 4px 0;
-
-        .overflow-menu-item {
-            align-items: center;
-            color: #B8C7E0;
-            cursor: pointer;
-            display: flex;
-            font-size: 14px;
-            height: 22px;
-            padding: 5px 12px;
+        .icon-hangup {
+            background-color: #e12d2d;
+            color: #fff;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
 
-            div {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
+            &:hover {
+                background-color: #e54b4b;
             }
+        }
+        i.disabled, .disabled i {
+            cursor: initial;
+            color: #fff;
+            background-color: #a4b8d1;
+        }
+
+        .icon-mic-disabled, .icon-microphone, .icon-camera-disabled, .icon-camera {
+            background-color: #fff;
+            color: #5e6d7a;
+            border-radius: 50%;
+            border: 1px solid #d1dbe8;
+            width: 38px;
+            height: 38px;
 
             &:hover {
-                background: #313D52;
+                background-color: #daebfa;
+                border: 1px solid #daebfa;
             }
 
-            &.unclickable {
-                cursor: default;
-            }
-            &.unclickable:hover {
-                background: inherit;
+            &.toggled {
+                background: #2a3a4b;
+                color: #fff;
+                border: 1px solid #5e6d7a;
+
+                &:hover {
+                    background-color: #5e6d7a;
+                }
             }
-            &.disabled {
+
+            &.disabled, .disabled & {
                 cursor: initial;
-                color: #3b475c;
+                color: #fff;
+                background-color: #a4b8d1;
             }
         }
 
-        .beta-tag {
-            background: #B8C7E0;
-            border-radius: 2px;
-            color: $newToolbarBackgroundColor;
-            font-size: 11px;
-            font-weight: bold;
-            margin-left: 8px;
-            padding: 0 6px;
-        }
+        .overflow-menu {
+            font-size: 1.2em;
+            list-style-type: none;
+            /**
+             * Undo atlaskit padding by reducing margins.
+             */
+            margin: -15px -24px;
+            padding: 4px 0;
 
-        .overflow-menu-item-icon {
-            margin-right: 10px;
+            .overflow-menu-item {
+                align-items: center;
+                color: #B8C7E0;
+                cursor: pointer;
+                display: flex;
+                font-size: 14px;
+                height: 22px;
+                padding: 5px 12px;
+
+                div {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                }
+
+                &:hover {
+                    background: #313D52;
+                }
+
+                &.unclickable {
+                    cursor: default;
+                }
+                &.unclickable:hover {
+                    background: inherit;
+                }
+                &.disabled {
+                    cursor: initial;
+                    color: #3b475c;
+                }
+            }
 
-            i {
-                display: inline;
-                font-size: 24px;
+            .beta-tag {
+                background: #B8C7E0;
+                border-radius: 2px;
+                color: $newToolbarBackgroundColor;
+                font-size: 11px;
+                font-weight: bold;
+                margin-left: 8px;
+                padding: 0 6px;
             }
 
-            i:hover {
-                background-color: initial;
+            .overflow-menu-item-icon {
+                margin-right: 10px;
+
+                i {
+                    display: inline;
+                    font-size: 24px;
+                }
+
+                i:hover {
+                    background-color: initial;
+                }
+
+                img {
+                    max-width: 24px;
+                    max-height: 24px;
+                }
             }
 
-            img {
-                max-width: 24px;
-                max-height: 24px;
+            .profile-text {
+                max-width: 150px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
             }
         }
 
-        .profile-text {
-            max-width: 150px;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
+        .toolbox-button {
+            color: $toolbarButtonColor;
+            cursor: pointer;
+            display: inline-block;
+            line-height: $newToolbarSize;
+            margin: 0 8px;
+            text-align: center;
         }
-    }
-
-    .toolbox-button {
-        color: $toolbarButtonColor;
-        cursor: pointer;
-        display: inline-block;
-        line-height: $newToolbarSize;
-        margin: 0 4px;
-        text-align: center;
-    }
 
-    .toolbar-button-with-badge {
-        position: relative;
-
-        .badge-round {
-            bottom: -5px;
-            font-size: 12px;
-            line-height: 20px;
-            min-width: 20px;
-            pointer-events: none;
-            position: absolute;
-            right: -5px;
+        .toolbar-button-with-badge {
+            position: relative;
+
+            .badge-round {
+                bottom: -5px;
+                font-size: 12px;
+                line-height: 20px;
+                min-width: 20px;
+                pointer-events: none;
+                position: absolute;
+                right: -5px;
+            }
         }
-    }
 
-    .toolbox-button-wth-dialog {
-        display: inline-block;
-    }
+        .toolbox-button-wth-dialog {
+            display: inline-block;
+        }
 
-    .toolbox-icon {
-        height: $newToolbarSize;
-        font-size: 24px;
-        width: $newToolbarSize;
+        .toolbox-icon {
+            height: $newToolbarSize;
+            font-size: 24px;
+            width: $newToolbarSize;
+        }
     }
 }
 
@@ -226,15 +275,15 @@
     }
 
     i:hover {
-        background-color: $newToolbarButtonHoverColor;
+        background-color: $AOTToolbarButtonHoverColor;
     }
 
     i.toggled {
-        background: $newToolbarButtonToggleColor;
+        background: $AOTToolbarButtonToggleColor;
     }
 
     i.toggled:hover:not(.disabled) {
-        background-color: $newToolbarButtonHoverColor;
+        background-color: $AOTToolbarButtonHoverColor;
     }
 
     .icon-hangup {

css/_variables.scss

@@ -34,8 +34,10 @@ $defaultDarkColor: #2b3d5c;
  */
 $defaultToolbarSize: 50px;
 $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8);
-$newToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
-$newToolbarButtonToggleColor: rgba(14, 20, 35, 1);
+$newToolbarButtonHoverColor: rgba(42, 58, 75, 0.15);
+$newToolbarButtonToggleColor: rgba(42, 58, 75, 0.2);
+$AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
+$AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;
 $newToolbarSize: 40px;
@@ -91,6 +93,7 @@ $zindex0: 0;
 $zindex1: 1;
 $zindex2: 2;
 $zindex3: 3;
+$toolbarBackgroundZ: 4;
 $filmstripVideosZ: 5;
 $zindex10: 10;
 $reloadZ: 20;

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

@@ -312,21 +312,9 @@ class Toolbox extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const {
-            _chatOpen,
-            _hideInviteButton,
-            _overflowMenuVisible,
-            _raisedHand,
-            _visible,
-            _visibleButtons,
-            t
-        } = this.props;
+        const { _visible, _visibleButtons } = this.props;
         const rootClassNames = `new-toolbox ${_visible ? 'visible' : ''} ${
             _visibleButtons.size ? '' : 'no-buttons'}`;
-        const overflowMenuContent = this._renderOverflowMenuContent();
-        const overflowHasItems = Boolean(overflowMenuContent.filter(
-            child => child).length);
-        const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
 
         return (
             <div
@@ -334,72 +322,8 @@ class Toolbox extends Component<Props> {
                 id = 'new-toolbox'
                 onMouseOut = { this._onMouseOut }
                 onMouseOver = { this._onMouseOver }>
-                <div className = 'button-group-left'>
-                    { this._shouldShowButton('desktop')
-                        && this._renderDesktopSharingButton() }
-                    { this._shouldShowButton('raisehand')
-                        && <ToolbarButton
-                            accessibilityLabel =
-                                { t('toolbar.accessibilityLabel.raiseHand') }
-                            iconName = { _raisedHand
-                                ? 'icon-raised-hand toggled'
-                                : 'icon-raised-hand' }
-                            onClick = { this._onToolbarToggleRaiseHand }
-                            tooltip = { t('toolbar.raiseHand') } /> }
-                    { this._shouldShowButton('chat')
-                        && <div className = 'toolbar-button-with-badge'>
-                            <ToolbarButton
-                                accessibilityLabel =
-                                    { t('toolbar.accessibilityLabel.chat') }
-                                iconName = { _chatOpen
-                                    ? 'icon-chat toggled'
-                                    : 'icon-chat' }
-                                onClick = { this._onToolbarToggleChat }
-                                tooltip = { t('toolbar.chat') } />
-                            <ChatCounter />
-                        </div> }
-                    {
-                        this._shouldShowButton('closedcaptions')
-                            && <ClosedCaptionButton />
-                    }
-                </div>
-                <div className = 'button-group-center'>
-                    <AudioMuteButton
-                        visible = { this._shouldShowButton('microphone') } />
-                    <HangupButton
-                        visible = { this._shouldShowButton('hangup') } />
-                    <VideoMuteButton
-                        visible = { this._shouldShowButton('camera') } />
-                </div>
-                <div className = 'button-group-right'>
-                    { this._shouldShowButton('localrecording')
-                        && <LocalRecordingButton
-                            onClick = {
-                                this._onToolbarOpenLocalRecordingInfoDialog
-                            } />
-                    }
-                    { this._shouldShowButton('tileview')
-                        && <TileViewButton /> }
-                    { this._shouldShowButton('invite')
-                        && !_hideInviteButton
-                        && <ToolbarButton
-                            accessibilityLabel =
-                                { t('toolbar.accessibilityLabel.invite') }
-                            iconName = 'icon-add'
-                            onClick = { this._onToolbarOpenInvite }
-                            tooltip = { t('toolbar.invite') } /> }
-                    { this._shouldShowButton('info') && <InfoDialogButton /> }
-                    { overflowHasItems
-                        && <OverflowMenuButton
-                            isOpen = { _overflowMenuVisible }
-                            onVisibilityChange = { this._onSetOverflowVisible }>
-                            <ul
-                                aria-label = { t(toolbarAccLabel) }
-                                className = 'overflow-menu'>
-                                { overflowMenuContent }
-                            </ul>
-                        </OverflowMenuButton> }
-                </div>
+                <div className = 'toolbox-background' />
+                { this._renderToolboxContent() }
             </div>
         );
     }
@@ -1000,6 +924,97 @@ class Toolbox extends Component<Props> {
         ];
     }
 
+    /**
+     * Renders the toolbox content.
+     *
+     * @returns {Array<ReactElement>}
+     */
+    _renderToolboxContent() {
+        const {
+            _chatOpen,
+            _hideInviteButton,
+            _overflowMenuVisible,
+            _raisedHand,
+            t
+        } = this.props;
+        const overflowMenuContent = this._renderOverflowMenuContent();
+        const overflowHasItems = Boolean(overflowMenuContent.filter(
+            child => child).length);
+        const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
+
+        return (
+            <div className = 'toolbox-content'>
+                <div className = 'button-group-left'>
+                    { this._shouldShowButton('desktop')
+                        && this._renderDesktopSharingButton() }
+                    { this._shouldShowButton('raisehand')
+                        && <ToolbarButton
+                            accessibilityLabel =
+                                {
+                                    t('toolbar.accessibilityLabel.raiseHand')
+                                }
+                            iconName = { _raisedHand
+                                ? 'icon-raised-hand toggled'
+                                : 'icon-raised-hand' }
+                            onClick = { this._onToolbarToggleRaiseHand }
+                            tooltip = { t('toolbar.raiseHand') } /> }
+                    { this._shouldShowButton('chat')
+                        && <div className = 'toolbar-button-with-badge'>
+                            <ToolbarButton
+                                accessibilityLabel =
+                                    { t('toolbar.accessibilityLabel.chat') }
+                                iconName = { _chatOpen
+                                    ? 'icon-chat toggled'
+                                    : 'icon-chat' }
+                                onClick = { this._onToolbarToggleChat }
+                                tooltip = { t('toolbar.chat') } />
+                            <ChatCounter />
+                        </div> }
+                    {
+                        this._shouldShowButton('closedcaptions')
+                            && <ClosedCaptionButton />
+                    }
+                </div>
+                <div className = 'button-group-center'>
+                    <AudioMuteButton
+                        visible = { this._shouldShowButton('microphone') } />
+                    <HangupButton
+                        visible = { this._shouldShowButton('hangup') } />
+                    <VideoMuteButton
+                        visible = { this._shouldShowButton('camera') } />
+                </div>
+                <div className = 'button-group-right'>
+                    { this._shouldShowButton('localrecording')
+                        && <LocalRecordingButton
+                            onClick = {
+                                this._onToolbarOpenLocalRecordingInfoDialog
+                            } />
+                    }
+                    { this._shouldShowButton('tileview')
+                        && <TileViewButton /> }
+                    { this._shouldShowButton('invite')
+                        && !_hideInviteButton
+                        && <ToolbarButton
+                            accessibilityLabel =
+                                { t('toolbar.accessibilityLabel.invite') }
+                            iconName = 'icon-add'
+                            onClick = { this._onToolbarOpenInvite }
+                            tooltip = { t('toolbar.invite') } /> }
+                    { this._shouldShowButton('info') && <InfoDialogButton /> }
+                    { overflowHasItems
+                        && <OverflowMenuButton
+                            isOpen = { _overflowMenuVisible }
+                            onVisibilityChange = { this._onSetOverflowVisible }>
+                            <ul
+                                aria-label = { t(toolbarAccLabel) }
+                                className = 'overflow-menu'>
+                                { overflowMenuContent }
+                            </ul>
+                        </OverflowMenuButton> }
+                </div>
+            </div>);
+    }
+
     _shouldShowButton: (string) => boolean;
 
     /**