lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

wip start slide and options slide

master
NastiaS 7 years ago
parent
3b4c67cb1c
commit
3fe79d0854
3 changed files with 175 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 156
      src/components/Onboarding/steps/Init.js
  2. 13
      src/components/Onboarding/steps/Start.js
  3. 79
      src/icons/onboarding/GetStartedLogo.js

156
src/components/Onboarding/steps/Init.js
View File

@ -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: <IconUser size={22} />,
title: 'Initialize your new Ledger device',
desc: 'Please replace it with the final wording once it’s done.',
onClick: () => nextStep(),
},
{
key: 'restoreDevice',
icon: <IconUser size={22} />,
title: 'Restore a Ledger device',
desc: 'Please replace it with the final wording once it’s done.',
onClick: () => jumpStep('choosePIN'),
},
{
key: 'initializedDevice',
icon: <IconUser size={22} />,
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: <IconUser size={22} />,
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 (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center">
<Title>This is the title of the screen. 1 line is the maximum</Title>
<Description>
This is a long text, please replace it with the final wording once it’s done.
<br />
Lorem ipsum dolor amet ledger lorem dolor ipsum amet
</Description>
<Box style={{ paddingBottom: 10 }}>
<Inner>
<DeviceContainer onClick={() => nextStep()}>
{/* colors are temp, we don't have icons now */}
<DeviceIcon style={{ color: '#66be54' }}>
<IconUser size={24} />
</DeviceIcon>
<TrackChoiceTitle>Clean Nano S setup</TrackChoiceTitle>
<Description>Please replace it with the final wording once it’s done.</Description>
</DeviceContainer>
<DeviceContainer onClick={() => jumpStep('choosePIN')}>
<DeviceIcon style={{ color: '#66be54' }}>
<IconUser size={24} />
</DeviceIcon>
<TrackChoiceTitle>Existing seed + Clean setup</TrackChoiceTitle>
<Description>Please replace it with the final wording once it’s done.</Description>
</DeviceContainer>
</Inner>
<Box color="wallet">
<IconUser size={36} />
</Box>
<Box>
<Inner>
<DeviceContainer onClick={() => nextStep()}>
<DeviceIcon style={{ color: '#6490f1' }}>
<IconUser size={24} />
</DeviceIcon>
<TrackChoiceTitle>Migrate accounts</TrackChoiceTitle>
<Description>Please replace it with the final wording once it’s done.</Description>
</DeviceContainer>
<DeviceContainer onClick={handleOpenLink('https://www.ledger.fr/')}>
<DeviceIcon style={{ color: '#ea2e41' }}>
<IconUser size={24} />
</DeviceIcon>
<TrackChoiceTitle>Not a user, but would love to</TrackChoiceTitle>
<Description>Please replace it with the final wording once it’s done.</Description>
</DeviceContainer>
</Inner>
<Box style={{ padding: 20, maxWidth: 650 }}>
<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>
</Box>
)
}
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 (
<Card
horizontal
p={5}
style={{
cursor: 'pointer',
border: 'solid 1px #d8d8d8',
minWidth: '533px',
maxHeight: '80px',
}}
onClick={onClick}
>
<Box justify="center" color="grey" style={{ width: 50 }}>
{icon}
</Box>
<Box ff="Open Sans|Regular" justify="center" fontSize={4} grow>
<CardTitle>{title}</CardTitle>
<CardDescription>{desc}</CardDescription>
</Box>
<Box justify="center" color="grey">
<IconChevronRight size={22} />
</Box>
</Card>
)
}
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',
})``

13
src/components/Onboarding/steps/Start.js
View File

@ -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 (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center" alignItems="center">
<LedgerLogo size={136} />
<Title>Ledger Live</Title>
<Title>Welcome to the new Ledger Live Desktop app.</Title>
<Description>Let’s get started!</Description>
<Button small primary onClick={() => jumpStep('init')}>
<IconGetStarted />
<Box style={{ paddingTop: '20px' }}>
<Title>Welcome to the new Ledger Live Desktop app.</Title>
<Description>Let’s get started!</Description>
</Box>
<Button primary onClick={() => jumpStep('init')}>
Get Started
</Button>
</Box>

79
src/icons/onboarding/GetStartedLogo.js
View File

@ -0,0 +1,79 @@
// @flow
import React from 'react'
export default () => (
<svg width="113" height="109">
<g fill="none" fillRule="evenodd">
<rect
width="1.44"
height="5.6"
y="16.6"
fill="#1D2028"
rx=".72"
transform="matrix(-1 0 0 1 1.44 0)"
/>
<rect
width="1.44"
height="5.6"
y="34.8"
fill="#1D2028"
rx=".72"
transform="matrix(-1 0 0 1 1.44 0)"
/>
<path
fill="#6490F1"
fillOpacity=".1"
stroke="#1D2028"
strokeWidth="2"
d="M16.592 12c.225 0 .408.183.408.408v95.184a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V12.408c0-.225.183-.408.408-.408h14.464z"
/>
<rect
width="7.64"
height="27"
x="5.513"
y="18.522"
fill="#FFF"
stroke="#6490F1"
rx=".704"
transform="matrix(-1 0 0 1 18.665 0)"
/>
<path
fill="#FFF"
stroke="#1D2028"
strokeWidth="2"
d="M9.36 54A7.64 7.64 0 0 1 17 61.64v45.952a.408.408 0 0 1-.408.408H2.128a.408.408 0 0 1-.408-.408V61.64A7.64 7.64 0 0 1 9.36 54z"
/>
<ellipse
cx="9.36"
cy="61.4"
fill="#FFF"
stroke="#6490F1"
rx="3.82"
ry="3.7"
transform="matrix(-1 0 0 1 18.72 0)"
/>
<rect width="3.137" height="9.306" x="109.863" y="13.959" fill="#1D2028" rx="1.569" />
<rect
width="76.431"
height="106.571"
x="34"
y="1"
fill="#6490F1"
fillOpacity=".1"
stroke="#1D2027"
strokeWidth="2"
rx="5.44"
/>
<rect
width="52.333"
height="79.653"
x="46.043"
y="15.235"
fill="#FFF"
stroke="#6490F1"
rx="4.08"
/>
</g>
</svg>
)
Write Preview
Loading…
Cancel
Save