Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix: onboarding design qa #1130

Merged
merged 7 commits into from
Oct 4, 2019
+125 −82
Merged

Bugfix: onboarding design qa #1130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
913a8ae
test
estebanmino Oct 3, 2019
74c2e4b
test
estebanmino Oct 3, 2019
e002a55
stack and buttons
estebanmino Oct 3, 2019
0d321f8
image 3
estebanmino Oct 3, 2019
46b19f4
snaps
estebanmino Oct 3, 2019
1e41189
add ratio
estebanmino Oct 3, 2019
ef0f440
snaps
estebanmino Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions app/components/Nav/App/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,12 +245,13 @@ exports[`App should render correctly 1`] = `
"OnboardingCarousel": null,
"OnboardingRootNav": Object {
"childRouters": Object {
"Onboarding": Object {
"OnboardingNav": Object {
"childRouters": Object {
"CreateWallet": null,
"ImportFromSeed": null,
"ImportWallet": null,
"Onboarding": null,
"OnboardingCarousel": null,
"OptinMetrics": null,
"SyncWithExtension": null,
},
Expand Down Expand Up @@ -399,12 +400,11 @@ exports[`App should render correctly 1`] = `
"index": 0,
"isTransitioning": false,
"key": "id-123-6",
"routeName": "Onboarding",
"routeName": "OnboardingNav",
"routes": Array [
Object {
"key": "id-123-5",
"params": undefined,
"routeName": "Onboarding",
"routeName": "OnboardingCarousel",
},
],
},
Expand Down Expand Up @@ -671,12 +671,13 @@ exports[`App should render correctly 1`] = `
"OnboardingCarousel": null,
"OnboardingRootNav": Object {
"childRouters": Object {
"Onboarding": Object {
"OnboardingNav": Object {
"childRouters": Object {
"CreateWallet": null,
"ImportFromSeed": null,
"ImportWallet": null,
"Onboarding": null,
"OnboardingCarousel": null,
"OptinMetrics": null,
"SyncWithExtension": null,
},
Expand Down Expand Up @@ -825,12 +826,11 @@ exports[`App should render correctly 1`] = `
"index": 0,
"isTransitioning": false,
"key": "id-123-6",
"routeName": "Onboarding",
"routeName": "OnboardingNav",
"routes": Array [
Object {
"key": "id-123-5",
"params": undefined,
"routeName": "Onboarding",
"routeName": "OnboardingCarousel",
},
],
},
Expand Down
7 changes: 5 additions & 2 deletions app/components/Nav/App/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ const OnboardingNav = createStackNavigator(
Onboarding: {
screen: Onboarding
},
OnboardingCarousel: {
screen: OnboardingCarousel
},
CreateWallet: {
screen: CreateWallet
},
Expand All @@ -50,7 +53,7 @@ const OnboardingNav = createStackNavigator(
}
},
{
initialRouteName: 'Onboarding'
initialRouteName: 'OnboardingCarousel'
}
);

