Translations with update script (#2156)

* translations and update script

* Using new translation for es

* Update gitignore

* save old

* Remove RTL

* Fix qa issues

* Update es.json

* Update tests

* Update vi-vn.json

.gitignore

@@ -78,3 +78,6 @@ coverage
 
 # CocoaPods
 /ios/Pods/
+
+# Language files to add
+/locales/languagesToUpdate/*.json

app/components/UI/ApproveTransactionReview/index.js

@@ -36,6 +36,7 @@ import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect';
 import { withNavigation } from 'react-navigation';
 import { getNetworkName, isMainNet } from '../../../util/networks';
 import { capitalize } from '../../../util/format';
+import scaling from '../../../util/scaling';
 import EditPermission from './EditPermission';
 
 const { hexToBN } = util;
@@ -59,7 +60,7 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		...fontStyles.bold,
-		fontSize: 24,
+		fontSize: scaling.scale(24),
 		textAlign: 'center',
 		color: colors.black,
 		lineHeight: 34,

app/components/UI/BackupAlert/index.js

@@ -41,6 +41,8 @@ const styles = StyleSheet.create({
 		fontSize: 12,
 		color: colors.blue,
 		marginLeft: 14,
+		flex: 1,
+		textAlign: 'right',
 		...fontStyles.normal
 	},
 	touchableView: {
@@ -52,7 +54,14 @@ const styles = StyleSheet.create({
 	modalViewNotInBrowserView: {
 		bottom: Device.isIphoneX() ? 20 : 10
 	},
-	buttonsWrapper: { flexDirection: 'row-reverse', alignContent: 'flex-end' }
+	buttonsWrapper: {
+		flexDirection: 'row-reverse',
+		alignContent: 'flex-end',
+		flex: 1
+	},
+	dismissButton: {
+		flex: 1
+	}
 });
 
 const BLOCKED_LIST = [
@@ -166,7 +175,7 @@ class BackupAlert extends PureComponent {
 									{strings('backup_alert.right_button')}
 								</Text>
 							</TouchableOpacity>
-							<TouchableOpacity onPress={this.onDismiss}>
+							<TouchableOpacity onPress={this.onDismiss} style={styles.dismissButton}>
 								<Text style={styles.backupAlertMessage} testID={'notification-remind-later-button'}>
 									{strings('backup_alert.left_button')}
 								</Text>

app/components/UI/ProtectYourWalletModal/index.js

@@ -5,24 +5,30 @@ import ActionModal from '../ActionModal';
 import { fontStyles, colors } from '../../../styles/common';
 import { connect } from 'react-redux';
 import { protectWalletModalNotVisible } from '../../../actions/user';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import { strings } from '../../../../locales/i18n';
+import scaling from '../../../util/scaling';
 
 const protectWalletImage = require('../../../images/protect-wallet.jpg'); // eslint-disable-line
 
 const styles = StyleSheet.create({
 	wrapper: {
 		marginTop: 24,
-		marginHorizontal: 24
+		marginHorizontal: 24,
+		flex: 1
 	},
 	title: {
 		...fontStyles.bold,
 		color: colors.black,
 		textAlign: 'center',
-		fontSize: 20
+		fontSize: 20,
+		flex: 1
 	},
 	imageWrapper: { flexDirection: 'column', alignItems: 'center', marginBottom: 12, marginTop: 30 },
-	image: { width: 135, height: 160 },
+	image: {
+		width: scaling.scale(135, { baseModel: 1 }),
+		height: scaling.scale(160, { baseModel: 1 })
+	},
 	text: {
 		...fontStyles.normal,
 		color: colors.black,
@@ -31,16 +37,25 @@ const styles = StyleSheet.create({
 		marginBottom: 24
 	},
 	closeIcon: {
-		position: 'absolute',
-		right: 0,
-		top: -2
+		padding: 5
 	},
 	learnMoreText: {
 		textAlign: 'center',
 		...fontStyles.normal,
 		color: colors.blue,
 		marginBottom: 14,
 		fontSize: 14
+	},
+	modalXIcon: {
+		fontSize: 16
+	},
+	titleWrapper: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	auxCenter: {
+		width: 26
 	}
 });
 
@@ -92,14 +107,15 @@ class ProtectYourWalletModal extends PureComponent {
 			>
 				<View style={styles.wrapper} testID={'protect-wallet-modal'}>
 					<View style={styles.titleWrapper}>
+						<View style={styles.auxCenter} />
 						<Text style={styles.title}>{strings('protect_wallet_modal.title')}</Text>
-
-						<Ionicons
+						<TouchableOpacity
 							onPress={this.props.protectWalletModalNotVisible}
-							name={'ios-close'}
-							size={32}
 							style={styles.closeIcon}
-						/>
+							hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }}
+						>
+							<Icon name="times" style={styles.modalXIcon} />
+						</TouchableOpacity>
 					</View>
 					<View style={styles.imageWrapper}>
 						<Image source={protectWalletImage} style={styles.image} />

app/components/UI/SeedphraseModal/__snapshots__/index.test.js.snap

@@ -41,14 +41,15 @@ exports[`SeedphraseModal should render correctly 1`] = `
       <View
         style={
           Object {
-            "flex": 1,
+            "width": 26,
           }
         }
       />
       <Text
         style={
           Object {
             "color": "#000000",
+            "flex": 1,
             "fontFamily": "EuclidCircularB-Bold",
             "fontSize": 18,
             "fontWeight": "600",
@@ -70,7 +71,7 @@ exports[`SeedphraseModal should render correctly 1`] = `
         style={
           Object {
             "alignItems": "flex-end",
-            "flex": 1,
+            "padding": 5,
           }
         }
       >

app/components/UI/SeedphraseModal/index.js

@@ -8,6 +8,7 @@ import ActionModal from '../../UI/ActionModal';
 
 const styles = {
 	whatIsSeedphraseTitle: {
+		flex: 1,
 		fontSize: 18,
 		color: colors.fontPrimary,
 		textAlign: 'center',
@@ -22,7 +23,7 @@ const styles = {
 		flexDirection: 'column'
 	},
 	modalXButton: {
-		flex: 1,
+		padding: 5,
 		alignItems: 'flex-end'
 	},
 	titleContainer: {
@@ -32,7 +33,7 @@ const styles = {
 		marginBottom: 16
 	},
 	auxCenterView: {
-		flex: 1
+		width: 26
 	},
 	explanationText: {
 		fontSize: 14,