diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js index dcaff84c..c2658001 100644 --- a/src/components/Onboarding/OnboardingFooter.js +++ b/src/components/Onboarding/OnboardingFooter.js @@ -13,7 +13,7 @@ const Wrapper = styled(Box).attrs({ px: 5, py: 3, })` - border-top: 2px solid ${p => p.theme.colors.lightGrey}; + border-top: 1px solid ${p => p.theme.colors.lightFog}; border-bottom-left-radius: ${radii[1]}px; border-bottom-right-radius: ${radii[1]}px; ` @@ -22,15 +22,31 @@ type Props = { t: T, nextStep: () => void, prevStep: () => void, + jumpStep?: string => void, + jumpTo?: string, isContinueDisabled?: boolean, } -const OnboardingFooter = ({ t, nextStep, prevStep, isContinueDisabled, ...props }: Props) => ( +const OnboardingFooter = ({ + t, + nextStep, + prevStep, + isContinueDisabled, + jumpStep, + jumpTo, + ...props +}: Props) => ( - - diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index aa6cf988..49359da5 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -4,7 +4,7 @@ import styled from 'styled-components' import { radii } from 'styles/theme' import Box from 'components/base/Box' -import IconWarning from 'icons/Shield' +import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield' // GENERAL export const Title = styled(Box).attrs({ @@ -64,7 +64,7 @@ export const OptionRowDesc = styled(Box).attrs({ textAlign: 'left', color: 'smoke', grow: true, - pl: 3, + pl: 2, })`` export const IconOptionRow = styled(Box).attrs({ @@ -78,7 +78,7 @@ export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any - + {disclaimerNotes.map(note => )} @@ -92,7 +92,7 @@ const DisclaimerBoxContainer = styled(Box).attrs({ borderRadius: '4px', bg: '#f9f9f980', })` - min-width: 680px; + min-width: 620px; border: 1px dashed ${p => p.theme.colors.fog}; ` const DisclaimerBoxIconContainer = styled(Box).attrs({ diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index f0537441..34584285 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -45,41 +45,35 @@ class Analytics extends PureComponent { const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state return ( - - + + {t('onboarding:analytics.title')} {t('onboarding:analytics.desc')} - - - {t('onboarding:analytics.sentryLogs.title')} - + + {t('onboarding:analytics.sentryLogs.title')} {t('onboarding:analytics.sentryLogs.desc')} - + - - - {t('onboarding:analytics.shareAnalytics.title')} - + + {t('onboarding:analytics.shareAnalytics.title')} {t('onboarding:analytics.shareAnalytics.desc')} - + - - - {t('onboarding:analytics.termsConditions.title')} - + + {t('onboarding:analytics.termsConditions.title')} {t('onboarding:analytics.termsConditions.desc')} - + @@ -110,7 +104,7 @@ export const AnalyticsText = styled(Box).attrs({ textAlign: 'left', color: 'smoke', })` - max-width: 450px; + max-width: 400px; ` export const AnalyticsTitle = styled(Box).attrs({ ff: 'Open Sans|SemiBold', @@ -122,4 +116,7 @@ export const AnalyticsTitle = styled(Box).attrs({ const Container = styled(Box).attrs({ horizontal: true, p: 3, -})`` +})` + width: 550px; + justify-content: space-between; +` diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index 337b30bc..0cfe4dec 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -120,8 +120,8 @@ class GenuineCheck extends PureComponent { } return ( - - + + {t('onboarding:genuineCheck.title')} {t('onboarding:genuineCheck.desc')} @@ -132,15 +132,16 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.steps.step1.title')} - this.handleButtonPass(item, 'pinStepPass')} - /> + + this.handleButtonPass(item, 'pinStepPass')} + /> + - + @@ -148,15 +149,16 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.steps.step2.title')} - this.handleButtonPass(item, 'recoveryStepPass')} - /> + + this.handleButtonPass(item, 'recoveryStepPass')} + /> + - + @@ -164,7 +166,7 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.steps.step3.title')} - + {genuine.isDeviceGenuine ? ( @@ -218,29 +220,27 @@ export function GenuineCheckFail({ }: { redoGenuineCheck: () => void, contactSupport: () => void, - isLedgerNano: boolean, + isLedgerNano: boolean | null, t: T, }) { return ( - - + + {isLedgerNano ? ( {t('onboarding:genuineCheck.errorPage.ledgerNano.title')} - - {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')} - - + {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')} + ) : ( {t('onboarding:genuineCheck.errorPage.ledgerBlue.title')} - + {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')} - + @@ -248,7 +248,7 @@ export function GenuineCheckFail({