diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js
index a7ef3966..922e3423 100644
--- a/src/components/Onboarding/OnboardingFooter.js
+++ b/src/components/Onboarding/OnboardingFooter.js
@@ -1,11 +1,15 @@
// @flow
+import React from 'react'
import styled from 'styled-components'
import { radii } from 'styles/theme'
+import type { T } from 'types/common'
+
+import Button from 'components/base/Button'
import Box from 'components/base/Box'
-export const OnboardingFooter = styled(Box).attrs({
+const Wrapper = styled(Box).attrs({
px: 5,
py: 3,
})`
@@ -13,3 +17,21 @@ export const OnboardingFooter = styled(Box).attrs({
border-bottom-left-radius: ${radii[1]}px;
border-bottom-right-radius: ${radii[1]}px;
`
+
+type Props = {
+ t: T,
+ nextStep: () => void,
+ prevStep: () => void,
+}
+
+const OnboardingFooter = ({ t, nextStep, prevStep, ...props }: Props) => (
+
+
+
+
+)
+export default OnboardingFooter
diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 2c0da32a..8b2a03e1 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -1,11 +1,13 @@
// @flow
+import React from 'react'
import styled from 'styled-components'
import { radii } from 'styles/theme'
import Box from 'components/base/Box'
+// GENERAL
export const Title = styled(Box).attrs({
- width: 152,
+ width: 267,
height: 27,
ff: 'Museo Sans|Regular',
fontSize: 7,
@@ -13,12 +15,13 @@ export const Title = styled(Box).attrs({
})``
export const Description = styled(Box).attrs({
- width: 340,
- height: 36,
- ff: 'Open Sans|Regular',
- fontSize: 4,
+ width: 714,
+ height: 48,
+ ff: 'Museo Sans|Light',
+ fontSize: 5,
+ lineHeight: 1.5,
textAlign: 'center',
- color: 'smoke',
+ color: 'grey',
})`
margin: 10px auto 25px;
`
@@ -28,6 +31,7 @@ export const Inner = styled(Box).attrs({
flow: 4,
})``
+// FOOTER
export const OnboardingFooter = styled(Box).attrs({
px: 5,
py: 3,
@@ -36,3 +40,43 @@ export const OnboardingFooter = styled(Box).attrs({
border-bottom-left-radius: ${radii[1]}px;
border-bottom-right-radius: ${radii[1]}px;
`
+
+// INSTRUCTION LIST
+type StepType = {
+ icon: any,
+ desc: string,
+}
+export function InstructionStep({ step }: { step: StepType }) {
+ const { icon, desc } = step
+ return (
+
+
+ {icon}
+
+
+ {desc}
+
+
+ )
+}
+export const InstructionStepDesc = styled(Box).attrs({
+ ff: 'Open Sans|Regular',
+ fontSize: 4,
+ textAlign: 'left',
+ lineHeight: 1.69,
+ color: 'smoke',
+ shrink: 1,
+})``
+
+export const IconInstructionStep = styled(Box).attrs({
+ width: 26,
+ height: 26,
+ ff: 'Rubik|Regular',
+ textAlign: 'center',
+ fontSize: 3,
+ color: 'wallet',
+})`
+ border-radius: 100%;
+ background: #6490f126;
+ line-height: 2;
+`
diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js
index ca9dbdf7..6c5295a9 100644
--- a/src/components/Onboarding/index.js
+++ b/src/components/Onboarding/index.js
@@ -21,8 +21,8 @@ import Box from 'components/base/Box'
import Start from './steps/Start'
import InitStep from './steps/Init'
import OnboardingBreadcrumb from './OnboardingBreadcrumb'
-import ChooseDevice from './steps/ChooseDevice'
-import ChoosePIN from './steps/ChoosePIN'
+import SelectDevice from './steps/SelectDevice'
+import SelectPIN from './steps/SelectPIN'
import WriteSeed from './steps/WriteSeed'
import GenuineCheck from './steps/GenuineCheck'
import SetPassword from './steps/SetPassword'
@@ -31,8 +31,8 @@ import Finish from './steps/Finish'
const STEPS = {
init: InitStep,
- chooseDevice: ChooseDevice,
- choosePIN: ChoosePIN,
+ selectDevice: SelectDevice,
+ selectPIN: SelectPIN,
writeSeed: WriteSeed,
genuineCheck: GenuineCheck,
setPassword: SetPassword,
@@ -128,7 +128,7 @@ class Onboarding extends PureComponent {
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)
diff --git a/src/components/Onboarding/steps/ChooseDevice.js b/src/components/Onboarding/steps/ChooseDevice.js
deleted file mode 100644
index 7da5e8a8..00000000
--- a/src/components/Onboarding/steps/ChooseDevice.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// @flow
-
-import React from 'react'
-import styled from 'styled-components'
-
-import Box from 'components/base/Box'
-import IconNanoS from 'icons/device/NanoS'
-import IconBlue from 'icons/device/Blue'
-import { Title, Description, Inner } from '../helperComponents'
-
-import type { StepProps } from '..'
-
-export default (props: StepProps) => {
- const { nextStep } = props
-
- return (
-
-
- This is the title of the screen. 1 line is the maximum
-
- 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
-
-
-
- nextStep()}>
-
-
-
- Ledger Nano S
- Please replace it with the final wording once it’s done.
-
-
-
-
-
- Ledger Blue
- Please replace it with the final wording once it’s done.
-
-
-
-
-
- )
-}
-
-const DeviceContainer = styled(Box).attrs({
- alignItems: 'center',
- justifyContent: 'center',
-})`
- width: 218px;
- height: 204px;
- border: 1px solid #d8d8d8;
-`
-const DeviceIcon = styled(Box).attrs({
- alignItems: 'center',
- justifyContent: 'center',
- color: 'graphite',
-})`
- width: 55px;
-`
diff --git a/src/components/Onboarding/steps/ChoosePIN.js b/src/components/Onboarding/steps/ChoosePIN.js
deleted file mode 100644
index 794f4b71..00000000
--- a/src/components/Onboarding/steps/ChoosePIN.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// @flow
-
-import React from 'react'
-
-import Box from 'components/base/Box'
-import Button from 'components/base/Button'
-import { Title, Description, OnboardingFooter } from '../helperComponents'
-
-import type { StepProps } from '..'
-
-export default (props: StepProps) => {
- const { nextStep, prevStep } = props
- return (
-
-
- This is CHOOSE PIN screen. 1 line is the maximum
-
- 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
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js
index 513afa7d..2e880457 100644
--- a/src/components/Onboarding/steps/Finish.js
+++ b/src/components/Onboarding/steps/Finish.js
@@ -1,34 +1,93 @@
// @flow
import React from 'react'
+import { shell } from 'electron'
+import styled from 'styled-components'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
-import Text from 'components/base/Text'
-import IconFinishOnboarding from 'icons/LockScreen'
+import IconCheckCircle from 'icons/CheckCircle'
+import IconSocialTwitter from 'icons/Eye'
+import IconSocialReddit from 'icons/User'
+import IconSocialGithub from 'icons/Share'
+
import type { StepProps } from '..'
import { Title, Description } from '../helperComponents'
+const socialMedia = [
+ {
+ key: 'twitter',
+ url: 'https://twitter.com/LedgerHQ',
+ icon: ,
+ onClick: url => shell.openExternal(url),
+ },
+ {
+ key: 'reddit',
+ url: 'https://www.reddit.com/r/ledgerwallet/',
+ icon: ,
+ onClick: url => shell.openExternal(url),
+ },
+ {
+ key: 'github',
+ url: 'https://github.com/LedgerHQ',
+ icon: ,
+ onClick: url => shell.openExternal(url),
+ },
+]
+
export default (props: StepProps) => {
- const { finish, jumpStep } = props
+ const { finish, t } = props
return (
-
- This is ENJOY THE APP screen. 1 line is the maximum
-
- 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
-
-
-