Add back buttons in account creation

packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js

@@ -14,6 +14,7 @@ class AccountCopyPhrase extends Component {
   render () {
     const {
       createAccountStore: { address, name, phrase },
+      history,
       location: { pathname }
     } = this.props;
     const currentStep = pathname.slice(-1);
@@ -43,7 +44,12 @@ class AccountCopyPhrase extends Component {
                 </ul>
               </div>
             </div>
-            <nav className='form-nav'>
+            <nav className='form-nav -space-around'>
+              {currentStep > 1 && (
+                <button className='button -cancel' onClick={history.goBack}>
+                  Back
+                </button>
+              )}
               <Link to={`/accounts/new/${+currentStep + 1}`}>
                 <button className='button'>Next</button>
               </Link>

packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js

@@ -69,6 +69,7 @@ class AccountName extends Component {
   renderDrawer = () => {
     const {
       createAccountStore: { name },
+      history,
       location: { pathname }
     } = this.props;
     const currentStep = pathname.slice(-1);
@@ -85,7 +86,12 @@ class AccountName extends Component {
           type='text'
           value={name}
         />
-        <nav className='form-nav'>
+        <nav className='form-nav -space-around'>
+          {currentStep > 1 && (
+            <button className='button -cancel' onClick={history.goBack}>
+              Back
+            </button>
+          )}
           {name ? (
             <Link to={`/accounts/new/${+currentStep + 1}`}>
               <button className='button'>Next</button>

packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js

@@ -38,9 +38,12 @@ class AccountPassword extends Component {
 
   render () {
     const {
-      createAccountStore: { address, name }
+      createAccountStore: { address, name },
+      history,
+      location: { pathname }
     } = this.props;
     const { confirm, password } = this.state;
+    const currentStep = pathname.slice(-1);
 
     return (
       <AccountCard
@@ -68,7 +71,12 @@ class AccountPassword extends Component {
               value={confirm}
             />
 
-            <nav className='form-nav'>
+            <nav className='form-nav -space-around'>
+              {currentStep > 1 && (
+                <button className='button -cancel' onClick={history.goBack}>
+                  Back
+                </button>
+              )}
               <button
                 className='button'
                 disabled={!password || confirm !== password}

packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js

@@ -54,9 +54,12 @@ class AccountRewritePhrase extends Component {
 
   render () {
     const {
-      createAccountStore: { address, isImport, name }
+      createAccountStore: { address, isImport, name },
+      history,
+      location: { pathname }
     } = this.props;
     const { value } = this.state;
+    const currentStep = pathname.slice(-1);
 
     return (
       <AccountCard
@@ -81,7 +84,14 @@ class AccountRewritePhrase extends Component {
               label='Recovery phrase'
             />
 
-            <nav className='form-nav'>{this.renderButton()}</nav>
+            <nav className='form-nav -space-around'>
+              {currentStep > 1 && (
+                <button className='button -cancel' onClick={history.goBack}>
+                  Back
+                </button>
+              )}
+              {this.renderButton()}
+            </nav>
           </div>
         ]}
       />

packages/fether-react/src/assets/sass/components/_form-nav.scss

@@ -6,4 +6,8 @@
   &.-binary {
     justify-content: space-between;
   }
+
+  &.-space-around {
+    justify-content: space-around;
+  }
 }