diff --git a/src/components/MainSideBar.js b/src/components/MainSideBar.js index 61131246..d1df4bbc 100644 --- a/src/components/MainSideBar.js +++ b/src/components/MainSideBar.js @@ -28,7 +28,7 @@ import FormattedVal from 'components/base/FormattedVal' import IconManager from 'icons/Manager' import IconPieChart from 'icons/PieChart' -import IconPlus from 'icons/Plus' +import IconCirclePlus from 'icons/CirclePlus' import IconReceive from 'icons/Receive' import IconSend from 'icons/Send' import IconExchange from 'icons/Exchange' @@ -141,7 +141,7 @@ class MainSideBar extends PureComponent { title={t('sidebar:accounts')} titleRight={ openModal('importAccounts')}> - + } items={accountsItems} diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js index 689358d3..aa6cf988 100644 --- a/src/components/Onboarding/helperComponents.js +++ b/src/components/Onboarding/helperComponents.js @@ -4,16 +4,17 @@ import styled from 'styled-components' import { radii } from 'styles/theme' import Box from 'components/base/Box' -import IconWarning from 'icons/onboarding/Warning' +import IconWarning from 'icons/Shield' // GENERAL export const Title = styled(Box).attrs({ - width: 267, - height: 27, ff: 'Museo Sans|Regular', fontSize: 7, color: 'dark', -})`` +})` + max-width: 550px; + text-align: center; +` export const Description = styled(Box).attrs({ ff: 'Museo Sans|Light', @@ -23,7 +24,7 @@ export const Description = styled(Box).attrs({ color: 'grey', })` margin: 10px auto 25px; - max-width: 550px; + max-width: 570px; ` export const Inner = styled(Box).attrs({ horizontal: true, @@ -49,9 +50,9 @@ type StepType = { export function OptionRow({ step }: { step: StepType }) { const { icon, desc } = step return ( - + {icon} - + {desc} @@ -61,9 +62,9 @@ export const OptionRowDesc = styled(Box).attrs({ ff: 'Open Sans|Regular', fontSize: 4, textAlign: 'left', - lineHeight: 1.69, color: 'smoke', - shrink: 1, + grow: true, + pl: 3, })`` export const IconOptionRow = styled(Box).attrs({ @@ -74,34 +75,30 @@ export const IconOptionRow = styled(Box).attrs({ export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any }) { return ( - - - + + + - + {disclaimerNotes.map(note => )} - + ) } + +const DisclaimerBoxContainer = styled(Box).attrs({ + shrink: 1, + grow: true, + borderRadius: '4px', + bg: '#f9f9f980', +})` + min-width: 680px; + border: 1px dashed ${p => p.theme.colors.fog}; +` +const DisclaimerBoxIconContainer = styled(Box).attrs({ + color: p => p.theme.colors.alertRed, +})` + position: absolute; + top: 0; + right: 0; +` diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index ca0515aa..5541437d 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -10,7 +10,14 @@ import type { T } from 'types/common' import type { OnboardingState } from 'reducers/onboarding' import { saveSettings } from 'actions/settings' -import { nextStep, prevStep, jumpStep, updateGenuineCheck, isLedgerNano } from 'reducers/onboarding' +import { + nextStep, + prevStep, + jumpStep, + updateGenuineCheck, + isLedgerNano, + flowType, +} from 'reducers/onboarding' import { getCurrentDevice } from 'reducers/devices' // import { unlock } from 'reducers/application' @@ -79,6 +86,7 @@ export type StepProps = { getDeviceInfo: Function, updateGenuineCheck: Function, isLedgerNano: Function, + flowType: Function, } class Onboarding extends PureComponent { @@ -113,6 +121,7 @@ class Onboarding extends PureComponent { onboarding, updateGenuineCheck, isLedgerNano, + flowType, prevStep, nextStep, jumpStep, diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js index 8427873d..c8570848 100644 --- a/src/components/Onboarding/steps/GenuineCheck.js +++ b/src/components/Onboarding/steps/GenuineCheck.js @@ -15,8 +15,8 @@ import Button from 'components/base/Button' import RadioGroup from 'components/base/RadioGroup' import GenuineCheckModal from 'components/GenuineCheckModal' -import IconLedgerNanoError from 'icons/onboarding/LedgerNanoError' -import IconLedgerBlueError from 'icons/onboarding/LedgerBlueError' +import IconLedgerNanoError from 'icons/illustrations/LedgerNanoError' +import IconLedgerBlueError from 'icons/illustrations/LedgerBlueError' import IconCheck from 'icons/Check' import { Title, Description, IconOptionRow } from '../helperComponents' diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index 9cb73d75..3270b692 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/src/components/Onboarding/steps/Init.js @@ -1,67 +1,89 @@ // @flow -import React from 'react' +import React, { PureComponent } from 'react' import { shell } from 'electron' +import { connect } from 'react-redux' import { colors } from 'styles/theme' import styled from 'styled-components' import Box, { Card } from 'components/base/Box' import IconUser from 'icons/User' -import IconAdd from 'icons/Plus' +import IconPlus from 'icons/Plus' import IconRecover from 'icons/Recover' import IconCheck from 'icons/Check' import IconExternalLink from 'icons/ExternalLink' import IconChevronRight from 'icons/ChevronRight' import { Title } from '../helperComponents' +import { flowType } from 'reducers/onboarding' + import type { StepProps } from '..' -export default (props: StepProps) => { - const { nextStep, jumpStep, t } = props - const optionCards = [ - { - key: 'newDevice', - icon: , - title: t('onboarding:init.newDevice.title'), - onClick: () => nextStep(), - }, - { - key: 'restoreDevice', - icon: , - title: t('onboarding:init.restoreDevice.title'), - onClick: () => jumpStep('choosePIN'), - }, - { - key: 'initializedDevice', - icon: , - title: t('onboarding:init.initializedDevice.title'), - onClick: () => jumpStep('choosePIN'), - }, - { - key: 'noDevice', - icon: , - title: t('onboarding:init.noDevice.title'), - onClick: () => shell.openExternal('https://www.ledger.fr/'), - }, - ] +const mapDispatchToProps = { flowType } - return ( - - - - - - - {t('onboarding:init.title')} - - - {optionCards.map(card => )} +class Init extends PureComponent { + render() { + const { nextStep, jumpStep, t } = this.props + + const optionCards = [ + { + key: 'newDevice', + icon: , + title: t('onboarding:init.newDevice.title'), + onClick: () => { + nextStep() + this.props.flowType('newDevice') + }, + }, + { + key: 'restoreDevice', + icon: , + title: t('onboarding:init.restoreDevice.title'), + onClick: () => { + nextStep() + this.props.flowType('restoreDevice') + }, + }, + { + key: 'initializedDevice', + icon: , + title: t('onboarding:init.initializedDevice.title'), + onClick: () => { + nextStep() + this.props.flowType('initializedDevice') + }, + }, + { + key: 'noDevice', + icon: , + title: t('onboarding:init.noDevice.title'), + onClick: () => { + shell.openExternal('https://www.ledger.fr/') + this.props.flowType('noDevice') + }, + }, + ] + + return ( + + + + + + + {t('onboarding:init.title')} + + + {optionCards.map(card => )} + - - ) + ) + } } +export default connect(null, mapDispatchToProps)(Init) + type CardType = { icon: any, title: any, @@ -71,39 +93,40 @@ type CardType = { export function OptionFlowCard({ card }: { card: CardType }) { const { icon, title, onClick } = card return ( - + - - {icon} - + {icon} - + {title} - - + + - + ) } +const InitCardContainer = styled(Box).attrs({ + p: 3, + horizontal: true, + borderRadius: '4px', +})` + border: 1px solid ${p => p.theme.colors.fog}; + width: 550px; + height: 70px; +` + export const CardTitle = styled(Box).attrs({ ff: 'Open Sans|SemiBold', fontSize: 4, textAlign: 'left', })`` -const Container = styled(Box).attrs({})` +const InitIconContainer = styled(Box).attrs({ + mx: 4, + my: 3, +})` width: 40px; height: 40px; border-radius: 50%; diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js index a2d59c29..3827d794 100644 --- a/src/components/Onboarding/steps/SelectDevice.js +++ b/src/components/Onboarding/steps/SelectDevice.js @@ -7,10 +7,11 @@ import { connect } from 'react-redux' import { isLedgerNano } from 'reducers/onboarding' import Box from 'components/base/Box' -import IconCheckCirle from 'icons/CheckCircle' -import IconLedgerNano from 'icons/onboarding/LedgerNano' -import IconLedgerBlue from 'icons/onboarding/LedgerBlue' -import { Title, Description, Inner } from '../helperComponents' +import IconCheckCirle from 'icons/Check' +import IconLedgerNano from 'icons/illustrations/LedgerNano' +import IconLedgerBlue from 'icons/illustrations/LedgerBlue' +import { Title, Inner } from '../helperComponents' +import { rgba } from 'styles/helpers' import type { StepProps } from '..' @@ -19,7 +20,9 @@ const mapDispatchToProps = { isLedgerNano } class SelectDevice extends PureComponent { handleIsLedgerNano = (isLedgerNano: boolean) => { this.props.isLedgerNano(isLedgerNano) - this.props.nextStep() + this.props.onboarding.flowType === 'initializedDevice' + ? this.props.jumpStep('genuineCheck') + : this.props.nextStep() } render() { const { t, onboarding } = this.props @@ -28,32 +31,27 @@ class SelectDevice extends PureComponent { {t('onboarding:selectDevice.title')} - {t('onboarding:selectDevice.desc')} - + this.handleIsLedgerNano(true)} - style={{ - position: 'relative', - }} > {onboarding.isLedgerNano && } - {t('onboarding:selectDevice.ledgerNanoCard.title')} + {t('onboarding:selectDevice.ledgerNanoCard.title')} this.handleIsLedgerNano(false)} - style={{ - position: 'relative', - }} > {!onboarding.isLedgerNano && } - {t('onboarding:selectDevice.ledgerBlueCard.title')} + {t('onboarding:selectDevice.ledgerBlueCard.title')} @@ -68,46 +66,51 @@ export default connect(null, mapDispatchToProps)(SelectDevice) const DeviceContainer = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', - position: 'relative', + relative: true, })` width: 218px; height: 204px; - border: ${props => `1px solid ${props.theme.colors.fog}`}; - &:hover, - &:focus { - opacity: 0.5; + border: ${props => `1px solid ${props.theme.colors[props.isActive ? 'wallet' : 'fog']}`}; + &:hover { cursor: pointer; + background: ${p => rgba(p.theme.colors.wallet, 0.04)}; } ` const DeviceIcon = styled(Box).attrs({ alignItems: 'center', justifyContent: 'center', - color: 'graphite', })` width: 55px; - min-height: 80px; + height: 80px; ` -export const BlockDescription = styled(Box).attrs({ - ff: 'Open Sans|Regular', - fontSize: 4, - textAlign: 'center', - color: 'grey', -})`` + export const BlockTitle = styled(Box).attrs({ ff: 'Open Sans|SemiBold', fontSize: 4, textAlign: 'center', + pt: 3, })`` export function DeviceSelected() { return ( - - - + + ) } + +const SelectDeviceIconWrapper = styled(Box).attrs({ + alignItems: 'center', + justifyContent: 'center', + color: 'white', + bg: 'wallet', +})` + border-radius: 50%; + width: 18px; + height: 18px; +` diff --git a/src/components/Onboarding/steps/SelectPIN.js b/src/components/Onboarding/steps/SelectPIN.js index 37aa0fab..d43c1cc6 100644 --- a/src/components/Onboarding/steps/SelectPIN.js +++ b/src/components/Onboarding/steps/SelectPIN.js @@ -5,8 +5,8 @@ import React, { Fragment } from 'react' import Box from 'components/base/Box' import { colors } from 'styles/theme' -import IconLedgerNanoSelectPIN from 'icons/onboarding/LedgerNanoSelectPIN' -import IconLedgerBlueSelectPIN from 'icons/onboarding/LedgerBlueSelectPIN' +import IconLedgerNanoSelectPIN from 'icons/illustrations/LedgerNanoSelectPIN' +import IconLedgerBlueSelectPIN from 'icons/illustrations/LedgerBlueSelectPIN' import IconChevronRight from 'icons/ChevronRight' import { Title, Inner, OptionRow, IconOptionRow, DisclaimerBox } from '../helperComponents' @@ -14,6 +14,7 @@ import OnboardingFooter from '../OnboardingFooter' import type { StepProps } from '..' +// TODO: adjust for different wording based on the flow type when we have wording export default (props: StepProps) => { const { nextStep, prevStep, t, onboarding } = props const stepsLedgerNano = [ @@ -74,16 +75,14 @@ export default (props: StepProps) => { }, ] return ( - + - - {t('onboarding:selectPIN.title')} - - + {t('onboarding:selectPIN.title')} + {onboarding.isLedgerNano ? ( - - + + @@ -94,8 +93,8 @@ export default (props: StepProps) => { ) : ( - - + + @@ -105,7 +104,6 @@ export default (props: StepProps) => { )} - diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js index f7de7f5c..7cc84835 100644 --- a/src/components/Onboarding/steps/Start.js +++ b/src/components/Onboarding/steps/Start.js @@ -5,19 +5,18 @@ import React from 'react' import Box from 'components/base/Box' import Button from 'components/base/Button' -import IconGetStarted from 'icons/onboarding/GetStartedLogo' +import IconGetStarted from 'icons/illustrations/GetStartedLogo' import type { StepProps } from '..' -import { Title, Description } from '../helperComponents' +import { Title } from '../helperComponents' export default (props: StepProps) => { const { jumpStep, t } = props return ( - - + + - + {t('onboarding:start.title')} - {t('onboarding:start.desc')}