feat(dialog) refinaments

react/features/authentication/components/native/LoginDialog.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React, { Component } from 'react';
-import { Platform, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import Dialog from 'react-native-dialog';
 import { connect as reduxConnect } from 'react-redux';
 import type { Dispatch } from 'redux';
@@ -142,26 +142,6 @@ class LoginDialog extends Component<Props, State> {
             _connecting: connecting,
             t
         } = this.props;
-        let rightKey;
-        let leftKey;
-        let rightOnPress;
-        let leftOnPress;
-        let rightDisabled;
-        let leftDisabled;
-
-        if (Platform.OS === 'android') {
-            rightKey = 'dialog.Ok';
-            rightOnPress = () => this._onLogin();
-            rightDisabled = connecting;
-            leftKey = 'dialog.Cancel';
-            leftOnPress = () => this._onCancel();
-        } else {
-            rightKey = 'dialog.Cancel';
-            rightOnPress = () => this._onCancel();
-            leftKey = 'dialog.Ok';
-            leftOnPress = () => this._onLogin();
-            leftDisabled = connecting;
-        }
 
         return (
             <View>
@@ -187,13 +167,12 @@ class LoginDialog extends Component<Props, State> {
                         { this._renderMessage() }
                     </Dialog.Description>
                     <Dialog.Button
-                        disabled = { rightDisabled }
-                        label = { t(rightKey) }
-                        onPress = { rightOnPress } />
+                        label = { t('dialog.Cancel') }
+                        onPress = { this._onCancel } />
                     <Dialog.Button
-                        disabled = { leftDisabled }
-                        label = { t(leftKey) }
-                        onPress = { leftOnPress } />
+                        disabled = { connecting }
+                        label = { t('dialog.Ok') }
+                        onPress = { this._onLogin } />
                 </Dialog.Container>
             </View>
         );

react/features/base/dialog/components/native/ConfirmDialog.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import Dialog from 'react-native-dialog';
 
 import { translate } from '../../../i18n';
@@ -110,29 +110,6 @@ class ConfirmDialog extends AbstractDialog<Props> {
             = isConfirmDestructive
                 ? styles.destructiveDialogButton : styles.dialogButton;
 
-        let rightLabel;
-        let leftLabel;
-        let rightOnPress;
-        let leftOnPress;
-        let rightStyle;
-        let leftStyle;
-
-        if (Platform.OS === 'android') {
-            rightLabel = confirmLabel || 'dialog.confirmYes';
-            rightOnPress = () => this._onSubmit();
-            rightStyle = dialogButtonStyle;
-            leftLabel = cancelLabel || 'dialog.confirmNo';
-            leftOnPress = () => this._onCancel();
-            leftStyle = styles.dialogButton;
-        } else {
-            rightLabel = cancelLabel || 'dialog.confirmNo';
-            rightOnPress = () => this._onCancel();
-            rightStyle = styles.dialogButton;
-            leftLabel = confirmLabel || 'dialog.confirmYes';
-            leftOnPress = () => this._onSubmit();
-            leftStyle = dialogButtonStyle;
-        }
-
         return (
             <View>
                 <Dialog.Container visible = { true }>
@@ -144,13 +121,13 @@ class ConfirmDialog extends AbstractDialog<Props> {
                     { this._renderDescription() }
                     { children }
                     <Dialog.Button
-                        label = { t(rightLabel) }
-                        onPress = { rightOnPress }
-                        style = { rightStyle } />
+                        label = { cancelLabel || t('dialog.confirmNo') }
+                        onPress = { this._onCancel }
+                        style = { styles.dialogButton } />
                     <Dialog.Button
-                        label = { t(leftLabel) }
-                        onPress = { leftOnPress }
-                        style = { leftStyle } />
+                        label = { confirmLabel || t('dialog.confirmYes') }
+                        onPress = { this._onSubmit }
+                        style = { dialogButtonStyle } />
                 </Dialog.Container>
             </View>
         );

react/features/base/dialog/components/native/InputDialog.js

@@ -97,7 +97,6 @@ class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
         return (
             <View>
                 <Dialog.Container
-                    onBackdropPress = { this._onCancel }
                     visible = { true }>
                     <Dialog.Title>
                         { t(titleKey) }
@@ -122,6 +121,9 @@ class InputDialog<P: Props, S: State> extends AbstractDialog<P, S> {
                             </Dialog.Description>
                         )
                     }
+                    <Dialog.Button
+                        label = { t('dialog.Cancel') }
+                        onPress = { this._onCancel } />
                     <Dialog.Button
                         label = { t('dialog.Ok') }
                         onPress = { this._onSubmitValue } />

react/features/base/react/components/native/styles.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { BoxModel, ColorPalette } from '../../../styles';
+import BaseTheme from '../../../ui/components/BaseTheme.native';
 
 const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)';
 const SECONDARY_ACTION_BUTTON_SIZE = 30;
@@ -130,7 +131,8 @@ const SECTION_LIST_STYLES = {
         alignItems: 'center',
         flex: 1,
         flexDirection: 'row',
-        padding: 5
+        marginHorizontal: BaseTheme.spacing[3],
+        marginVertical: BaseTheme.spacing[2]
     },
 
     listItemDetails: {
@@ -162,7 +164,8 @@ const SECTION_LIST_STYLES = {
     listSectionText: {
         color: OVERLAY_FONT_COLOR,
         fontSize: 14,
-        fontWeight: 'normal'
+        fontWeight: 'normal',
+        marginLeft: BaseTheme.spacing[2]
     },
 
     pullToRefresh: {

react/features/mobile/navigation/screenOptions.js

@@ -1,9 +1,10 @@
 // @flow
-/* eslint-disable react/no-multi-comp */
 
 import { TransitionPresets } from '@react-navigation/stack';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Platform } from 'react-native';
+import { Text, TouchableRipple } from 'react-native-paper';
 
 import {
     Icon,
@@ -13,11 +14,20 @@ import {
     IconInfo,
     IconSettings
 } from '../../base/icons';
-import BaseTheme from '../../base/ui/components/BaseTheme';
+import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 import HeaderNavigationButton from './components/HeaderNavigationButton';
 import { goBack } from './components/conference/ConferenceNavigationContainerRef';
 
+
+/**
+ * Close button text color.
+ */
+export const closeTextColor = {
+    color: BaseTheme.palette.text01,
+    marginLeft: BaseTheme.spacing[3]
+};
+
 /**
  * Navigation container theme.
  */
@@ -196,11 +206,28 @@ export const chatTabBarOptions = {
 export const presentationScreenOptions = {
     ...conferenceModalPresentation,
     headerBackTitleVisible: false,
-    headerLeft: () => (
-        <HeaderNavigationButton
-            onPress = { goBack }
-            src = { IconClose } />
-    ),
+    headerLeft: () => {
+        const { t } = useTranslation();
+
+        if (Platform.OS === 'ios') {
+            return (
+                <TouchableRipple
+                    onPress = { goBack }
+                    rippleColor = { BaseTheme.palette.screen01Header }>
+                    <Text style = { closeTextColor }>
+                        { t('dialog.close') }
+                    </Text>
+                </TouchableRipple>
+            );
+        }
+
+        return (
+            <HeaderNavigationButton
+                onPress = { goBack }
+                src = { IconClose } />
+        );
+
+    },
     headerStatusBarHeight: 0,
     headerStyle: {
         backgroundColor: BaseTheme.palette.screen01Header

react/features/security/components/security-dialog/native/SecurityDialog.js

@@ -14,7 +14,6 @@ import { ColorSchemeRegistry } from '../../../../base/color-scheme';
 import { FIELD_UNDERLINE } from '../../../../base/dialog';
 import { getFeatureFlag, MEETING_PASSWORD_ENABLED } from '../../../../base/flags';
 import { translate } from '../../../../base/i18n';
-import { IconClose } from '../../../../base/icons';
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 import { isLocalParticipantModerator } from '../../../../base/participants';
 import { connect } from '../../../../base/redux';
@@ -24,10 +23,6 @@ import { isInBreakoutRoom } from '../../../../breakout-rooms/functions';
 import { toggleLobbyMode } from '../../../../lobby/actions.any';
 import LobbyModeSwitch
     from '../../../../lobby/components/native/LobbyModeSwitch';
-import HeaderNavigationButton
-    from '../../../../mobile/navigation/components/HeaderNavigationButton';
-import { goBack }
-    from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { LOCKED_LOCALLY, LOCKED_REMOTELY } from '../../../../room-lock';
 import {
     endRoomLockRequest,
@@ -107,11 +102,6 @@ type Props = {
      */
     dispatch: Dispatch<any>,
 
-    /**
-     * Default prop for navigation between screen components(React Navigation).
-     */
-    navigation: Object,
-
     /**
      * Invoked to obtain translated strings.
      */
@@ -162,26 +152,6 @@ class SecurityDialog extends PureComponent<Props, State> {
         this._onAddPassword = this._onAddPassword.bind(this);
     }
 
-    /**
-     * Implements React's {@link Component#componentDidMount()}. Invoked
-     * immediately after this component is mounted.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount() {
-        const { navigation } = this.props;
-
-        navigation.setOptions({
-            headerLeft: () => (
-                <HeaderNavigationButton
-                    onPress = { goBack }
-                    src = { IconClose }
-                    style = { styles.headerCloseButton } />
-            )
-        });
-    }
-
     /**
      * Implements {@code SecurityDialog.render}.
      *

react/features/welcome/components/WelcomePage.native.js

@@ -113,7 +113,7 @@ class WelcomePage extends AbstractWelcomePage<*> {
                     }
                     style = { styles.drawerNavigationIcon }>
                     <Icon
-                        size = { 20 }
+                        size = { 24 }
                         src = { IconMenu }
                         style = { _headerStyles.headerButtonIcon } />
                 </TouchableOpacity>

react/features/welcome/components/styles.js

@@ -39,7 +39,7 @@ export default {
     audioVideoSwitchContainer: {
         alignItems: 'center',
         flexDirection: 'row',
-        marginRight: BaseTheme.spacing[2]
+        marginRight: BaseTheme.spacing[3]
     },
 
     blankPageText: {
@@ -180,7 +180,8 @@ export default {
      */
     roomContainer: {
         alignSelf: 'stretch',
-        flexDirection: 'column'
+        flexDirection: 'column',
+        marginHorizontal: BaseTheme.spacing[2]
     },
 
     /**
@@ -196,8 +197,7 @@ export default {
 
     drawerNavigationIcon: {
         height: BaseTheme.spacing[6],
-        marginLeft: BaseTheme.spacing[1],
-        marginTop: BaseTheme.spacing[1],
+        marginLeft: BaseTheme.spacing[3],
         width: BaseTheme.spacing[6]
     },