native ui fixes

react/features/base/ui/components/native/buttonStyles.ts

@@ -40,7 +40,7 @@ export default {
 
     buttonLabelSecondary: {
         ...buttonLabel,
-        color: BaseTheme.palette.text0
+        color: BaseTheme.palette.text04
     },
 
     buttonLabelDestructive: {

react/features/base/ui/components/native/inputStyles.ts

@@ -26,16 +26,14 @@ export default {
     },
 
     input: {
+        ...BaseTheme.typography.bodyShortRegularLarge,
         backgroundColor: BaseTheme.palette.ui03,
-        color: BaseTheme.palette.text01,
-        paddingVertical: 13,
-        paddingHorizontal: BaseTheme.spacing[3],
+        borderColor: BaseTheme.palette.ui03,
         borderRadius: BaseTheme.shape.borderRadius,
-        ...BaseTheme.typography.bodyShortRegularLarge,
-        lineHeight: 0,
-        height: 48,
         borderWidth: 2,
-        borderColor: BaseTheme.palette.ui03
+        color: BaseTheme.palette.text01,
+        paddingHorizontal: BaseTheme.spacing[3],
+        height: 48
     },
 
     inputDisabled: {

react/features/participants-pane/components/native/MeetingParticipantList.js

@@ -236,7 +236,8 @@ class MeetingParticipantList extends PureComponent<Props> {
                 }
                 <Input
                     clearable = { true }
-                    customStyles = {{ container: styles.inputContainer,
+                    customStyles = {{
+                        container: styles.inputContainer,
                         input: styles.centerInput }}
                     onChange = { this._onSearchStringChange }
                     placeholder = { t('participantsPane.search') }

react/features/recording/components/Recording/styles.native.js

@@ -131,7 +131,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
     },
 
     loggedIn: {
-        paddingBottom: _PADDING
+        paddingHorizontal: _PADDING
     },
 
     recordingIcon: {

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]
     }
 };