From 4679d6a0bddd22b012e7f379bd069af07e63e1e2 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Tue, 4 Jun 2019 14:58:13 +0200
Subject: [PATCH] Show "Back to the editor" in nav on Account view page

---
 client/components/NavBasic.jsx            | 21 +++++++++++++++++++--
 client/images/triangle-arrow-left.svg     | 14 ++++++++++++++
 client/modules/User/pages/AccountView.jsx |  5 +----
 3 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 client/images/triangle-arrow-left.svg

diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
index 1cb89b71..92913add 100644
--- a/client/components/NavBasic.jsx
+++ b/client/components/NavBasic.jsx
@@ -1,10 +1,15 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
 
 const logoUrl = require('../images/p5js-logo-small.svg');
+const arrowUrl = require('../images/triangle-arrow-left.svg');
 
 class NavBasic extends React.PureComponent {
-  
+  static defaultProps = {
+    onBack: null
+  }
+
   render() {
     return (
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
@@ -12,12 +17,24 @@ class NavBasic extends React.PureComponent {
           <li className="nav__item-logo">
             <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
           </li>
+          { this.props.onBack && (
+            <li className="nav__item">
+              <button onClick={this.props.onBack}>
+                <span className="nav__item-header">
+                  <InlineSVG src={arrowUrl} alt="Left arrow" />
+                </span>
+                Back to the editor
+              </button>
+            </li>)
+          }
         </ul>
       </nav>
     );
   }
 }
 
-NavBasic.propTypes = {};
+NavBasic.propTypes = {
+  onBack: PropTypes.func,
+};
 
 export default NavBasic;
diff --git a/client/images/triangle-arrow-left.svg b/client/images/triangle-arrow-left.svg
new file mode 100644
index 00000000..dcc159df
--- /dev/null
+++ b/client/images/triangle-arrow-left.svg
@@ -0,0 +1,14 @@
+<svg width="10px" height="10px" viewBox="0 0 5 5" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Left Arrow</title>
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="environment" transform="translate(-26.000000, -42.000000)" fill="#B5B5B5">
+      <g id="libraries" transform="translate(21.000000, 32.000000)">
+        <polygon id="Triangle-3" transform="translate(7.500000, 12.500000) rotate(270.000000) translate(-7.500000, -12.500000) " points="7.5 10 10 15 5 15"></polygon>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index f4d25fce..7382656e 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -42,15 +42,12 @@ class AccountView extends React.Component {
           <title>p5.js Web Editor | Account</title>
         </Helmet>
 
-        <NavBasic />
+        <NavBasic onBack={this.closeAccountPage} />
 
         <section className="modal">
           <div className="modal-content">
             <div className="modal__header">
               <h2 className="modal__title">My Account</h2>
-              <button className="modal__exit-button" onClick={this.closeAccountPage}>
-                <InlineSVG src={exitUrl} alt="Close Account Page" />
-              </button>
             </div>
             <Tabs className="account__tabs">
               <TabList>