lukechilds
/
ledger-live-desktop
mirror of https://github.com/lukechilds/ledger-live-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

pixel polish, a few functional fixes, some new icons

master
Anastasia Poupeney 7 years ago
parent
0a869d2525
commit
8def4f5571
10 changed files with 127 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/Onboarding/OnboardingFooter.js
  2. 4
      src/components/Onboarding/helperComponents.js
  3. 29
      src/components/Onboarding/steps/Analytics.js
  4. 41
      src/components/Onboarding/steps/GenuineCheck.js
  5. 2
      src/components/Onboarding/steps/Init.js
  6. 3
      src/components/Onboarding/steps/SelectDevice.js
  7. 6
      src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
  8. 11
      src/components/base/Button/index.js
  9. 1
      src/icons/illustrations/LedgerNanoSelectPIN.js
  10. 61
      src/icons/illustrations/SensitiveOperationShield.js

2
src/components/Onboarding/OnboardingFooter.js
View File

@ -37,7 +37,7 @@ const OnboardingFooter = ({
...props ...props
}: Props) => ( }: Props) => (
<Wrapper {...props}> <Wrapper {...props}>
<Button padded outline onClick={() => prevStep()}> <Button padded outlineGrey onClick={() => prevStep()}>
{t('common:back')} {t('common:back')}
</Button> </Button>
<Button <Button

4
src/components/Onboarding/helperComponents.js
View File

@ -4,7 +4,7 @@ import styled from 'styled-components'
import { radii } from 'styles/theme' import { radii } from 'styles/theme'
import Box from 'components/base/Box' import Box from 'components/base/Box'
import IconWarning from 'icons/Shield' import IconSensitiveOperationShield from 'icons/illustrations/SensitiveOperationShield'
// GENERAL // GENERAL
export const Title = styled(Box).attrs({ export const Title = styled(Box).attrs({
@ -78,7 +78,7 @@ export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any
<DisclaimerBoxContainer {...p}> <DisclaimerBoxContainer {...p}>
<Box m={3} relative> <Box m={3} relative>
<DisclaimerBoxIconContainer> <DisclaimerBoxIconContainer>
<IconWarning /> <IconSensitiveOperationShield />
</DisclaimerBoxIconContainer> </DisclaimerBoxIconContainer>
{disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)} {disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)}
</Box> </Box>

29
src/components/Onboarding/steps/Analytics.js
View File

@ -45,41 +45,35 @@ class Analytics extends PureComponent<StepProps, State> {
const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state const { analyticsToggle, termsConditionsToggle, sentryLogsToggle } = this.state
return ( return (
<Box sticky pt={170}> <Box sticky pt={50}>
<Box grow alignItems="center"> <Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:analytics.title')}</Title> <Title>{t('onboarding:analytics.title')}</Title>
<Description>{t('onboarding:analytics.desc')}</Description> <Description>{t('onboarding:analytics.desc')}</Description>
<Box mt={5}> <Box mt={5}>
<Container> <Container>
<Box justify="center" style={{ width: 450 }}> <Box>
<Box horizontal>
<AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle> <AnalyticsTitle>{t('onboarding:analytics.sentryLogs.title')}</AnalyticsTitle>
</Box>
<AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText> <AnalyticsText>{t('onboarding:analytics.sentryLogs.desc')}</AnalyticsText>
</Box> </Box>
<Box alignItems="center" horizontal mx={5}> <Box justifyContent="center">
<CheckBox isChecked={sentryLogsToggle} onChange={this.handleSentryLogsToggle} /> <CheckBox isChecked={sentryLogsToggle} onChange={this.handleSentryLogsToggle} />
</Box> </Box>
</Container> </Container>
<Container> <Container>
<Box justify="center" style={{ width: 450 }}> <Box>
<Box horizontal>
<AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle> <AnalyticsTitle>{t('onboarding:analytics.shareAnalytics.title')}</AnalyticsTitle>
</Box>
<AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText> <AnalyticsText>{t('onboarding:analytics.shareAnalytics.desc')}</AnalyticsText>
</Box> </Box>
<Box alignItems="center" horizontal mx={5}> <Box justifyContent="center">
<CheckBox isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} /> <CheckBox isChecked={analyticsToggle} onChange={this.handleAnalyticsToggle} />
</Box> </Box>
</Container> </Container>
<Container> <Container>
<Box justify="center" style={{ width: 450 }}> <Box>
<Box horizontal>
<AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle> <AnalyticsTitle>{t('onboarding:analytics.termsConditions.title')}</AnalyticsTitle>
</Box>
<AnalyticsText>{t('onboarding:analytics.termsConditions.desc')}</AnalyticsText> <AnalyticsText>{t('onboarding:analytics.termsConditions.desc')}</AnalyticsText>
</Box> </Box>
<Box alignItems="center" horizontal mx={5}> <Box justifyContent="center">
<CheckBox isChecked={termsConditionsToggle} onChange={this.handleTermsToggle} /> <CheckBox isChecked={termsConditionsToggle} onChange={this.handleTermsToggle} />
</Box> </Box>
</Container> </Container>
@ -110,7 +104,7 @@ export const AnalyticsText = styled(Box).attrs({
textAlign: 'left', textAlign: 'left',
color: 'smoke', color: 'smoke',
})` })`
max-width: 450px; max-width: 400px;
` `
export const AnalyticsTitle = styled(Box).attrs({ export const AnalyticsTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold', ff: 'Open Sans|SemiBold',
@ -122,4 +116,7 @@ export const AnalyticsTitle = styled(Box).attrs({
const Container = styled(Box).attrs({ const Container = styled(Box).attrs({
horizontal: true, horizontal: true,
p: 3, p: 3,
})`` })`
width: 550px;
justify-content: space-between;
`

41
src/components/Onboarding/steps/GenuineCheck.js
View File

@ -120,8 +120,8 @@ class GenuineCheck extends PureComponent<StepProps, State> {
} }
return ( return (
<Box sticky pt={150}> <Box sticky pt={50}>
<Box grow alignItems="center"> <Box grow alignItems="center" justifyContent="center">
<Title>{t('onboarding:genuineCheck.title')}</Title> <Title>{t('onboarding:genuineCheck.title')}</Title>
<Description>{t('onboarding:genuineCheck.desc')}</Description> <Description>{t('onboarding:genuineCheck.desc')}</Description>
<Box mt={5}> <Box mt={5}>
@ -132,15 +132,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle> <CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle>
</Box> </Box>
</Box> </Box>
<Box justify="center">
<RadioGroup <RadioGroup
style={{ margin: '0 30px' }}
items={this.getButtonLabel()} items={this.getButtonLabel()}
activeKey={cachedPinStepButton} activeKey={cachedPinStepButton}
onChange={item => this.handleButtonPass(item, 'pinStepPass')} onChange={item => this.handleButtonPass(item, 'pinStepPass')}
/> />
</Box>
</CardWrapper> </CardWrapper>
</Box> </Box>
<Box mt={5}> <Box mt={3}>
<CardWrapper isDisabled={!genuine.pinStepPass}> <CardWrapper isDisabled={!genuine.pinStepPass}>
<Box justify="center"> <Box justify="center">
<Box horizontal> <Box horizontal>
@ -148,15 +149,16 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle> <CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle>
</Box> </Box>
</Box> </Box>
<Box justify="center">
<RadioGroup <RadioGroup
style={{ margin: '0 30px' }}
items={this.getButtonLabel()} items={this.getButtonLabel()}
activeKey={cachedRecoveryStepButton} activeKey={cachedRecoveryStepButton}
onChange={item => this.handleButtonPass(item, 'recoveryStepPass')} onChange={item => this.handleButtonPass(item, 'recoveryStepPass')}
/> />
</Box>
</CardWrapper> </CardWrapper>
</Box> </Box>
<Box mt={5}> <Box mt={3}>
<CardWrapper isDisabled={!genuine.recoveryStepPass}> <CardWrapper isDisabled={!genuine.recoveryStepPass}>
<Box justify="center"> <Box justify="center">
<Box horizontal> <Box horizontal>
@ -164,7 +166,7 @@ class GenuineCheck extends PureComponent<StepProps, State> {
<CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle> <CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
</Box> </Box>
</Box> </Box>
<Box justify="center" horizontal mx={5}> <Box justify="center">
{genuine.isDeviceGenuine ? ( {genuine.isDeviceGenuine ? (
<Box horizontal align="center" flow={1} color={colors.wallet}> <Box horizontal align="center" flow={1} color={colors.wallet}>
<IconCheck size={16} /> <IconCheck size={16} />
@ -218,29 +220,27 @@ export function GenuineCheckFail({
}: { }: {
redoGenuineCheck: () => void, redoGenuineCheck: () => void,
contactSupport: () => void, contactSupport: () => void,
isLedgerNano: boolean, isLedgerNano: boolean | null,
t: T, t: T,
}) { }) {
return ( return (
<Box sticky pt={250}> <Box sticky pt={50}>
<Box grow alignItems="center"> <Box grow alignItems="center" justifyContent="center">
{isLedgerNano ? ( {isLedgerNano ? (
<Fragment> <Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title> <Title>{t('onboarding:genuineCheck.errorPage.ledgerNano.title')}</Title>
<Description style={{ maxWidth: 527 }}> <Description>{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')}</Description>
{t('onboarding:genuineCheck.errorPage.ledgerNano.desc')} <Box style={{ width: 550 }} mt={5} ml={100}>
</Description>
<Box style={{ minWidth: 527 }}>
<IconLedgerNanoError /> <IconLedgerNanoError />
</Box> </Box>
</Fragment> </Fragment>
) : ( ) : (
<Fragment> <Fragment>
<Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title> <Title>{t('onboarding:genuineCheck.errorPage.ledgerBlue.title')}</Title>
<Description style={{ maxWidth: 527 }}> <Description pb={5}>
{t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')} {t('onboarding:genuineCheck.errorPage.ledgerBlue.desc')}
</Description> </Description>
<Box style={{ minWidth: 527, alignItems: 'center' }}> <Box alignItems="center">
<IconLedgerBlueError /> <IconLedgerBlueError />
</Box> </Box>
</Fragment> </Fragment>
@ -248,7 +248,7 @@ export function GenuineCheckFail({
</Box> </Box>
<Wrapper horizontal> <Wrapper horizontal>
<Button <Button
small padded
outline outline
onClick={() => { onClick={() => {
redoGenuineCheck() redoGenuineCheck()
@ -257,7 +257,7 @@ export function GenuineCheckFail({
{t('common:back')} {t('common:back')}
</Button> </Button>
<Button <Button
small padded
danger danger
onClick={() => { onClick={() => {
contactSupport() contactSupport()
@ -292,11 +292,10 @@ const Wrapper = styled(Box).attrs({
const CardWrapper = styled(Card).attrs({ const CardWrapper = styled(Card).attrs({
horizontal: true, horizontal: true,
p: 5, p: 5,
flow: 2,
justify: 'space-between', justify: 'space-between',
})` })`
width: 550px; width: 580px;
height: 70px; height: 74px;
border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`}; border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')}; pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)}; background-color: ${p => (p.isDisabled ? p.theme.colors.lightGrey : p.theme.colors.white)};

2
src/components/Onboarding/steps/Init.js
View File

@ -7,7 +7,7 @@ import { colors } from 'styles/theme'
import styled from 'styled-components' import styled from 'styled-components'
import { flowType } from 'reducers/onboarding' import { flowType } from 'reducers/onboarding'
import Box, { Card } from 'components/base/Box' import Box from 'components/base/Box'
import IconUser from 'icons/User' import IconUser from 'icons/User'
import IconPlus from 'icons/Plus' import IconPlus from 'icons/Plus'
import IconRecover from 'icons/Recover' import IconRecover from 'icons/Recover'

3
src/components/Onboarding/steps/SelectDevice.js
View File

@ -7,12 +7,12 @@ import { rgba } from 'styles/helpers'
import { isLedgerNano } from 'reducers/onboarding' import { isLedgerNano } from 'reducers/onboarding'
import OnboardingFooter from '../OnboardingFooter'
import Box from 'components/base/Box' import Box from 'components/base/Box'
import IconCheckCirle from 'icons/Check' import IconCheckCirle from 'icons/Check'
import IconLedgerNano from 'icons/illustrations/LedgerNano' import IconLedgerNano from 'icons/illustrations/LedgerNano'
import IconLedgerBlue from 'icons/illustrations/LedgerBlue' import IconLedgerBlue from 'icons/illustrations/LedgerBlue'
import { Title, Inner } from '../helperComponents' import { Title, Inner } from '../helperComponents'
import OnboardingFooter from '../OnboardingFooter'
import type { StepProps } from '..' import type { StepProps } from '..'
@ -24,7 +24,6 @@ class SelectDevice extends PureComponent<StepProps, {}> {
} }
render() { render() {
const { t, onboarding, nextStep, prevStep, jumpStep } = this.props const { t, onboarding, nextStep, prevStep, jumpStep } = this.props
console.log('wewee: ', onboarding.isLedgerNano)
return ( return (
<Box sticky> <Box sticky>
<Box grow alignItems="center" justifyContent="center"> <Box grow alignItems="center" justifyContent="center">

6
src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
View File

@ -58,11 +58,11 @@ class SelectPIN extends PureComponent<Props, *> {
return ( return (
<Box align="center"> <Box align="center">
<Inner style={{ width: 700 }}> <Inner style={{ width: 550 }}>
<Box style={{ width: 260, justifyContent: 'center', alignItems: 'center' }} mt={2}> <Box style={{ width: 180, justifyContent: 'center', alignItems: 'center' }}>
<IconLedgerBlueSelectPIN /> <IconLedgerBlueSelectPIN />
</Box> </Box>
<Box mt={4}> <Box>
<Box shrink grow flow={4}> <Box shrink grow flow={4}>
{stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)} {stepsLedgerBlue.map(step => <OptionRow key={step.key} step={step} />)}
</Box> </Box>

11
src/components/base/Button/index.js
View File

@ -45,6 +45,17 @@ const buttonStyles = {
border-color: ${darken(p.theme.colors.wallet, 0.1)}; 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: { icon: {
default: () => ` default: () => `
font-size: ${fontSize[3]}px; font-size: ${fontSize[3]}px;

1
src/icons/illustrations/LedgerNanoSelectPIN.js
View File

@ -1,5 +1,6 @@
// @flow // @flow
import React from 'react' import React from 'react'
export default () => ( export default () => (
<svg width="260" height="129"> <svg width="260" height="129">
<defs> <defs>

61
src/icons/illustrations/SensitiveOperationShield.js
View File

@ -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>
)
Write Preview
Loading…
Cancel
Save