From b16cb26a4b2ba2b591170a587fe1e700e4e24dc0 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Fri, 24 May 2019 11:59:56 +0200
Subject: [PATCH] Makes Account view a modal

---
 client/components/NavBasic.jsx            | 23 ++++++++
 client/modules/User/pages/AccountView.jsx | 64 +++++++++++------------
 client/styles/components/_account.scss    |  2 +-
 3 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 client/components/NavBasic.jsx

diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx
new file mode 100644
index 00000000..1cb89b71
--- /dev/null
+++ b/client/components/NavBasic.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+const logoUrl = require('../images/p5js-logo-small.svg');
+
+class NavBasic extends React.PureComponent {
+  
+  render() {
+    return (
+      <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
+        <ul className="nav__items-left" title="project-menu">
+          <li className="nav__item-logo">
+            <InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
+          </li>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+NavBasic.propTypes = {};
+
+export default NavBasic;
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index dbd6073c..e2ce9c90 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -12,9 +12,9 @@ import AccountForm from '../components/AccountForm';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import GithubButton from '../components/GithubButton';
 import APIKeyForm from '../components/APIKeyForm';
+import NavBasic from '../../../components/NavBasic';
 
 const exitUrl = require('../../../images/exit.svg');
-const logoUrl = require('../../../images/p5js-logo.svg');
 
 class AccountView extends React.Component {
   constructor(props) {
@@ -24,7 +24,7 @@ class AccountView extends React.Component {
   }
 
   componentDidMount() {
-    document.body.className = 'light';
+    document.body.className = this.props.theme;
   }
 
   closeAccountPage() {
@@ -37,43 +37,43 @@ class AccountView extends React.Component {
 
   render() {
     return (
-      <section className="form-container form-container--align-top form-container--align-left user">
+      <React.Fragment>
         <Helmet>
           <title>p5.js Web Editor | Account</title>
         </Helmet>
-        <div className="form-container__header">
-          <button className="form-container__logo-button" onClick={this.gotoHomePage}>
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
-          </button>
-          <button className="form-container__exit-button" onClick={this.closeAccountPage}>
-            <InlineSVG src={exitUrl} alt="Close Account Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">My Account</h2>
-          <Tabs className="account__tabs">
-            <TabList>
-              <div className="tabs__titles">
-                <Tab><h4 className="tabs__title">Account</h4></Tab>
-                <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
-              </div>
-            </TabList>
-            <TabPanel>
-              <AccountForm {...this.props} />
-              <div className="account__social">
+
+        <NavBasic />
+
+        <section className="modal user">
+          <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>
+                <div className="tabs__titles">
+                  <Tab><h4 className="tabs__title">Account</h4></Tab>
+                  <Tab><h4 className="tabs__title">Access Tokens</h4></Tab>
+                </div>
+              </TabList>
+              <TabPanel>
+                <AccountForm {...this.props} />
                 <h2 className="form-container__divider">Social Login</h2>
-                <p className="account__social__context">
+                <p className="account__social-text">
                   Link this account with your GitHub account to allow login from both.
                 </p>
                 <GithubButton buttonText="Login with GitHub" />
-              </div>
-            </TabPanel>
-            <TabPanel>
-              <APIKeyForm {...this.props} />
-            </TabPanel>
-          </Tabs>
-        </div>
-      </section>
+              </TabPanel>
+              <TabPanel>
+                <APIKeyForm {...this.props} />
+              </TabPanel>
+            </Tabs>
+          </div>
+        </section>
+      </React.Fragment>
     );
   }
 }
diff --git a/client/styles/components/_account.scss b/client/styles/components/_account.scss
index 44d8939d..8a6cb4fc 100644
--- a/client/styles/components/_account.scss
+++ b/client/styles/components/_account.scss
@@ -2,6 +2,6 @@
   padding-top: #{20 / $base-font-size}rem;
 }
 
-.account__social__context {
+.account__social-text {
   padding-bottom: #{15 / $base-font-size}rem;
 }