new icons, padded buttons, some design updates in genuine check step

src/components/Onboarding/OnboardingFooter.js

@@ -27,10 +27,10 @@ type Props = {
 
 const OnboardingFooter = ({ t, nextStep, prevStep, isContinueDisabled, ...props }: Props) => (
   <Wrapper {...props}>
-    <Button small outline onClick={() => prevStep()}>
+    <Button padded outline onClick={() => prevStep()}>
       {t('common:back')}
     </Button>
-    <Button disabled={isContinueDisabled} small primary onClick={() => nextStep()} ml="auto">
+    <Button padded disabled={isContinueDisabled} primary onClick={() => nextStep()} ml="auto">
       {t('common:continue')}
     </Button>
   </Wrapper>

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: <IconSocialTwitter size={24} />,
     onClick: url => shell.openExternal(url),
   },
-  {
-    key: 'reddit',
-    url: 'https://www.reddit.com/r/ledgerwallet/',
-    icon: <IconSocialReddit size={24} />,
-    onClick: url => shell.openExternal(url),
-  },
   {
     key: 'github',
     url: 'https://github.com/LedgerHQ',
     icon: <IconSocialGithub size={24} />,
     onClick: url => shell.openExternal(url),
   },
+  {
+    key: 'reddit',
+    url: 'https://www.reddit.com/r/ledgerwallet/',
+    icon: <IconSocialReddit size={24} />,
+    onClick: url => shell.openExternal(url),
+  },
 ]
 
 export default (props: StepProps) => {
   const { finish, t } = props
   return (
-    <Box sticky pt={150}>
+    <Box sticky pt={200}>
       <Box grow alignItems="center">
         <Box color="positiveGreen">
           <IconCheckCircle size={44} />
         </Box>
-        <Box style={{ paddingTop: '20px', maxWidth: 536 }} align="center" mb={5}>
+        <Box pt={5} align="center" mb={5}>
           <Title>{t('onboarding:finish.title')}</Title>
           <Description>{t('onboarding:finish.desc')}</Description>
         </Box>
-        <Button primary onClick={() => finish()}>
+        <Button primary padded onClick={() => finish()}>
           {t('onboarding:finish.openAppButton')}
         </Button>
         <Box alignItems="center" mt={7}>
           <FollowUsDesc>{t('onboarding:finish.followUsLabel')}</FollowUsDesc>
         </Box>
-        <Box horizontal flow={5} color="grey">
+        <Box horizontal mt={3} flow={5} color="grey">
           {socialMedia.map(socMed => <SocialMediaBox key={socMed.key} socMed={socMed} />)}
         </Box>
       </Box>

src/components/Onboarding/steps/GenuineCheck.js

@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
 import { shell } from 'electron'
 import { connect } from 'react-redux'
 import styled from 'styled-components'
-import { radii } from 'styles/theme'
+import { radii, colors } from 'styles/theme'
 
 import type { T } from 'types/common'
 
@@ -131,7 +131,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <IconOptionRow>1.</IconOptionRow>
                   <CardTitle>{t('onboarding:genuineCheck.steps.step1.title')}</CardTitle>
                 </Box>
-                <CardDescription>{t('onboarding:genuineCheck.steps.step2.desc')}</CardDescription>
               </Box>
               <RadioGroup
                 style={{ margin: '0 30px' }}
@@ -148,7 +147,6 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <IconOptionRow>2.</IconOptionRow>
                   <CardTitle>{t('onboarding:genuineCheck.steps.step2.title')}</CardTitle>
                 </Box>
-                <CardDescription>{t('onboarding:genuineCheck.steps.step2.desc')}</CardDescription>
               </Box>
               <RadioGroup
                 style={{ margin: '0 30px' }}
@@ -165,24 +163,24 @@ class GenuineCheck extends PureComponent<StepProps, State> {
                   <IconOptionRow>3.</IconOptionRow>
                   <CardTitle>{t('onboarding:genuineCheck.steps.step3.title')}</CardTitle>
                 </Box>
-                <CardDescription>{t('onboarding:genuineCheck.steps.step3.desc')}</CardDescription>
               </Box>
               <Box justify="center" horizontal mx={5}>
-                <Button
-                  big
-                  primary
-                  disabled={!genuine.recoveryStepPass}
-                  onClick={this.handleOpenGenuineCheckModal}
-                >
-                  {genuine.isDeviceGenuine ? (
-                    <Box horizontal align="center" flow={1}>
-                      <IconCheck size={16} />
-                      <span>{t('onboarding:genuineCheck.buttons.tryAgain')}</span>
-                    </Box>
-                  ) : (
-                    t('onboarding:genuineCheck.buttons.genuineCheck')
-                  )}
-                </Button>
+                {genuine.isDeviceGenuine ? (
+                  <Box horizontal align="center" flow={1} color={colors.wallet}>
+                    <IconCheck size={16} />
+                    <GenuineSuccessText>
+                      {t('onboarding:genuineCheck.isGenuinePassed')}
+                    </GenuineSuccessText>
+                  </Box>
+                ) : (
+                  <Button
+                    primary
+                    disabled={!genuine.recoveryStepPass}
+                    onClick={this.handleOpenGenuineCheckModal}
+                  >
+                    {t('onboarding:genuineCheck.buttons.genuineCheck')}
+                  </Button>
+                )}
               </Box>
             </CardWrapper>
           </Box>
@@ -269,14 +267,10 @@ export function GenuineCheckFail({
     </Box>
   )
 }
-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')};

src/components/Onboarding/steps/SelectDevice.js

@@ -25,7 +25,7 @@ class SelectDevice extends PureComponent<StepProps, {}> {
     const { t, onboarding } = this.props
 
     return (
-      <Box sticky pt={150}>
+      <Box sticky pt={200}>
         <Box grow alignItems="center">
           <Title>{t('onboarding:selectDevice.title')}</Title>
           <Description>{t('onboarding:selectDevice.desc')}</Description>

src/components/Onboarding/steps/Start.js

@@ -19,7 +19,7 @@ export default (props: StepProps) => {
           <Title>{t('onboarding:start.title')}</Title>
           <Description>{t('onboarding:start.desc')}</Description>
         </Box>
-        <Button primary onClick={() => jumpStep('init')}>
+        <Button padded primary onClick={() => jumpStep('init')}>
           Get Started
         </Button>
       </Box>

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,
 }
 

src/icons/Github.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M5.184 12.169c0 .062-.072.112-.162.112-.103.01-.175-.04-.175-.112 0-.063.072-.113.162-.113.094-.01.175.04.175.113zm-.971-.14c-.022.062.04.133.134.152.081.032.175 0 .194-.062.018-.063-.041-.135-.135-.163-.081-.022-.172.01-.193.072zm1.38-.054c-.09.022-.152.081-.143.153.01.063.09.103.184.081.091-.021.153-.08.144-.143-.01-.06-.094-.1-.184-.091zM7.65 0C3.316 0 0 3.29 0 7.625c0 3.466 2.181 6.431 5.297 7.475.4.072.54-.175.54-.378 0-.194-.009-1.263-.009-1.919 0 0-2.187.469-2.647-.931 0 0-.356-.91-.869-1.144 0 0-.715-.49.05-.481 0 0 .779.062 1.207.806.684 1.206 1.831.86 2.278.653.072-.5.275-.847.5-1.053-1.747-.194-3.51-.447-3.51-3.453 0-.86.238-1.29.738-1.84-.081-.204-.347-1.041.081-2.123.653-.203 2.156.844 2.156.844a7.342 7.342 0 0 1 1.963-.265c.666 0 1.338.09 1.963.265 0 0 1.503-1.05 2.156-.844.428 1.085.162 1.92.081 2.122.5.553.806.985.806 1.841 0 3.016-1.84 3.256-3.587 3.453.287.247.531.716.531 1.45 0 1.053-.01 2.356-.01 2.613 0 .203.144.45.541.378 3.125-1.038 5.244-4.003 5.244-7.469C15.5 3.291 11.984 0 7.65 0zM3.037 10.778c-.04.031-.03.103.022.163.05.05.122.071.163.03.04-.03.031-.102-.022-.162-.05-.05-.122-.071-.163-.03zm-.337-.253c-.022.04.01.09.072.122.05.031.112.022.134-.022.022-.04-.01-.09-.072-.122-.062-.019-.112-.01-.134.022zm1.012 1.112c-.05.041-.03.135.041.194.072.072.163.082.203.032.04-.041.022-.135-.04-.194-.07-.072-.163-.082-.204-.032zm-.356-.459c-.05.031-.05.113 0 .184.05.072.135.104.175.072.05-.04.05-.121 0-.193-.044-.072-.125-.104-.175-.063z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

src/icons/Reddit.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M9.844 10.781c.041.063.062.12.062.172 0 .052-.02.1-.062.14-.25.25-.62.417-1.11.5-.49.084-.979.084-1.468 0-.49-.083-.86-.25-1.11-.5a.194.194 0 0 1-.062-.14.19.19 0 0 1 .062-.14.194.194 0 0 1 .14-.063c.053 0 .1.02.141.062.188.188.495.318.922.391a3.78 3.78 0 0 0 1.282 0c.427-.073.734-.213.921-.422a.31.31 0 0 1 .141-.031.31.31 0 0 1 .14.031zM7 9.125c0 .23-.083.422-.25.578a.839.839 0 0 1-.594.234.786.786 0 0 1-.578-.234.786.786 0 0 1-.234-.578.84.84 0 0 1 .234-.594.761.761 0 0 1 .578-.25c.23 0 .427.084.594.25.167.167.25.365.25.594zm2.844-.844c.229 0 .422.084.578.25a.839.839 0 0 1 .234.594c0 .23-.078.422-.234.578a.786.786 0 0 1-.578.234.839.839 0 0 1-.594-.234.761.761 0 0 1-.25-.578.81.81 0 0 1 .25-.594.811.811 0 0 1 .594-.25zM15 2.5v11c0 .417-.146.77-.438 1.062A1.447 1.447 0 0 1 13.5 15h-11c-.417 0-.77-.146-1.063-.438A1.447 1.447 0 0 1 1 13.5v-11c0-.417.146-.77.438-1.063A1.447 1.447 0 0 1 2.5 1h11c.417 0 .77.146 1.063.437.291.292.437.646.437 1.063zm-3.125 4.406a1.13 1.13 0 0 0-.781.313c-.813-.563-1.782-.854-2.907-.875l.594-2.657 1.844.438c0 .23.083.422.25.578a.839.839 0 0 0 .594.234.837.837 0 0 0 .593-.234.761.761 0 0 0 .25-.578.811.811 0 0 0-.25-.594.811.811 0 0 0-.593-.25.77.77 0 0 0-.438.125 1 1 0 0 0-.312.344l-2.063-.469c-.041-.02-.083-.015-.125.016a.28.28 0 0 0-.094.14l-.625 2.907c-1.125.041-2.083.343-2.875.906a1.11 1.11 0 0 0-.812-.344c-.375 0-.667.136-.875.406a1.12 1.12 0 0 0-.219.922c.063.344.26.6.594.766a2.184 2.184 0 0 0-.063.531c0 .584.204 1.12.61 1.61s.948.875 1.625 1.156a5.727 5.727 0 0 0 2.219.422 5.71 5.71 0 0 0 2.218-.422c.677-.281 1.214-.667 1.61-1.156.396-.49.593-1.026.593-1.61.021-.208 0-.385-.062-.531.333-.167.531-.422.594-.766a1.12 1.12 0 0 0-.219-.922c-.208-.27-.5-.406-.875-.406z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

src/icons/Twitter.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M14.355 5.239c.01.142.01.284.01.426 0 4.335-3.299 9.33-9.33 9.33A9.267 9.267 0 0 1 0 13.523c.264.03.518.04.792.04a6.567 6.567 0 0 0 4.07-1.4 3.285 3.285 0 0 1-3.065-2.275c.203.03.406.051.62.051.294 0 .588-.04.862-.112A3.28 3.28 0 0 1 .65 6.61v-.04c.437.243.945.395 1.483.416A3.277 3.277 0 0 1 .67 4.254c0-.61.162-1.168.447-1.655A9.321 9.321 0 0 0 7.878 6.03a3.702 3.702 0 0 1-.081-.75A3.278 3.278 0 0 1 11.077 2a3.27 3.27 0 0 1 2.395 1.036 6.456 6.456 0 0 0 2.081-.792 3.27 3.27 0 0 1-1.441 1.807c.66-.071 1.3-.254 1.888-.508a7.049 7.049 0 0 1-1.645 1.696z"
+  />
+)
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

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: