native ui fixes

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

@@ -1,15 +1,11 @@
-// @flow
-
 import Clipboard from '@react-native-community/clipboard';
 import React, { PureComponent } from 'react';
 import {
     Text,
-    TextInput,
     View
 } from 'react-native';
 import type { Dispatch } from 'redux';
 
-import { FIELD_UNDERLINE } from '../../../../base/dialog';
 import { getFeatureFlag, MEETING_PASSWORD_ENABLED } from '../../../../base/flags';
 import { translate } from '../../../../base/i18n';
 import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
@@ -17,6 +13,7 @@ import { isLocalParticipantModerator } from '../../../../base/participants';
 import { connect } from '../../../../base/redux';
 import BaseTheme from '../../../../base/ui/components/BaseTheme';
 import Button from '../../../../base/ui/components/native/Button';
+import Input from '../../../../base/ui/components/native/Input';
 import { BUTTON_TYPES } from '../../../../base/ui/constants';
 import { isInBreakoutRoom } from '../../../../breakout-rooms/functions';
 import { toggleLobbyMode } from '../../../../lobby/actions.any';
@@ -353,14 +350,14 @@ class SecurityDialog extends PureComponent<Props, State> {
         if (showElement) {
             if (typeof _locked === 'undefined') {
                 return (
-                    <TextInput
+                    <Input
+                        accessibilityLabel = { t('info.addPassword') }
                         autoFocus = { true }
-                        onChangeText = { this._onChangeText }
-                        placeholder = { t('lobby.passwordField') }
+                        clearable = { true }
+                        customStyles = {{ container: styles.passwordInput }}
+                        onChange = { this._onChangeText }
+                        placeholder = { t('dialog.password') }
                         placeholderTextColor = { BaseTheme.palette.text03 }
-                        selectionColor = { BaseTheme.palette.action01 }
-                        style = { styles.passwordInput }
-                        underlineColorAndroid = { FIELD_UNDERLINE }
                         value = { passwordInputValue }
                         { ...textInputProps } />
                 );

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

@@ -61,7 +61,7 @@ export default {
 
     savedPasswordContainer: {
         flexDirection: 'row',
-        marginTop: 30,
+        marginTop: 14,
         width: 208
     },
 
@@ -75,19 +75,13 @@ export default {
     },
 
     passwordInput: {
-        borderColor: BaseTheme.palette.action03Active,
-        borderRadius: BaseTheme.spacing[1],
-        borderWidth: 2,
         color: BaseTheme.palette.text01,
-        height: BaseTheme.spacing[6],
-        marginTop: BaseTheme.spacing[2],
-        paddingLeft: BaseTheme.spacing[1],
         width: 208
     },
 
     passwordSetupButtonLabel: {
         color: BaseTheme.palette.link01,
-        marginTop: BaseTheme.spacing[4]
+        marginTop: BaseTheme.spacing[3]
     },
 
     passwordSetRemotelyContainer: {
@@ -98,11 +92,11 @@ export default {
 
     passwordSetRemotelyText: {
         color: BaseTheme.palette.text01,
-        marginTop: 22
+        marginTop: BaseTheme.spacing[3]
     },
 
     passwordSetRemotelyTextDisabled: {
         color: BaseTheme.palette.text02,
-        marginTop: 22
+        marginTop: BaseTheme.spacing[3]
     }
 };