Improve premeeting screens ux (#9726)

* feat(prejoin) move invite to toolbar section

* feat(premeeting) redesign prejoin and lobby screens

* code review changes

* fix prejoin flicker and avatar id

* fix password error message and native lobby dialog close position

react/features/lobby/components/AbstractLobbyScreen.js

@@ -7,6 +7,7 @@ import { getFeatureFlag, INVITE_ENABLED } from '../../base/flags';
 import { getLocalParticipant } from '../../base/participants';
 import { getFieldValue } from '../../base/react';
 import { updateSettings } from '../../base/settings';
+import { isDeviceStatusVisible } from '../../prejoin/functions';
 import { cancelKnocking, joinWithPassword, setPasswordJoinFailed, startKnocking } from '../actions';
 
 export const SCREEN_STATES = {
@@ -17,6 +18,11 @@ export const SCREEN_STATES = {
 
 export type Props = {
 
+    /**
+     * Indicates whether the device status should be visible.
+     */
+    _deviceStatusVisible: boolean,
+
     /**
      * True if knocking is already happening, so we're waiting for a response.
      */
@@ -380,8 +386,10 @@ export function _mapStateToProps(state: Object): $Shape<Props> {
     const { knocking, passwordJoinFailed } = state['features/lobby'];
     const { iAmSipGateway } = state['features/base/config'];
     const showCopyUrlButton = inviteEnabledFlag || !disableInviteFunctions;
+    const deviceStatusVisible = isDeviceStatusVisible(state);
 
     return {
+        _deviceStatusVisible: deviceStatusVisible,
         _knocking: knocking,
         _meetingName: getConferenceName(state),
         _participantEmail: localParticipant?.email,