ref(ui-components) Use new Button on prejoin (#12372)

css/premeeting/_lobby.scss

@@ -204,3 +204,7 @@
         }
     }
 }
+
+.lobby-button-margin {
+    margin-bottom: 16px;
+}

react/features/base/ui/constants.ts

@@ -190,7 +190,8 @@ export const commonStyles = (theme: Theme) => {
             },
 
             '.prejoin-dialog-btn': {
-                width: '309px'
+                width: '309px',
+                marginBottom: '8px'
             },
 
             '.prejoin-dialog-dialin-container': {

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

@@ -4,9 +4,10 @@ import React from 'react';
 
 import { translate } from '../../../base/i18n';
 import { Icon, IconClose } from '../../../base/icons';
-import { ActionButton, InputField, PreMeetingScreen } from '../../../base/premeeting';
+import { InputField, PreMeetingScreen } from '../../../base/premeeting';
 import { LoadingIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
+import Button from '../../../base/ui/components/web/Button';
 import ChatInput from '../../../chat/components/web/ChatInput';
 import MessageContainer from '../../../chat/components/web/MessageContainer';
 import AbstractLobbyScreen, {
@@ -222,22 +223,22 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      * @inheritdoc
      */
     _renderPasswordJoinButtons() {
-        const { t } = this.props;
-
         return (
             <>
-                <ActionButton
+                <Button
+                    className = 'lobby-button-margin'
+                    fullWidth = { true }
+                    labelKey = 'prejoin.joinMeeting'
                     onClick = { this._onJoinWithPassword }
                     testId = 'lobby.passwordJoinButton'
-                    type = 'primary'>
+                    type = 'primary' />
-                    { t('prejoin.joinMeeting') }
+                <Button
-                </ActionButton>
+                    className = 'lobby-button-margin'
-                <ActionButton
+                    fullWidth = { true }
+                    labelKey = 'lobby.backToKnockModeButton'
                     onClick = { this._onSwitchToKnockMode }
                     testId = 'lobby.backToKnockModeButton'
-                    type = 'secondary'>
+                    type = 'secondary' />
-                    { t('lobby.backToKnockModeButton') }
-                </ActionButton>
             </>
         );
     }
@@ -248,30 +249,35 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
      * @inheritdoc
      */
     _renderStandardButtons() {
-        const { _knocking, _isLobbyChatActive, _renderPassword, t } = this.props;
+        const { _knocking, _isLobbyChatActive, _renderPassword } = this.props;
 
         return (
             <>
-                { _knocking || <ActionButton
+                {_knocking || <Button
+                    className = 'lobby-button-margin'
                     disabled = { !this.state.displayName }
+                    fullWidth = { true }
+                    labelKey = 'lobby.knockButton'
                     onClick = { this._onAskToJoin }
                     testId = 'lobby.knockButton'
-                    type = 'primary'>
+                    type = 'primary' />
-                    { t('lobby.knockButton') }
+                }
-                </ActionButton> }
+                {(_knocking && _isLobbyChatActive) && <Button
-                { (_knocking && _isLobbyChatActive) && <ActionButton
+                    className = 'lobby-button-margin open-chat-button'
-                    className = 'open-chat-button'
+                    fullWidth = { true }
+                    labelKey = 'toolbar.openChat'
                     onClick = { this._onToggleChat }
                     testId = 'toolbar.openChat'
-                    type = 'primary' >
+                    type = 'primary' />
-                    { t('toolbar.openChat') }
+                }
-                </ActionButton> }
+                {_renderPassword && <Button
-                {_renderPassword && <ActionButton
+                    className = 'lobby-button-margin'
+                    fullWidth = { true }
+                    labelKey = 'lobby.enterPasswordButton'
                     onClick = { this._onSwitchToPasswordMode }
                     testId = 'lobby.enterPasswordButton'
-                    type = 'secondary'>
+                    type = 'secondary' />
-                    { t('lobby.enterPasswordButton') }
+                }
-                </ActionButton> }
             </>
         );
     }

react/features/prejoin/components/dialogs/DialInDialog.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconArrowLeft } from '../../../base/icons/svg';
-// @ts-ignore
+import { Button } from '../../../base/ui/components/web';
-import { ActionButton } from '../../../base/premeeting';
 // @ts-ignore
 import { getCountryCodeFromPhone } from '../../utils';
 // @ts-ignore
@@ -153,18 +152,18 @@ function DialinDialog(props: Props) {
                 {t('prejoin.connectedWithAudioQ')}
             </Label>
             <div className = 'prejoin-dialog-dialin-btns'>
-                <ActionButton
+                <Button
                     className = 'prejoin-dialog-btn'
+                    fullWidth = { true }
+                    labelKey = 'prejoin.joinMeeting'
                     onClick = { onPrimaryButtonClick }
-                    type = 'primary'>
+                    type = 'primary' />
-                    {t('prejoin.joinMeeting')}
+                <Button
-                </ActionButton>
-                <ActionButton
                     className = 'prejoin-dialog-btn'
+                    fullWidth = { true }
+                    labelKey = 'dialog.Cancel'
                     onClick = { onTextButtonClick }
-                    type = 'text'>
+                    type = 'tertiary' />
-                    {t('dialog.Cancel')}
-                </ActionButton>
             </div>
         </div>
     );

react/features/prejoin/components/dialogs/DialOutDialog.tsx

@@ -8,8 +8,7 @@ import { makeStyles } from 'tss-react/mui';
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
 import { IconClose } from '../../../base/icons/svg';
-// @ts-ignore
+import { Button } from '../../../base/ui/components/web';
-import { ActionButton } from '../../../base/premeeting';
 // @ts-ignore
 import Label from '../Label';
 // @ts-ignore
@@ -77,12 +76,12 @@ function DialOutDialog(props: Props) {
             <div className = { classes.picker }>
                 <CountryPicker onSubmit = { onSubmit } />
             </div>
-            <ActionButton
+            <Button
                 className = 'prejoin-dialog-btn'
+                fullWidth = { true }
+                labelKey = 'prejoin.callMe'
                 onClick = { onSubmit }
-                type = 'primary'>
+                type = 'primary' />
-                {t('prejoin.callMe')}
-            </ActionButton>
             <div className = 'prejoin-dialog-delimiter-container'>
                 <div className = 'prejoin-dialog-delimiter' />
                 <div className = 'prejoin-dialog-delimiter-txt-container'>
@@ -92,12 +91,12 @@ function DialOutDialog(props: Props) {
                 </div>
             </div>
             <div className = 'prejoin-dialog-dialin-container'>
-                <ActionButton
+                <Button
                     className = 'prejoin-dialog-btn'
+                    fullWidth = { true }
+                    labelKey = 'prejoin.iWantToDialIn'
                     onClick = { onTextButtonClick }
-                    type = 'text'>
+                    type = 'tertiary' />
-                    {t('prejoin.iWantToDialIn')}
-                </ActionButton>
             </div>
         </div>
     );