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({
{
redoGenuineCheck()
@@ -257,7 +257,7 @@ export function GenuineCheckFail({
{t('common:back')}
{
contactSupport()
@@ -292,11 +292,10 @@ const Wrapper = styled(Box).attrs({
const CardWrapper = styled(Card).attrs({
horizontal: true,
p: 5,
- flow: 2,
justify: 'space-between',
})`
- height: 97px;
- width: 620px;
+ width: 580px;
+ height: 74px;
border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index fe2fd881..e99fd845 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -7,7 +7,7 @@ import { colors } from 'styles/theme'
import styled from 'styled-components'
import { flowType } from 'reducers/onboarding'
-import Box, { Card } from 'components/base/Box'
+import Box from 'components/base/Box'
import IconUser from 'icons/User'
import IconPlus from 'icons/Plus'
import IconRecover from 'icons/Recover'
@@ -27,7 +27,7 @@ class Init extends PureComponent {
const optionCards = [
{
key: 'newDevice',
- icon: ,
+ icon: ,
title: t('onboarding:init.newDevice.title'),
onClick: () => {
nextStep()
@@ -36,7 +36,7 @@ class Init extends PureComponent {
},
{
key: 'restoreDevice',
- icon: ,
+ icon: ,
title: t('onboarding:init.restoreDevice.title'),
onClick: () => {
nextStep()
@@ -45,7 +45,7 @@ class Init extends PureComponent {
},
{
key: 'initializedDevice',
- icon: ,
+ icon: ,
title: t('onboarding:init.initializedDevice.title'),
onClick: () => {
nextStep()
@@ -54,7 +54,7 @@ class Init extends PureComponent {
},
{
key: 'noDevice',
- icon: ,
+ icon: ,
title: t('onboarding:init.noDevice.title'),
onClick: () => {
shell.openExternal('https://www.ledger.fr/')
@@ -64,15 +64,15 @@ class Init extends PureComponent {
]
return (
-
-
+
+
-
+
{t('onboarding:init.title')}
-
+
{optionCards.map(card => )}
@@ -102,21 +102,25 @@ export function OptionFlowCard({ card }: { card: CardType }) {
{title}
-
-
+
+
)
}
-const InitCardContainer = styled(Card).attrs({
+const InitCardContainer = styled(Box).attrs({
p: 3,
horizontal: true,
borderRadius: '4px',
})`
border: 1px solid ${p => p.theme.colors.fog};
- width: 550px;
+ width: 530px;
height: 70px;
+ &:hover {
+ cursor: pointer;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+ }
`
export const CardTitle = styled(Box).attrs({
@@ -126,12 +130,8 @@ export const CardTitle = styled(Box).attrs({
})``
const InitIconContainer = styled(Box).attrs({
- mx: 4,
- my: 3,
+ ml: 3,
+ mr: 4,
})`
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background: rgba(100, 144, 241, 0.1);
text-align: -webkit-center;
`
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index 9a99480a..217fe574 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -12,6 +12,7 @@ import IconCheckCirle from 'icons/Check'
import IconLedgerNano from 'icons/illustrations/LedgerNano'
import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
import { Title, Inner } from '../helperComponents'
+import OnboardingFooter from '../OnboardingFooter'
import type { StepProps } from '..'
@@ -20,18 +21,16 @@ const mapDispatchToProps = { isLedgerNano }
class SelectDevice extends PureComponent {
handleIsLedgerNano = (isLedgerNano: boolean) => {
this.props.isLedgerNano(isLedgerNano)
- this.props.onboarding.flowType === 'initializedDevice'
- ? this.props.jumpStep('genuineCheck')
- : this.props.nextStep()
}
render() {
- const { t, onboarding } = this.props
-
+ const { t, onboarding, nextStep, prevStep, jumpStep } = this.props
return (
-
-
- {t('onboarding:selectDevice.title')}
-
+
+
+
+ {t('onboarding:selectDevice.title')}
+
+
{
{t('onboarding:selectDevice.ledgerNanoCard.title')}
this.handleIsLedgerNano(false)}
>
- {!onboarding.isLedgerNano && }
+ {!onboarding.isLedgerNano && onboarding.isLedgerNano !== null && }
@@ -56,6 +55,16 @@ class SelectDevice extends PureComponent {
+
)
}
@@ -70,6 +79,7 @@ const DeviceContainer = styled(Box).attrs({
alignItems: 'center',
justifyContent: 'center',
relative: true,
+ borderRadius: '4px',
})`
width: 218px;
height: 204px;
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
index e0e19c83..a37330a4 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
@@ -58,11 +58,11 @@ class SelectPIN extends PureComponent {
return (
-
-
+
+
-
+
{stepsLedgerBlue.map(step => )}
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
index dfe794c3..ceeb552c 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
@@ -63,10 +63,8 @@ class SelectPINnano extends PureComponent {
return (
-
-
-
-
+
+
{stepsLedgerNano.map(step => )}
diff --git a/src/components/Onboarding/steps/SelectPIN/index.js b/src/components/Onboarding/steps/SelectPIN/index.js
index 276de841..209bec3e 100644
--- a/src/components/Onboarding/steps/SelectPIN/index.js
+++ b/src/components/Onboarding/steps/SelectPIN/index.js
@@ -15,8 +15,8 @@ export default (props: StepProps) => {
const { nextStep, prevStep, t, onboarding } = props
return (
-
-
+
+
{t('onboarding:selectPIN.title')}
{onboarding.isLedgerNano ? : }
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
index 250e6cd4..f86ff293 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
@@ -72,12 +72,13 @@ class WriteSeedNano extends PureComponent {
{t('onboarding:writeSeed.nano.title')}
{t('onboarding:writeSeed.nano.desc')}
-
-
-
+
+
+
-
+
+
{steps.map(step => )}
diff --git a/src/components/Onboarding/steps/WriteSeed/index.js b/src/components/Onboarding/steps/WriteSeed/index.js
index df9264eb..e0306307 100644
--- a/src/components/Onboarding/steps/WriteSeed/index.js
+++ b/src/components/Onboarding/steps/WriteSeed/index.js
@@ -16,8 +16,8 @@ export default (props: StepProps) => {
const { nextStep, prevStep, t, onboarding } = props
return (
-
-
+
+
{onboarding.flowType === 'restoreDevice' ? (
) : onboarding.isLedgerNano ? (
diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index f01e20bf..a27c7f22 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -45,6 +45,17 @@ const buttonStyles = {
border-color: ${darken(p.theme.colors.wallet, 0.1)};
`,
},
+ outlineGrey: {
+ default: p => `
+ background: transparent;
+ border: 1px solid ${p.theme.colors.grey};
+ color: ${p.theme.colors.grey};
+ `,
+ active: p => `
+ color: ${darken(p.theme.colors.grey, 0.1)};
+ border-color: ${darken(p.theme.colors.grey, 0.1)};
+ `,
+ },
icon: {
default: () => `
font-size: ${fontSize[3]}px;
diff --git a/src/icons/illustrations/LedgerBlue.js b/src/icons/illustrations/LedgerBlue.js
index 781df02d..739afc2c 100644
--- a/src/icons/illustrations/LedgerBlue.js
+++ b/src/icons/illustrations/LedgerBlue.js
@@ -3,12 +3,12 @@
import React from 'react'
export default () => (
-