Address review

css/premeeting/_prejoin.scss

@@ -50,7 +50,7 @@
         * Override default InlineDialog behaviour, since it does not play nicely with relative widths
         */
         & > div:nth-child(2) {
-            background: #fff;
+            background: #E0E0E0;
             padding: 0;
             position: absolute !important;
             width: 100%;

react/features/base/ui/components/types.ts

@@ -34,6 +34,11 @@ export interface IButtonProps {
      */
     onClick?: (e?: React.MouseEvent<HTMLButtonElement> | GestureResponderEvent) => void;
 
+    /**
+     * Key press callback.
+     */
+    onKeyPress?: (e?: React.KeyboardEvent<HTMLButtonElement>) => void;
+
     /**
      * The type of button to be displayed.
      */

react/features/base/ui/components/web/Button.tsx

@@ -187,6 +187,7 @@ const Button = React.forwardRef<any, any>(({
     label,
     labelKey,
     onClick = () => null,
+    onKeyPress = () => null,
     size = 'medium',
     testId,
     type = BUTTON_TYPES.PRIMARY
@@ -206,6 +207,7 @@ const Button = React.forwardRef<any, any>(({
             disabled = { disabled }
             { ...(id ? { id } : {}) }
             onClick = { onClick }
+            onKeyPress = { onKeyPress }
             ref = { ref }
             title = { accessibilityLabel }
             type = { isSubmit ? 'submit' : 'button' }>

react/features/prejoin/components/web/DropdownButton.tsx

@@ -1,124 +0,0 @@
-import React, { useCallback } from 'react';
-import { makeStyles } from 'tss-react/mui';
-
-import Icon from '../../../base/icons/components/Icon';
-
-interface IProps {
-
-    /**
-     * Attribute used in automated testing.
-     */
-    dataTestId: string;
-
-    /**
-     * Whether the button is disabled.
-     */
-    disabled: boolean;
-
-    /**
-     * The button's icon.
-     */
-    icon: Function;
-
-    /**
-     * The button's label.
-     */
-    label: string;
-
-    /**
-     * Function to be called when button is clicked.
-     */
-    onButtonClick: (e?: React.MouseEvent) => void;
-
-    /**
-     * Function to be called on key pressed.
-     */
-    onKeyPressed: (e?: React.KeyboardEvent) => void;
-}
-
-
-const useStyles = makeStyles()(theme => {
-    return {
-        prejoinPreviewDropdownBtn: {
-            alignItems: 'center',
-            color: '#1C2025',
-            cursor: 'pointer',
-            display: 'flex',
-            height: 40,
-            fontSize: 15,
-            lineHeight: '24px',
-            padding: '0 16px', // @ts-ignore
-            backgroundColor: theme.palette.field02,
-
-            '&:hover': { // @ts-ignore
-                backgroundColor: theme.palette.field02Hover
-            },
-
-            '&.disabled': {
-                background: theme.palette.disabled01,
-                border: '1px solid #5E6D7A',
-                color: '#AFB6BC',
-                cursor: 'initial',
-
-                '.icon': {
-                    '& > svg': {
-                        fill: '#AFB6BC'
-                    }
-                }
-            }
-        },
-        prejoinPreviewDropdownIcon: {
-            display: 'inline-block',
-            marginRight: 16,
-
-            '& > svg': {
-                fill: '#1C2025'
-            }
-        }
-    };
-});
-
-/**
- * Buttons used for pre meeting actions.
- *
- * @returns {ReactElement}
- */
-const DropdownButton = ({
-    dataTestId,
-    disabled,
-    icon,
-    onButtonClick,
-    onKeyPressed,
-    label
-}: IProps) => {
-    const { classes, cx } = useStyles();
-    const containerClasses = cx(
-        classes.prejoinPreviewDropdownBtn,
-        disabled && 'disabled'
-    );
-
-    const onClick = useCallback(() =>
-        !disabled && onButtonClick(), [ disabled ]);
-
-    const onKeyPress = useCallback(() =>
-        !disabled && onKeyPressed(), [ disabled ]);
-
-    return (
-        <div
-            className = { containerClasses }
-            data-testid = { dataTestId }
-            onClick = { onClick }
-            onKeyPress = { onKeyPress }
-            role = 'button'
-            tabIndex = { 0 }>
-            <Icon
-                className = { classes.prejoinPreviewDropdownIcon }
-                color = '#1C2025'
-                size = { 24 }
-                src = { icon } />
-            {label}
-        </div>
-    );
-};
-
-export default DropdownButton;

react/features/prejoin/components/web/Prejoin.js

@@ -13,6 +13,8 @@ import { ActionButton, InputField, PreMeetingScreen } from '../../../base/premee
 import { connect } from '../../../base/redux';
 import { getDisplayName, updateSettings } from '../../../base/settings';
 import { getLocalJitsiVideoTrack } from '../../../base/tracks';
+import Button from '../../../base/ui/components/web/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.any';
 import {
     joinConference as joinConferenceAction,
     joinConferenceWithoutAudio as joinConferenceWithoutAudioAction,
@@ -26,7 +28,6 @@ import {
     isPrejoinDisplayNameVisible
 } from '../../functions';
 
-import DropdownButton from './DropdownButton';
 import JoinByPhoneDialog from './dialogs/JoinByPhoneDialog';
 
 type Props = {
@@ -297,20 +298,20 @@ class Prejoin extends Component<Props, State> {
 
         const noAudio = {
             key: 'no-audio',
-            dataTestId: 'prejoin.joinWithoutAudio',
+            testId: 'prejoin.joinWithoutAudio',
             icon: IconVolumeOff,
             label: t('prejoin.joinWithoutAudio'),
-            onButtonClick: joinConferenceWithoutAudio,
-            onKeyPressed: this._onJoinConferenceWithoutAudioKeyPress
+            onClick: joinConferenceWithoutAudio,
+            onKeyPress: this._onJoinConferenceWithoutAudioKeyPress
         };
 
         const byPhone = {
             key: 'by-phone',
-            dataTestId: 'prejoin.joinByPhone',
+            testId: 'prejoin.joinByPhone',
             icon: IconPhoneRinging,
             label: t('prejoin.joinAudioByPhone'),
-            onButtonClick: this._showDialog,
-            onKeyPressed: this._showDialogKeyPress
+            onClick: this._showDialog,
+            onKeyPress: this._showDialogKeyPress
         };
 
         return {
@@ -394,9 +395,11 @@ class Prejoin extends Component<Props, State> {
                         <InlineDialog
                             content = { hasExtraJoinButtons && <div className = 'prejoin-preview-dropdown-btns'>
                                 {extraButtonsToRender.map(({ key, ...rest }: Object) => (
-                                    <DropdownButton
+                                    <Button
                                         disabled = { joiningInProgress }
+                                        fullWidth = { true }
                                         key = { key }
+                                        type = { BUTTON_TYPES.SECONDARY }
                                         { ...rest } />
                                 ))}
                             </div> }