From f8190addb944c1ac05d6ba54a88ec090cc56acaa Mon Sep 17 00:00:00 2001 From: Anastasia Poupeney Date: Thu, 14 Jun 2018 15:44:04 +0200 Subject: [PATCH] some onboarding changes, minor changes for input password, breadcrumb --- src/components/AccountPage/index.js | 8 ++- src/components/Breadcrumb/Step.js | 8 ++- src/components/Onboarding/helperComponents.js | 5 ++ src/components/Onboarding/steps/Analytics.js | 25 ++----- .../Onboarding/steps/GenuineCheck.js | 68 +++++++++++-------- src/components/Onboarding/steps/Init.js | 5 +- .../Onboarding/steps/SelectDevice.js | 11 ++- .../Onboarding/steps/SelectPIN/index.js | 8 +-- .../Onboarding/steps/SetPassword.js | 10 +-- .../Onboarding/steps/WriteSeed/index.js | 8 +-- src/components/base/InputPassword/index.js | 3 +- src/icons/EyeOff.js | 16 +++++ static/i18n/en/onboarding.yml | 8 +-- 13 files changed, 104 insertions(+), 79 deletions(-) create mode 100644 src/icons/EyeOff.js diff --git a/src/components/AccountPage/index.js b/src/components/AccountPage/index.js index 6486ffaf..312c6d35 100644 --- a/src/components/AccountPage/index.js +++ b/src/components/AccountPage/index.js @@ -130,9 +130,11 @@ class AccountPage extends PureComponent { )} t('app:account.settings.title')}> openModal(MODAL_SETTINGS_ACCOUNT, { account })}> - - - + diff --git a/src/components/Breadcrumb/Step.js b/src/components/Breadcrumb/Step.js index 9460b122..f2a19852 100644 --- a/src/components/Breadcrumb/Step.js +++ b/src/components/Breadcrumb/Step.js @@ -35,7 +35,13 @@ const StepNumber = styled(Box).attrs({ ff: 'Rubik|Regular', })` border-radius: 50%; - border: 1px solid ${p => (['active', 'valid'].includes(p.status) ? colors.wallet : colors.fog)}; + border: 1px solid + ${p => + ['active', 'valid'].includes(p.status) + ? colors.wallet + : p.status === 'error' + ? colors.alertRed + : colors.fog}; font-size: 10px; height: ${RADIUS}px; line-height: 10px; diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index 49359da5..f2a2986f 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -32,6 +32,11 @@ export const Inner = styled(Box).attrs({ flow: 4, })`` +export const FixedTopContainer = styled(Box).attrs({ + sticky: true, + mt: 170, + backgroundColor: 'red', +})`` // FOOTER export const OnboardingFooter = styled(Box).attrs({ px: 5, diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js index 7a771da6..40969dc8 100644 --- a/src/components/Onboarding/steps/Analytics.js +++ b/src/components/Onboarding/steps/Analytics.js @@ -6,7 +6,7 @@ import { connect } from 'react-redux' import { saveSettings } from 'actions/settings' import Box from 'components/base/Box' import CheckBox from 'components/base/CheckBox' -import { Title, Description } from '../helperComponents' +import { Title, Description, FixedTopContainer } from '../helperComponents' import OnboardingFooter from '../OnboardingFooter' import type { StepProps } from '..' @@ -15,13 +15,11 @@ const mapDispatchToProps = { saveSettings } type State = { analyticsToggle: boolean, - termsConditionsToggle: boolean, sentryLogsToggle: boolean, } const INITIAL_STATE = { analyticsToggle: true, - termsConditionsToggle: false, sentryLogsToggle: true, } @@ -40,9 +38,6 @@ class Analytics extends PureComponent { shareAnalytics: isChecked, }) } - handleTermsToggle = () => { - this.setState({ termsConditionsToggle: !this.state.termsConditionsToggle }) - } handleNavBack = () => { const { savePassword, prevStep } = this.props @@ -52,11 +47,11 @@ class Analytics extends PureComponent { render() { const { nextStep, t } = this.props - const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state + const { analyticsToggle, sentryLogsToggle } = this.state return ( - - + + {t('onboarding:analytics.title')} {t('onboarding:analytics.desc')} @@ -78,15 +73,6 @@ class Analytics extends PureComponent { - - - {t('onboarding:analytics.termsConditions.title')} - {t('onboarding:analytics.termsConditions.desc')} - - - - - { t={t} nextStep={nextStep} prevStep={this.handleNavBack} - isContinueDisabled={!termsConditionsToggle} /> - + ) } } diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index f4452c20..d7fcc5e9 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -19,7 +19,7 @@ import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError' import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError' import IconCheck from 'icons/Check' -import { Title, Description, IconOptionRow } from '../helperComponents' +import { Title, Description, IconOptionRow, FixedTopContainer } from '../helperComponents' import type { StepProps } from '..' import OnboardingFooter from '../OnboardingFooter' @@ -120,8 +120,8 @@ class GenuineCheck extends PureComponent { } return ( - - + + {t('onboarding:genuineCheck.title')} {t('onboarding:genuineCheck.desc')} @@ -150,11 +150,13 @@ class GenuineCheck extends PureComponent { - this.handleButtonPass(item, 'recoveryStepPass')} - /> + {genuine.pinStepPass && ( + this.handleButtonPass(item, 'recoveryStepPass')} + /> + )} @@ -166,24 +168,26 @@ class GenuineCheck extends PureComponent { {t('onboarding:genuineCheck.steps.step3.title')} - - {genuine.isDeviceGenuine ? ( - - - - {t('onboarding:genuineCheck.isGenuinePassed')} - - - ) : ( - - )} - + {genuine.recoveryStepPass && ( + + {genuine.isDeviceGenuine ? ( + + + + {t('onboarding:genuineCheck.isGenuinePassed')} + + + ) : ( + + )} + + )} @@ -201,7 +205,7 @@ class GenuineCheck extends PureComponent { onClose={this.handleCloseGenuineCheckModal} onGenuineCheck={this.handleGenuineCheck} /> - + ) } } @@ -249,7 +253,7 @@ export function GenuineCheckFail({ - + ) } } diff --git a/src/components/Onboarding/steps/WriteSeed/index.js b/src/components/Onboarding/steps/WriteSeed/index.js index e0306307..0933233e 100644 --- a/src/components/Onboarding/steps/WriteSeed/index.js +++ b/src/components/Onboarding/steps/WriteSeed/index.js @@ -9,15 +9,15 @@ import OnboardingFooter from '../../OnboardingFooter' import WriteSeedNano from './WriteSeedNano' import WriteSeedBlue from './WriteSeedBlue' import WriteSeedRestore from './WriteSeedRestore' - +import { FixedTopContainer } from '../../helperComponents' import type { StepProps } from '../..' export default (props: StepProps) => { const { nextStep, prevStep, t, onboarding } = props return ( - - + + {onboarding.flowType === 'restoreDevice' ? ( ) : onboarding.isLedgerNano ? ( @@ -34,6 +34,6 @@ export default (props: StepProps) => { nextStep={nextStep} prevStep={prevStep} /> - + ) } diff --git a/src/components/base/InputPassword/index.js b/src/components/base/InputPassword/index.js index 5046821c..b6784878 100644 --- a/src/components/base/InputPassword/index.js +++ b/src/components/base/InputPassword/index.js @@ -14,6 +14,7 @@ import Box from 'components/base/Box' import Input from 'components/base/Input' import IconEye from 'icons/Eye' +import IconEyeOff from 'icons/EyeOff' const InputRight = styled(Box).attrs({ color: 'grey', @@ -99,7 +100,7 @@ class InputPassword extends PureComponent { onChange={this.handleChange} renderRight={ - + {inputType === 'password' ? : } } /> diff --git a/src/icons/EyeOff.js b/src/icons/EyeOff.js new file mode 100644 index 00000000..32ce5294 --- /dev/null +++ b/src/icons/EyeOff.js @@ -0,0 +1,16 @@ +// @flow + +import React from 'react' + +const path = ( + +) + +export default ({ size, ...p }: { size: number }) => ( + + {path} + +) diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml index c7705492..7139a669 100644 --- a/static/i18n/en/onboarding.yml +++ b/static/i18n/en/onboarding.yml @@ -44,14 +44,14 @@ writeSeed: title: Save your recovery phrase desc: Your recovery phrase is formed by 24 words. They will be displayed only once. step1: Press the right button to select the length of your recovery phrase. Press both buttons to confirm. - step2: Select the first letters of Word \#1 by pressing the right or left button. Press both buttons to confirm each letter. - step3: Select Word \#1 from the suggested words. Press both buttons to continue. + step2: 'Select the first letters of Word #1 by pressing the right or left button. Press both buttons to confirm each letter.' + step3: 'Select Word #1 from the suggested words. Press both buttons to continue.' step4: Repeat the process until the last word. nano: title: Save your recovery phrase desc: Your recovery phrase is formed by 24 words. They will be displayed only once. - 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. + 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. blue: title: Save your recovery phrase