diff --git a/src/components/Breadcrumb/Step.js b/src/components/Breadcrumb/Step.js index 2fa0366b..1492365a 100644 --- a/src/components/Breadcrumb/Step.js +++ b/src/components/Breadcrumb/Step.js @@ -27,12 +27,13 @@ const Wrapper = styled(Box).attrs({ const StepNumber = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', - color: 'white', + color: 'fog', bg: p => - ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'fog', + ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'white', ff: 'Rubik|Regular', })` border-radius: 50%; + border: 1px solid #d8d8d8; font-size: 10px; height: ${RADIUS}px; line-height: 10px; diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index 8b2a03e1..0fa02e69 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -4,6 +4,7 @@ import styled from 'styled-components' import { radii } from 'styles/theme' import Box from 'components/base/Box' +import IconWarning from 'icons/onboarding/Warning' // GENERAL export const Title = styled(Box).attrs({ @@ -46,20 +47,18 @@ type StepType = { icon: any, desc: string, } -export function InstructionStep({ step }: { step: StepType }) { +export function OptionRow({ step }: { step: StepType }) { const { icon, desc } = step return ( - - - {icon} - + + {icon} - {desc} + {desc} ) } -export const InstructionStepDesc = styled(Box).attrs({ +export const OptionRowDesc = styled(Box).attrs({ ff: 'Open Sans|Regular', fontSize: 4, textAlign: 'left', @@ -68,15 +67,41 @@ export const InstructionStepDesc = styled(Box).attrs({ shrink: 1, })`` -export const IconInstructionStep = styled(Box).attrs({ - width: 26, - height: 26, +export const IconOptionRow = styled(Box).attrs({ ff: 'Rubik|Regular', - textAlign: 'center', - fontSize: 3, + fontSize: 14, color: 'wallet', -})` - border-radius: 100%; - background: #6490f126; - line-height: 2; -` +})`` + +export function DisclaimerBox({ disclaimerNotes }: { disclaimerNotes: any }) { + return ( + + + + + + {disclaimerNotes.map(note => )} + + + ) +} diff --git a/src/components/Onboarding/steps/SelectPIN.js b/src/components/Onboarding/steps/SelectPIN.js index cf2c200e..c4fbf93f 100644 --- a/src/components/Onboarding/steps/SelectPIN.js +++ b/src/components/Onboarding/steps/SelectPIN.js @@ -3,14 +3,18 @@ import React from 'react' import Box from 'components/base/Box' +import { colors } from 'styles/theme' import IconSelectPIN from 'icons/onboarding/SelectPIN' +import IconChevronRight from 'icons/ChevronRight' + import { Title, Description, Inner, - InstructionStep, - IconInstructionStep, + OptionRow, + IconOptionRow, + DisclaimerBox, } from '../helperComponents' import OnboardingFooter from '../OnboardingFooter' @@ -21,42 +25,60 @@ export default (props: StepProps) => { const steps = [ { key: 'step1', - icon: 1, + icon: 1., desc: t('onboarding:selectPIN.instructions.step1'), }, { key: 'step2', - icon: 2, + icon: 2., desc: t('onboarding:selectPIN.instructions.step2'), }, { key: 'step3', - icon: 3, + icon: 3., desc: t('onboarding:selectPIN.instructions.step3'), }, { key: 'step4', - icon: 4, + icon: 4., desc: t('onboarding:selectPIN.instructions.step4'), }, ] + const disclaimerNotes = [ + { + key: 'note1', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note1'), + }, + { + key: 'note2', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note2'), + }, + { + key: 'note3', + icon: , + desc: t('onboarding:selectPIN.disclaimer.note3'), + }, + ] return ( {t('onboarding:selectPIN.title')} - {t('onboarding:selectPIN.desc')} + {t('onboarding:selectPIN.desc')} - + - - {steps.map(step => )} + + {steps.map(step => )} + { const steps = [ { key: 'step1', - icon: 1, + icon: 1., desc: t('onboarding:writeSeed.instructions.step1'), }, { key: 'step2', - icon: 2, + icon: 2., desc: t('onboarding:writeSeed.instructions.step2'), }, { key: 'step3', - icon: 3, + icon: 3., desc: t('onboarding:writeSeed.instructions.step3'), }, + ] + const disclaimerNotes = [ + { + key: 'note1', + icon: , + desc: t('onboarding:writeSeed.disclaimer.note1'), + }, { - key: 'step4', - icon: 4, - desc: t('onboarding:writeSeed.instructions.step4'), + key: 'note2', + icon: , + desc: t('onboarding:writeSeed.disclaimer.note2'), }, { - key: 'step5', - icon: 5, - desc: t('onboarding:writeSeed.instructions.step5'), + key: 'note3', + icon: , + desc: t('onboarding:writeSeed.disclaimer.note3'), }, ] return ( @@ -52,15 +62,16 @@ export default (props: StepProps) => { {t('onboarding:writeSeed.title')} {t('onboarding:writeSeed.desc')} - + - + - - {steps.map(step => )} + + {steps.map(step => )} + ( + + + + + + + +) diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index 86c585f0..25aad1eb 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -25,22 +25,29 @@ selectDevice: title: Ledger Blue desc: Please replace it with the final wording once it’s done. selectPIN: - title: Select PIN code + title: Choose your PIN code 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 instructions: - step1: Connect your Ledger Nano S to your computer using the supplied micro USB cable. - step2: Press both buttons simultaneously as instructed on your Ledger Nano S screen. - step3: Select Configure as new device on your Ledger Nano S by pressing the right button, located above the validation icon. + step1: Connect the Ledger Nano S to your computer. + step2: Press both buttons simultaneously as instructed on the screen. + step3: Press the right button to select Configure as new device. step4: Choose a PIN code between 4 and 8 digits long. + disclaimer: + note1: Choose your own PIN code. This code unlocks your device. + note2: An 8-digit PIN code offers an optimum level of security. + note3: Never use a device supplied with a PIN code and/or a 24-word recovery phrase. writeSeed: - title: 24-Word Recovery phrase - desc: The 24 words that constitute your recovery phrase will now be displayed one by one on the Ledger Nano S screen. These 24 words will be displayed only once during this initialization. + title: Save your recovery phrase + desc: Your recovery phrase is formed by 24 words. They will be displayed only once. instructions: - step1: Copy the first word (Word \#1) in position 1 on the blank Recovery sheet included in the box. - step2: Move to Word \#2 by pressing the right button, copy it in position 2 on the Recovery sheet. - 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. + step1: Copy the first word (Word \#1) in position 1 on the blank Recovery sheet. + step2: Press the right button to display Word \#2 and repeat the process until all 24 words are copied on the Recovery sheet. + step3: Confirm your recovery phrase press both buttons to validate each word displayed on the screen. + disclaimer: + note1: Carefully secure your 24 words out of sight. + note2: Ledger does not keep any backup of your 24 words. + note3: Make sure you are the sole holder of the 24-word recovery phrase. + note4: Never use a device supplied with a recovery phrase and/or a PIN code. 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