From b0f90f13da130579138bfd8a943f4982adf45fde Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Tue, 8 Jun 2021 10:02:34 -0700
Subject: [PATCH] Adding back button to reveal seed phrase view (#11246)

Reveal seed phrase button placement fixes

Localizing uses of the word "Back"
---
 .../import-with-seed-phrase.component.js          |  2 +-
 .../new-account/new-account.component.js          |  2 +-
 .../confirm-seed-phrase.component.js              |  2 +-
 .../seed-phrase/reveal-seed-phrase/index.scss     |  3 ++-
 .../reveal-seed-phrase.component.js               | 15 ++++++++++++++-
 ui/pages/keychains/restore-vault.js               |  2 +-
 6 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
index 5bb58fd66..3e7634298 100644
--- a/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/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">
diff --git a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/pages/first-time-flow/create-password/new-account/new-account.component.js
index 1e9417eb1..a392bc295 100644
--- a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js
+++ b/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>
diff --git a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
index 6c7420ef2..d93cf74e4 100644
--- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/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">
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index b0f4b9c0a..0af006dab 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/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;
     }
   }
 }
diff --git a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index 1236817a7..a206a73dc 100644
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/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>
diff --git a/ui/pages/keychains/restore-vault.js b/ui/pages/keychains/restore-vault.js
index 6073c647a..4ae63dbbe 100644
--- a/ui/pages/keychains/restore-vault.js
+++ b/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')}