Browse Source

Merge pull request #424 from NastiaS/polish

icon adjustment on onboarding init step and removal of decriptions
master
NastiaS 7 years ago
committed by GitHub
parent
commit
9721f7db90
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 30
      src/components/Onboarding/steps/Init.js
  2. 2
      static/i18n/en/onboarding.yml

30
src/components/Onboarding/steps/Init.js

@ -23,28 +23,24 @@ export default (props: StepProps) => {
key: 'newDevice',
icon: <IconAdd size={16} />,
title: t('onboarding:init.newDevice.title'),
desc: t('onboarding:init.newDevice.desc'),
onClick: () => nextStep(),
},
{
key: 'restoreDevice',
icon: <IconRecover size={16} />,
title: t('onboarding:init.restoreDevice.title'),
desc: t('onboarding:init.restoreDevice.desc'),
onClick: () => jumpStep('choosePIN'),
},
{
key: 'initializedDevice',
icon: <IconCheck size={16} />,
title: t('onboarding:init.initializedDevice.title'),
desc: t('onboarding:init.initializedDevice.desc'),
onClick: () => jumpStep('choosePIN'),
},
{
key: 'noDevice',
icon: <IconExternalLink size={16} />,
title: t('onboarding:init.noDevice.title'),
desc: t('onboarding:init.noDevice.desc'),
onClick: () => shell.openExternal('https://www.ledger.fr/'),
},
]
@ -55,7 +51,7 @@ export default (props: StepProps) => {
<Box color="wallet">
<IconUser size={36} />
</Box>
<Box style={{ padding: 20, maxWidth: 650 }}>
<Box p={4} style={{ maxWidth: 550 }} textAlign="center">
<Title>{t('onboarding:init.title')}</Title>
</Box>
<Box mt={5} flow={5}>
@ -68,13 +64,12 @@ export default (props: StepProps) => {
type CardType = {
icon: any,
desc: any,
title: any,
onClick: Function,
}
export function OptionFlowCard({ card }: { card: CardType }) {
const { icon, desc, title, onClick } = card
const { icon, title, onClick } = card
return (
<Card
horizontal
@ -87,12 +82,13 @@ export function OptionFlowCard({ card }: { card: CardType }) {
}}
onClick={onClick}
>
<Box justify="center" style={{ width: 50, color: colors.wallet }}>
{icon}
<Box justify="center" style={{ color: colors.wallet }}>
<Container mr={4} justify="center">
{icon}
</Container>
</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} />
@ -101,14 +97,16 @@ export function OptionFlowCard({ card }: { card: CardType }) {
)
}
export const CardDescription = styled(Box).attrs({
ff: 'Open Sans|Regular',
fontSize: 4,
textAlign: 'left',
color: 'grey',
})``
export const CardTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold',
fontSize: 4,
textAlign: 'left',
})``
const Container = styled(Box).attrs({})`
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(100, 144, 241, 0.1);
text-align: -webkit-center;
`

2
static/i18n/en/onboarding.yml

@ -2,7 +2,7 @@ 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
title: Welcome to Ledger Live, the computer companion app to your Ledger device
newDevice:
title: Initialize your new Ledger device
desc: Please replace it with the final wording once it’s done.

Loading…
Cancel
Save