Merge pull request #477 from NastiaS/onboardingPixelFix

Onboarding pixel fix

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) => (
   <Wrapper {...props}>
-    <Button padded outline onClick={() => prevStep()}>
+    <Button padded outlineGrey onClick={() => prevStep()}>
       {t('common:back')}
     </Button>
-    <Button padded disabled={isContinueDisabled} primary onClick={() => nextStep()} ml="auto">
+    <Button
+      padded
+      disabled={isContinueDisabled}
+      primary
+      onClick={() => (jumpTo && jumpStep ? jumpStep(jumpTo) : nextStep())}
+      ml="auto"
+    >
       {t('common:continue')}
     </Button>
   </Wrapper>

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
     <DisclaimerBoxContainer {...p}>
       <Box m={3} relative>
         <DisclaimerBoxIconContainer>
-          <IconWarning />
+          <IconSensitiveOperationShield />
         </DisclaimerBoxIconContainer>
         {disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)}
       </Box>
@@ -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({

src/components/Onboarding/steps/Analytics.js

@@ -45,41 +45,35 @@ class Analytics extends PureComponent<StepProps, State> {
     const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state
 
     return (
-      <Box sticky pt={170}>
-        <Box grow alignItems="center">
+      <Box sticky pt={50}>
+        <Box grow alignItems="center" justifyContent="center">
           <Title>{t('onboarding:analytics.title')}</Title>
           <Description>{t('onboarding:analytics.desc')}</Description>
           <Box mt={5}>
             <Container>
-              <Box justify="center" style={{ width: 450 }}>
-                <Box horizontal>
-                  <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
-                </Box>
+              <Box>
+                <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
                 <AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText>
               </Box>
-              <Box alignItems="center" horizontal mx={5}>
+              <Box justifyContent="center">
                 <CheckBox isChecked={sentryLogsToggle} onChange={this.handleSentryLogsToggle} />
               </Box>
             </Container>
             <Container>
-              <Box justify="center" style={{ width: 450 }}>
-                <Box horizontal>
-                  <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
-                </Box>
+              <Box>
+                <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
                 <AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText>
               </Box>
-              <Box alignItems="center" horizontal mx={5}>
+              <Box justifyContent="center">
                 <CheckBox isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} />
               </Box>
             </Container>
             <Container>
-              <Box justify="center" style={{ width: 450 }}>
-                <Box horizontal>
-                  <AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle>
-                </Box>
+              <Box>
+                <AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle>
                 <AnalyticsText>{t('onboarding:analytics.termsConditions.desc')}</AnalyticsText>
               </Box>
-              <Box alignItems="center" horizontal mx={5}>
+              <Box justifyContent="center">
                 <CheckBox isChecked={termsConditionsToggle} onChange={this.handleTermsToggle} />
               </Box>
             </Container>
@@ -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;
+`

src/components/Onboarding/steps/GenuineCheck.js

@@ -120,8 +120,8 @@ class GenuineCheck extends PureComponent<StepProps, State> {
     }
 
     return (
-      <Box sticky pt={150}>
-        <Box grow alignItems="center">
+      <Box sticky pt={50}>
+        <Box grow alignItems="center" justifyContent="center">
           <Title>{t('onboarding:genuineCheck.title')}</Title>
           <Description>{t('onboarding:genuineCheck.desc')}</Description>
           <Box mt={5}>
@@ -132,15 +132,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle>
                 </Box>
               </Box>
-              <RadioGroup
-                style={{ margin: '0 30px' }}
-                items={this.getButtonLabel()}
-                activeKey={cachedPinStepButton}
-                onChange={item => this.handleButtonPass(item, 'pinStepPass')}
-              />
+              <Box justify="center">
+                <RadioGroup
+                  items={this.getButtonLabel()}
+                  activeKey={cachedPinStepButton}
+                  onChange={item => this.handleButtonPass(item, 'pinStepPass')}
+                />
+              </Box>
             </CardWrapper>
           </Box>
-          <Box mt={5}>
+          <Box mt={3}>
             <CardWrapper isDisabled={!genuine.pinStepPass}>
               <Box justify="center">
                 <Box horizontal>
@@ -148,15 +149,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle>
                 </Box>
               </Box>
-              <RadioGroup
-                style={{ margin: '0 30px' }}
-                items={this.getButtonLabel()}
-                activeKey={cachedRecoveryStepButton}
-                onChange={item => this.handleButtonPass(item, 'recoveryStepPass')}
-              />
+              <Box justify="center">
+                <RadioGroup
+                  items={this.getButtonLabel()}
+                  activeKey={cachedRecoveryStepButton}
+                  onChange={item => this.handleButtonPass(item, 'recoveryStepPass')}
+                />
+              </Box>
             </CardWrapper>
           </Box>
-          <Box mt={5}>
+          <Box mt={3}>
             <CardWrapper isDisabled={!genuine.recoveryStepPass}>
               <Box justify="center">
                 <Box horizontal>
@@ -164,7 +166,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
                 </Box>
               </Box>
-              <Box justify="center" horizontal mx={5}>
+              <Box justify="center">
                 {genuine.isDeviceGenuine ? (
                   <Box horizontal align="center" flow={1} color={colors.wallet}>
                     <IconCheck size={16} />
@@ -218,29 +220,27 @@ export function GenuineCheckFail({
 }: {
   redoGenuineCheck: () => void,
   contactSupport: () => void,
-  isLedgerNano: boolean,
+  isLedgerNano: boolean | null,
   t: T,
 }) {
   return (
-    <Box sticky pt={250}>
-      <Box grow alignItems="center">
+    <Box sticky pt={50}>
+      <Box grow alignItems="center" justifyContent="center">
         {isLedgerNano ? (
           <Fragment>
             <Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
-            <Description style={{ maxWidth: 527 }}>
-              {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}
-            </Description>
-            <Box style={{ minWidth: 527 }}>
+            <Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
+            <Box style={{ width: 550 }} mt={5} ml={100}>
               <IconLedgerNanoError />
             </Box>
           </Fragment>
         ) : (
           <Fragment>
             <Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title>
-            <Description style={{ maxWidth: 527 }}>
+            <Description pb={5}>
               {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
             </Description>
-            <Box style={{ minWidth: 527, alignItems: 'center' }}>
+            <Box alignItems="center">
               <IconLedgerBlueError />
             </Box>
           </Fragment>
@@ -248,7 +248,7 @@ export function GenuineCheckFail({
       </Box>
       <Wrapper horizontal>
         <Button
-          small
+          padded
           outline
           onClick={() => {
             redoGenuineCheck()
@@ -257,7 +257,7 @@ export function GenuineCheckFail({
           {t('common:back')}
         </Button>
         <Button
-          small
+          padded
           danger
           onClick={() => {
             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)};

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<StepProps, *> {
     const optionCards = [
       {
         key: 'newDevice',
-        icon: <IconPlus size={16} />,
+        icon: <IconPlus size={20} />,
         title: t('onboarding:init.newDevice.title'),
         onClick: () => {
           nextStep()
@@ -36,7 +36,7 @@ class Init extends PureComponent<StepProps, *> {
       },
       {
         key: 'restoreDevice',
-        icon: <IconRecover size={16} />,
+        icon: <IconRecover size={20} />,
         title: t('onboarding:init.restoreDevice.title'),
         onClick: () => {
           nextStep()
@@ -45,7 +45,7 @@ class Init extends PureComponent<StepProps, *> {
       },
       {
         key: 'initializedDevice',
-        icon: <IconCheck size={16} />,
+        icon: <IconCheck size={20} />,
         title: t('onboarding:init.initializedDevice.title'),
         onClick: () => {
           nextStep()
@@ -54,7 +54,7 @@ class Init extends PureComponent<StepProps, *> {
       },
       {
         key: 'noDevice',
-        icon: <IconExternalLink size={16} />,
+        icon: <IconExternalLink size={20} />,
         title: t('onboarding:init.noDevice.title'),
         onClick: () => {
           shell.openExternal('https://www.ledger.fr/')
@@ -64,15 +64,15 @@ class Init extends PureComponent<StepProps, *> {
     ]
 
     return (
-      <Box sticky alignItems="center" justifyContent="center">
-        <Box align="center">
+      <Box sticky pt={130}>
+        <Box align="center" justifyContent="center">
           <Box color="wallet">
             <IconUser size={36} />
           </Box>
-          <Box p={4}>
+          <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:init.title')}</Title>
           </Box>
-          <Box mt={5} flow={5}>
+          <Box pt={4} flow={4}>
             {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
           </Box>
         </Box>
@@ -102,21 +102,25 @@ export function OptionFlowCard({ card }: { card: CardType }) {
       <Box justify="center" grow>
         <CardTitle>{title}</CardTitle>
       </Box>
-      <Box justify="center" mx={4} my={3}>
-        <IconChevronRight style={{ color: colors.grey }} size={22} />
+      <Box justify="center" mx={1} my={4}>
+        <IconChevronRight style={{ color: colors.grey }} size={16} />
       </Box>
     </InitCardContainer>
   )
 }
 
-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;
 `

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<StepProps, {}> {
   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 (
-      <Box sticky pt={200}>
-        <Box grow alignItems="center">
-          <Title>{t('onboarding:selectDevice.title')}</Title>
-          <Box mt={7}>
+      <Box sticky>
+        <Box grow alignItems="center" justifyContent="center">
+          <Box m={5}>
+            <Title>{t('onboarding:selectDevice.title')}</Title>
+          </Box>
+          <Box pt={4}>
             <Inner>
               <DeviceContainer
                 isActive={onboarding.isLedgerNano}
@@ -44,10 +43,10 @@ class SelectDevice extends PureComponent<StepProps, {}> {
                 <BlockTitle>{t('onboarding:selectDevice.ledgerNanoCard.title')}</BlockTitle>
               </DeviceContainer>
               <DeviceContainer
-                isActive={!onboarding.isLedgerNano}
+                isActive={!onboarding.isLedgerNano && onboarding.isLedgerNano !== null}
                 onClick={() => this.handleIsLedgerNano(false)}
               >
-                {!onboarding.isLedgerNano && <DeviceSelected />}
+                {!onboarding.isLedgerNano && onboarding.isLedgerNano !== null && <DeviceSelected />}
                 <DeviceIcon>
                   <IconLedgerBlue />
                 </DeviceIcon>
@@ -56,6 +55,16 @@ class SelectDevice extends PureComponent<StepProps, {}> {
             </Inner>
           </Box>
         </Box>
+        <OnboardingFooter
+          horizontal
+          flow={2}
+          t={t}
+          nextStep={nextStep}
+          prevStep={prevStep}
+          jumpStep={jumpStep}
+          isContinueDisabled={onboarding.isLedgerNano === null}
+          jumpTo={onboarding.flowType === 'initializedDevice' ? 'genuineCheck' : undefined}
+        />
       </Box>
     )
   }
@@ -70,6 +79,7 @@ const DeviceContainer = styled(Box).attrs({
   alignItems: 'center',
   justifyContent: 'center',
   relative: true,
+  borderRadius: '4px',
 })`
   width: 218px;
   height: 204px;

src/components/Onboarding/steps/SelectPIN/SelectPINblue.js

@@ -58,11 +58,11 @@ class SelectPIN extends PureComponent<Props, *> {
 
     return (
       <Box align="center">
-        <Inner style={{ width: 700 }}>
-          <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={2}>
+        <Inner style={{ width: 550 }}>
+          <Box style={{ width: 180, justifyContent: 'center', alignItems: 'center' }}>
             <IconLedgerBlueSelectPIN />
           </Box>
-          <Box mt={4}>
+          <Box>
             <Box shrink grow flow={4}>
               {stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)}
             </Box>

src/components/Onboarding/steps/SelectPIN/SelectPINnano.js

@@ -63,10 +63,8 @@ class SelectPINnano extends PureComponent<Props, *> {
     return (
       <Box align="center" mt={3}>
         <Inner style={{ width: 700 }}>
-          <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={5}>
-            <IconLedgerNanoSelectPIN />
-          </Box>
-          <Box shrink grow flow={4}>
+          <IconLedgerNanoSelectPIN />
+          <Box shrink grow flow={4} style={{ marginLeft: 40 }}>
             {stepsLedgerNano.map(step => <OptionRow key={step.key} step={step} />)}
           </Box>
         </Inner>

src/components/Onboarding/steps/SelectPIN/index.js

@@ -15,8 +15,8 @@ export default (props: StepProps) => {
   const { nextStep, prevStep, t, onboarding } = props
 
   return (
-    <Box sticky pt={170}>
-      <Box grow alignItems="center">
+    <Box sticky pt={50}>
+      <Box grow alignItems="center" justifyContent="center">
         <Title>{t('onboarding:selectPIN.title')}</Title>
         <Box align="center" mt={7}>
           {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}

src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js

@@ -72,12 +72,13 @@ class WriteSeedNano extends PureComponent<Props, *> {
           <Title>{t('onboarding:writeSeed.nano.title')}</Title>
           <Description>{t('onboarding:writeSeed.nano.desc')}</Description>
         </Box>
-        <Box align="center">
-          <Inner style={{ width: 760 }}>
-            <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }}>
+        <Box align="center" mt={3}>
+          <Inner style={{ width: 700 }}>
+            <Box style={{ width: 300 }} justifyContent="center" alignItems="center">
               <IconWriteSeed />
             </Box>
-            <Box shrink flow={2} m={0}>
+
+            <Box shrink grow flow={4}>
               {steps.map(step => <OptionRow key={step.key} step={step} />)}
             </Box>
           </Inner>

src/components/Onboarding/steps/WriteSeed/index.js

@@ -16,8 +16,8 @@ export default (props: StepProps) => {
   const { nextStep, prevStep, t, onboarding } = props
 
   return (
-    <Box sticky pt={170}>
-      <Box grow alignItems="center">
+    <Box sticky pt={50}>
+      <Box grow alignItems="center" justifyContent="center">
         {onboarding.flowType === 'restoreDevice' ? (
           <WriteSeedRestore />
         ) : onboarding.isLedgerNano ? (

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;

src/icons/illustrations/LedgerBlue.js

@@ -3,12 +3,12 @@
 import React from 'react'
 
 export default () => (
-  <svg width="41" height="56">
+  <svg width="52" height="72">
     <g fill="none" fillRule="evenodd">
-      <rect width="1.608" height="4.8" x="39.392" y="7.2" fill="#1D2028" rx=".804" />
+      <rect width="2.039" height="6.171" x="49.961" y="9.257" fill="#1D2028" rx="1.02" />
       <rect
-        width="38.696"
-        height="54.5"
+        width="49.48"
+        height="70.5"
         x=".75"
         y=".75"
         fill="#6490F1"
@@ -18,10 +18,10 @@ export default () => (
         rx="3.2"
       />
       <rect
-        width="26.833"
-        height="41.1"
-        x="6.678"
-        y="7.85"
+        width="34.167"
+        height="52.986"
+        x="8.403"
+        y="10.021"
         fill="#FFF"
         stroke="#6490F1"
         strokeWidth=".5"

src/icons/illustrations/LedgerNanoSelectPIN.js

@@ -1,40 +1,34 @@
 // @flow
-
 import React from 'react'
 
 export default () => (
   <svg width="260" height="129">
     <defs>
-      <linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="0%">
-        <stop offset="1.367%" stopColor="#FFF" />
-        <stop offset="100%" stopColor="#1D2027" />
+      <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
+        <stop offset="0%" />
+        <stop offset="100%" stopColor="#FFF" />
       </linearGradient>
       <path
         id="b"
-        d="M91 0h33.711a4 4 0 0 1 4 4v108.144c0 11.519-9.337 20.856-20.855 20.856C96.337 133 87 123.663 87 112.144V4a4 4 0 0 1 4-4z"
+        d="M91 0h34a4 4 0 0 1 4 4v108.144c0 11.519-9.337 20.856-20.856 20.856h-.288C96.337 133 87 123.663 87 112.144V4a4 4 0 0 1 4-4z"
       />
     </defs>
     <g fill="none" fillRule="evenodd">
       <path
         stroke="#1D2027"
         strokeWidth="2"
-        d="M126.962 31.06a1 1 0 0 1-1 1H99.737a5 5 0 0 1-5-5v-8.485a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1V31.06zm-32.608-5.208h-10.93v-6.435h10.93v6.435z"
-      />
-      <path
-        stroke="#1D2027"
-        d="M127.53 28.836V16.58h11.076a1.5 1.5 0 0 1 1.5 1.5v9.256a1.5 1.5 0 0 1-1.5 1.5H127.53z"
+        d="M127.856 31.44a1 1 0 0 1-1 1H100.63a5 5 0 0 1-5-5v-8.486a5 5 0 0 1 5-5h26.225a1 1 0 0 1 1 1v16.485z"
       />
+      <path stroke="#142533" strokeWidth="2" d="M95.247 26.231H84.318v-6.435h10.93v6.435z" />
       <path
-        d="M138.202 19.495h-6.794m6.794 6.208h-6.794"
         stroke="#1D2027"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M127.923 28.726V17.471l6.977.083a1 1 0 0 1 .988 1v9.266a1 1 0 0 1-1.012.988l-6.953-.083z"
       />
       <path
-        stroke="url(#a)"
-        strokeWidth="2.772"
-        d="M8.222 59.31h.23l-.23-.23v-1.155l-.578.577-.578-.577v1.155l-.23.23h.23v79.88h-.23l.23.23v1.156l.578-.578.578.578v-1.156l.23-.23h-.23V59.31zm5.657 0h.23l-.23-.23v-1.155l-.578.577-.578-.577v1.155l-.23.23h.23v79.88h-.23l.23.23v1.156l.578-.578.578.578v-1.156l.23-.23h-.23V59.31z"
-        transform="matrix(0 -1 -1 0 140.606 33.06)"
+        fill="url(#a)"
+        d="M6.836 53.925h1.616v82.65H6.836v-82.65zm5.657 0h1.616v82.65h-1.616v-82.65z"
+        transform="matrix(0 -1 -1 0 137.5 33.44)"
       />
       <g transform="rotate(-90 128.59 1.975)">
         <rect width="4.492" height="17.12" x="125.336" y="15.505" fill="#142533" rx="2" />
@@ -46,21 +40,12 @@ export default () => (
           stroke="#142533"
           strokeLinejoin="square"
           strokeWidth="2"
-          d="M91 1a3 3 0 0 0-3 3v108.144C88 123.11 96.89 132 107.856 132c10.966 0 19.855-8.89 19.855-19.856V4a3 3 0 0 0-3-3H91z"
-        />
-        <rect
-          width="20.176"
-          height="61.019"
-          x="97.5"
-          y="21.5"
-          fill="#FFF"
-          stroke="#6490F1"
-          rx="1.6"
+          d="M91 1a3 3 0 0 0-3 3v108.144C88 123.11 96.89 132 107.856 132h.288C119.11 132 128 123.11 128 112.144V4a3 3 0 0 0-3-3H91z"
         />
+        <rect width="21" height="62" x="97.5" y="21.5" fill="#FFF" stroke="#6490F1" rx="1.6" />
         <path
           fill="#6490F1"
-          fillRule="nonzero"
-          d="M103.735 40.983v21.563c0 .397.225.719.502.719h6.526c.277 0 .502-.322.502-.719V40.983c0-.396-.225-.718-.502-.718h-6.526c-.277 0-.502.322-.502.718zm3.976 16.332c.04 0 .073.032.073.072v.73c0 .03.018.057.046.069a.08.08 0 0 0 .082-.016l.517-.515a.073.073 0 0 1 .105 0l.299.295a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.042 0 .076.034.076.075v.418a.075.075 0 0 1-.075.075h-.73a.075.075 0 1 0-.053.127l.517.515a.077.077 0 0 1 0 .105l-.299.295a.073.073 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.727a.072.072 0 0 1-.073.075h-.422a.073.073 0 0 1-.073-.075v-.727a.076.076 0 0 0-.128-.052l-.517.514a.073.073 0 0 1-.105 0l-.299-.292a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.075v-.427c0-.042.034-.075.075-.075h.73c.03 0 .058-.019.07-.047a.075.075 0 0 0-.017-.08l-.517-.516a.077.077 0 0 1 0-.105l.299-.295a.073.073 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.73c0-.04.033-.073.073-.073l.422.008zm0-4.718c.04.002.073.035.073.075v.728c0 .03.018.057.046.068.028.011.06.005.082-.016l.517-.515a.078.078 0 0 1 .105 0l.299.298a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.041 0 .075.032.076.073v.42a.075.075 0 0 1-.075.072h-.73a.075.075 0 1 0-.053.127l.517.516a.077.077 0 0 1 0 .105l-.299.297a.078.078 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.727c0 .04-.033.074-.073.075h-.422a.075.075 0 0 1-.073-.075v-.727a.076.076 0 0 0-.128-.052l-.517.514a.078.078 0 0 1-.105 0l-.299-.297a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.072v-.42a.075.075 0 0 1 .075-.073h.73c.03 0 .058-.018.07-.046a.075.075 0 0 0-.017-.081l-.517-.515a.077.077 0 0 1 0-.105l.299-.298a.078.078 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.728c0-.04.033-.073.073-.075h.422zm0-4.715a.073.073 0 0 1 .073.075v.728c0 .03.018.057.046.068.028.011.06.005.082-.016l.517-.515a.073.073 0 0 1 .105 0l.299.293a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.042 0 .076.034.076.075v.428a.075.075 0 0 1-.075.075h-.73a.075.075 0 1 0-.053.127l.517.515a.077.077 0 0 1 0 .105l-.299.295a.073.073 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.722c0 .04-.033.073-.073.073h-.422a.073.073 0 0 1-.073-.073v-.73a.076.076 0 0 0-.128-.052l-.517.515a.073.073 0 0 1-.105 0l-.299-.295a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.075v-.417c0-.042.034-.075.075-.075h.73c.03 0 .058-.019.07-.047a.075.075 0 0 0-.017-.08l-.517-.516a.077.077 0 0 1 0-.105l.299-.295a.073.073 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.728a.072.072 0 0 1 .073-.075h.422zm0-5a.073.073 0 0 1 .073.075v.728c0 .03.018.057.046.068.028.011.06.005.082-.016l.517-.515a.073.073 0 0 1 .105 0l.299.293a.077.077 0 0 1 0 .105l-.517.515a.075.075 0 0 0 .052.127h.73c.042 0 .076.034.076.075v.428a.075.075 0 0 1-.075.075h-.73a.075.075 0 1 0-.053.127l.517.515a.077.077 0 0 1 0 .105l-.299.295a.073.073 0 0 1-.105 0l-.517-.515a.076.076 0 0 0-.128.053v.722c0 .04-.033.073-.073.073h-.422a.073.073 0 0 1-.073-.073v-.73a.076.076 0 0 0-.128-.052l-.517.515a.073.073 0 0 1-.105 0l-.299-.295a.077.077 0 0 1 0-.105l.517-.515a.075.075 0 0 0-.052-.128h-.73a.075.075 0 0 1-.076-.075v-.417c0-.042.034-.075.075-.075h.73c.03 0 .058-.019.07-.047a.075.075 0 0 0-.017-.08l-.517-.516a.077.077 0 0 1 0-.105l.299-.295a.073.073 0 0 1 .105 0l.517.515a.076.076 0 0 0 .128-.052v-.728a.072.072 0 0 1 .073-.075h.422z"
+          d="M105.5 35h5a.5.5 0 0 1 .5.5v34a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-34a.5.5 0 0 1 .5-.5zm1.238 3.042l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.512v.013l-.774.505.341.466.722-.578h.013l.243.9.551-.178-.328-.88.932.053v-.597l-.932.046.328-.872-.551-.17-.243.891h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.178-.328-.879.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.511v.014l-.774.505.341.466.722-.578h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.872-.551-.171-.243.892h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.898.551-.177-.328-.879.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472zm0 3.908l.774.511v.013l-.774.506.341.465.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.473zm0 3.907l.774.512v.013l-.774.505.341.466.722-.578h.013l.243.9.551-.178-.328-.879.932.052v-.597l-.932.046.328-.872-.551-.17-.243.891h-.013l-.722-.583-.34.472zm0 3.907l.774.512v.013l-.774.505.341.466.722-.577h.013l.243.899.551-.177-.328-.88.932.053v-.597l-.932.046.328-.873-.551-.17-.243.892h-.013l-.722-.584-.34.472z"
         />
         <path
           fill="#FFF"

src/icons/illustrations/SensitiveOperationShield.js

@@ -0,0 +1,61 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="26" height="31">
+    <defs>
+      <path id="a" d="M4 0h600a4 4 0 0 1 4 4v112a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" />
+      <mask id="b" width="608" height="120" x="0" y="0" fill="#fff">
+        <use xlinkHref="#a" />
+      </mask>
+      <filter
+        id="c"
+        width="153.8%"
+        height="141.9%"
+        x="-26.9%"
+        y="-19.4%"
+        filterUnits="objectBoundingBox"
+      >
+        <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+        <feColorMatrix
+          in="shadowBlurOuter1"
+          result="shadowMatrixOuter1"
+          values="0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0.116196784 0"
+        />
+        <feMerge>
+          <feMergeNode in="shadowMatrixOuter1" />
+          <feMergeNode in="SourceGraphic" />
+        </feMerge>
+      </filter>
+      <path id="d" d="M13 30s13-4.426 13-14.016V4.795L13 0 0 4.795v11.189C0 25.574 13 30 13 30z" />
+    </defs>
+    <g fill="none" fillRule="evenodd" transform="translate(-567 -15)">
+      <use
+        fill="#F9F9F9"
+        fillOpacity=".5"
+        stroke="#D8D8D8"
+        strokeDasharray="3"
+        strokeWidth="2"
+        mask="url(#b)"
+        xlinkHref="#a"
+      />
+      <g filter="url(#c)" transform="translate(567 15)">
+        <g strokeLinecap="round" strokeLinejoin="round">
+          <use fill="#FFF" stroke="#EA2E49" strokeWidth="1.5" xlinkHref="#d" />
+          <path
+            stroke="#FFF"
+            strokeWidth="2"
+            d="M12.678 30.947c-.116-.04-.321-.115-.603-.225-.462-.182-.975-.4-1.527-.656a29.353 29.353 0 0 1-4.627-2.662C1.621 24.354-1 20.56-1 15.984V4.098l14-5.164 14 5.164v11.886c0 4.577-2.62 8.37-6.921 11.42a29.353 29.353 0 0 1-4.627 2.662c-.552.256-1.065.474-1.527.656-.282.11-.487.185-.603.225l-.322.11-.322-.11z"
+          />
+        </g>
+        <path
+          fill="#EA2E49"
+          fillRule="nonzero"
+          d="M17.129 10.305c-.419 0-.76.35-.76.783l-.013 3.51s.001.246-.227.246c-.234 0-.227-.245-.227-.245V9.534a.755.755 0 0 0-.756-.768c-.42 0-.718.336-.718.768v5.064s-.026.248-.251.248c-.224 0-.24-.248-.24-.248V8.69c0-.432-.316-.76-.736-.76s-.738.328-.738.76v5.908s-.011.237-.253.237c-.237 0-.238-.237-.238-.237V10.21c0-.432-.328-.703-.747-.703-.42 0-.727.27-.727.703v6.415s-.04.285-.437-.186c-1.017-1.206-1.548-1.446-1.548-1.446s-.965-.488-1.393.392c-.31.639.019.673.525 1.457.448.694 1.866 2.52 1.866 2.52s1.68 2.444 3.95 2.444c0 0 4.442.196 4.442-4.336l-.015-6.381a.771.771 0 0 0-.76-.783"
+        />
+      </g>
+    </g>
+  </svg>
+)

src/icons/illustrations/WriteSeed.js

@@ -3,18 +3,18 @@
 import React from 'react'
 
 export default () => (
-  <svg width="145" height="126">
+  <svg width="145" height="109">
     <g fill="none" fillRule="evenodd" transform="translate(-1)">
       <path
         fill="#6490F1"
         fillOpacity=".1"
         stroke="#142533"
         strokeWidth="1.8"
-        d="M29.105 103.014l19.87-84.34L4.123 34.999a2.7 2.7 0 0 0-1.573 3.566l26.556 64.449zm89.265 1.336L97.73 33.29l44.752 16.288a2.7 2.7 0 0 1 1.49 3.748L118.37 104.35z"
+        d="M29.105 104.014l19.87-84.34L4.123 35.999a2.7 2.7 0 0 0-1.573 3.566l26.556 64.449zm89.265 1.336L97.73 34.29l44.752 16.288a2.7 2.7 0 0 1 1.49 3.748L118.37 105.35z"
       />
       <rect
         width="88.2"
-        height="106.2"
+        height="107.2"
         x="29.9"
         y=".9"
         fill="#FFF"
@@ -22,9 +22,10 @@ export default () => (
         strokeWidth="1.8"
         rx="3.6"
       />
+      <rect width="50" height="4" x="49" y="14" fill="#6490F1" rx="2" />
       <path
         fill="#6490F1"
-        d="M82.969 92.378h23.22a1.81 1.81 0 0 1 0 3.622H82.97a1.81 1.81 0 0 1 0-3.622zm-41.158 0h23.22a1.81 1.81 0 0 1 0 3.622h-23.22a1.81 1.81 0 1 1 0-3.622zm41.158-12.675h23.22a1.81 1.81 0 0 1 0 3.621H82.97a1.81 1.81 0 0 1 0-3.621zm-41.158 0h23.22a1.81 1.81 0 0 1 0 3.621h-23.22a1.81 1.81 0 1 1 0-3.621zm41.158-12.676h23.22a1.81 1.81 0 0 1 0 3.622H82.97a1.81 1.81 0 0 1 0-3.622zm-41.158 0h23.22a1.81 1.81 0 0 1 0 3.622h-23.22a1.81 1.81 0 1 1 0-3.622zm41.158-12.676h23.22a1.81 1.81 0 0 1 0 3.622H82.97a1.81 1.81 0 0 1 0-3.622zm-41.158 0h23.22a1.81 1.81 0 0 1 0 3.622h-23.22a1.81 1.81 0 1 1 0-3.622zm41.158-12.675h23.22a1.81 1.81 0 0 1 0 3.621H82.97a1.81 1.81 0 0 1 0-3.621zm-41.158 0h23.22a1.81 1.81 0 0 1 0 3.621h-23.22a1.81 1.81 0 1 1 0-3.621zM82.969 29h23.22a1.81 1.81 0 0 1 0 3.622H82.97a1.81 1.81 0 0 1 0-3.622zM41.81 29h23.22a1.81 1.81 0 0 1 0 3.622H41.81a1.81 1.81 0 1 1 0-3.622z"
+        d="M83.18 91.378h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.675h24.01a1.81 1.81 0 0 1 0 3.621H83.18a1.81 1.81 0 1 1 0-3.621zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.621H40.81a1.81 1.81 0 1 1 0-3.621zm42.37-12.676h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.676h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622zm42.37-12.675h24.01a1.81 1.81 0 0 1 0 3.621H83.18a1.81 1.81 0 1 1 0-3.621zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.621H40.81a1.81 1.81 0 1 1 0-3.621zM83.18 28h24.01a1.81 1.81 0 0 1 0 3.622H83.18a1.81 1.81 0 1 1 0-3.622zm-42.37 0h24.01a1.81 1.81 0 1 1 0 3.622H40.81a1.81 1.81 0 1 1 0-3.622z"
         opacity=".5"
       />
       <path
@@ -32,14 +33,8 @@ export default () => (
         fillRule="nonzero"
         stroke="#6490F1"
         strokeWidth="2"
-        d="M85.623 57.047a17.987 17.987 0 0 1 6.194 13.596c0 9.92-8.032 17.99-17.909 17.99-9.876 0-17.908-8.07-17.908-17.99a17.986 17.986 0 0 1 6.194-13.596v-3.281C62.194 47.278 67.447 42 73.908 42c6.462 0 11.715 5.278 11.715 11.766v3.28zM73.809 74.193zm.003-.018v4.55a.1.1 0 0 0 .096.102.1.1 0 0 0 .097-.102v-4.55a3.149 3.149 0 0 1-.006-.054l-.088-.899.885-.179a4.505 4.505 0 0 0 3.596-4.42c0-2.493-2.008-4.51-4.484-4.51-2.475 0-4.483 2.018-4.483 4.51a4.505 4.505 0 0 0 3.596 4.42l.885.18-.088.898a3.149 3.149 0 0 1-.006.054zm.196.018a.1.1 0 0 0 0 .004v-.004zm0 .004v-.002zm-7.62-19.876a17.719 17.719 0 0 1 7.52-1.668c2.633 0 5.186.577 7.521 1.668v-.555c0-4.17-3.375-7.562-7.52-7.562-4.146 0-7.521 3.392-7.521 7.562v.555z"
+        d="M85.623 56.047a17.987 17.987 0 0 1 6.194 13.596c0 9.92-8.032 17.99-17.909 17.99-9.876 0-17.908-8.07-17.908-17.99a17.986 17.986 0 0 1 6.194-13.596v-3.281C62.194 46.278 67.447 41 73.908 41c6.462 0 11.715 5.278 11.715 11.766v3.28zM73.809 73.193zm.003-.018v4.55a.1.1 0 0 0 .096.102.1.1 0 0 0 .097-.102v-4.55a3.149 3.149 0 0 1-.006-.054l-.088-.899.885-.179a4.505 4.505 0 0 0 3.596-4.42c0-2.493-2.008-4.51-4.484-4.51-2.475 0-4.483 2.018-4.483 4.51a4.505 4.505 0 0 0 3.596 4.42l.885.18-.088.898a3.149 3.149 0 0 1-.006.054zm.196.018a.1.1 0 0 0 0 .004v-.004zm0 .004v-.002zm-7.62-19.876a17.719 17.719 0 0 1 7.52-1.668c2.633 0 5.186.577 7.521 1.668v-.555c0-4.17-3.375-7.562-7.52-7.562-4.146 0-7.521 3.392-7.521 7.562v.555z"
       />
-      {/* <text fill="#142533" fontFamily="MuseoSans-700, Museo Sans" fontSize="5" fontWeight="500">
-        <tspan x="41" y="17">
-          RECOVERY PHRASE
-        </tspan>
-      </text> */}
-      <ellipse cx="75" cy="122.5" fill="#EEE" rx="48" ry="3.5" />
     </g>
   </svg>
 )

src/reducers/onboarding.js

@@ -23,7 +23,7 @@ export type OnboardingState = {
     isGenuineFail: boolean,
     isDeviceGenuine: boolean,
   },
-  isLedgerNano: boolean,
+  isLedgerNano: boolean | null,
   flowType: string,
 }
 
@@ -36,7 +36,7 @@ const state: OnboardingState = {
     isGenuineFail: false,
     isDeviceGenuine: false,
   },
-  isLedgerNano: true,
+  isLedgerNano: null,
   flowType: '',
   steps: [
     {

static/i18n/en/onboarding.yml

@@ -12,7 +12,7 @@ init:
     title: I have already initialized my device
     desc: Please replace it with the final wording once it’s done.
   noDevice:
-    title: Do not have a Ledger device yet? Buy one
+    title: Do not have a Ledger device yet?
     desc: Please replace it with the final wording once it’s done.
 selectDevice:
   title: To get started, select your device