feat(prejoin) improve ux

css/_connection-status.scss

@@ -1,30 +1,30 @@
 .con-status {
     position: absolute;
-    top: 40px;
+    top: 24px;
     width: 100%;
     z-index: $toolbarZ + 3;
 
     &-container {
-        background: rgba(28, 32, 37, .5);
         border-radius: 3px;
         color: #fff;
         font-size: 13px;
-        line-height: 20px;
+        line-height: 13px;
         margin: 0 auto;
-        width: 304px;
+        width: 320px;
     }
 
     &-header {
+        background: rgba(28, 32, 37, .5);
         align-items: center;
         display: flex;
         justify-content: space-between;
-        padding: 8px;
     }
 
     &-circle {
         border-radius: 50%;
         display: inline-block;
         padding: 4px;
+        margin: 8px;
     }
 
     &--good {
@@ -40,6 +40,16 @@
     }
 
     &-arrow {
+        height: 36px;
+        width: 36px;
+        border-radius: 3px;
+        margin-left: 8px;
+        margin-right: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background-color 0.16s ease-out;
+
         &--up {
             transform: rotate(180deg);
         }
@@ -47,6 +57,10 @@
         &>svg {
             cursor: pointer;
         }
+
+        &:hover {
+            background-color: rgba(1,1,1, 0.1);
+        }
     }
 
     &-text {
@@ -54,7 +68,17 @@
     }
 
     &-details {
+        background: rgba(28, 32, 37, .5);
         border-top: 1px solid #5E6D7A;
         padding: 16px;
+        transition: opacity 0.16s ease-out;
+
+        &-visible {
+            opacity: 1;
+        }
+
+        &-hidden {
+            opacity: 0;
+        }
     }
 }

css/_lobby.scss

@@ -14,19 +14,6 @@
                 margin: 10px;
             }
         }
-
-        .form {
-            align-items: stretch;
-            display: flex;
-            flex-direction: column;
-            min-width: 400px;
-        }
-
-        .participant-info {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-        }
     }
 }
 
@@ -100,19 +87,6 @@
         }
     }
 
