Adding back button to reveal seed phrase view (#11246)

Reveal seed phrase button placement fixes

Localizing uses of the word "Back"

ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js

@@ -231,7 +231,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
             }}
             href="#"
           >
-            {`< Back`}
+            {`< ${t('back')}`}
           </a>
         </div>
         <div className="first-time-flow__header">

ui/pages/first-time-flow/create-password/new-account/new-account.component.js

@@ -161,7 +161,7 @@ export default class NewAccount extends PureComponent {
             }}
             href="#"
           >
-            {`< Back`}
+            {`< ${t('back')}`}
           </a>
         </div>
         <div className="first-time-flow__header">{t('createPassword')}</div>

ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js

@@ -140,7 +140,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
             }}
             href="#"
           >
-            {`< Back`}
+            {`< ${t('back')}`}
           </a>
         </div>
         <div className="first-time-flow__header">

ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss

@@ -67,9 +67,10 @@
 
   &__buttons {
     display: flex;
+    margin-top: 10px;
 
     .first-time-flow__button:last-of-type {
-      margin-left: 20px;
+      margin-left: 10px;
     }
   }
 }

ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js

@@ -1,12 +1,14 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import Box from '../../../../components/ui/box';
 import LockIcon from '../../../../components/ui/lock-icon';
 import Button from '../../../../components/ui/button';
 import Snackbar from '../../../../components/ui/snackbar';
 import {
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
   DEFAULT_ROUTE,
+  INITIALIZE_SEED_PHRASE_INTRO_ROUTE,
 } from '../../../../helpers/constants/routes';
 import { exportAsFile } from '../../../../helpers/utils/util';
 import { returnToOnboardingInitiator } from '../../onboarding-initiator-util';
@@ -123,12 +125,23 @@ export default class RevealSeedPhrase extends PureComponent {
   render() {
     const { t } = this.context;
     const { isShowingSeedPhrase } = this.state;
-    const { onboardingInitiator } = this.props;
+    const { history, onboardingInitiator } = this.props;
 
     return (
       <div className="reveal-seed-phrase">
         <div className="seed-phrase__sections">
           <div className="seed-phrase__main">
+            <Box marginBottom={4}>
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  history.push(INITIALIZE_SEED_PHRASE_INTRO_ROUTE);
+                }}
+              >
+                {`< ${t('back')}`}
+              </a>
+            </Box>
             <div className="first-time-flow__header">
               {t('secretBackupPhrase')}
             </div>

ui/pages/keychains/restore-vault.js

@@ -148,7 +148,7 @@ class RestoreVaultPage extends Component {
               }}
               href="#"
             >
-              {`< Back`}
+              {`< ${t('back')}`}
             </a>
             <div className="import-account__title">
               {this.context.t('restoreAccountWithSeed')}