Bugfix: wizard design qa (#1131)

* fix iphone 11 issue * step 4 * step 4 for real * fix step6 back
MetaMask · Oct 4, 2019 · cf22b4d · cf22b4d
1 parent 28a3358
commit cf22b4d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/app/components/UI/OnboardingWizard/Step3/index.js b/app/components/UI/OnboardingWizard/Step3/index.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Platform, Text, View, StyleSheet } from 'react-native';
+import { Platform, Text, View, StyleSheet, Dimensions } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { colors, fontStyles } from '../../../../styles/common';
@@ -21,6 +21,7 @@ const styles = StyleSheet.create({
 	},
 	accountLabelContainer: {
 		flex: 1,
+		width: Dimensions.get('window').width,
 		alignItems: 'center',
 		backgroundColor: colors.transparent
 	}

diff --git a/app/components/UI/OnboardingWizard/Step4/index.js b/app/components/UI/OnboardingWizard/Step4/index.js
@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import Coachmark from '../Coachmark';
 import setOnboardingWizardStep from '../../../../actions/wizard';
 import { strings } from '../../../../../locales/i18n';
 import onboardingStyles from './../styles';
-import { fontStyles } from '../../../../styles/common';
+import { fontStyles, colors } from '../../../../styles/common';
 
 const styles = StyleSheet.create({
 	main: {
@@ -17,6 +17,14 @@ const styles = StyleSheet.create({
 		position: 'absolute',
 		left: 0,
 		right: 0
+	},
+	hamburger: {
+		backgroundColor: colors.transparent,
+		height: 50,
+		width: 50
+	},
+	hamburgerContainer: {
+		maxWidth: 50
 	}
 });
 
@@ -52,7 +60,7 @@ class Step4 extends PureComponent {
 			ref.current &&
 			ref.current.measure((fx, fy, width, height, px, py) => {
 				this.setState({
-					viewTop: py
+					viewTop: py - 50
 				});
 			});
 	};
@@ -91,6 +99,11 @@ class Step4 extends PureComponent {
 		return (
 			<View style={[styles.main, { top: this.state.viewTop }]}>
 				<View style={styles.coachmarkContainer}>
+					<View style={styles.hamburgerContainer}>
+						<TouchableWithoutFeedback style={styles.hamburger} onPress={this.onNext}>
+							<View style={styles.hamburger} />
+						</TouchableWithoutFeedback>
+					</View>
 					<Coachmark
 						title={strings('onboarding_wizard.step4.title')}
 						content={this.content()}

diff --git a/app/components/UI/OnboardingWizard/Step6/index.js b/app/components/UI/OnboardingWizard/Step6/index.js
@@ -22,6 +22,10 @@ const styles = StyleSheet.create({
 
 class Step6 extends PureComponent {
 	static propTypes = {
+		/**
+		 * Object that represents the navigator
+		 */
+		navigation: PropTypes.object,
 		/**
 		 * Dispatch set onboarding wizard step
 		 */
@@ -56,7 +60,8 @@ class Step6 extends PureComponent {
 	 * Dispatches 'setOnboardingWizardStep' with back step, opening drawer
 	 */
 	onBack = () => {
-		const { setOnboardingWizardStep } = this.props;
+		const { setOnboardingWizardStep, navigation } = this.props;
+		navigation && navigation.openDrawer();
 		setOnboardingWizardStep && setOnboardingWizardStep(5);
 	};
 

diff --git a/app/components/UI/OnboardingWizard/index.js b/app/components/UI/OnboardingWizard/index.js
@@ -106,7 +106,13 @@ class OnboardingWizard extends PureComponent {
 			3: <Step3 coachmarkRef={this.props.coachmarkRef} />,
 			4: <Step4 coachmarkRef={this.props.coachmarkRef} navigation={this.props.navigation} />,
 			5: <Step5 coachmarkRef={this.props.coachmarkRef} navigation={this.props.navigation} />,
-			6: <Step6 coachmarkRef={this.props.coachmarkRef} onClose={this.closeOnboardingWizard} />
+			6: (
+				<Step6
+					coachmarkRef={this.props.coachmarkRef}
+					navigation={this.props.navigation}
+					onClose={this.closeOnboardingWizard}
+				/>
+			)
 		};
 		return steps[step];
 	};