diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index 0ed00ea6..99a5d759 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -1,90 +1,112 @@
// @flow
import React from 'react'
-import styled from 'styled-components'
import { shell } from 'electron'
-import Box from 'components/base/Box'
+import styled from 'styled-components'
+import Box, { Card } from 'components/base/Box'
import IconUser from 'icons/User'
-import { Title, Description, Inner } from '../helperComponents'
+import IconChevronRight from 'icons/ChevronRight'
+import { Title } from '../helperComponents'
import type { StepProps } from '..'
export default (props: StepProps) => {
const { nextStep, jumpStep } = props
- const handleOpenLink = (url: string) => () => shell.openExternal(url)
- /* TODO: all titles, descriptions to be wrapped in a translation tag once defined */
+ const optionCards = [
+ {
+ key: 'newDevice',
+ icon: ,
+ title: 'Initialize your new Ledger device',
+ desc: 'Please replace it with the final wording once it’s done.',
+ onClick: () => nextStep(),
+ },
+ {
+ key: 'restoreDevice',
+ icon: ,
+ title: 'Restore a Ledger device',
+ desc: 'Please replace it with the final wording once it’s done.',
+ onClick: () => jumpStep('choosePIN'),
+ },
+ {
+ key: 'initializedDevice',
+ icon: ,
+ title: 'I have already initialized my device',
+ desc: 'Please replace it with the final wording once it’s done.',
+ onClick: () => jumpStep('choosePIN'),
+ },
+ {
+ key: 'noDevice',
+ icon: ,
+ title: 'Do not have a Ledger device yet? Buy one',
+ desc: 'Please replace it with the final wording once it’s done.',
+ onClick: () => shell.openExternal('https://www.ledger.fr/'),
+ },
+ ]
+
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()}>
- {/* colors are temp, we don't have icons now */}
-
-
-
- Clean Nano S setup
- Please replace it with the final wording once it’s done.
-
- jumpStep('choosePIN')}>
-
-
-
- Existing seed + Clean setup
- Please replace it with the final wording once it’s done.
-
-
+
+
-
-
- nextStep()}>
-
-
-
- Migrate accounts
- Please replace it with the final wording once it’s done.
-
-
-
-
-
- Not a user, but would love to
- Please replace it with the final wording once it’s done.
-
-
+
+
+ Welcome to Ledger Live, the computer companion app to your Ledger device. Please select
+ one of the options below:
+
+ {optionCards.map(card => )}
)
}
-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',
+type CardType = {
+ icon: any,
+ desc: string,
+ title: string,
+ onClick: Function,
+}
+
+export function OptionFlowCard({ card }: { card: CardType }) {
+ const { icon, desc, title, onClick } = card
+ return (
+
+
+ {icon}
+
+
+ {title}
+ {desc}
+
+
+
+
+
+ )
+}
+
+export const CardDescription = styled(Box).attrs({
+ ff: 'Open Sans|Regular',
+ fontSize: 4,
+ textAlign: 'left',
+ color: 'smoke',
+})``
+export const CardTitle = styled(Box).attrs({
+ ff: 'Open Sans|Regular',
+ fontSize: 4,
+ textAlign: 'left',
})`
- width: 55px;
- padding: 10px;
+ font-weight: 600;
`
-export const TrackChoiceTitle = styled(Box).attrs({
- width: 152,
- height: 27,
- ff: 'Museo Sans|Regular',
- fontSize: 5,
- color: 'dark',
-})``
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index e3586584..ab948625 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -5,7 +5,7 @@ import React from 'react'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
-import LedgerLogo from 'icons/LockScreen'
+import IconGetStarted from 'icons/onboarding/GetStartedLogo'
import type { StepProps } from '..'
import { Title, Description } from '../helperComponents'
@@ -14,11 +14,12 @@ export default (props: StepProps) => {
return (
-
- Ledger Live
- Welcome to the new Ledger Live Desktop app.
- Let’s get started!
-
diff --git a/src/icons/onboarding/GetStartedLogo.js b/src/icons/onboarding/GetStartedLogo.js
new file mode 100644
index 00000000..cce003ad
--- /dev/null
+++ b/src/icons/onboarding/GetStartedLogo.js
@@ -0,0 +1,79 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+
+)