From 44e0bc021dc3b20b91944a335b084177ee9eb58e Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 27 Jun 2018 10:40:03 +0200
Subject: [PATCH 1/4] wip wording meeting corrections

---
 src/components/Onboarding/helperComponents.js |  6 ++---
 .../steps/SelectPIN/SelectPINblue.js          | 14 ++++++++--
 .../steps/SelectPIN/SelectPINnano.js          | 14 ++++++++--
 .../steps/SelectPIN/SelectPINrestoreBlue.js   | 14 ++++++++--
 .../steps/SelectPIN/SelectPINrestoreNano.js   | 18 +++++++++++--
 .../steps/WriteSeed/WriteSeedBlue.js          | 19 +++++++++++--
 .../steps/WriteSeed/WriteSeedNano.js          | 27 ++++++++++++++++---
 .../steps/WriteSeed/WriteSeedRestore.js       | 27 ++++++++++++++++---
 static/i18n/en/onboarding.yml                 | 18 ++++++-------
 9 files changed, 129 insertions(+), 28 deletions(-)

diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 5f39897b..345de659 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -58,11 +58,11 @@ type StepType = {
   icon: any,
   desc: string,
 }
-export function OptionRow({ step }: { step: StepType }) {
+export function OptionRow({ step, ...p }: { step: StepType }) {
   const { icon, desc } = step
   return (
     <Box horizontal m="7px" style={{ minWidth: 420 }}>
-      <Box justify="center">{icon}</Box>
+      <Box {...p}>{icon}</Box>
       <Box justify="center" shrink>
         <OptionRowDesc>{desc}</OptionRowDesc>
       </Box>
@@ -91,7 +91,7 @@ export function DisclaimerBox({ disclaimerNotes, ...p }: { disclaimerNotes: any
         <DisclaimerBoxIconContainer>
           <IconSensitiveOperationShield />
         </DisclaimerBoxIconContainer>
-        {disclaimerNotes.map(note => <OptionRow key={note.key} step={note} />)}
+        {disclaimerNotes.map(note => <OptionRow justify="center" key={note.key} step={note} />)}
       </Box>
     </DisclaimerBoxContainer>
   )
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
index 21611255..eee47882 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
@@ -1,10 +1,11 @@
 // @flow
 import React, { PureComponent } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 
 import type { T } from 'types/common'
 
@@ -29,7 +30,16 @@ class SelectPIN extends PureComponent<Props, *> {
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.initialize.instructions.blue.step2'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:selectPIN.initialize.instructions.blue.step2">
+              Tap on
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Configure as new device
+              </Text>
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step3',
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
index 9db95c4e..9825a1dd 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
@@ -1,10 +1,11 @@
 // @flow
 import React, { PureComponent } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 
 import type { T } from 'types/common'
 
@@ -34,7 +35,16 @@ class SelectPINnano extends PureComponent<Props, *> {
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.initialize.instructions.nano.step3'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:selectPIN.initialize.instructions.nano.step3">
+              Press the right button to select
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Configure as new device
+              </Text>
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step4',
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
index 0ff30312..c40a8e60 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
@@ -1,10 +1,11 @@
 // @flow
 import React, { PureComponent } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 
 import type { T } from 'types/common'
 
@@ -29,7 +30,16 @@ class SelectPINrestoreBlue extends PureComponent<Props, *> {
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.restore.instructions.blue.step2'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:selectPIN.restore.instructions.blue.step2">
+              Tap on
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Restore configuration
+              </Text>
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step3',
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
index addacd63..9bf64dbf 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
@@ -1,10 +1,11 @@
 // @flow
 import React, { PureComponent } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 
 import type { T } from 'types/common'
 
@@ -34,7 +35,20 @@ class SelectPINrestoreNano extends PureComponent<Props, *> {
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:selectPIN.restore.instructions.nano.step3'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:selectPIN.restore.instructions.nano.step3">
+              Press the left button to cancel
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Initialize as new device?
+              </Text>
+              Press the right button to select
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Restore configuration?
+              </Text>
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step4',
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
index 3cf4e412..11afcf60 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
@@ -1,12 +1,13 @@
 // @flow
 import React, { PureComponent, Fragment } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 import IconChevronRight from 'icons/ChevronRight'
 
 import {
@@ -35,7 +36,21 @@ class WriteSeedBlue extends PureComponent<Props, *> {
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.initialize.blue.step2'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:writeSeed.initialize.blue.step2">
+              Tap
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Next
+              </Text>
+              to move to the next words. Repeat the process until the
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Confirmation
+              </Text>
+              screen appears.
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step3',
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
index 3d34664a..7d3a91b6 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
@@ -1,12 +1,13 @@
 // @flow
 import React, { PureComponent, Fragment } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 import IconChevronRight from 'icons/ChevronRight'
 
 import {
@@ -30,12 +31,32 @@ class WriteSeedNano extends PureComponent<Props, *> {
       {
         key: 'step1',
         icon: <IconOptionRow>{'1.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.initialize.nano.step1'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:writeSeed.initialize.nano.step1">
+              Copy the word displayed below
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Word #1
+              </Text>
+              in position 1 on a blank Recovery sheet.
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.initialize.nano.step2'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:writeSeed.initialize.nano.step2">
+              Press the right button to display
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Word #2
+              </Text>
+              and repeat the process until all 24 words are copied on the Recovery sheet.
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step3',
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
index 39ebf55d..a5d17afe 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
@@ -1,10 +1,11 @@
 // @flow
 import React, { PureComponent, Fragment } from 'react'
-import { translate } from 'react-i18next'
+import { translate, Trans } from 'react-i18next'
 import { colors } from 'styles/theme'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import Text from 'components/base/Text'
 
 import type { T } from 'types/common'
 import type { OnboardingState } from 'reducers/onboarding'
@@ -38,12 +39,32 @@ class WriteSeedRestore extends PureComponent<Props, *> {
       {
         key: 'step2',
         icon: <IconOptionRow>{'2.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.restore.nano.step2'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:writeSeed.restore.nano.step2">
+              Select the first letters of
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Word #1
+              </Text>
+              by pressing the right or left button. Press both buttons to confirm each letter.
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step3',
         icon: <IconOptionRow>{'3.'}</IconOptionRow>,
-        desc: t('onboarding:writeSeed.restore.nano.step3'),
+        desc: (
+          <Box style={{ display: 'block' }}>
+            <Trans i18nKey="onboarding:writeSeed.restore.nano.step3">
+              Select
+              <Text ff="Open Sans|SemiBold" color="dark">
+                Word #1
+              </Text>
+              from the suggested words. Press both buttons to continue.
+            </Trans>
+          </Box>
+        ),
       },
       {
         key: 'step4',
diff --git a/static/i18n/en/onboarding.yml b/static/i18n/en/onboarding.yml
index 0dec341c..8e060bc7 100644
--- a/static/i18n/en/onboarding.yml
+++ b/static/i18n/en/onboarding.yml
@@ -44,11 +44,11 @@ selectPIN:
       nano:
         step1: Connect the Ledger Nano S to your computer.
         step2: Press both buttons simultaneously as instructed on the screen.
-        step3: Press the right button to select Configure as new device?. # <bold>Configure as new device?<bold>.
+        step3: Press the right button to select <1><0>Configure as new device?</0></1>
         step4: 'Choose a PIN code between 4 and 8 digits long, followed by the checkmark (✓).'
       blue:
         step1: Connect the Ledger Blue to your computer.
-        step2: Tap on Configure as new device.
+        step2: Tap on <1><0>Configure as new device.</0></1>
         step3: Choose a PIN code between 4 and 8 digits long.
   restore:
     title: Choose your PIN code
@@ -56,31 +56,31 @@ selectPIN:
       nano:
         step1: Connect the Ledger Nano S to your computer.
         step2: Press both buttons simultaneously as instructed on the screen.
-        step3: Press the left button to cancel Initialize as new device?. Press the right button to select Restore configuration?. #  <bold>Initialize as new device?</bold>  <bold>Restore configuration?</bold>.
+        step3: Press the left button to cancel <1><0>Initialize as new device?</0></1> Press the right button to select <3><0>Restore configuration?</0></3>
         step4: 'Choose a PIN code between 4 and 8 digits long followed by the checkmark (✓).'
       blue:
         step1: Connect the Ledger Blue to your computer.
-        step2: Tap on Restore configuration. # <bold>Restore configuration</bold>.
+        step2: Tap on <1><0>Restore configuration</0></1>.
         step3: Choose a PIN code between 4 and 8 digits long.
 writeSeed:
   initialize:
     title: Save your recovery phrase
     desc: Your device will generate a recovery phrase of 24 words, displayed only once.
     nano:
-      step1: 'Copy the word displayed below Word #1 in position 1 on a blank Recovery sheet.' # <bold>Word #1</bold> <italic>Recovery sheet</italic>
-      step2: 'Press the right button to display Word #2 and repeat the process until all 24 words are copied on the Recovery sheet.' # <bold>Word #2</bold> <italic>Recovery sheet</italic>
+      step1: 'Copy the word displayed below <1><0>Word #1</0></1> in position 1 on a blank Recovery sheet.'
+      step2: 'Press the right button to display <1><0>Word #2</0></1> and repeat the process until all 24 words are copied on the Recovery sheet.' #<italic>Recovery sheet</italic>
       step3: 'Confirm your recovery phrase: select each requested word and press both buttons to validate it.'
     blue:
       step1: Copy each word of the recovery phrase on a blank Recovery sheet. Copy the words in the same order. # <i>Recovery sheet</i>
-      step2: Tap Next to move to the next words. Repeat the process until the Confirmation screen appears. # <bold>Next</bold> <bold>Confirmation</bold>
+      step2: Tap <1><0>Next</0></1> to move to the next words. Repeat the process until the <3><0>Confirmation</0></3> screen appears.
       step3: Type each requested word to confirm your recovery phrase.
   restore:
     title: Enter your recovery phrase
     desc: Copy the 24-word recovery phrase from your Recovery sheet on your device.
     nano:
       step1: Select the length of your recovery phrase. Press both buttons to continue.
-      step2: 'Select the first letters of Word #1 by pressing the right or left button. Press both buttons to confirm each letter.' # <bold>Word #1</bold>
-      step3: 'Select Word #1 from the suggested words. Press both buttons to continue.'  # <bold>Word #1</bold>
+      step2: 'Select the first letters of <1><0>Word #1</0></1> by pressing the right or left button. Press both buttons to confirm each letter.'
+      step3: 'Select <1><0>Word #1</0></1> from the suggested words. Press both buttons to continue.'
       step4: Repeat the process until the last word.
     blue:
       step1: Select the length of your recovery phrase.

From 8ea85e832e3f179dbdef50e66adc4fa4d66cbed2 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 27 Jun 2018 10:58:28 +0200
Subject: [PATCH 2/4] wrapping all strings in the js files in {} with quotes

---
 src/components/AccountPage/EmptyStateAccount.js      |  4 ++--
 src/components/ManagerPage/FlashMcu.js               |  4 ++--
 src/components/Onboarding/helperComponents.js        |  2 +-
 .../Onboarding/steps/SelectPIN/SelectPINblue.js      |  4 ++--
 .../Onboarding/steps/SelectPIN/SelectPINnano.js      |  4 ++--
 .../steps/SelectPIN/SelectPINrestoreBlue.js          |  4 ++--
 .../steps/SelectPIN/SelectPINrestoreNano.js          |  8 ++++----
 .../Onboarding/steps/WriteSeed/WriteSeedBlue.js      | 10 +++++-----
 .../Onboarding/steps/WriteSeed/WriteSeedNano.js      | 12 ++++++------
 .../Onboarding/steps/WriteSeed/WriteSeedRestore.js   | 12 ++++++------
 10 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/components/AccountPage/EmptyStateAccount.js b/src/components/AccountPage/EmptyStateAccount.js
index b4457fb8..9dbaae0e 100644
--- a/src/components/AccountPage/EmptyStateAccount.js
+++ b/src/components/AccountPage/EmptyStateAccount.js
@@ -43,11 +43,11 @@ class EmptyStateAccount extends PureComponent<Props, *> {
           <Title>{t('app:account.emptyState.title')}</Title>
           <Description>
             <Trans i18nKey="app:account.emptyState.desc">
-              Make sure the
+              {'Make sure the'}
               <Text ff="Open Sans|SemiBold" color="dark">
                 {account.currency.name}
               </Text>
-              app is installed to receive funds.
+              {'app is installed to receive funds.'}
             </Trans>
           </Description>
           <Button mt={3} padded primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
diff --git a/src/components/ManagerPage/FlashMcu.js b/src/components/ManagerPage/FlashMcu.js
index 0cb9905d..76a9b77d 100644
--- a/src/components/ManagerPage/FlashMcu.js
+++ b/src/components/ManagerPage/FlashMcu.js
@@ -40,8 +40,8 @@ class FlashMcu extends PureComponent<Props, State> {
   render() {
     return (
       <div>
-        <h1>Flashing MCU</h1>
-        <button onClick={this.flashMCU}>flash</button>
+        <h1>{'Flashing MCU'}</h1>
+        <button onClick={this.flashMCU}>{'flash'}</button>
       </div>
     )
   }
diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index 345de659..a3191b0f 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/src/components/Onboarding/helperComponents.js
@@ -56,7 +56,7 @@ export const OnboardingFooterWrapper = styled(Box).attrs({
 // INSTRUCTION LIST
 type StepType = {
   icon: any,
-  desc: string,
+  desc: any,
 }
 export function OptionRow({ step, ...p }: { step: StepType }) {
   const { icon, desc } = step
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
index eee47882..e612ee73 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINblue.js
@@ -33,9 +33,9 @@ class SelectPIN extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:selectPIN.initialize.instructions.blue.step2">
-              Tap on
+              {'Tap on'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Configure as new device
+                {'Configure as new device'}
               </Text>
             </Trans>
           </Box>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
index 9825a1dd..00a35774 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINnano.js
@@ -38,9 +38,9 @@ class SelectPINnano extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:selectPIN.initialize.instructions.nano.step3">
-              Press the right button to select
+              {'Press the right button to select'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Configure as new device
+                {'Configure as new device'}
               </Text>
             </Trans>
           </Box>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
index c40a8e60..18566798 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreBlue.js
@@ -33,9 +33,9 @@ class SelectPINrestoreBlue extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:selectPIN.restore.instructions.blue.step2">
-              Tap on
+              {'Tap on'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Restore configuration
+                {'Restore configuration'}
               </Text>
             </Trans>
           </Box>
diff --git a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
index 9bf64dbf..1d3302f8 100644
--- a/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
+++ b/src/components/Onboarding/steps/SelectPIN/SelectPINrestoreNano.js
@@ -38,13 +38,13 @@ class SelectPINrestoreNano extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:selectPIN.restore.instructions.nano.step3">
-              Press the left button to cancel
+              {'Press the left button to cancel'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Initialize as new device?
+                {'Initialize as new device?'}
               </Text>
-              Press the right button to select
+              {'Press the right button to select'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Restore configuration?
+                {'Restore configuration?'}
               </Text>
             </Trans>
           </Box>
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
index 11afcf60..872e07b8 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedBlue.js
@@ -39,15 +39,15 @@ class WriteSeedBlue extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:writeSeed.initialize.blue.step2">
-              Tap
+              {'Tap'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Next
+                {'Next'}
               </Text>
-              to move to the next words. Repeat the process until the
+              {'to move to the next words. Repeat the process until the'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Confirmation
+                {'Confirmation'}
               </Text>
-              screen appears.
+              {'screen appears.'}
             </Trans>
           </Box>
         ),
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
index 7d3a91b6..18f4c1b5 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedNano.js
@@ -34,11 +34,11 @@ class WriteSeedNano extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:writeSeed.initialize.nano.step1">
-              Copy the word displayed below
+              {'Copy the word displayed below'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Word #1
+                {'Word #1'}
               </Text>
-              in position 1 on a blank Recovery sheet.
+              {'in position 1 on a blank Recovery sheet.'}
             </Trans>
           </Box>
         ),
@@ -49,11 +49,11 @@ class WriteSeedNano extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:writeSeed.initialize.nano.step2">
-              Press the right button to display
+              {'Press the right button to display'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Word #2
+                {'Word #2'}
               </Text>
-              and repeat the process until all 24 words are copied on the Recovery sheet.
+              {'and repeat the process until all 24 words are copied on the Recovery sheet.'}
             </Trans>
           </Box>
         ),
diff --git a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
index a5d17afe..ad9de3fb 100644
--- a/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
+++ b/src/components/Onboarding/steps/WriteSeed/WriteSeedRestore.js
@@ -42,11 +42,11 @@ class WriteSeedRestore extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:writeSeed.restore.nano.step2">
-              Select the first letters of
+              {'Select the first letters of'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Word #1
+                {'Word #1'}
               </Text>
-              by pressing the right or left button. Press both buttons to confirm each letter.
+              {'by pressing the right or left button. Press both buttons to confirm each letter.'}
             </Trans>
           </Box>
         ),
@@ -57,11 +57,11 @@ class WriteSeedRestore extends PureComponent<Props, *> {
         desc: (
           <Box style={{ display: 'block' }}>
             <Trans i18nKey="onboarding:writeSeed.restore.nano.step3">
-              Select
+              {'Select'}
               <Text ff="Open Sans|SemiBold" color="dark">
-                Word #1
+                {'Word #1'}
               </Text>
-              from the suggested words. Press both buttons to continue.
+              {'from the suggested words. Press both buttons to continue.'}
             </Trans>
           </Box>
         ),

From ec3f52efd2fccfeec72b12b9c7e142f8a4c8cce0 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 27 Jun 2018 12:36:38 +0200
Subject: [PATCH 3/4] live logo with shadow integrated on all onboarding pages

---
 src/components/Onboarding/helperComponents.js | 14 ++++++++++++++
 src/components/Onboarding/steps/Finish.js     | 16 ++++++++++++----
 src/components/Onboarding/steps/Init.js       |  9 +++++----
 src/components/Onboarding/steps/NoDevice.js   | 11 ++++++-----
 src/components/Onboarding/steps/Start.js      |  9 ++++++---
 static/images/ledgerlive-logo.svg             |  2 +-
 6 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/Onboarding/helperComponents.js b/src/components/Onboarding/helperComponents.js
index a3191b0f..a45ca150 100644
--- a/src/components/Onboarding/helperComponents.js
+++ b/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 = {
diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js
index e582d708..10d3bb88 100644
--- a/src/components/Onboarding/steps/Finish.js
+++ b/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">
-          <IconCheckCircle size={44} />
+        <Box style={{ position: 'relative' }}>
+          <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>
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index ea503497..73e65199 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/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">
-            <img alt="" src={i('ledgerlive-logo.svg')} width={50} height={50} />
-          </Box>
+          <LiveLogo
+            style={{ width: 64, height: 64 }}
+            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+          />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:init.title')}</Title>
           </Box>
diff --git a/src/components/Onboarding/steps/NoDevice.js b/src/components/Onboarding/steps/NoDevice.js
index f63ad96f..e4b3b1e5 100644
--- a/src/components/Onboarding/steps/NoDevice.js
+++ b/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">
-            <IconUser size={36} />
-          </Box>
+          <LiveLogo
+            style={{ width: 64, height: 64 }}
+            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+          />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:noDevice.title')}</Title>
           </Box>
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index c419be90..a072d50b 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/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')} />
-        <Box my={4}>
+        <LiveLogo
+          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')}>
diff --git a/static/images/ledgerlive-logo.svg b/static/images/ledgerlive-logo.svg
index c8c2c60b..84b28fcb 100644
--- a/static/images/ledgerlive-logo.svg
+++ b/static/images/ledgerlive-logo.svg
@@ -25,4 +25,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>

From 598b4ef10ed4104082c129c756eec60ee493d7ae Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Wed, 27 Jun 2018 12:46:02 +0200
Subject: [PATCH 4/4] adding alt prop to all images

---
 src/components/Onboarding/steps/Finish.js   | 2 +-
 src/components/Onboarding/steps/Init.js     | 2 +-
 src/components/Onboarding/steps/NoDevice.js | 2 +-
 src/components/Onboarding/steps/Start.js    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js
index 10d3bb88..2fb41697 100644
--- a/src/components/Onboarding/steps/Finish.js
+++ b/src/components/Onboarding/steps/Finish.js
@@ -59,7 +59,7 @@ export default (props: StepProps) => {
         <Box style={{ position: 'relative' }}>
           <LiveLogo
             style={{ width: 64, height: 64 }}
-            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+            icon={<img alt="" src={i('ledgerlive-logo.svg')} width={40} height={40} />}
           />
           <Box color="positiveGreen" style={{ position: 'absolute', right: 0, bottom: 0 }}>
             <IconCheckFull size={18} />
diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js
index 73e65199..90c53095 100644
--- a/src/components/Onboarding/steps/Init.js
+++ b/src/components/Onboarding/steps/Init.js
@@ -67,7 +67,7 @@ class Init extends PureComponent<StepProps, *> {
         <Box align="center">
           <LiveLogo
             style={{ width: 64, height: 64 }}
-            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+            icon={<img src={i('ledgerlive-logo.svg')} alt="" width={40} height={40} />}
           />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:init.title')}</Title>
diff --git a/src/components/Onboarding/steps/NoDevice.js b/src/components/Onboarding/steps/NoDevice.js
index e4b3b1e5..c74c336c 100644
--- a/src/components/Onboarding/steps/NoDevice.js
+++ b/src/components/Onboarding/steps/NoDevice.js
@@ -50,7 +50,7 @@ class NoDevice extends PureComponent<StepProps, *> {
         <Box grow alignItems="center">
           <LiveLogo
             style={{ width: 64, height: 64 }}
-            icon={<img src={i('ledgerlive-logo.svg')} width={40} height={40} />}
+            icon={<img src={i('ledgerlive-logo.svg')} alt="" width={40} height={40} />}
           />
           <Box m={5} style={{ maxWidth: 480 }}>
             <Title>{t('onboarding:noDevice.title')}</Title>
diff --git a/src/components/Onboarding/steps/Start.js b/src/components/Onboarding/steps/Start.js
index a072d50b..97f62d50 100644
--- a/src/components/Onboarding/steps/Start.js
+++ b/src/components/Onboarding/steps/Start.js
@@ -16,7 +16,7 @@ export default (props: StepProps) => {
       <Box alignItems="center">
         <LiveLogo
           style={{ width: 80, height: 80 }}
-          icon={<img src={i('ledgerlive-logo.svg')} width={50} height={50} />}
+          icon={<img src={i('ledgerlive-logo.svg')} alt="" width={50} height={50} />}
         />
         <Box my={5}>
           <Title>{t('onboarding:start.title')}</Title>