some onboarding changes, minor changes for input password, breadcrumb

src/components/AccountPage/index.js

@@ -130,9 +130,11 @@ class AccountPage extends PureComponent<Props, State> {
             )}
             <Tooltip render={() => t('app:account.settings.title')}>
               <ButtonSettings onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}>
-                <Box align="center">
+                <Button small outlineGrey>
+                  <Box justifyContent="center">
                     <IconAccountSettings size={16} />
                   </Box>
+                </Button>
               </ButtonSettings>
             </Tooltip>
           </Box>

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;

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,

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<StepProps, State> {
       shareAnalytics: isChecked,
     })
   }
-  handleTermsToggle = () => {
-    this.setState({ termsConditionsToggle: !this.state.termsConditionsToggle })
-  }
 
   handleNavBack = () => {
     const { savePassword, prevStep } = this.props
@@ -52,11 +47,11 @@ class Analytics extends PureComponent<StepProps, State> {
 
   render() {
     const { nextStep, t } = this.props
-    const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state
+    const { analyticsToggle, sentryLogsToggle } = this.state
 
     return (
-      <Box sticky pt={50}>
-        <Box grow alignItems="center" justifyContent="center">
+      <FixedTopContainer>
+        <Box grow alignItems="center">
           <Title>{t('onboarding:analytics.title')}</Title>
           <Description>{t('onboarding:analytics.desc')}</Description>
           <Box mt={5}>
@@ -78,15 +73,6 @@ class Analytics extends PureComponent<StepProps, State> {
                 <CheckBox isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} />
               </Box>
             </Container>
-            <Container>
-              <Box>
-                <AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle>
-                <AnalyticsText>{t('onboarding:analytics.termsConditions.desc')}</AnalyticsText>
-              </Box>
-              <Box justifyContent="center">
-                <CheckBox isChecked={termsConditionsToggle} onChange={this.handleTermsToggle} />
-              </Box>
-            </Container>
           </Box>
         </Box>
         <OnboardingFooter
@@ -96,9 +82,8 @@ class Analytics extends PureComponent<StepProps, State> {
           t={t}
           nextStep={nextStep}
           prevStep={this.handleNavBack}
-          isContinueDisabled={!termsConditionsToggle}
         />
-      </Box>
+      </FixedTopContainer>
     )
   }
 }

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<StepProps, State> {
     }
 
     return (
-      <Box sticky pt={50}>
-        <Box grow alignItems="center" justifyContent="center">
+      <FixedTopContainer>
+        <Box grow alignItems="center">
           <Title>{t('onboarding:genuineCheck.title')}</Title>
           <Description>{t('onboarding:genuineCheck.desc')}</Description>
           <Box mt={5}>
@@ -150,11 +150,13 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                 </Box>
               </Box>
               <Box justify="center">
+                {genuine.pinStepPass && (
                   <RadioGroup
                     items={this.getButtonLabel()}
                     activeKey={cachedRecoveryStepButton}
                     onChange={item => this.handleButtonPass(item, 'recoveryStepPass')}
                   />
+                )}
               </Box>
             </CardWrapper>
           </Box>
@@ -166,6 +168,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
                 </Box>
               </Box>
+              {genuine.recoveryStepPass && (
                 <Box justify="center">
                   {genuine.isDeviceGenuine ? (
                     <Box horizontal align="center" flow={1} color={colors.wallet}>
@@ -184,6 +187,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                     </Button>
                   )}
                 </Box>
+              )}
             </CardWrapper>
           </Box>
         </Box>
@@ -201,7 +205,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
           onClose={this.handleCloseGenuineCheckModal}
           onGenuineCheck={this.handleGenuineCheck}
         />
-      </Box>
+      </FixedTopContainer>
     )
   }
 }
