live logo with shadow integrated on all onboarding pages

src/components/Onboarding/helperComponents.js

@@ -52,6 +52,20 @@ export const OnboardingFooterWrapper = styled(Box).attrs({
   border-bottom-left-radius: ${radii[1]}px;
   border-bottom-right-radius: ${radii[1]}px;
 `
+// LIVE LOGO
+export function LiveLogo({ icon, ...p }: { icon: any }) {
+  return <LiveLogoContainer {...p}>{icon}</LiveLogoContainer>
+}
+export const LiveLogoContainer = styled(Box).attrs({
+  borderRadius: '50%',
+  alignItems: 'center',
+  justifyContent: 'center',
+})`
+  box-shadow: 0 2px 24px 0 #00000014;
+  width: ${p => (p.width ? p.width : 80)}
+  height: ${p => (p.height ? p.height : 80)}
+
+`
 
 // INSTRUCTION LIST
 type StepType = {

src/components/Onboarding/steps/Finish.js

@@ -3,18 +3,19 @@
 import React from 'react'
 import { shell } from 'electron'
 import styled from 'styled-components'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 import ConfettiParty from 'components/ConfettiParty'
 
-import IconCheckCircle from 'icons/CheckCircle'
+import IconCheckFull from 'icons/CheckFull'
 import IconSocialTwitter from 'icons/Twitter'
 import IconSocialReddit from 'icons/Reddit'
 import IconSocialGithub from 'icons/Github'
 
 import type { StepProps } from '..'
-import { Title, Description } from '../helperComponents'
+import { Title, Description, LiveLogo } from '../helperComponents'
 
 const ConfettiLayer = styled.div`
   position: absolute;
@@ -55,9 +56,16 @@ export default (props: StepProps) => {
         <ConfettiParty />
       </ConfettiLayer>
       <Box alignItems="center">
-        <Box color="positiveGreen">
+        <Box style={{ position: 'relative' }}>
-          <IconCheckCircle size={44} />
+          <LiveLogo
+            style={{ width: 64, height: 64 }}
+            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+          />
+          <Box color="positiveGreen" style={{ position: 'absolute', right: 0, bottom: 0 }}>
+            <IconCheckFull size={18} />
           </Box>
+        </Box>
+
         <Box pt={5} align="center">
           <Title>{t('onboarding:finish.title')}</Title>
           <Description>{t('onboarding:finish.desc')}</Description>

src/components/Onboarding/steps/Init.js

@@ -13,7 +13,7 @@ import IconCheck from 'icons/Check'
 import IconExternalLink from 'icons/ExternalLink'
 import IconChevronRight from 'icons/ChevronRight'
 import { i } from 'helpers/staticPath'
-import { Title } from '../helperComponents'
+import { Title, LiveLogo } from '../helperComponents'
 
 import type { StepProps } from '..'
 
@@ -65,9 +65,10 @@ class Init extends PureComponent<StepProps, *> {
     return (
       <Box sticky justifyContent="center">
         <Box align="center">
-          <Box color="wallet">
+          <LiveLogo
-            <img alt="" src={i('ledgerlive-logo.svg')} width={50} height={50} />
+            style={{ width: 64, height: 64 }}
-          </Box>
+            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+          />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:init.title')}</Title>
           </Box>

src/components/Onboarding/steps/NoDevice.js

@@ -2,14 +2,14 @@
 
 import React, { PureComponent } from 'react'
 import { shell } from 'electron'
+import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
-import IconUser from 'icons/User'
 import IconCart from 'icons/Cart'
 import IconTruck from 'icons/Truck'
 import IconInfoCircle from 'icons/InfoCircle'
 import Button from '../../base/Button/index'
-import { Title, OnboardingFooterWrapper } from '../helperComponents'
+import { Title, OnboardingFooterWrapper, LiveLogo } from '../helperComponents'
 import { OptionFlowCard } from './Init'
 
 import type { StepProps } from '..'
@@ -48,9 +48,10 @@ class NoDevice extends PureComponent<StepProps, *> {
     return (
       <Box sticky pt={130}>
         <Box grow alignItems="center">
-          <Box color="wallet">
+          <LiveLogo
-            <IconUser size={36} />
+            style={{ width: 64, height: 64 }}
-          </Box>
+            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+          />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:noDevice.title')}</Title>
           </Box>

src/components/Onboarding/steps/Start.js

@@ -7,15 +7,18 @@ import Box from 'components/base/Box'
 import Button from 'components/base/Button'
 
 import type { StepProps } from '..'
-import { Title } from '../helperComponents'
+import { Title, LiveLogo } from '../helperComponents'
 
 export default (props: StepProps) => {
   const { jumpStep, t } = props
   return (
     <Box sticky justifyContent="center">
       <Box alignItems="center">
-        <img alt="" src={i('get-started-onb.svg')} />
+        <LiveLogo
-        <Box my={4}>
+          style={{ width: 80, height: 80 }}
+          icon={<img src={i('ledgerlive-logo.svg')} width={50} height={50} />}
+        />
+        <Box my={5}>
           <Title>{t('onboarding:start.title')}</Title>
         </Box>
         <Button padded primary onClick={() => jumpStep('init')}>