-    input {
-        align-self: stretch;
-        background-color: transparent;
-        border: 1px solid #B8C7E0;
-        border-radius: 4px;
-        color: white;
-        padding: 12px 8px;
-
-        &:focus {
-            border-color: rgb(3, 118, 218);
-        }
-    }
-
     button {
         align-self: stretch;
         margin: 8px 0;

css/_prejoin.scss

@@ -3,7 +3,6 @@
     &-input-area {
         margin: 0 auto;
         text-align: center;
-        width: 320px;
     }
 
     &-title {
@@ -42,9 +41,11 @@
 
     &-error {
         color: white;
-        background-color: rgba(229, 75, 75, 0.5);
+        background-color: rgba(225, 45, 45, 0.6);
+        border-radius: 3px;
         width: 100%;
-        padding: 3px;
+        padding: 2px;
+        box-sizing: border-box;
         margin-top: 4px;
         font-size: 13px;
         text-align: center;
@@ -58,75 +59,6 @@
 }
 
 .prejoin-preview {
-    height: 100%;
-    position: absolute;
-    width: 100%;
-
-    &--no-video {
-        background: radial-gradient(50% 50% at 50% 50%, #5B6F80 0%, #365067 100%), #FFFFFF;
-        text-align: center;
-    }
-
-    &-video {
-        height: 100%;
-        object-fit: cover;
-        position: absolute;
-        width: 100%;
-    }
-
-    &-name {
-        color: #fff;
-        font-size: 19px;
-        line-height: 28px;
-
-        &--editable {
-            background: none;
-            border: 0;
-            border-bottom: 1px solid #D1DBE8;
-            margin: 24px 0 16px 0;
-            outline: none;
-            text-align: center;
-            width: 100%;
-
-            &::-webkit-input-placeholder {
-                @include name-placeholder;
-            }
-            &::-moz-placeholder {
-                @include name-placeholder;
-            }
-            &:-ms-input-placeholder {
-                @include name-placeholder;
-            }
-        }
-
-        &--text {
-            margin: 16px 0;
-            outline: none;
-        }
-    }
-
-    &-avatar.avatar {
-        background: #A4B8D1;
-        margin: 200px auto 0 auto;
-    }
-
-    &-overlay {
-        height: 100%;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
-    }
-
-    &-bottom-overlay {
-        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
-        bottom: 0;
-        height: 50%;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-    }
-
     &-status {
         align-items: center;
         align-self: stretch;

css/_premeeting-screens.scss

@@ -12,12 +12,23 @@
 
  .premeeting-screen {
     align-items: stretch;
-    background: radial-gradient(50% 50% at 50% 50%, #5D95C7 0%, #376288 100%), #FFFFFF;
+    background: radial-gradient(50% 50% at 50% 50%, #2A3A4B 20.83%, #1E2A36 100%);
     display: flex;
     flex-direction: column;
     font-size: 1.3em;
     z-index: $toolbarZ + 1;
 
+    &-avatar {
+        background-color: #A4B8D1;
+        margin-bottom: 24px;
+
+        text {
+            fill: black;
+            font-size: 26px;
+            font-weight: 400;  
+        }
+    }
+
     .action-btn {
         border-radius: 3px;
         color: #fff;
@@ -59,22 +70,26 @@
                     fill: #AFB6BC;
                 }
             }
-
-            .options {
-                border-left: 1px solid #AFB6BC;
-            }
         }
 
         .options {
+            border-radius: 3px;
             align-items: center;
-            border-left: 1px solid #fff;
             display: flex;
             height: 100%;
             justify-content: center;
             position: absolute;
             right: 0;
             top: 0;
-            width: 40px;
+            width: 36px;
+
+            &:hover {
+                background-color: #0262B6;
+            }
+
+            svg {
+                pointer-events: none;
+            }
         }
     }
 
@@ -111,12 +126,14 @@
             margin-bottom: 16px;
 
             .url {
+                background: rgba(28, 32, 37, 0.5);
+                border-radius: 4px;
                 display: flex;
                 padding: 8px 10px;
+                transition: background 0.16s ease-out;
 
                 &:hover {
                     background: #1C2025;
-                    border-radius: 4px;
                 }
 
                 &.done {
@@ -149,20 +166,23 @@
         }
 
         input.field {
-            background-color: transparent;
-            border: 1px solid transparent;
-            color: white;
-            outline-width: 0;
+            background-color: white;
+            border: none;
+            outline: none;
+            border-radius: 3px;
+            font-size: 15px;
+            line-height: 24px;
+            color: #1C2025;
             padding: 8px 0;
             text-align: center;
-            width: 100%;
+            width: 320px;
 
-            &.focused {
-                border-bottom: 1px solid white;
+            &.error {
+                box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
             }
 
-            &.error::placeholder {
-                color: $defaultWarningColor;
+            &.focused {
+                box-shadow: 0px 0px 4px 3px #0376DA;
             }
         }
     }
@@ -170,7 +190,7 @@
     .media-btn-container {
         display: flex;
         justify-content: center;
-        margin: 32px 0;
+        margin: 24px 0 16px 0;
         width: 100%;
 
         &> div {
@@ -233,6 +253,7 @@
     font-size: 13px;
     height: 40px;
     margin: 0 auto;
+    transition: background 0.16s ease-out;
     width: 320px;
 
     @include flex-centered();
@@ -242,7 +263,7 @@
     }
 
     &:hover {
-        background: #1C2025;
+        background: rgba(255, 255, 255, 0.1);
 
         @include icon-container(#A4B8D1, #1C2025);
     }
@@ -261,14 +282,6 @@
     }
 
     &--toggled {
-        background: #75757A;
-
-        &:hover {
-            background: #75757A;
-
-            @include icon-container(#A4B8D1, #75757A);
-        }
-
-        @include icon-container(#A4B8D1, #75757A);
+        @include icon-container(white, #1C2025);
     }
 }

lang/main.json

@@ -536,7 +536,7 @@
         "dialInMeeting": "Dial into the meeting",
         "dialInPin": "Dial into the meeting and enter PIN code:",
         "dialing": "Dialing",
-        "doNotShow": "Don't show this again",
+        "doNotShow": "Don't show this screen again",
         "errorDialOut": "Could not dial out",
         "errorDialOutDisconnected": "Could not dial out. Disconnected",
         "errorDialOutFailed": "Could not dial out. Call failed",

react/features/base/avatar/components/Avatar.js

@@ -37,6 +37,11 @@ export type Props = {
      */
     displayName?: string,
 
+    /**
+     * Whether or not to update the background color of the avatar
+     */
+    dynamicColor?: Boolean,
+
     /**
      * ID of the element, if any.
      */
@@ -78,6 +83,15 @@ export const DEFAULT_SIZE = 65;
  * Implements a class to render avatars in the app.
  */
 class Avatar<P: Props> extends PureComponent<P, State> {
+    /**
+     * Default values for {@code Avatar} component's properties.
+     *
+     * @static
+     */
+    static defaultProps = {
+        dynamicColor: true
+    };
+
     /**
      * Instantiates a new {@code Component}.
      *
@@ -123,6 +137,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
             _loadableAvatarUrl,
             className,
             colorBase,
+            dynamicColor,
             id,
             size,
             status,
@@ -156,7 +171,10 @@ class Avatar<P: Props> extends PureComponent<P, State> {
         const initials = getInitials(_initialsBase);
 
         if (initials) {
-            avatarProps.color = getAvatarColor(colorBase || _initialsBase);
+            if (dynamicColor) {
+                avatarProps.color = getAvatarColor(colorBase || _initialsBase);
+            }
+
             avatarProps.initials = initials;
         }
 

react/features/base/icons/svg/arrow_up.svg

@@ -0,0 +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"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -5,6 +5,7 @@ export { default as IconAddPeople } from './link.svg';
 export { default as IconArrowBack } from './arrow_back.svg';
 export { default as IconArrowDown } from './arrow_down.svg';
 export { default as IconArrowDownSmall } from './arrow-down-small.svg';
+export { default as IconArrowUp } from './arrow_up.svg';
 export { default as IconArrowLeft } from './arrow-left.svg';
 export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';

react/features/base/premeeting/components/web/ActionButton.js

@@ -26,6 +26,11 @@ type Props = {
      */
     hasOptions?: boolean,
 
+    /**
+     * Icon to display in the options section.
+     */
+    OptionsIcon?: React$Node,
+
     /**
      * TestId of the button. Can be used to locate element when testing UI.
      */
@@ -57,6 +62,7 @@ function ActionButton({
     className = '',
     disabled,
     hasOptions,
+    OptionsIcon = IconArrowDown,
     testId,
     type = 'primary',
     onClick,
@@ -75,7 +81,7 @@ function ActionButton({
                 <Icon
                     className = 'icon'
                     size = { 14 }
-                    src = { IconArrowDown } />
+                    src = { OptionsIcon } />
             </div>
             }
         </div>

react/features/base/premeeting/components/web/Avatar.js

@@ -1,61 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { Avatar } from '../../../avatar';
-import { connect } from '../../../redux';
-import { calculateAvatarDimensions } from '../../functions';
-
-type Props = {
-
-   /**
-    * The height of the window.
-    */
-    height: number,
-
-   /**
-    * The name of the participant (if any).
-    */
-    name: string
-}
-
-/**
- * Component displaying the avatar for the premeeting screen.
- *
- * @param {Props} props - The props of the component.
- * @returns {ReactElement}
- */
-function PremeetingAvatar({ height, name }: Props) {
-    const { marginTop, size } = calculateAvatarDimensions(height);
-
-    if (size <= 5) {
-        return null;
-    }
-
-
-    return (
-        <div style = {{ marginTop }}>
-            <Avatar
-                className = 'preview-avatar'
-                displayName = { name }
-                participantId = 'local'
-                size = { size } />
-        </div>
-    );
-}
-
-/**
- * Maps (parts of) the redux state to the React {@code Component} props.
- *
- * @param {Object} state - The redux state.
- * @returns {{
- *    height: number
- * }}
- */
-function mapStateToProps(state) {
-    return {
-        height: state['features/base/responsive-ui'].clientHeight
-    };
-}
-
-export default connect(mapStateToProps)(PremeetingAvatar);

react/features/base/premeeting/components/web/ConnectionStatus.js

@@ -61,6 +61,9 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
         ? 'con-status-arrow con-status-arrow--up'
         : 'con-status-arrow';
     const detailsText = connectionDetails.map(t).join(' ');
+    const detailsClassName = showDetails
+        ? 'con-status-details-visible'
+        : 'con-status-details-hidden';
 
     return (
         <div className = 'con-status'>
@@ -79,8 +82,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
                         size = { 24 }
                         src = { IconArrowDownSmall } />
                 </div>
-                { showDetails
-                  && <div className = 'con-status-details'>{detailsText}</div> }
+                <div className = { `con-status-details ${detailsClassName}` }>{detailsText}</div>
             </div>
         </div>
     );

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -3,6 +3,7 @@
 import React, { PureComponent } from 'react';
 
 import { AudioSettingsButton, VideoSettingsButton } from '../../../../toolbox/components/web';
+import { Avatar } from '../../../avatar';
 
 import ConnectionStatus from './ConnectionStatus';
 import CopyMeetingUrl from './CopyMeetingUrl';
@@ -85,12 +86,18 @@ export default class PreMeetingScreen extends PureComponent<Props> {
                 id = 'lobby-screen'>
                 <ConnectionStatus />
                 <Preview
-                    name = { name }
-                    showAvatar = { showAvatar }
                     videoMuted = { videoMuted }
                     videoTrack = { videoTrack } />
                 {!videoMuted && <div className = 'preview-overlay' />}
                 <div className = 'content'>
+                    {showAvatar && videoMuted && (
+                        <Avatar
+                            className = 'premeeting-screen-avatar'
+                            displayName = { name }
+                            dynamicColor = { false }
+                            participantId = 'local'
+                            size = { 80 } />
+                    )}
                     {showConferenceInfo && (
                         <>
                             <div className = 'title'>

react/features/base/premeeting/components/web/Preview.js

@@ -6,20 +6,8 @@ import { Video } from '../../../media';
 import { connect } from '../../../redux';
 import { getLocalVideoTrack } from '../../../tracks';
 
-import PreviewAvatar from './Avatar';
-
 export type Props = {
 
-    /**
-     * The name of the user that is about to join.
-     */
-    name: string,
-
-    /**
-     * Indicates whether the avatar should be shown when video is off
-     */
-    showAvatar: boolean,
-
     /**
      * Flag signaling the visibility of camera preview.
      */
@@ -38,7 +26,7 @@ export type Props = {
  * @returns {ReactElement}
  */
 function Preview(props: Props) {
-    const { name, showAvatar, videoMuted, videoTrack } = props;
+    const { videoMuted, videoTrack } = props;
 
     if (!videoMuted && videoTrack) {
         return (
@@ -50,23 +38,9 @@ function Preview(props: Props) {
         );
     }
 
-    if (showAvatar) {
-        return (
-            <div
-                className = 'no-video'
-                id = 'preview'>
-                <PreviewAvatar name = { name } />
-            </div>
-        );
-    }
-
     return null;
 }
 
-Preview.defaultProps = {
-    showAvatar: true
-};
-
 /**
  * Maps part of the Redux state to the props of this component.
  *

react/features/lobby/components/web/LobbyScreen.js

@@ -92,15 +92,11 @@ class LobbyScreen extends AbstractLobbyScreen {
         const { t } = this.props;
 
         return (
-            <div className = 'participant-info'>
-                <div className = 'form'>
-                    <InputField
-                        onChange = { this._onChangeDisplayName }
-                        placeHolder = { t('lobby.nameField') }
-                        testId = 'lobby.nameField'
-                        value = { displayName } />
-                </div>
-            </div>
+            <InputField
+                onChange = { this._onChangeDisplayName }
+                placeHolder = { t('lobby.nameField') }
+                testId = 'lobby.nameField'
+                value = { displayName } />
         );
     }
 
@@ -113,15 +109,13 @@ class LobbyScreen extends AbstractLobbyScreen {
         const { _passwordJoinFailed, t } = this.props;
 
         return (
-            <div className = 'form'>
-                <InputField
-                    className = { _passwordJoinFailed ? 'error' : '' }
-                    onChange = { this._onChangePassword }
-                    placeHolder = { _passwordJoinFailed ? t('lobby.invalidPassword') : t('lobby.passwordField') }
-                    testId = 'lobby.password'
-                    type = 'password'
-                    value = { this.state.password } />
-            </div>
+            <InputField
+                className = { _passwordJoinFailed ? 'error' : '' }
+                onChange = { this._onChangePassword }
+                placeHolder = { _passwordJoinFailed ? t('lobby.invalidPassword') : t('lobby.passwordField') }
+                testId = 'lobby.password'
+                type = 'password'
+                value = { this.state.password } />
         );
     }
 

react/features/prejoin/components/Prejoin.js

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 
 import { getRoomName } from '../../base/conference';
 import { translate } from '../../base/i18n';
-import { Icon, IconPhone, IconVolumeOff } from '../../base/icons';
+import { Icon, IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
 import { isVideoMutedByUser } from '../../base/media';
 import { ActionButton, InputField, PreMeetingScreen, ToggleButton } from '../../base/premeeting';
 import { connect } from '../../base/redux';
@@ -316,6 +316,8 @@ class Prejoin extends Component<Props, State> {
                         <div className = 'prejoin-input-area'>
                             <InputField
                                 autoFocus = { true }
+                                className = { showError ? 'error' : '' }
+                                hasError = { showError }
                                 onChange = { _setName }
                                 onSubmit = { joinConference }
                                 placeHolder = { t('dialog.enterDisplayName') }
@@ -352,6 +354,7 @@ class Prejoin extends Component<Props, State> {
                                     isOpen = { showJoinByPhoneButtons }
                                     onClose = { _onDropdownClose }>
                                     <ActionButton
+                                        OptionsIcon = { showJoinByPhoneButtons ? IconArrowUp : IconArrowDown }
                                         hasOptions = { true }
                                         onClick = { _onJoinButtonClick }
                                         onOptionsClick = { _onOptionsClick }