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] 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.