From e13be6567ebb50b711db89a0cc1a94e82856c454 Mon Sep 17 00:00:00 2001 From: NastiaS Date: Fri, 18 May 2018 14:12:21 +0200 Subject: [PATCH] minor visual fixes and placeholders --- src/components/Onboarding/steps/Analytics.js | 42 +++++----- .../Onboarding/steps/GenuineCheck.js | 73 +++++++++-------- .../Onboarding/steps/SetPassword.js | 46 +++++------ src/icons/onboarding/Analytics.js | 81 +++++++++++++++++++ src/icons/onboarding/SetPassword.js | 63 +++++++++++++++ static/i18n/en/onboarding.yml | 9 +++ 6 files changed, 230 insertions(+), 84 deletions(-) create mode 100644 src/icons/onboarding/Analytics.js create mode 100644 src/icons/onboarding/SetPassword.js diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index 799832fa..a513d8ea 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -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 ( - - - This is ANALYTICS 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 - - - + + + {t('onboarding:analytics.title')} + {t('onboarding:analytics.desc')} + + - + This is a long text, please replace it with the final wording once it’s done.
@@ -42,14 +38,14 @@ export default (props: StepProps) => { - - - - + ) } diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index d4f69ced..d927035e 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -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 { } render() { - const { nextStep, prevStep, jumpStep } = this.props + const { nextStep, prevStep, t } = this.props const { showDeviceInfo, currentDevice, showError } = this.state return ( - - - This is GENUINE CHECK 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 - - - - {showDeviceInfo && ( - - - The manufacturer is {currentDevice.manufacturer} - The release number is {currentDevice.release} - - - )} - {showError && ( - - Connect your device please + + + {t('onboarding:genuineCheck.title')} + {t('onboarding:genuineCheck.desc')} + + Coming next week + + + {showDeviceInfo && ( + + + The manufacturer is {currentDevice.manufacturer} + The release number is {currentDevice.release} + + + )} + {showError && ( + + Connect your device please + + )} + - )} - - - - - + + ) } diff --git a/src/components/Onboarding/steps/SetPassword.js b/src/components/Onboarding/steps/SetPassword.js index 215438dd..50fb4eb3 100644 --- a/src/components/Onboarding/steps/SetPassword.js +++ b/src/components/Onboarding/steps/SetPassword.js @@ -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 { const { nextStep, prevStep, t } = this.props const { isPasswordModalOpened, isPasswordEnabled } = this.state return ( - - - This is SET PASSWORD 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 - - - + + + {t('onboarding:setPassword.title')} + {t('onboarding:setPassword.desc')} + + + + {/* 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 { /> )} nextStep()} style={{ padding: 15 }}> - I do not want to set it up + - - - - + ) } diff --git a/src/icons/onboarding/Analytics.js b/src/icons/onboarding/Analytics.js new file mode 100644 index 00000000..cf49194e --- /dev/null +++ b/src/icons/onboarding/Analytics.js @@ -0,0 +1,81 @@ +// @flow + +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/src/icons/onboarding/SetPassword.js b/src/icons/onboarding/SetPassword.js new file mode 100644 index 00000000..3f0e82ce --- /dev/null +++ b/src/icons/onboarding/SetPassword.js @@ -0,0 +1,63 @@ +// @flow + +import React from 'react' + +export default () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 53af20d7..86c585f0 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -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