@@ -249,7 +253,7 @@ export function GenuineCheckFail({
       <Wrapper horizontal>
         <Button
           padded
-          outline
+          outlineGrey
           onClick={() => {
             redoGenuineCheck()
           }}
@@ -289,15 +293,21 @@ const Wrapper = styled(Box).attrs({
   border-bottom-left-radius: ${radii[1]}px;
   border-bottom-right-radius: ${radii[1]}px;
 `
-const CardWrapper = styled(Card).attrs({
+const CardWrapper = styled(Box).attrs({
   horizontal: true,
   p: 5,
+  borderRadius: '4px',
   justify: 'space-between',
 })`
   width: 580px;
   height: 74px;
+  transition: all ease-in-out 0.2s;
   border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
   pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
   background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};
   opacity: ${p => (p.isDisabled ? 0.7 : 1)};
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+  }
 `

src/components/Onboarding/steps/Init.js

@@ -64,8 +64,8 @@ class Init extends PureComponent<StepProps, *> {
     ]
 
     return (
-      <Box sticky pt={130}>
-        <Box align="center" justifyContent="center">
+      <Box sticky justifyContent="center">
+        <Box align="center">
           <Box color="wallet">
             <IconUser size={36} />
           </Box>
@@ -117,6 +117,7 @@ const InitCardContainer = styled(Box).attrs({
   border: 1px solid ${p => p.theme.colors.fog};
   width: 530px;
   height: 70px;
+  transition: all ease-in-out 0.2s;
   &:hover {
     cursor: pointer;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);

src/components/Onboarding/steps/SelectDevice.js

@@ -11,7 +11,7 @@ import Box from 'components/base/Box'
 import IconCheckCirle from 'icons/Check'
 import IconLedgerNano from 'icons/illustrations/LedgerNano'
 import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
-import { Title, Inner } from '../helperComponents'
+import { Title, Inner, FixedTopContainer } from '../helperComponents'
 import OnboardingFooter from '../OnboardingFooter'
 
 import type { StepProps } from '..'
@@ -34,9 +34,9 @@ class SelectDevice extends PureComponent<StepProps, {}> {
   render() {
     const { t, onboarding, prevStep } = this.props
     return (
-      <Box sticky>
-        <Box grow alignItems="center" justifyContent="center">
-          <Box m={5}>
+      <FixedTopContainer>
+        <Box grow alignItems="center">
+          <Box mb={5}>
             <Title>{t('onboarding:selectDevice.title')}</Title>
           </Box>
           <Box pt={4}>
@@ -66,13 +66,12 @@ class SelectDevice extends PureComponent<StepProps, {}> {
         </Box>
         <OnboardingFooter
           horizontal
-          flow={2}
           t={t}
           nextStep={this.handleContinue}
           prevStep={prevStep}
           isContinueDisabled={onboarding.isLedgerNano === null}
         />
-      </Box>
+      </FixedTopContainer>
     )
   }
 }

src/components/Onboarding/steps/SelectPIN/index.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import Box from 'components/base/Box'
 
-import { Title } from '../../helperComponents'
+import { Title, FixedTopContainer } from '../../helperComponents'
 import OnboardingFooter from '../../OnboardingFooter'
 import SelectPINnano from './SelectPINnano'
 import SelectPINblue from './SelectPINblue'
@@ -15,14 +15,14 @@ export default (props: StepProps) => {
   const { nextStep, prevStep, t, onboarding } = props
 
   return (
-    <Box sticky pt={50}>
-      <Box grow alignItems="center" justifyContent="center">
+    <FixedTopContainer>
+      <Box grow alignItems="center">
         <Title>{t('onboarding:selectPIN.title')}</Title>
         <Box align="center" mt={7}>
           {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
         </Box>
       </Box>
       <OnboardingFooter horizontal flow={2} t={t} nextStep={nextStep} prevStep={prevStep} />
-    </Box>
+    </FixedTopContainer>
   )
 }

src/components/Onboarding/steps/SetPassword.js

@@ -15,7 +15,7 @@ import IconChevronRight from 'icons/ChevronRight'
 import PasswordForm from '../../SettingsPage/PasswordForm'
 import type { StepProps } from '..'
 
-import { Title, Description, DisclaimerBox } from '../helperComponents'
+import { Title, Description, DisclaimerBox, FixedTopContainer } from '../helperComponents'
 
 type State = {
   currentPassword: string,
@@ -90,10 +90,10 @@ class SetPassword extends PureComponent<StepProps, State> {
     ]
 
     return (
-      <Box sticky pt={50}>
-        <Box grow alignItems="center" justify="center">
+      <FixedTopContainer>
+        <Box grow alignItems="center">
           <Fragment>
-            <Box mb={3} alignItems="center">
+            <Box alignItems="center">
               <Title>{t('onboarding:setPassword.title')}</Title>
               <Description style={{ maxWidth: 620 }}>
                 {t('onboarding:setPassword.desc')}
@@ -135,7 +135,7 @@ class SetPassword extends PureComponent<StepProps, State> {
             </Button>
           </Box>
         </CustomFooter>
-      </Box>
+      </FixedTopContainer>
     )
   }
 }

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 (
-    <Box sticky pt={50}>
-      <Box grow alignItems="center" justifyContent="center">
+    <FixedTopContainer>
+      <Box grow alignItems="center">
         {onboarding.flowType === 'restoreDevice' ? (
           <WriteSeedRestore />
         ) : onboarding.isLedgerNano ? (
@@ -34,6 +34,6 @@ export default (props: StepProps) => {
         nextStep={nextStep}
         prevStep={prevStep}
       />
-    </Box>
+    </FixedTopContainer>
   )
 }

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<Props, State> {
           onChange={this.handleChange}
           renderRight={
             <InputRight onClick={this.toggleInputType}>
-              <IconEye size={16} />
+              {inputType === 'password' ? <IconEye size={16} /> : <IconEyeOff size={16} />}
             </InputRight>
           }
         />

src/icons/EyeOff.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M2.502 8.393c.335.494.731.99 1.184 1.45 1.267 1.286 2.713 2.046 4.304 2.046a5.462 5.462 0 0 0 3.121-1.03c.257-.187.512-.072.708.172.195.244.256.525 0 .71A6.674 6.674 0 0 1 8 13c-1.972 0-3.698-.907-5.165-2.398a11.477 11.477 0 0 1-1.313-1.606 8.35 8.35 0 0 1-.46-.748.532.532 0 0 1 .007-.51 10.965 10.965 0 0 1 3.112-3.48.603.603 0 0 1 .818.105.538.538 0 0 1-.11.779 9.859 9.859 0 0 0-2.64 2.86c.074.12.158.251.253.391zm10.996-.786c-.335-.494-.731-.99-1.184-1.45-1.267-1.286-2.713-2.046-4.315-2.046-.368 0-.734.04-1.091.119a.585.585 0 0 1-.701-.414.555.555 0 0 1 .435-.668c.446-.1.902-.149 1.358-.148 1.972 0 3.698.907 5.165 2.398.504.512.942 1.059 1.313 1.606.225.33.378.591.46.748a.532.532 0 0 1-.007.51 10.821 10.821 0 0 1-1.328 1.868.604.604 0 0 1-.822.067.538.538 0 0 1-.07-.782c.39-.442.738-.916 1.04-1.416a9.37 9.37 0 0 0-.253-.392zm-4.426 2.29a2.225 2.225 0 0 1-3.38-1.306 2.221 2.221 0 0 1 .3-1.775L1.17 1.996a.583.583 0 1 1 .825-.825l12.833 12.833a.583.583 0 1 1-.825.825L9.072 9.896zm-2.26-2.26a1.11 1.11 0 0 0 1.44 1.44l-1.44-1.44z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

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