diff --git a/src/components/Onboarding/OnboardingFooter.js b/src/components/Onboarding/OnboardingFooter.js
index 384f360b..dcaff84c 100644
--- a/src/components/Onboarding/OnboardingFooter.js
+++ b/src/components/Onboarding/OnboardingFooter.js
@@ -27,10 +27,10 @@ type Props = {
const OnboardingFooter = ({ t, nextStep, prevStep, isContinueDisabled, ...props }: Props) => (
-
diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js
index de1c1f97..21c0423c 100644
--- a/src/components/Onboarding/steps/Finish.js
+++ b/src/components/Onboarding/steps/Finish.js
@@ -8,9 +8,9 @@ import Box from 'components/base/Box'
import Button from 'components/base/Button'
import IconCheckCircle from 'icons/CheckCircle'
-import IconSocialTwitter from 'icons/Eye'
-import IconSocialReddit from 'icons/User'
-import IconSocialGithub from 'icons/Share'
+import IconSocialTwitter from 'icons/Twitter'
+import IconSocialReddit from 'icons/Reddit'
+import IconSocialGithub from 'icons/Github'
import type { StepProps } from '..'
import { Title, Description } from '../helperComponents'
@@ -22,39 +22,39 @@ const socialMedia = [
icon: ,
onClick: url => shell.openExternal(url),
},
- {
- key: 'reddit',
- url: 'https://www.reddit.com/r/ledgerwallet/',
- icon: ,
- onClick: url => shell.openExternal(url),
- },
{
key: 'github',
url: 'https://github.com/LedgerHQ',
icon: ,
onClick: url => shell.openExternal(url),
},
+ {
+ key: 'reddit',
+ url: 'https://www.reddit.com/r/ledgerwallet/',
+ icon: ,
+ onClick: url => shell.openExternal(url),
+ },
]
export default (props: StepProps) => {
const { finish, t } = props
return (
-
+
-
+
{t('onboarding:finish.title')}
{t('onboarding:finish.desc')}
-
- {t('onboarding:genuineCheck.steps.step2.desc')}
{
2.
{t('onboarding:genuineCheck.steps.step2.title')}
- {t('onboarding:genuineCheck.steps.step2.desc')}
{
3.
{t('onboarding:genuineCheck.steps.step3.title')}
- {t('onboarding:genuineCheck.steps.step3.desc')}
-
+ {genuine.isDeviceGenuine ? (
+
+
+
+ {t('onboarding:genuineCheck.isGenuinePassed')}
+
+
+ ) : (
+
+ )}
@@ -269,14 +267,10 @@ export function GenuineCheckFail({
)
}
-export const CardDescription = styled(Box).attrs({
+export const GenuineSuccessText = styled(Box).attrs({
ff: 'Open Sans|Regular',
fontSize: 4,
- textAlign: 'left',
- color: 'grey',
-})`
- max-width: 400px;
-`
+})``
export const CardTitle = styled(Box).attrs({
ff: 'Open Sans|SemiBold',
fontSize: 4,
@@ -295,8 +289,10 @@ const Wrapper = styled(Box).attrs({
const CardWrapper = styled(Card).attrs({
horizontal: true,
p: 5,
+ flow: 2,
+ justify: 'space-between',
})`
- max-height: 97px;
+ height: 97px;
width: 620px;
border: ${p => `1px ${p.isDisabled ? 'dashed' : 'solid'} ${p.theme.colors.fog}`};
pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};
diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js
index 9d1012e2..a2d59c29 100644
--- a/src/components/Onboarding/steps/SelectDevice.js
+++ b/src/components/Onboarding/steps/SelectDevice.js
@@ -25,7 +25,7 @@ class SelectDevice extends PureComponent {
const { t, onboarding } = this.props
return (
-
+
{t('onboarding:selectDevice.title')}
{t('onboarding:selectDevice.desc')}
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index 773c9cfa..f7de7f5c 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -19,7 +19,7 @@ export default (props: StepProps) => {
{t('onboarding:start.title')}
{t('onboarding:start.desc')}
-
diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index 990220a9..f01e20bf 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -70,7 +70,8 @@ function getStyles(props, state) {
const Base = styled.button.attrs({
ff: 'Museo Sans|Regular',
fontSize: p => p.fontSize || 3,
- px: 2,
+ px: p => (p.padded ? 4 : 2),
+ py: p => (p.padded ? 2 : 0),
color: 'grey',
bg: 'transparent',
})`
@@ -82,7 +83,7 @@ const Base = styled.button.attrs({
border: none;
border-radius: ${p => p.theme.radii[1]}px;
cursor: ${p => (p.disabled ? 'default' : 'pointer')};
- height: ${p => (p.small ? 30 : 36)}px;
+ height: ${p => (p.small ? 30 : p.padded ? 40 : 36)}px;
pointer-events: ${p => (p.disabled ? 'none' : '')};
outline: none;
@@ -104,6 +105,7 @@ type Props = {
disabled?: boolean,
onClick?: Function,
small?: boolean,
+ padded?: boolean,
}
const Button = (props: Props) => {
@@ -123,6 +125,7 @@ Button.defaultProps = {
onClick: noop,
primary: false,
small: false,
+ padded: false,
danger: false,
}
diff --git a/src/icons/Github.js b/src/icons/Github.js
new file mode 100644
index 00000000..1b74caf4
--- /dev/null
+++ b/src/icons/Github.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+
+)
+
+export default ({ size, ...p }: { size: number }) => (
+
+)
diff --git a/src/icons/Reddit.js b/src/icons/Reddit.js
new file mode 100644
index 00000000..41350b0f
--- /dev/null
+++ b/src/icons/Reddit.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+
+)
+
+export default ({ size, ...p }: { size: number }) => (
+
+)
diff --git a/src/icons/Twitter.js b/src/icons/Twitter.js
new file mode 100644
index 00000000..dfbb8fb0
--- /dev/null
+++ b/src/icons/Twitter.js
@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+
+)
+
+export default ({ size, ...p }: { size: number }) => (
+
+)
diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml
index f23c39c6..459ec958 100644
--- a/static/i18n/en/onboarding.yml
+++ b/static/i18n/en/onboarding.yml
@@ -65,9 +65,9 @@ genuineCheck:
step3:
title: Check if your Ledger device is genuine
desc: This is a long text, please replace it with the final wording once it’s done. Lorem ipsum dolor amet ledger lorem dolor
+ isGenuinePassed: Your Nano S is genuine
buttons:
genuineCheck: Genuine check
- tryAgain: Check again
contactSupport: Contact Support
errorPage:
ledgerNano: