From 8def4f5571e4f665ed0313fb4b2ac3a261c0c688 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasia.poupeney@ledger.fr>
Date: Fri, 8 Jun 2018 11:36:53 +0200
Subject: [PATCH] pixel polish, a few functional fixes, some new icons
---
src/components/Onboarding/OnboardingFooter.js | 2 +-
src/components/Onboarding/helperComponents.js | 4 +-
src/components/Onboarding/steps/Analytics.js | 35 +++++------
.../Onboarding/steps/GenuineCheck.js | 61 +++++++++----------
src/components/Onboarding/steps/Init.js | 2 +-
.../Onboarding/steps/SelectDevice.js | 3 +-
.../steps/SelectPIN/SelectPINblue.js | 6 +-
src/components/base/Button/index.js | 11 ++++
.../illustrations/LedgerNanoSelectPIN.js | 1 +
.../illustrations/SensitiveOperationShield.js | 61 +++++++++++++++++++
10 files changed, 127 insertions(+), 59 deletions(-)
create mode 100644 src/icons/illustrations/SensitiveOperationShield.js
diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js
index 2e56d1f0..c2658001 100644
--- a/src/components/Onboarding/OnboardingFooter.js
+++ b/src/components/Onboarding/OnboardingFooter.js
@@ -37,7 +37,7 @@ const OnboardingFooter = ({
...props
}: Props) => (
<Wrapper {...props}>
- <Button padded outline onClick={() => prevStep()}>
+ <Button padded outlineGrey onClick={() => prevStep()}>
{t('common:back')}
</Button>
<Button
diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index f2b905fa..49359da5 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
import { radii } from 'styles/theme'
import Box from 'components/base/Box'
-import IconWarning from 'icons/Shield'
+import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield'
// GENERAL
export const Title = styled(Box).attrs({
@@ -78,7 +78,7 @@ export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any
<DisclaimerBoxContainer {...p}>
<Box m={3} relative>
<DisclaimerBoxIconContainer>
- <IconWarning />
+ <IconSensitiveOperationShield />
</DisclaimerBoxIconContainer>
{disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)}
</Box>
diff --git a/src/components/Onboarding/steps/Analytics.js b/src/components/Onboarding/steps/Analytics.js
index f0537441..34584285 100644
--- a/src/components/Onboarding/steps/Analytics.js
+++ b/src/components/Onboarding/steps/Analytics.js
@@ -45,41 +45,35 @@ class Analytics extends PureComponent<StepProps, State> {
const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state
return (
- <Box sticky pt={170}>
- <Box grow alignItems="center">
+ <Box sticky pt={50}>
+ <Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:analytics.title')}</Title>
<Description>{t('onboarding:analytics.desc')}</Description>
<Box mt={5}>
<Container>
- <Box justify="center" style={{ width: 450 }}>
- <Box horizontal>
- <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
- </Box>
+ <Box>
+ <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
<AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText>
</Box>
- <Box alignItems="center" horizontal mx={5}>
+ <Box justifyContent="center">
<CheckBox isChecked={sentryLogsToggle} onChange={this.handleSentryLogsToggle} />
</Box>
</Container>
<Container>
- <Box justify="center" style={{ width: 450 }}>
- <Box horizontal>
- <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
- </Box>
+ <Box>
+ <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
<AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText>
</Box>
- <Box alignItems="center" horizontal mx={5}>
+ <Box justifyContent="center">
<CheckBox isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} />
</Box>
</Container>
<Container>
- <Box justify="center" style={{ width: 450 }}>
- <Box horizontal>
- <AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle>
- </Box>
+ <Box>
+ <AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle>
<AnalyticsText>{t('onboarding:analytics.termsConditions.desc')}</AnalyticsText>
</Box>
- <Box alignItems="center" horizontal mx={5}>
+ <Box justifyContent="center">
<CheckBox isChecked={termsConditionsToggle} onChange={this.handleTermsToggle} />
</Box>
</Container>
@@ -110,7 +104,7 @@ export const AnalyticsText = styled(Box).attrs({
textAlign: 'left',
color: 'smoke',
})`
- max-width: 450px;
+ max-width: 400px;
`
export const AnalyticsTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold',
@@ -122,4 +116,7 @@ export const AnalyticsTitle = styled(Box).attrs({
const Container = styled(Box).attrs({
horizontal: true,
p: 3,
-})``
+})`
+ width: 550px;
+ justify-content: space-between;
+`
diff --git a/src/components/Onboarding/steps/GenuineCheck.js b/src/components/Onboarding/steps/GenuineCheck.js
index 32b91bad..0cfe4dec 100644
--- a/src/components/Onboarding/steps/GenuineCheck.js
+++ b/src/components/Onboarding/steps/GenuineCheck.js
@@ -120,8 +120,8 @@ class GenuineCheck extends PureComponent<StepProps, State> {
}
return (
- <Box sticky pt={150}>
- <Box grow alignItems="center">
+ <Box sticky pt={50}>
+ <Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:genuineCheck.title')}</Title>
<Description>{t('onboarding:genuineCheck.desc')}</Description>
<Box mt={5}>
@@ -132,15 +132,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle>
</Box>
</Box>
- <RadioGroup
- style={{ margin: '0 30px' }}
- items={this.getButtonLabel()}
- activeKey={cachedPinStepButton}
- onChange={item => this.handleButtonPass(item, 'pinStepPass')}
- />
+ <Box justify="center">
+ <RadioGroup
+ items={this.getButtonLabel()}
+ activeKey={cachedPinStepButton}
+ onChange={item => this.handleButtonPass(item, 'pinStepPass')}
+ />
+ </Box>
</CardWrapper>
</Box>
- <Box mt={5}>
+ <Box mt={3}>
<CardWrapper isDisabled={!genuine.pinStepPass}>
<Box justify="center">
<Box horizontal>
@@ -148,15 +149,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle>
</Box>
</Box>
- <RadioGroup
- style={{ margin: '0 30px' }}
- items={this.getButtonLabel()}
- activeKey={cachedRecoveryStepButton}
- onChange={item => this.handleButtonPass(item, 'recoveryStepPass')}
- />
+ <Box justify="center">
+ <RadioGroup
+ items={this.getButtonLabel()}
+ activeKey={cachedRecoveryStepButton}
+ onChange={item => this.handleButtonPass(item, 'recoveryStepPass')}
+ />
+ </Box>
</CardWrapper>
</Box>
- <Box mt={5}>
+ <Box mt={3}>
<CardWrapper isDisabled={!genuine.recoveryStepPass}>
<Box justify="center">
<Box horizontal>
@@ -164,7 +166,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
</Box>
</Box>
- <Box justify="center" horizontal mx={5}>
+ <Box justify="center">
{genuine.isDeviceGenuine ? (
<Box horizontal align="center" flow={1} color={colors.wallet}>
<IconCheck size={16} />
@@ -218,29 +220,27 @@ export function GenuineCheckFail({
}: {
redoGenuineCheck: () => void,
contactSupport: () => void,
- isLedgerNano: boolean,
+ isLedgerNano: boolean | null,
t: T,
}) {
return (
- <Box sticky pt={250}>
- <Box grow alignItems="center">
+ <Box sticky pt={50}>
+ <Box grow alignItems="center" justifyContent="center">
{isLedgerNano ? (
<Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
- <Description style={{ maxWidth: 527 }}>
- {t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}
- </Description>
- <Box style={{ minWidth: 527 }}>
+ <Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
+ <Box style={{ width: 550 }} mt={5} ml={100}>
<IconLedgerNanoError />
</Box>
</Fragment>
) : (
<Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title>
- <Description style={{ maxWidth: 527 }}>
+ <Description pb={5}>
{t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
</Description>
- <Box style={{ minWidth: 527, alignItems: 'center' }}>
+ <Box alignItems="center">
<IconLedgerBlueError />
</Box>
</Fragment>
@@ -248,7 +248,7 @@ export function GenuineCheckFail({
</Box>
<Wrapper horizontal>
<Button
- small
+ padded
outline
onClick={() => {
redoGenuineCheck()
@@ -257,7 +257,7 @@ export function GenuineCheckFail({
{t('common:back')}
</Button>
<Button
- small
+ padded
danger
onClick={() => {
contactSupport()
@@ -292,11 +292,10 @@ const Wrapper = styled(Box).attrs({
const CardWrapper = styled(Card).attrs({
horizontal: true,
p: 5,
- flow: 2,
justify: 'space-between',
})`
- width: 550px;
- height: 70px;
+ width: 580px;
+ height: 74px;
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)};
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index 2d0cf31e..e99fd845 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -7,7 +7,7 @@ import { colors } from 'styles/theme'
import styled from 'styled-components'
import { flowType } from 'reducers/onboarding'
-import Box, { Card } from 'components/base/Box'
+import Box from 'components/base/Box'
import IconUser from 'icons/User'
import IconPlus from 'icons/Plus'
import IconRecover from 'icons/Recover'
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index 2357ce27..217fe574 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -7,12 +7,12 @@ import { rgba } from 'styles/helpers'
import { isLedgerNano } from 'reducers/onboarding'
-import OnboardingFooter from '../OnboardingFooter'
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 OnboardingFooter from '../OnboardingFooter'
import type { StepProps } from '..'
@@ -24,7 +24,6 @@ class SelectDevice extends PureComponent<StepProps, {}> {
}
render() {
const { t, onboarding, nextStep, prevStep, jumpStep } = this.props
- console.log('wewee: ', onboarding.isLedgerNano)
return (
<Box sticky>
<Box grow alignItems="center" justifyContent="center">
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
index e0e19c83..a37330a4 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
@@ -58,11 +58,11 @@ class SelectPIN extends PureComponent<Props, *> {
return (
<Box align="center">
- <Inner style={{ width: 700 }}>
- <Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={2}>
+ <Inner style={{ width: 550 }}>
+ <Box style={{ width: 180, justifyContent: 'center', alignItems: 'center' }}>
<IconLedgerBlueSelectPIN />
</Box>
- <Box mt={4}>
+ <Box>
<Box shrink grow flow={4}>
{stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)}
</Box>
diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index f01e20bf..a27c7f22 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -45,6 +45,17 @@ const buttonStyles = {
border-color: ${darken(p.theme.colors.wallet, 0.1)};
`,
},
+ outlineGrey: {
+ default: p => `
+ background: transparent;
+ border: 1px solid ${p.theme.colors.grey};
+ color: ${p.theme.colors.grey};
+ `,
+ active: p => `
+ color: ${darken(p.theme.colors.grey, 0.1)};
+ border-color: ${darken(p.theme.colors.grey, 0.1)};
+ `,
+ },
icon: {
default: () => `
font-size: ${fontSize[3]}px;
diff --git a/src/icons/illustrations/LedgerNanoSelectPIN.js b/src/icons/illustrations/LedgerNanoSelectPIN.js
index eecb5c71..aa9fb1c2 100644
--- a/src/icons/illustrations/LedgerNanoSelectPIN.js
+++ b/src/icons/illustrations/LedgerNanoSelectPIN.js
@@ -1,5 +1,6 @@
// @flow
import React from 'react'
+
export default () => (
<svg width="260" height="129">
<defs>
diff --git a/src/icons/illustrations/SensitiveOperationShield.js b/src/icons/illustrations/SensitiveOperationShield.js
new file mode 100644
index 00000000..b80d5b45
--- /dev/null
+++ b/src/icons/illustrations/SensitiveOperationShield.js
@@ -0,0 +1,61 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+ <svg width="26" height="31">
+ <defs>
+ <path id="a" d="M4 0h600a4 4 0 0 1 4 4v112a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" />
+ <mask id="b" width="608" height="120" x="0" y="0" fill="#fff">
+ <use xlinkHref="#a" />
+ </mask>
+ <filter
+ id="c"
+ width="153.8%"
+ height="141.9%"
+ x="-26.9%"
+ y="-19.4%"
+ filterUnits="objectBoundingBox"
+ >
+ <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+ <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5" />
+ <feColorMatrix
+ in="shadowBlurOuter1"
+ result="shadowMatrixOuter1"
+ values="0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0 0.418261054 0 0 0 0.116196784 0"
+ />
+ <feMerge>
+ <feMergeNode in="shadowMatrixOuter1" />
+ <feMergeNode in="SourceGraphic" />
+ </feMerge>
+ </filter>
+ <path id="d" d="M13 30s13-4.426 13-14.016V4.795L13 0 0 4.795v11.189C0 25.574 13 30 13 30z" />
+ </defs>
+ <g fill="none" fillRule="evenodd" transform="translate(-567 -15)">
+ <use
+ fill="#F9F9F9"
+ fillOpacity=".5"
+ stroke="#D8D8D8"
+ strokeDasharray="3"
+ strokeWidth="2"
+ mask="url(#b)"
+ xlinkHref="#a"
+ />
+ <g filter="url(#c)" transform="translate(567 15)">
+ <g strokeLinecap="round" strokeLinejoin="round">
+ <use fill="#FFF" stroke="#EA2E49" strokeWidth="1.5" xlinkHref="#d" />
+ <path
+ stroke="#FFF"
+ strokeWidth="2"
+ d="M12.678 30.947c-.116-.04-.321-.115-.603-.225-.462-.182-.975-.4-1.527-.656a29.353 29.353 0 0 1-4.627-2.662C1.621 24.354-1 20.56-1 15.984V4.098l14-5.164 14 5.164v11.886c0 4.577-2.62 8.37-6.921 11.42a29.353 29.353 0 0 1-4.627 2.662c-.552.256-1.065.474-1.527.656-.282.11-.487.185-.603.225l-.322.11-.322-.11z"
+ />
+ </g>
+ <path
+ fill="#EA2E49"
+ fillRule="nonzero"
+ d="M17.129 10.305c-.419 0-.76.35-.76.783l-.013 3.51s.001.246-.227.246c-.234 0-.227-.245-.227-.245V9.534a.755.755 0 0 0-.756-.768c-.42 0-.718.336-.718.768v5.064s-.026.248-.251.248c-.224 0-.24-.248-.24-.248V8.69c0-.432-.316-.76-.736-.76s-.738.328-.738.76v5.908s-.011.237-.253.237c-.237 0-.238-.237-.238-.237V10.21c0-.432-.328-.703-.747-.703-.42 0-.727.27-.727.703v6.415s-.04.285-.437-.186c-1.017-1.206-1.548-1.446-1.548-1.446s-.965-.488-1.393.392c-.31.639.019.673.525 1.457.448.694 1.866 2.52 1.866 2.52s1.68 2.444 3.95 2.444c0 0 4.442.196 4.442-4.336l-.015-6.381a.771.771 0 0 0-.76-.783"
+ />
+ </g>
+ </g>
+ </svg>
+)