Expand All @@ -60,7 +63,7 @@ const OnboardingNav = createStackNavigator(
*/
const OnboardingRootNav = createStackNavigator(
{
Onboarding: {
OnboardingNav: {
screen: OnboardingNav
},
SyncWithExtensionSuccess: {
Expand Down
8 changes: 7 additions & 1 deletion app/components/UI/DrawerView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ import ANALYTICS_EVENT_OPTS from '../../../util/analytics';
import URL from 'url-parse';
import { generateUniversalLinkAddress } from '../../../util/payment-link-generator';
import EthereumAddress from '../EthereumAddress';
// eslint-disable-next-line import/named
import { NavigationActions } from 'react-navigation';

const ANDROID_OFFSET = 30;
const styles = StyleSheet.create({
Expand Down Expand Up @@ -542,7 +544,11 @@ class DrawerView extends PureComponent {
onPress: async () => {
await SecureKeychain.resetGenericPassword();
if (!passwordSet) {
this.props.navigation.navigate('Onboarding');
this.props.navigation.navigate(
'OnboardingRootNav',
{},
NavigationActions.navigate({ routeName: 'Onboarding' })
);
} else {
this.props.navigation.navigate('Login');
}
Expand Down
10 changes: 8 additions & 2 deletions app/components/Views/Entry/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ class Entry extends PureComponent {
if (existingUser !== null) {
await this.unlockKeychain();
} else {
this.animateAndGoTo('OnboardingCarousel');
this.animateAndGoTo('OnboardingRootNav');
}
}, 100);
}
Expand Down Expand Up @@ -142,8 +142,14 @@ class Entry extends PureComponent {
useNativeDriver: true,
isInteraction: false
}).start(() => {
if (viewToGo !== 'WalletView') {
if (viewToGo !== 'WalletView' || viewToGo !== 'Onboarding') {
this.props.navigation.navigate(viewToGo);
} else if (viewToGo === 'Onboarding') {
this.props.navigation.navigate(
'OnboardingRootNav',
{},
NavigationActions.navigate({ routeName: 'Oboarding' })
);
} else {
this.props.navigation.navigate(
'HomeNav',
Expand Down
8 changes: 7 additions & 1 deletion app/components/Views/LockScreen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Engine from '../../../core/Engine';
import SecureKeychain from '../../../core/SecureKeychain';
import { baseStyles } from '../../../styles/common';
import Logger from '../../../util/Logger';
// eslint-disable-next-line import/named
import { NavigationActions } from 'react-navigation';

const LOGO_SIZE = 175;
const styles = StyleSheet.create({
Expand Down Expand Up @@ -138,7 +140,11 @@ class LockScreen extends PureComponent {
} else if (this.props.passwordSet) {
this.props.navigation.navigate('Login');
} else {
this.props.navigation.navigate('OnboardingRootNav');
this.props.navigation.navigate(
'OnboardingRootNav',
{},
NavigationActions.navigate({ routeName: 'Onboarding' })
);
}
} catch (error) {
if (this.unlockAttempts <= 3) {
Expand Down
6 changes: 5 additions & 1 deletion app/components/Views/Login/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,11 @@ class Login extends PureComponent {
};

onPressGoBack = () => {
this.props.navigation.navigate('OnboardingRootNav');
this.props.navigation.navigate(
'OnboardingRootNav',
{},
NavigationActions.navigate({ routeName: 'Onboarding' })
);
};

updateBiometryChoice = async biometryChoice => {
Expand Down
12 changes: 8 additions & 4 deletions app/components/Views/Onboarding/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import TermsAndConditions from '../TermsAndConditions';
import Analytics from '../../../core/Analytics';
import ANALYTICS_EVENT_OPTS from '../../../util/analytics';
import { saveOnboardingEvent } from '../../../actions/onboarding';
import { getTransparentOnboardingNavbarOptions } from '../../UI/Navbar';
import { getTransparentBackOnboardingNavbarOptions } from '../../UI/Navbar';

const styles = StyleSheet.create({
scroll: {
Expand Down Expand Up @@ -60,14 +60,18 @@ const styles = StyleSheet.create({
},
createWrapper: {
marginVertical: 24
},
buttonWrapper: {
flexGrow: 1,
marginHorizontal: 50
}
});

/**
* View that is displayed to first time (new) users
*/
class Onboarding extends PureComponent {
static navigationOptions = ({ navigation }) => getTransparentOnboardingNavbarOptions(navigation);
static navigationOptions = ({ navigation }) => getTransparentBackOnboardingNavbarOptions(navigation);

static propTypes = {
/**
Expand Down Expand Up @@ -170,7 +174,7 @@ class Onboarding extends PureComponent {
<Text style={styles.title}>{strings('onboarding.title')}</Text>
<View style={styles.importWrapper}>
<Text style={styles.buttonDescription}>{strings('onboarding.sync_desc')}</Text>
<View style={styles.flexGrow}>
<View style={styles.buttonWrapper}>
<StyledButton
type={'normal'}
onPress={this.onPressImport}
Expand All @@ -182,7 +186,7 @@ class Onboarding extends PureComponent {
</View>
<View style={styles.createWrapper}>
<Text style={styles.buttonDescription}>{strings('onboarding.create_desc')}</Text>
<View style={styles.flexGrow}>
<View style={styles.buttonWrapper}>
<StyledButton
type={'blue'}
onPress={this.onPressCreate}
Expand Down
79 changes: 45 additions & 34 deletions app/components/Views/OnboardingCarousel/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,11 @@ exports[`OnboardingCarousel should render correctly 1`] = `
>
<View
key="1"
style={
Object {
"flex": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -91,7 +96,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
style={
Object {
"alignItems": "center",
"marginTop": 25,
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
Expand All @@ -106,8 +113,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
Array [
Object {},
Object {
"height": 285,
"width": 200,
"height": 912.5615763546798,
"marginTop": 30,
"width": 650,
},
]
}
Expand All @@ -116,6 +124,11 @@ exports[`OnboardingCarousel should render correctly 1`] = `
</View>
<View
key="2"
style={
Object {
"flex": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -161,7 +174,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
style={
Object {
"alignItems": "center",
"marginTop": 25,
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
Expand All @@ -176,8 +191,8 @@ exports[`OnboardingCarousel should render correctly 1`] = `
Array [
Object {},
Object {
"height": 222,
"width": 240,
"height": 603.7656903765691,
"width": 650,
},
]
}
Expand All @@ -186,6 +201,11 @@ exports[`OnboardingCarousel should render correctly 1`] = `
</View>
<View
key="3"
style={
Object {
"flex": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -231,7 +251,9 @@ exports[`OnboardingCarousel should render correctly 1`] = `
style={
Object {
"alignItems": "center",
"marginTop": 25,
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
}
}
>
Expand All @@ -246,8 +268,8 @@ exports[`OnboardingCarousel should render correctly 1`] = `
Array [
Object {},
Object {
"height": 214,
"width": 276,
"height": 470.95238095238096,
"width": 690,
},
]
}
Expand All @@ -260,6 +282,7 @@ exports[`OnboardingCarousel should render correctly 1`] = `
Object {
"alignSelf": "center",
"flexDirection": "row",
"marginVertical": 36,
}
}
>
Expand Down Expand Up @@ -317,7 +340,6 @@ exports[`OnboardingCarousel should render correctly 1`] = `
<View
style={
Object {
"flex": 1,
"flexDirection": "column",
"paddingHorizontal": 40,
}
Expand All @@ -326,38 +348,27 @@ exports[`OnboardingCarousel should render correctly 1`] = `
<View
style={
Object {
"flex": 1,
"justifyContent": "flex-end",
}
}
>
<View
style={
<StyledButton
disabledContainerStyle={
Object {
"marginTop": 24,
"opacity": 0.6,
}
}
onPress={[Function]}
styleDisabled={
Object {
"opacity": 0.6,
}
}
testID="onboarding-get-started-button"
type="normal"
>
<View>
<StyledButton
disabledContainerStyle={
Object {
"opacity": 0.6,
}
}
onPress={[Function]}
styleDisabled={
Object {
"opacity": 0.6,
}
}
testID="onboarding-get-started-button"
type="normal"
>
Get started
</StyledButton>
</View>
</View>
Get started
</StyledButton>
</View>
</View>
</View>
Expand Down
Loading