diff --git a/src/components/AccountPage/EmptyStateAccount.js b/src/components/AccountPage/EmptyStateAccount.js index b4457fb8..9dbaae0e 100644 --- a/src/components/AccountPage/EmptyStateAccount.js +++ b/src/components/AccountPage/EmptyStateAccount.js @@ -43,11 +43,11 @@ class EmptyStateAccount extends PureComponent { {t('app:account.emptyState.title')} - Make sure the + {'Make sure the'} {account.currency.name} - app is installed to receive funds. + {'app is installed to receive funds.'} +

{'Flashing MCU'}

+ ) } diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index 5f39897b..a45ca150 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -52,17 +52,31 @@ export const OnboardingFooterWrapper = styled(Box).attrs({ border-bottom-left-radius: ${radii[1]}px; border-bottom-right-radius: ${radii[1]}px; ` +// LIVE LOGO +export function LiveLogo({ icon, ...p }: { icon: any }) { + return {icon} +} +export const LiveLogoContainer = styled(Box).attrs({ + borderRadius: '50%', + alignItems: 'center', + justifyContent: 'center', +})` + box-shadow: 0 2px 24px 0 #00000014; + width: ${p => (p.width ? p.width : 80)} + height: ${p => (p.height ? p.height : 80)} + +` // INSTRUCTION LIST type StepType = { icon: any, - desc: string, + desc: any, } -export function OptionRow({ step }: { step: StepType }) { +export function OptionRow({ step, ...p }: { step: StepType }) { const { icon, desc } = step return ( - {icon} + {icon} {desc} @@ -91,7 +105,7 @@ export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any - {disclaimerNotes.map(note => )} + {disclaimerNotes.map(note => )} ) diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js index e582d708..2fb41697 100644 --- a/src/components/Onboarding/steps/Finish.js +++ b/src/components/Onboarding/steps/Finish.js @@ -3,18 +3,19 @@ import React from 'react' import { shell } from 'electron' import styled from 'styled-components' +import { i } from 'helpers/staticPath' import Box from 'components/base/Box' import Button from 'components/base/Button' import ConfettiParty from 'components/ConfettiParty' -import IconCheckCircle from 'icons/CheckCircle' +import IconCheckFull from 'icons/CheckFull' import IconSocialTwitter from 'icons/Twitter' import IconSocialReddit from 'icons/Reddit' import IconSocialGithub from 'icons/Github' import type { StepProps } from '..' -import { Title, Description } from '../helperComponents' +import { Title, Description, LiveLogo } from '../helperComponents' const ConfettiLayer = styled.div` position: absolute; @@ -55,9 +56,16 @@ export default (props: StepProps) => { - - + + } + /> + + + + {t('onboarding:finish.title')} {t('onboarding:finish.desc')} diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index ea503497..90c53095 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -13,7 +13,7 @@ import IconCheck from 'icons/Check' import IconExternalLink from 'icons/ExternalLink' import IconChevronRight from 'icons/ChevronRight' import { i } from 'helpers/staticPath' -import { Title } from '../helperComponents' +import { Title, LiveLogo } from '../helperComponents' import type { StepProps } from '..' @@ -65,9 +65,10 @@ class Init extends PureComponent { return ( - - - + } + /> {t('onboarding:init.title')} diff --git a/src/components/Onboarding/steps/NoDevice.js b/src/components/Onboarding/steps/NoDevice.js index f63ad96f..c74c336c 100644 --- a/src/components/Onboarding/steps/NoDevice.js +++ b/src/components/Onboarding/steps/NoDevice.js @@ -2,14 +2,14 @@ import React, { PureComponent } from 'react' import { shell } from 'electron' +import { i } from 'helpers/staticPath' import Box from 'components/base/Box' -import IconUser from 'icons/User' import IconCart from 'icons/Cart' import IconTruck from 'icons/Truck' import IconInfoCircle from 'icons/InfoCircle' import Button from '../../base/Button/index' -import { Title, OnboardingFooterWrapper } from '../helperComponents' +import { Title, OnboardingFooterWrapper, LiveLogo } from '../helperComponents' import { OptionFlowCard } from './Init' import type { StepProps } from '..' @@ -48,9 +48,10 @@ class NoDevice extends PureComponent { return ( - - - + } + /> {t('onboarding:noDevice.title')} diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js index 21611255..e612ee73 100644 --- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js @@ -1,10 +1,11 @@ // @flow import React, { PureComponent } from 'react' -import { translate } from 'react-i18next' +import { translate, Trans } from 'react-i18next' import { colors } from 'styles/theme' import { i } from 'helpers/staticPath' import Box from 'components/base/Box' +import Text from 'components/base/Text' import type { T } from 'types/common' @@ -29,7 +30,16 @@ class SelectPIN extends PureComponent { { key: 'step2', icon: {'2.'}, - desc: t('onboarding:selectPIN.initialize.instructions.blue.step2'), + desc: ( + + + {'Tap on'} + + {'Configure as new device'} + + + + ), }, { key: 'step3', diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js index 9db95c4e..00a35774 100644 --- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js @@ -1,10 +1,11 @@ // @flow import React, { PureComponent } from 'react' -import { translate } from 'react-i18next' +import { translate, Trans } from 'react-i18next' import { colors } from 'styles/theme' import { i } from 'helpers/staticPath' import Box from 'components/base/Box' +import Text from 'components/base/Text' import type { T } from 'types/common' @@ -34,7 +35,16 @@ class SelectPINnano extends PureComponent { { key: 'step3', icon: {'3.'}, - desc: t('onboarding:selectPIN.initialize.instructions.nano.step3'), + desc: ( + + + {'Press the right button to select'} + + {'Configure as new device'} + + + + ), }, { key: 'step4', diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js index 0ff30312..18566798 100644 --- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js @@ -1,10 +1,11 @@ // @flow import React, { PureComponent } from 'react' -import { translate } from 'react-i18next' +import { translate, Trans } from 'react-i18next' import { colors } from 'styles/theme' import { i } from 'helpers/staticPath' import Box from 'components/base/Box' +import Text from 'components/base/Text' import type { T } from 'types/common' @@ -29,7 +30,16 @@ class SelectPINrestoreBlue extends PureComponent { { key: 'step2', icon: {'2.'}, - desc: t('onboarding:selectPIN.restore.instructions.blue.step2'), + desc: ( + + + {'Tap on'} + + {'Restore configuration'} + + + + ), }, { key: 'step3', diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js index addacd63..1d3302f8 100644 --- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js +++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js @@ -1,10 +1,11 @@ // @flow import React, { PureComponent } from 'react' -import { translate } from 'react-i18next' +import { translate, Trans } from 'react-i18next' import { colors } from 'styles/theme' import { i } from 'helpers/staticPath' import Box from 'components/base/Box' +import Text from 'components/base/Text' import type { T } from 'types/common' @@ -34,7 +35,20 @@ class SelectPINrestoreNano extends PureComponent { { key: 'step3', icon: {'3.'}, - desc: t('onboarding:selectPIN.restore.instructions.nano.step3'), + desc: ( + + + {'Press the left button to cancel'} + + {'Initialize as new device?'} + + {'Press the right button to select'} + + {'Restore configuration?'} + + + + ), }, { key: 'step4', diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js index c419be90..97f62d50 100644 --- a/src/components/Onboarding/steps/Start.js +++ b/src/components/Onboarding/steps/Start.js @@ -7,15 +7,18 @@ import Box from 'components/base/Box' import Button from 'components/base/Button' import type { StepProps } from '..' -import { Title } from '../helperComponents' +import { Title, LiveLogo } from '../helperComponents' export default (props: StepProps) => { const { jumpStep, t } = props return ( - - + } + /> + {t('onboarding:start.title')}