diff --git a/react/features/prejoin/components/native/Prejoin.tsx b/react/features/prejoin/components/native/Prejoin.tsx index eb38cec13..eedca4d38 100644 --- a/react/features/prejoin/components/native/Prejoin.tsx +++ b/react/features/prejoin/components/native/Prejoin.tsx @@ -89,7 +89,7 @@ const Prejoin: React.FC = ({ navigation }: IPrejoinProps) => { return true; }, [ dispatch ]); - const headerLeft = useCallback(() => { + const headerLeft = () => { if (Platform.OS === 'ios') { return ( = ({ navigation }: IPrejoinProps) => { onPress = { goBack } src = { IconCloseLarge } /> ); - }, []); + }; - const { PRIMARY, SECONDARY } = BUTTON_TYPES; + const { PRIMARY, TERTIARY } = BUTTON_TYPES; const joinButtonDisabled = isJoining || (!displayName && isDisplayNameMandatory); useEffect(() => { @@ -148,21 +148,26 @@ const Prejoin: React.FC = ({ navigation }: IPrejoinProps) => { { isFocused && - - + }> }> { roomName } + } + + + + }> = ({ navigation }: IPrejoinProps) => { accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode' disabled = { joinButtonDisabled } labelKey = 'prejoin.joinMeetingInLowBandwidthMode' + labelStyle = { styles.joinLowBandwidthLabel } onClick = { onJoinLowBandwidth } - type = { SECONDARY } /> - - - - + type = { TERTIARY } /> diff --git a/react/features/prejoin/components/styles.js b/react/features/prejoin/components/styles.js index 4ca2095ed..fe265f6ad 100644 --- a/react/features/prejoin/components/styles.js +++ b/react/features/prejoin/components/styles.js @@ -1,12 +1,16 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native'; -const SECONDARY_COLOR = BaseTheme.palette.border04; export default { joinButton: { marginVertical: BaseTheme.spacing[3] }, + joinLowBandwidthLabel: { + color: BaseTheme.palette.text01, + textAlign: 'center' + }, + buttonStylesBorderless: { iconStyle: { color: BaseTheme.palette.icon01, @@ -32,7 +36,7 @@ export default { }, largeVideoContainer: { - minHeight: '60%' + height: '60%' }, largeVideoContainerWide: { @@ -44,11 +48,14 @@ export default { contentContainer: { alignSelf: 'center', + backgroundColor: BaseTheme.palette.uiBackground, + bottom: 0, display: 'flex', + height: 284, justifyContent: 'center', - minHeight: '40%', - padding: BaseTheme.spacing[3], - width: 400 + position: 'absolute', + width: 390, + zIndex: 1 }, contentContainerWide: { @@ -63,9 +70,15 @@ export default { toolboxContainer: { alignSelf: 'center', + backgroundColor: BaseTheme.palette.ui01, + borderRadius: BaseTheme.shape.borderRadius, display: 'flex', flexDirection: 'row', - justifyContent: 'center' + height: 60, + justifyContent: 'space-between', + marginVertical: BaseTheme.spacing[3], + paddingHorizontal: BaseTheme.spacing[2], + width: 148 }, toolboxContainerWide: { @@ -83,16 +96,6 @@ export default { textAlign: 'center' }, - field: { - backgroundColor: BaseTheme.palette.field02, - borderColor: SECONDARY_COLOR, - borderRadius: BaseTheme.shape.borderRadius, - borderWidth: 2, - color: BaseTheme.palette.text06, - height: BaseTheme.spacing[7], - textAlign: 'center' - }, - preJoinRoomName: { ...BaseTheme.typography.heading5, color: BaseTheme.palette.text01, @@ -101,12 +104,14 @@ export default { displayRoomNameBackdrop: { alignSelf: 'center', - backgroundColor: BaseTheme.palette.ui16, - bottom: BaseTheme.spacing[3], - borderRadius: 4, - margin: BaseTheme.spacing[3], + backgroundColor: BaseTheme.palette.uiBackground, + borderRadius: BaseTheme.shape.borderRadius, + marginTop: BaseTheme.spacing[3], + opacity: 0.7, paddingHorizontal: BaseTheme.spacing[3], paddingVertical: BaseTheme.spacing[1], - position: 'absolute' + position: 'absolute', + width: 243, + zIndex: 1 } };