fix(prejoin) implement ux improvements for mobile (#9939)

css/premeeting/_connection-status.scss

         background-color: rgba(0, 0, 0, 0.7);
         align-items: center;
         display: flex;
-        padding: 8px 12px;
+        padding: 14px 16px;
     }
 
     &-circle {

css/premeeting/_device-status.scss

 .device {
     &-status {
         align-items: center;
-        align-self: stretch;
         color: #fff;
         display: flex;
         font-size: 14px;
-        font-weight: 400;
-        justify-content: center;
         line-height: 20px;
-        margin-top: 8px;
         padding: 6px;
         text-align: center;
+
+        &-error {
+            align-items: flex-start;
+            background-color: #F8AE1A;
+            border-radius: 6px;
+            color: #040404;
+            padding: 12px 16px;
+            text-align: left;
+        }
+
+        span {
+            margin-left: 16px;
+        }
     }
 
     &-icon {
         background-repeat: no-repeat;
         display: inline-block;
         height: 16px;
-        margin-right: 10px;
         width: 16px;
 
-        &--warning {
-            svg path {
-                fill: rgba(241, 173, 51, 1);
-            }
-        }
         &--ok {
             svg path {
                 fill: #189b55;

css/premeeting/_prejoin.scss

         width: 100%;
     }
 
-    &-checkbox-container {
-        margin-bottom: 16px;
-        width: 100%;
-        text-align: center;
-    }
-
     &-error {
-        color: white;
         background-color: #E04757;
         border-radius: 6px;
-        padding: 4px;
         box-sizing: border-box;
+        color: white;
+        font-size: 12px;
+        line-height: 16px;
         margin-bottom: 16px;
         margin-top: -8px;
-        font-size: 12px;
+        padding: 4px;
         text-align: center;
         width: 100%;
     }

css/premeeting/_premeeting-screens.scss

         cursor: pointer;
         display: inline-block;
         font-size: 14px;
+        font-weight: 600;
         line-height: 24px;
         margin-bottom: 16px;
         padding: 7px 16px;
 
             #new-toolbox {
                 bottom: 0;
-                margin-bottom: 16px;
                 position: relative;
                 transition: none;
 
+                .toolbox-content {
+                    margin-bottom: 4px;
+                }
+
+                .toolbox-content-items {
+                    background: transparent;
+                    border-radius: 0;
+                    box-shadow: none;
+                    display: flex;
+                    justify-content: space-evenly;
+                    padding: 8px 0;
+                }
+
                 .toolbox-content,
                 .toolbox-content-wrapper,
                 .toolbox-content-items {
             padding: 16px;
             width: 100%;
 
+            &-controls {
+                input.field {
+                    font-size: 16px;
+                    padding: 14px 16px;
+                }
+            }
+
             .title {
-                font-size: 20px;
-                line-height: 28px;
-                letter-spacing: -0.012;
-                margin-bottom: 24px;
+                display: none;
             }
         }
 
         .con-status {
-            margin: 16px;
-            width: calc(100% - 32px);
+            margin: 0;
+            width: 100%;
+        }
+
+        .device-status-error {
+            border-radius: 0;
+            margin: 0 -16px;
         }
 
         input.field {
 
         .action-btn {
             font-size: 16px;
+            margin-bottom: 8px;
             padding: 11px 16px;
         }
-
-        .toolbox-content-items {
-            border-radius: 0;
-            display: flex;
-            justify-content: space-evenly;
-            padding: 8px 0;
-        }
     }
 
     input::placeholder {
     display: flex;
     justify-content: center;
 }
-
-@mixin icon-container($bg, $fill) {
-    .toggle-button-icon-container {
-        background: $bg;
-
-        svg {
-            fill: $fill
-        }
-    }
-}
-
-.toggle-button {
-    border-radius: 6px;
-    cursor: pointer;
-    color: #fff;
-    font-size: 13px;
-    height: 40px;
-    margin: 0 auto;
-    transition: background 0.16s ease-out;
-
-    @include flex-centered();
-
-    svg {
-        fill: transparent;
-    }
-
-    label {
-        cursor: pointer;
-    }
-
-    &:hover {
-        background: rgba(255, 255, 255, 0.1);
-
-        .toggle-button-icon-container {
-            display: none;
-        }
-    }
-
-    &-container {
-        position: relative;
-
-        @include flex-centered();
-    }
-
-    &-icon-container {
-        border-radius: 50%;
-        left: -22px;
-        padding: 2px;
-        position: absolute;
-    }
-
-    &--toggled {
-        @include icon-container(white, #1C2025);
-
-        &:hover {
-            .toggle-button-icon-container {
-                display: block;
-            }
-        }
-
-        .toggle-button-icon-container {
-            display: block;
-        }
-    }
-}

lang/main.json

         "errorDialOutFailed": "Could not dial out. Call failed",
         "errorDialOutStatus": "Error getting dial out status",
         "errorMissingName": "Please enter your name to join the meeting",
+        "errorNoPermissions": "You need to enable microphone and camera access",
         "errorStatusCode": "Error dialing out, status code: {{status}}",
         "errorValidation": "Number validation failed",
         "iWantToDialIn": "I want to dial in",

react/features/base/icons/svg/exclamation-triangle.svg

+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2332 14.3254L9.70838 0.910718C9.63451 0.77902 9.52397 0.670633 9.38965 0.598199C8.99846 0.387243 8.50693 0.52716 8.29177 0.910713L0.766813 14.3254C0.701168 14.4424 0.666748 14.5738 0.666748 14.7073C0.666748 15.1451 1.02867 15.4999 1.47512 15.4999H16.5249C16.6611 15.4999 16.7951 15.4662 16.9145 15.4018C17.3057 15.1909 17.4484 14.7089 17.2332 14.3254ZM2.84224 13.9147L9.00002 2.93733L15.1577 13.9147H2.84224ZM8.19177 11.5371C8.19177 11.0993 8.54663 10.7445 8.98437 10.7445H9.01591C9.45365 10.7445 9.80851 11.0993 9.80851 11.5371C9.80851 11.9748 9.45365 12.3297 9.01591 12.3297H8.98437C8.54663 12.3297 8.19177 11.9748 8.19177 11.5371ZM9.00014 6.7815C8.55369 6.7815 8.19177 7.14341 8.19177 7.58986V9.14351C8.19177 9.58996 8.55369 9.95188 9.00014 9.95188C9.44659 9.95188 9.80851 9.58996 9.80851 9.14351V7.58986C9.80851 7.14341 9.44659 6.7815 9.00014 6.7815Z" fill="#040404"/>
+</svg>

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

 export { default as IconEventNote } from './event_note.svg';
 export { default as IconExclamation } from './exclamation.svg';
 export { default as IconExclamationSolid } from './exclamation-solid.svg';
+export { default as IconExclamationTriangle } from './exclamation-triangle.svg';
 export { default as IconExitFullScreen } from './exit-full-screen.svg';
 export { default as IconFeedback } from './feedback.svg';
 export { default as IconFullScreen } from './full-screen.svg';

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

-// @flow
-
-import React, { useCallback } from 'react';
-
-import { Icon, IconCheck } from '../../../icons';
-
-const mainClass = 'toggle-button';
-
-type Props = {
-
-    /**
-     * Text of the button.
-     */
-    children: React$Node,
-
-    /**
-     * If the button is toggled or not.
-     */
-    isToggled?: boolean,
-
-    /**
-     * OnClick button handler.
-     */
-    onClick: Function
-}
-
-/**
- * Button used as a toggle.
- *
- * @returns {ReactElement}
- */
-function ToggleButton({ children, isToggled, onClick }: Props) {
-    const className = isToggled ? `${mainClass} ${mainClass}--toggled` : mainClass;
-
-    const onKeyPressHandler = useCallback(e => {
-        if (onClick && (e.key === ' ')) {
-            e.preventDefault();
-            onClick();
-        }
-    }, [ onClick ]);
-
-    return (
-        <div
-            aria-checked = { isToggled }
-            className = { className }
-            id = 'toggle-button'
-            onClick = { onClick }
-            onKeyPress = { onKeyPressHandler }
-            role = 'switch'
-            tabIndex = { 0 }>
-            <div className = 'toggle-button-container'>
-                <div className = 'toggle-button-icon-container'>
-                    <Icon
-                        className = 'toggle-button-icon'
-                        size = { 10 }
-                        src = { IconCheck } />
-                </div>
-                <label htmlFor = 'toggle-button'>{children}</label>
-            </div>
-        </div>
-    );
-}
-
-export default ToggleButton;

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

 export { default as ActionButton } from './ActionButton';
 export { default as InputField } from './InputField';
 export { default as PreMeetingScreen } from './PreMeetingScreen';
-export { default as ToggleButton } from './ToggleButton';

react/features/prejoin/components/Prejoin.js

 import { translate } from '../../base/i18n';
 import { Icon, IconArrowDown, IconArrowUp, IconPhone, IconVolumeOff } from '../../base/icons';
 import { isVideoMutedByUser } from '../../base/media';
-import { ActionButton, InputField, PreMeetingScreen, ToggleButton } from '../../base/premeeting';
+import { ActionButton, InputField, PreMeetingScreen } from '../../base/premeeting';
 import { connect } from '../../base/redux';
 import { getDisplayName, updateSettings } from '../../base/settings';
 import { getLocalJitsiVideoTrack } from '../../base/tracks';
 import {
     joinConference as joinConferenceAction,
     joinConferenceWithoutAudio as joinConferenceWithoutAudioAction,
-    setSkipPrejoin as setSkipPrejoinAction,
     setJoinByPhoneDialogVisiblity as setJoinByPhoneDialogVisiblityAction
 } from '../actions';
 import {
     isDeviceStatusVisible,
     isDisplayNameRequired,
     isJoinByPhoneButtonVisible,
-    isJoinByPhoneDialogVisible,
-    isPrejoinSkipped
+    isJoinByPhoneDialogVisible
 } from '../functions';
 
 import JoinByPhoneDialog from './dialogs/JoinByPhoneDialog';
 
 type Props = {
 
-    /**
-     * Flag signaling if the 'skip prejoin' button is toggled or not.
-     */
-    buttonIsToggled: boolean,
-
     /**
      * Flag signaling if the device status is visible or not.
      */
      */
     roomName: string,
 
-    /**
-     * Sets visibility of the prejoin page for the next sessions.
-     */
-    setSkipPrejoin: Function,
-
     /**
      * Sets visibility of the 'JoinByPhoneDialog'.
      */
         this._closeDialog = this._closeDialog.bind(this);
         this._showDialog = this._showDialog.bind(this);
         this._onJoinButtonClick = this._onJoinButtonClick.bind(this);
-        this._onToggleButtonClick = this._onToggleButtonClick.bind(this);
         this._onDropdownClose = this._onDropdownClose.bind(this);
         this._onOptionsClick = this._onOptionsClick.bind(this);
         this._setName = this._setName.bind(this);
         }
     }
 
-    _onToggleButtonClick: () => void;
-
-    /**
-     * Handler for the toggle button.
-     *
-     * @param {Object} e - The synthetic event.
-     * @returns {void}
-     */
-    _onToggleButtonClick() {
-        this.props.setSkipPrejoin(!this.props.buttonIsToggled);
-    }
-
     _onDropdownClose: () => void;
 
     /**
         return (
             <PreMeetingScreen
                 showDeviceStatus = { deviceStatusVisible }
-                skipPrejoinButton = { this._renderSkipPrejoinButton() }
                 title = { t('prejoin.joinMeeting') }
                 videoMuted = { !showCameraPreview }
                 videoTrack = { videoTrack }>
             </PreMeetingScreen>
         );
     }
-
-    /**
-     * Renders the 'skip prejoin' button.
-     *
-     * @returns {React$Element}
-     */
-    _renderSkipPrejoinButton() {
-        const { buttonIsToggled, t } = this.props;
-
-        return (
-            <div className = 'prejoin-checkbox-container'>
-                <ToggleButton
-                    isToggled = { buttonIsToggled }
-                    onClick = { this._onToggleButtonClick }>
-                    {t('prejoin.doNotShow')}
-                </ToggleButton>
-            </div>
-        );
-    }
 }
 
 /**
     const showErrorOnJoin = isDisplayNameRequired(state) && !name;
 
     return {
-        buttonIsToggled: isPrejoinSkipped(state),
         name,
         deviceStatusVisible: isDeviceStatusVisible(state),
         roomName: getRoomName(state),
     joinConferenceWithoutAudio: joinConferenceWithoutAudioAction,
     joinConference: joinConferenceAction,
     setJoinByPhoneDialogVisiblity: setJoinByPhoneDialogVisiblityAction,
-    setSkipPrejoin: setSkipPrejoinAction,
     updateSettings
 };
 

react/features/prejoin/components/preview/DeviceStatus.js

 import React from 'react';
 
 import { translate } from '../../../base/i18n';
-import { Icon, IconCheckSolid, IconExclamation } from '../../../base/icons';
+import { Icon, IconCheckSolid, IconExclamationTriangle } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import {
     getDeviceStatusType,
-    getDeviceStatusText,
-    getRawError
+    getDeviceStatusText
 } from '../../functions';
 
 export type Props = {
      */
     deviceStatusType: string,
 
-    /**
-     * The error coming from device configuration.
-     */
-    rawError: string,
-
     /**
      * Used for translation.
      */
 
 const iconMap = {
     warning: {
-        src: IconExclamation,
+        src: IconExclamationTriangle,
         className: 'device-icon--warning'
     },
     ok: {
  *
  * @returns {ReactElement}
  */
-function DeviceStatus({ deviceStatusType, deviceStatusText, rawError, t }: Props) {
+function DeviceStatus({ deviceStatusType, deviceStatusText, t }: Props) {
     const { src, className } = iconMap[deviceStatusType];
+    const hasError = deviceStatusType === 'warning';
+    const containerClassName = `device-status ${hasError ? 'device-status-error' : ''}`;
 
     return (
         <div
-            className = 'device-status'
+            className = { containerClassName }
             role = 'alert'
             tabIndex = { -1 }>
             <Icon
                 className = { `device-icon ${className}` }
                 size = { 16 }
                 src = { src } />
-            <span
-                role = 'heading'>
-                {t(deviceStatusText)}
+            <span role = 'heading'>
+                {hasError ? t('prejoin.errorNoPermissions') : t(deviceStatusText)}
             </span>
-            { rawError && <span>
-                { rawError }
-            </span> }
         </div>
     );
 }
 function mapStateToProps(state) {
     return {
         deviceStatusText: getDeviceStatusText(state),
-        deviceStatusType: getDeviceStatusType(state),
-        rawError: getRawError(state)
+        deviceStatusType: getDeviceStatusType(state)
     };
 }