selectPIN screen, chooseDevice screen

src/components/Onboarding/index.js

@@ -128,7 +128,7 @@ class Onboarding extends PureComponent<Props> {
 
 const Container = styled(Box).attrs({
   bg: 'white',
-  p: 5,
+  p: 60,
 })`
   position: fixed;
   top: 0;
@@ -138,6 +138,6 @@ const Container = styled(Box).attrs({
   z-index: 25;
 `
 const StepContainer = styled(Box).attrs({
-  p: 20,
+  p: 40,
 })``
 export default compose(connect(mapStateToProps, mapDispatchToProps), translate())(Onboarding)

src/components/Onboarding/steps/ChooseDevice.js

@@ -4,39 +4,40 @@ import React from 'react'
 import styled from 'styled-components'
 
 import Box from 'components/base/Box'
-import IconNanoS from 'icons/device/NanoS'
+import IconLedgerNano from 'icons/onboarding/LedgerNano'
-import IconBlue from 'icons/device/Blue'
+import IconLedgerBlue from 'icons/onboarding/LedgerBlue'
 import { Title, Description, Inner } from '../helperComponents'
 
 import type { StepProps } from '..'
 
 export default (props: StepProps) => {
-  const { nextStep } = props
+  const { nextStep, t } = props
 
   return (
     <Box sticky alignItems="center" justifyContent="center">
       <Box align="center">
-        <Title>This is the title of the screen. 1 line is the maximum</Title>
+        <Title>{t('onboarding:chooseDevice.title')}</Title>
-        <Description>
+        {/* TODO shrink description so it forms 2 lines */}
-          This is a long text, please replace it with the final wording once it’s done.
+        <Description>{t('onboarding:chooseDevice.desc')}</Description>
-          <br />
-          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
-        </Description>
         <Box>
           <Inner>
             <DeviceContainer onClick={() => nextStep()}>
               <DeviceIcon>
-                <IconNanoS size={46} />
+                <IconLedgerNano />
               </DeviceIcon>
-              <Title>Ledger Nano S</Title>
+              <BlockTitle>{t('onboarding:chooseDevice.ledgerNanoCard.title')}</BlockTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
+              <BlockDescription>
+                {t('onboarding:chooseDevice.ledgerNanoCard.desc')}
+              </BlockDescription>
             </DeviceContainer>
             <DeviceContainer>
               <DeviceIcon>
-                <IconBlue size={46} />
+                <IconLedgerBlue />
               </DeviceIcon>
-              <Title>Ledger Blue</Title>
+              <BlockTitle>{t('onboarding:chooseDevice.ledgerBlueCard.title')}</BlockTitle>
-              <Description>Please replace it with the final wording once it’s done.</Description>
+              <BlockDescription>
+                {t('onboarding:chooseDevice.ledgerBlueCard.desc')}
+              </BlockDescription>
             </DeviceContainer>
           </Inner>
         </Box>
@@ -59,4 +60,19 @@ const DeviceIcon = styled(Box).attrs({
   color: 'graphite',
 })`
   width: 55px;
+  min-height: 80px;
+`
+export const BlockDescription = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'center',
+  color: 'smoke',
+})``
+export const BlockTitle = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'center',
+})`
+  font-weight: 600;
+  padding-bottom: 10px;
 `

src/components/Onboarding/steps/ChoosePIN.js

@@ -4,30 +4,99 @@ import React from 'react'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
-import { Title, Description, OnboardingFooter } from '../helperComponents'
+import styled from 'styled-components'
+
+import IconSelectPIN from 'icons/onboarding/SelectPIN'
+import { Title, Description, OnboardingFooter, Inner } from '../helperComponents'
 
 import type { StepProps } from '..'
 
+export const IconSelectStep = styled(Box).attrs({
+  width: 26,
+  height: 26,
+  textAlign: 'center',
+})`
+  border-radius: 100%;
+  background: #6490f126;
+`
+
 export default (props: StepProps) => {
-  const { nextStep, prevStep } = props
+  const { nextStep, prevStep, t } = props
+  const steps = [
+    {
+      key: 'step1',
+      icon: <IconSelectStep>1</IconSelectStep>,
+      desc: t('onboarding:selectPIN.instructions.step1'),
+    },
+    {
+      key: 'step2',
+      icon: <IconSelectStep>2</IconSelectStep>,
+      desc: t('onboarding:selectPIN.instructions.step2'),
+    },
+    {
+      key: 'step3',
+      icon: <IconSelectStep>3</IconSelectStep>,
+      desc: t('onboarding:selectPIN.instructions.step3'),
+    },
+    {
+      key: 'step4',
+      icon: <IconSelectStep>4</IconSelectStep>,
+      desc: t('onboarding:selectPIN.instructions.step4'),
+    },
+  ]
   return (
-    <Box sticky alignItems="center" justifyContent="center">
+    <Box sticky>
-      <Box align="center">
+      <Box grow alignItems="center" justifyContent="center">
-        <Title>This is CHOOSE PIN screen. 1 line is the maximum</Title>
+        <Box align="center" mb={5}>
-        <Description>
+          <Title>{t('onboarding:selectPIN.title')}</Title>
-          This is a long text, please replace it with the final wording once it’s done.
+          <Description>{t('onboarding:selectPIN.desc')}</Description>
-          <br />
+        </Box>
-          Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+        <Box>
-        </Description>
+          <Inner style={{ width: 760 }}>
+            <Box style={{ width: 260 }} mt={5}>
+              <IconSelectPIN />
+            </Box>
+
+            <Box shrink grow flow={5}>
+              {steps.map(step => <SelectPINStep key={step.key} step={step} />)}
+            </Box>
+          </Inner>
+        </Box>
       </Box>
-      <OnboardingFooter horizontal align="center" justify="flex-end" flow={2}>
+      <OnboardingFooter horizontal align="center" flow={2}>
         <Button small outline onClick={() => prevStep()}>
           Go Back
         </Button>
-        <Button small primary onClick={() => nextStep()}>
+        <Button small primary onClick={() => nextStep()} ml="auto">
           Continue
         </Button>
       </OnboardingFooter>
     </Box>
   )
 }
