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

Merge pull request #332 from NastiaS/onboarding 

minor visual fixes and placeholders
master
Meriadec Pillet 7 years ago
committed by GitHub
parent
b53ee2f8b0 cf28e46608
commit
58d14b7ff7
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 230 additions and 84 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. 42
      src/components/Onboarding/steps/Analytics.js
  2. 73
      src/components/Onboarding/steps/GenuineCheck.js
  3. 46
      src/components/Onboarding/steps/SetPassword.js
  4. 81
      src/icons/onboarding/Analytics.js
  5. 63
      src/icons/onboarding/SetPassword.js
  6. 9
      static/i18n/en/onboarding.yml

42
src/components/Onboarding/steps/Analytics.js
View File

@ -4,29 +4,25 @@ import React from 'react'
import styled from 'styled-components'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import IconAnalytics from 'icons/LockScreen'
import IconAnalytics from 'icons/onboarding/Analytics'
import CheckBox from 'components/base/CheckBox'
import { Title, Description, OnboardingFooter } from '../helperComponents'
import { Title, Description } from '../helperComponents'
import OnboardingFooter from '../OnboardingFooter'
import type { StepProps } from '..'
export default (props: StepProps) => {
const { nextStep, prevStep } = props
const { nextStep, prevStep, t } = props
return (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center">
<Title>This is ANALYTICS 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>
<DeviceIcon>
<IconAnalytics size={136} />
<Box sticky>
<Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:analytics.title')}</Title>
<Description style={{ maxWidth: 714 }}>{t('onboarding:analytics.desc')}</Description>
<DeviceIcon style={{ padding: 15 }}>
<IconAnalytics />
</DeviceIcon>
<Box horizontal flow={2} align="center">
<CheckBox isChecked />
<CheckBox isChecked={false} />
<AnalyticsText>
This is a long text, please replace it with the final wording once it’s done.
<br />
@ -42,14 +38,14 @@ export default (props: StepProps) => {
</AnalyticsText>
</Box>
</Box>
<OnboardingFooter horizontal align="center" justify="flex-end" flow={2}>
<Button small outline onClick={() => prevStep()}>
Go Back
</Button>
<Button small primary onClick={() => nextStep()}>
Continue
</Button>
</OnboardingFooter>
<OnboardingFooter
horizontal
align="center"
flow={2}
t={t}
nextStep={nextStep}
prevStep={prevStep}
/>
</Box>
)
}

73
src/components/Onboarding/steps/GenuineCheck.js
View File

@ -5,9 +5,10 @@ import React, { PureComponent } from 'react'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import { Title, Description, OnboardingFooter } from '../helperComponents'
import { Title, Description } from '../helperComponents'
import type { StepProps } from '..'
import OnboardingFooter from '../OnboardingFooter'
type State = {
currentDevice: {
@ -37,46 +38,44 @@ class GenuineCheck extends PureComponent<StepProps, State> {
}
render() {
const { nextStep, prevStep, jumpStep } = this.props
const { nextStep, prevStep, t } = this.props
const { showDeviceInfo, currentDevice, showError } = this.state
return (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center">
<Title>This is GENUINE CHECK 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>
<Button big primary onClick={() => this.handleCheckDevice()}>
Check your device!
</Button>
{showDeviceInfo && (
<Box>
<Description>
The manufacturer is <b>{currentDevice.manufacturer}</b>
The release number is <b>{currentDevice.release}</b>
</Description>
</Box>
)}
{showError && (
<Box>
<Description color="red">Connect your device please</Description>
<Box sticky>
<Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:genuineCheck.title')}</Title>
<Description>{t('onboarding:genuineCheck.desc')}</Description>
<Box alignItems="center" justifyContent="center">
<Title>Coming next week</Title>
<Box alignItems="center" justifyContent="center" style={{ padding: '15px' }}>
<Button big primary onClick={() => this.handleCheckDevice()}>
Check your device!
</Button>
{showDeviceInfo && (
<Box>
<Description>
The manufacturer is <b>{currentDevice.manufacturer}</b>
The release number is <b>{currentDevice.release}</b>
</Description>
</Box>
)}
{showError && (
<Box>
<Description color="red">Connect your device please</Description>
</Box>
)}
</Box>
</Box>
)}
<OnboardingFooter horizontal align="center" justify="flex-end" flow={2}>
<Button small outline onClick={() => prevStep()}>
Go Back
</Button>
<Button big danger onClick={() => jumpStep('init')}>
Test JUMP!
</Button>
<Button small primary onClick={() => nextStep()}>
Continue
</Button>
</OnboardingFooter>
</Box>
<OnboardingFooter
horizontal
align="center"
flow={2}
t={t}
nextStep={nextStep}
prevStep={prevStep}
/>
</Box>
)
}

46
src/components/Onboarding/steps/SetPassword.js
View File

@ -7,14 +7,14 @@ import { setEncryptionKey } from 'helpers/db'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import Text from 'components/base/Text'
import IconSetPassword from 'icons/LockScreen'
import IconSetPassword from 'icons/onboarding/SetPassword'
import PasswordModal from 'components/SettingsPage/PasswordModal'
import OnboardingFooter from '../OnboardingFooter'
import type { StepProps } from '..'
import { Title, Description, OnboardingFooter } from '../helperComponents'
import { Title, Description } from '../helperComponents'
type State = {
isPasswordModalOpened: boolean,
@ -49,18 +49,16 @@ class SetPassword extends PureComponent<StepProps, State> {
const { nextStep, prevStep, t } = this.props
const { isPasswordModalOpened, isPasswordEnabled } = this.state
return (
<Box sticky alignItems="center" justifyContent="center">
<Box align="center">
<Title>This is SET PASSWORD 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>
<IconSetPassword size={136} />
<Button small primary onClick={() => this.handleOpenPasswordModal()}>
Set Password
</Button>
<Box sticky>
<Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:setPassword.title')}</Title>
<Description style={{ maxWidth: 714 }}>{t('onboarding:setPassword.desc')}</Description>
<IconSetPassword />
<Box style={{ paddingTop: 35 }}>
<Button small primary onClick={() => this.handleOpenPasswordModal()}>
Set Password
</Button>
</Box>
{/* we might not be able to re-use what we have currently without modifications
the title and descriptions are not dynamic, we might need deffirent size as well */}
{isPasswordModalOpened && (
@ -74,17 +72,17 @@ class SetPassword extends PureComponent<StepProps, State> {
/>
)}
<Box onClick={() => nextStep()} style={{ padding: 15 }}>
<Text color="smoke">I do not want to set it up</Text>
<Button>Skip this step</Button>
</Box>
</Box>
<OnboardingFooter horizontal flow={2}>
<Button small outline onClick={() => prevStep()}>
Go Back
</Button>
<Button small primary onClick={() => nextStep()}>
Continue
</Button>
</OnboardingFooter>
<OnboardingFooter
horizontal
align="center"
flow={2}
t={t}
nextStep={nextStep}
prevStep={prevStep}
/>
</Box>
)
}

81
src/icons/onboarding/Analytics.js
View File

@ -0,0 +1,81 @@
// @flow
import React from 'react'
export default () => (
<svg width="136" height="52">
<g fill="none" fillRule="evenodd">
<g fill="#6490F1" fillRule="nonzero" transform="translate(50 18)">
<path
fillOpacity=".4"
d="M3.794 8.937l3.96-4.06a2.296 2.296 0 0 1-.797-.818l-3.96 4.062c.329.199.603.48.797.816z"
/>
<ellipse cx="1.856" cy="10.109" rx="1.408" ry="1.444" />
<ellipse cx="8.895" cy="2.888" rx="1.408" ry="1.444" />
<path
fillOpacity=".4"
d="M10.474 4.534l3.302 2.032c.11-.38.312-.72.58-.99l-3.302-2.033c-.11.38-.311.72-.58.99zM20.922 2.39l-3.638 2.984c.303.234.547.543.705.901l3.637-2.985a2.307 2.307 0 0 1-.704-.9z"
/>
<ellipse cx="15.935" cy="7.221" rx="1.408" ry="1.444" />
<ellipse cx="22.975" cy="1.444" rx="1.408" ry="1.444" />
<path
fillOpacity=".4"
d="M23.937 3.53l4.25 5.232c.223-.316.52-.571.866-.74l-4.251-5.231c-.222.316-.52.57-.865.74z"
/>
<ellipse cx="30.015" cy="10.109" rx="1.408" ry="1.444" />
<path
fillOpacity=".4"
d="M32.068 9.163l3.638-2.985a2.313 2.313 0 0 1-.705-.9l-3.638 2.984c.304.234.548.543.705.901z"
/>
<ellipse cx="37.054" cy="4.332" rx="1.408" ry="1.444" />
</g>
<g transform="translate(109 4)">
<path
fill="#CCC"
fillRule="nonzero"
d="M6.325 38.352l.614-.636c.254-.263.712-.233 1.023.067.31.3.356.757.102 1.02l-.614.636.643.62c.267.258.242.715-.055 1.022-.296.307-.753.348-1.019.09l-.643-.62-.614.635c-.254.264-.712.234-1.023-.066-.31-.3-.356-.757-.102-1.02l.614-.636-.643-.62c-.266-.258-.242-.715.055-1.022.296-.308.753-.348 1.02-.09l.642.62z"
/>
<ellipse cx="1.224" cy="24.349" stroke="#E2E2E2" strokeWidth=".8" rx="1.146" ry="1.133" />
<ellipse cx="21.21" cy="23.216" stroke="#E2E2E2" strokeWidth=".8" rx="1.564" ry="1.546" />
<path
fill="#EEE"
fillRule="nonzero"
d="M11.558 12.189l.917-.95c.281-.291.677-.366.883-.167.206.2.145.597-.136.888l-.917.95.96.928c.295.284.375.68.178.884-.197.204-.596.139-.89-.146l-.961-.927-.917.95c-.281.29-.677.365-.883.166-.206-.2-.145-.597.136-.888l.917-.95-.96-.928c-.295-.284-.375-.68-.178-.884.197-.204.596-.139.89.146l.961.928z"
/>
<path
fill="#CCC"
fillRule="nonzero"
d="M25.03 3.01l.71-.736c.251-.26.657-.277.905-.037.249.24.246.646-.005.907l-.71.734.744.718c.263.255.285.66.047.906-.237.246-.643.239-.907-.016l-.743-.718-.71.735c-.251.26-.657.277-.906.037-.248-.24-.246-.646.006-.906l.71-.735-.744-.718c-.263-.255-.285-.66-.047-.906.237-.246.643-.238.907.016l.743.718z"
/>
</g>
<g transform="translate(1 -1)">
<path
fill="#CCC"
fillRule="nonzero"
d="M20.486 48.016l.621-.643c.257-.267.72-.238 1.033.065.314.303.36.764.102 1.03l-.621.644.648.626c.269.26.243.722-.057 1.033-.3.31-.761.352-1.03.093l-.648-.627-.622.644c-.257.266-.72.237-1.033-.066-.313-.302-.359-.764-.102-1.03l.622-.643-.649-.627c-.268-.26-.243-.721.057-1.032.3-.311.762-.353 1.03-.093l.649.626z"
/>
<ellipse cx="3.155" cy="37.389" stroke="#CCC" strokeWidth=".8" rx="3.155" ry="3.13" />
<ellipse cx="18.932" cy="29.564" stroke="#E2E2E2" strokeWidth=".8" rx="1.578" ry="1.565" />
<path
fill="#EEE"
fillRule="nonzero"
d="M9.447 16.156l1.118-1.158c.343-.356.825-.447 1.075-.205.251.242.176.726-.167 1.081l-1.118 1.158 1.167 1.128c.358.346.454.828.214 1.076-.24.249-.725.17-1.084-.176l-1.167-1.127-1.118 1.158c-.343.355-.825.447-1.075.205-.251-.242-.176-.727.167-1.082l1.118-1.158L7.41 15.93c-.358-.346-.454-.828-.214-1.077.24-.248.725-.17 1.084.176l1.167 1.128z"
/>
<path
fill="#CCC"
fillRule="nonzero"
d="M22.47 2.013l.699-.724c.214-.222.515-.28.672-.128.156.151.11.454-.105.676l-.699.724.73.704c.224.216.283.518.133.673-.15.156-.453.106-.677-.11l-.73-.704-.698.723c-.215.222-.515.28-.672.128-.157-.15-.11-.454.104-.676l.7-.723-.73-.705c-.224-.216-.284-.517-.134-.673.15-.155.453-.106.677.11l.73.705z"
/>
</g>
<g fillRule="nonzero" transform="translate(36 1)">
<ellipse cx="37.488" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<ellipse cx="33.5" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<ellipse cx="29.512" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<path
fill="#142533"
d="M65.405 40.242h-2.792V9.562c0-7.251-5.982-9.164-9.173-9.164H13.56c-3.191 0-9.173 1.913-9.173 9.165v30.68H1.595C.957 40.242.4 40.8.4 41.436c0 3.188 1.914 9.165 9.172 9.165H57.43c7.258 0 9.172-5.977 9.172-9.164 0-.638-.558-1.196-1.196-1.196zM6.78 9.562c0-6.534 6.062-6.773 6.78-6.773h39.88c.718 0 6.78.24 6.78 6.774v30.68H6.78V9.562zm50.649 38.649H9.57c-5.025 0-6.3-3.586-6.7-5.578h61.18c-.32 1.912-1.595 5.578-6.62 5.578z"
/>
</g>
</g>
</svg>
)

63
src/icons/onboarding/SetPassword.js
View File

@ -0,0 +1,63 @@
// @flow
import React from 'react'
export default () => (
<svg width="136" height="52">
<g fill="none" fillRule="evenodd">
<g fillRule="nonzero">
<g transform="translate(36 1)">
<ellipse cx="37.488" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<ellipse cx="33.5" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<ellipse cx="29.512" cy="45.422" fill="#000" rx="1.037" ry="1.036" />
<path
fill="#142533"
d="M65.405 40.242h-2.792V9.562c0-7.251-5.982-9.164-9.173-9.164H13.56c-3.191 0-9.173 1.913-9.173 9.165v30.68H1.595C.957 40.242.4 40.8.4 41.436c0 3.188 1.914 9.165 9.172 9.165H57.43c7.258 0 9.172-5.977 9.172-9.164 0-.638-.558-1.196-1.196-1.196zM6.78 9.562c0-6.534 6.062-6.773 6.78-6.773h39.88c.718 0 6.78.24 6.78 6.774v30.68H6.78V9.562zm50.649 38.649H9.57c-5.025 0-6.3-3.586-6.7-5.578h61.18c-.32 1.912-1.595 5.578-6.62 5.578z"
/>
</g>
<g fill="#6490F1">
<path d="M74.189 20.125c0-.16.08-.319.08-.478V16.38c0-1.833-1.524-3.427-3.448-3.427h-2.005c-1.844 0-3.448 1.514-3.448 3.427v3.267c0 .16 0 .319.08.478-1.763.16-3.127 1.594-3.127 3.347v6.773c0 1.833 1.524 3.427 3.448 3.427h8.26c1.844 0 3.447-1.514 3.447-3.427v-6.773c-.08-1.753-1.523-3.188-3.287-3.347zM67.854 16.3c0-.558.481-1.036 1.043-1.036H70.9c.561 0 1.043.478 1.043 1.036v3.267c0 .16-.08.319-.16.478h-3.69c-.08-.16-.16-.318-.16-.478l-.08-3.267zm7.136 14.025c0 .558-.48 1.036-1.042 1.036H65.77a1.058 1.058 0 0 1-1.042-1.036v-6.773c0-.558.481-1.036 1.042-1.036h8.26c.56 0 1.042.478 1.042 1.036l-.08 6.773z" />
<path d="M69.899 24.11c-.638 0-1.197.548-1.197 1.175v2.43c0 .627.559 1.176 1.197 1.176s1.196-.549 1.196-1.176v-2.43c0-.705-.558-1.176-1.196-1.176z" />
</g>
</g>
<g transform="translate(109 4)">
<path
fill="#CCC"
fillRule="nonzero"
d="M6.325 38.352l.614-.636c.254-.263.712-.233 1.023.067.31.3.356.757.102 1.02l-.614.636.643.62c.267.258.242.715-.055 1.022-.296.307-.753.348-1.019.09l-.643-.62-.614.635c-.254.264-.712.234-1.023-.066-.31-.3-.356-.757-.102-1.02l.614-.636-.643-.62c-.266-.258-.242-.715.055-1.022.296-.308.753-.348 1.02-.09l.642.62z"
/>
<ellipse cx="1.224" cy="24.349" stroke="#E2E2E2" strokeWidth=".8" rx="1.146" ry="1.133" />
<ellipse cx="21.21" cy="23.216" stroke="#E2E2E2" strokeWidth=".8" rx="1.564" ry="1.546" />
<path
fill="#EEE"
fillRule="nonzero"
d="M11.558 12.189l.917-.95c.281-.291.677-.366.883-.167.206.2.145.597-.136.888l-.917.95.96.928c.295.284.375.68.178.884-.197.204-.596.139-.89-.146l-.961-.927-.917.95c-.281.29-.677.365-.883.166-.206-.2-.145-.597.136-.888l.917-.95-.96-.928c-.295-.284-.375-.68-.178-.884.197-.204.596-.139.89.146l.961.928z"
/>
<path
fill="#CCC"
fillRule="nonzero"
d="M25.03 3.01l.71-.736c.251-.26.657-.277.905-.037.249.24.246.646-.005.907l-.71.734.744.718c.263.255.285.66.047.906-.237.246-.643.239-.907-.016l-.743-.718-.71.735c-.251.26-.657.277-.906.037-.248-.24-.246-.646.006-.906l.71-.735-.744-.718c-.263-.255-.285-.66-.047-.906.237-.246.643-.238.907.016l.743.718z"
/>
</g>
<g transform="translate(1 -1)">
<path
fill="#CCC"
fillRule="nonzero"
d="M20.486 48.016l.621-.643c.257-.267.72-.238 1.033.065.314.303.36.764.102 1.03l-.621.644.648.626c.269.26.243.722-.057 1.033-.3.31-.761.352-1.03.093l-.648-.627-.622.644c-.257.266-.72.237-1.033-.066-.313-.302-.359-.764-.102-1.03l.622-.643-.649-.627c-.268-.26-.243-.721.057-1.032.3-.311.762-.353 1.03-.093l.649.626z"
/>
<ellipse cx="3.155" cy="37.389" stroke="#CCC" strokeWidth=".8" rx="3.155" ry="3.13" />
<ellipse cx="18.932" cy="29.564" stroke="#E2E2E2" strokeWidth=".8" rx="1.578" ry="1.565" />
<path
fill="#EEE"
fillRule="nonzero"
d="M9.447 16.156l1.118-1.158c.343-.356.825-.447 1.075-.205.251.242.176.726-.167 1.081l-1.118 1.158 1.167 1.128c.358.346.454.828.214 1.076-.24.249-.725.17-1.084-.176l-1.167-1.127-1.118 1.158c-.343.355-.825.447-1.075.205-.251-.242-.176-.727.167-1.082l1.118-1.158L7.41 15.93c-.358-.346-.454-.828-.214-1.077.24-.248.725-.17 1.084.176l1.167 1.128z"
/>
<path
fill="#CCC"
fillRule="nonzero"
d="M22.47 2.013l.699-.724c.214-.222.515-.28.672-.128.156.151.11.454-.105.676l-.699.724.73.704c.224.216.283.518.133.673-.15.156-.453.106-.677-.11l-.73-.704-.698.723c-.215.222-.515.28-.672.128-.157-.15-.11-.454.104-.676l.7-.723-.73-.705c-.224-.216-.284-.517-.134-.673.15-.155.453-.106.677.11l.73.705z"
/>
</g>
</g>
</svg>
)

9
static/i18n/en/onboarding.yml
View File

@ -41,6 +41,15 @@ writeSeed:
step3: Repeat the process until all 24 words are copied on the Recovery sheet.
step4: To confirm, use the right or left button to select each of the 24 words in the right order.
step5: Validate each word by simultaneously pressing both buttons.
genuineCheck:
title: Check PIN / Seed / Authenticity
desc: Your Ledger Nano S should now display Your device is now ready. Before getting started, please confirm that
setPassword:
title: This is the title of the screen. 1 line is the maximum
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
analytics:
title: This is the title of the screen. 1 line is the maximum
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
finish:
title: This is the title of the screen. 1 line is the maximum
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

Write Preview
Loading…
Cancel
Save