feat(prejoin) improve ux

css/_connection-status.scss

 .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 {
     }
 
     &-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);
         }
         &>svg {
             cursor: pointer;
         }
+
+        &:hover {
+            background-color: rgba(1,1,1, 0.1);
+        }
     }
 
     &-text {
     }
 
     &-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

                 margin: 10px;
             }
         }
-
-        .form {
-            align-items: stretch;
-            display: flex;
-            flex-direction: column;
-            min-width: 400px;
-        }
-
-        .participant-info {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-        }
     }
 }
 
         }
     }
 
-    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

     &-input-area {
         margin: 0 auto;
         text-align: center;
-        width: 320px;
     }
 
     &-title {
 
     &-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;
 }
 
 .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

 
  .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;
                     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;
+            }
         }
     }
 
             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 {
         }
 
         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;
             }
         }
     }
     .media-btn-container {
         display: flex;
         justify-content: center;
-        margin: 32px 0;
+        margin: 24px 0 16px 0;
         width: 100%;
 
         &> div {
     font-size: 13px;
     height: 40px;
     margin: 0 auto;
+    transition: background 0.16s ease-out;
     width: 320px;
 
     @include flex-centered();
     }
 
     &:hover {
-        background: #1C2025;
+        background: rgba(255, 255, 255, 0.1);
 
         @include icon-container(#A4B8D1, #1C2025);
     }
     }
 
     &--toggled {
-        background: #75757A;
-
-        &:hover {
-            background: #75757A;
-
-            @include icon-container(#A4B8D1, #75757A);
-        }
-
-        @include icon-container(#A4B8D1, #75757A);
+        @include icon-container(white, #1C2025);
     }
 }

lang/main.json

         "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

      */
     displayName?: string,
 
+    /**
+     * Whether or not to update the background color of the avatar
+     */
+    dynamicColor?: Boolean,
+
     /**
      * ID of the element, if any.
      */
  * 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}.
      *
             _loadableAvatarUrl,
             className,
             colorBase,
+            dynamicColor,
             id,
             size,
             status,
         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

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

 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

      */
     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.
      */
     className = '',
     disabled,
     hasOptions,
+    OptionsIcon = IconArrowDown,
     testId,
     type = 'primary',
     onClick,
                 <Icon
                     className = 'icon'
                     size = { 14 }
-                    src = { IconArrowDown } />
+                    src = { OptionsIcon } />
             </div>
             }
         </div>

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

-// @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

         ? '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'>
                         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

 import React, { PureComponent } from 'react';
 
 import { AudioSettingsButton, VideoSettingsButton } from '../../../../toolbox/components/web';
+import { Avatar } from '../../../avatar';
 
 import ConnectionStatus from './ConnectionStatus';
 import CopyMeetingUrl from './CopyMeetingUrl';
                 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

 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.
      */
  * @returns {ReactElement}
  */
 function Preview(props: Props) {
-    const { name, showAvatar, videoMuted, videoTrack } = props;
+    const { videoMuted, videoTrack } = props;
 
     if (!videoMuted && videoTrack) {
         return (
         );
     }
 
-    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

         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 } />
         );
     }
 
         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

 
 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';
                         <div className = 'prejoin-input-area'>
                             <InputField
                                 autoFocus = { true }
+                                className = { showError ? 'error' : '' }
+                                hasError = { showError }
                                 onChange = { _setName }
                                 onSubmit = { joinConference }
                                 placeHolder = { t('dialog.enterDisplayName') }
                                     isOpen = { showJoinByPhoneButtons }
                                     onClose = { _onDropdownClose }>
                                     <ActionButton
+                                        OptionsIcon = { showJoinByPhoneButtons ? IconArrowUp : IconArrowDown }
                                         hasOptions = { true }
                                         onClick = { _onJoinButtonClick }
                                         onOptionsClick = { _onOptionsClick }