+
+type StepType = {
+  icon: any,
+  desc: string,
+}
+export function SelectPINStep({ step }: { step: StepType }) {
+  const { icon, desc } = step
+  return (
+    <Box horizontal>
+      <Box justify="center" color="grey" style={{ width: 26 }}>
+        {icon}
+      </Box>
+      <Box ff="Open Sans|Regular" justify="center" fontSize={4} style={{ paddingLeft: 10 }} shrink>
+        <CardDescription>{desc}</CardDescription>
+      </Box>
+    </Box>
+  )
+}
+
+export const CardDescription = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 4,
+  textAlign: 'left',
+  color: 'smoke',
+  shrink: 1,
+})``

src/components/Onboarding/steps/Init.js

@@ -12,34 +12,34 @@ import { Title } from '../helperComponents'
 import type { StepProps } from '..'
 
 export default (props: StepProps) => {
-  const { nextStep, jumpStep } = props
+  const { nextStep, jumpStep, t } = props
   const optionCards = [
     {
       key: 'newDevice',
       icon: <IconUser size={22} />,
-      title: 'Initialize your new Ledger device',
+      title: t('onboarding:init.newDevice.title'),
-      desc: 'Please replace it with the final wording once it’s done.',
+      desc: t('onboarding:init.newDevice.desc'),
       onClick: () => nextStep(),
     },
     {
       key: 'restoreDevice',
       icon: <IconUser size={22} />,
-      title: 'Restore a Ledger device',
+      title: t('onboarding:init.restoreDevice.title'),
-      desc: 'Please replace it with the final wording once it’s done.',
+      desc: t('onboarding:init.restoreDevice.desc'),
       onClick: () => jumpStep('choosePIN'),
     },
     {
       key: 'initializedDevice',
       icon: <IconUser size={22} />,
-      title: 'I have already initialized my device',
+      title: t('onboarding:init.initializedDevice.title'),
-      desc: 'Please replace it with the final wording once it’s done.',
+      desc: t('onboarding:init.initializedDevice.desc'),
       onClick: () => jumpStep('choosePIN'),
     },
     {
       key: 'noDevice',
       icon: <IconUser size={22} />,
-      title: 'Do not have a Ledger device yet? Buy one',
+      title: t('onboarding:init.noDevice.title'),
-      desc: 'Please replace it with the final wording once it’s done.',
+      desc: t('onboarding:init.noDevice.desc'),
       onClick: () => shell.openExternal('https://www.ledger.fr/'),
     },
   ]
@@ -51,10 +51,7 @@ export default (props: StepProps) => {
           <IconUser size={36} />
         </Box>
         <Box style={{ padding: 20, maxWidth: 650 }}>
-          <Title>
+          <Title>{t('onboarding:init.title')}</Title>
-            Welcome to Ledger Live, the computer companion app to your Ledger device. Please select
-            one of the options below:
-          </Title>
         </Box>
         <Box flow={5}>{optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}</Box>
       </Box>
@@ -64,8 +61,8 @@ export default (props: StepProps) => {
 
 type CardType = {
   icon: any,
-  desc: string,
+  desc: any,
-  title: string,
+  title: any,
   onClick: Function,
 }
 

src/components/Onboarding/steps/Start.js

@@ -10,14 +10,14 @@ import type { StepProps } from '..'
 import { Title, Description } from '../helperComponents'
 
 export default (props: StepProps) => {
-  const { jumpStep } = props
+  const { jumpStep, t } = props
   return (
     <Box sticky alignItems="center" justifyContent="center">
       <Box align="center" alignItems="center">
         <IconGetStarted />
         <Box style={{ paddingTop: '20px' }}>
-          <Title>Welcome to the new Ledger Live Desktop app.</Title>
+          <Title>{t('onboarding:start.title')}</Title>
-          <Description>Let’s get started!</Description>
+          <Description>{t('onboarding:start.desc')}</Description>
         </Box>
         <Button primary onClick={() => jumpStep('init')}>
           Get Started

src/icons/onboarding/LedgerBlue.js

@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="41" height="56">
+    <g fill="none" fillRule="evenodd">
+      <rect width="1.608" height="4.8" x="39.392" y="7.2" fill="#1D2028" rx=".804" />
+      <rect
+        width="38.696"
+        height="54.5"
+        x=".75"
+        y=".75"
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#1D2027"
+        strokeWidth="1.5"
+        rx="3.2"
+      />
+      <rect
+        width="26.833"
+        height="41.1"
+        x="6.678"
+        y="7.85"
+        fill="#FFF"
+        stroke="#6490F1"
+        strokeWidth=".5"
+        rx="2.4"
+      />
+    </g>
+  </svg>
+)

src/icons/onboarding/LedgerNano.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="112" height="20">
+    <g fill="none" fillRule="evenodd" transform="rotate(-90 10 10)">
+      <rect width="1.6" height="6.4" x="18.4" y="6.4" fill="#1D2028" rx=".8" />
+      <rect width="1.6" height="6.4" x="18.4" y="27.2" fill="#1D2028" rx=".8" />
+      <path
+        fill="#6490F1"
+        fillOpacity=".1"
+        stroke="#1D2028"
+        strokeWidth="1.5"
+        d="M1.6.75a.85.85 0 0 0-.85.85v108.8c0 .47.38.85.85.85h16c.47 0 .85-.38.85-.85V1.6a.85.85 0 0 0-.85-.85h-16z"
+      />
+      <rect
+        width="9.1"
+        height="31.5"
+        x="5.081"
+        y="8.275"
+        fill="#FFF"
+        stroke="#6490F1"
+        strokeWidth=".5"
+        rx=".8"
+      />
+      <path
+        fill="#FFF"
+        stroke="#1D2028"
+        strokeWidth="1.5"
+        d="M9.6 48.75A8.85 8.85 0 0 0 .75 57.6v52.8c0 .47.38.85.85.85h16c.47 0 .85-.38.85-.85V57.6a8.85 8.85 0 0 0-8.85-8.85z"
+      />
+      <circle cx="9.6" cy="57.6" r="4.55" fill="#FFF" stroke="#6490F1" strokeWidth=".5" />
+    </g>
+  </svg>
+)

src/icons/onboarding/SelectPIN.js

@@ -0,0 +1,75 @@
+// @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>
+      <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"
+      />
+    </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"
+      />
+      <path
+        d="M138.202 19.495h-6.794m6.794 6.208h-6.794"
+        stroke="#1D2027"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <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)"
+      />
+      <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" />
+        <rect width="4.492" height="17.12" x="125.336" y="70.094" fill="#142533" rx="2" />
+        <use fill="#FFF" xlinkHref="#b" />
+        <path
+          fill="#6490F1"
+          fillOpacity=".15"
+          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"
+        />
+        <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"
+        />
+        <path
+          fill="#FFF"
+          stroke="#142533"
+          strokeWidth="2"
+          d="M123.166 125.105c7.049-8.4 5.953-20.925-2.447-27.974l-90.824-76.21a3 3 0 0 0-4.227.37L4 47.115a3 3 0 0 0 .37 4.227l90.824 76.21c8.4 7.049 20.924 5.953 27.973-2.447z"
+        />
+        <ellipse cx="108.016" cy="111.123" stroke="#6490F1" rx="10.57" ry="10.644" />
+      </g>
+    </g>
+  </svg>
+)

static/i18n/en/onboarding.yml

@@ -0,0 +1,34 @@
+start:
+  title: Welcome to the new Ledger Live Desktop app.
+  desc: Let’s get started!
+init:
+  title: Welcome to Ledger Live, the computer companion app to your Ledger device. Please select one of the options below
+  newDevice:
+    title: Initialize your new Ledger device
+    desc: Please replace it with the final wording once it’s done.
+  restoreDevice:
+    title: Restore a Ledger device
+    desc: Please replace it with the final wording once it’s done.
+  initializedDevice:
+    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
+    desc: Please replace it with the final wording once it’s done.
+chooseDevice:
+  title: To get started, select your device
+  desc: This is a long text, please replace it with the final wording once it’s done. Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+  ledgerNanoCard:
+    title: Ledger Nano S
+    desc: Please replace it with the final wording once it’s done.
+  ledgerBlueCard:
+    title: Ledger Blue
+    desc:  Please replace it with the final wording once it’s done.
+selectPIN:
+  title: Select PIN code
+  desc: This is a long text, please replace it with the final wording once it’s done. Lorem ipsum dolor amet ledger lorem dolor ipsum amet
+  instructions:
+    step1: Connect your Ledger Nano S to your computer using the supplied micro USB cable.
+    step2: Press both buttons simultaneously as instructed on your Ledger Nano S screen.
+    step3: Select Configure as new device on your Ledger Nano S by pressing the right button, located above the validation icon.
+    step4: Choose a PIN code between 4 and 8 digits long.