Makes Account view a modal

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;

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,20 +37,21 @@ 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}>
+        <NavBasic />
-            <InlineSVG src={logoUrl} alt="p5js Logo" />
+
-          </button>
+        <section className="modal user">
-          <button className="form-container__exit-button" onClick={this.closeAccountPage}>
+          <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>
-        <div className="form-container__content">
-          <h2 className="form-container__title">My Account</h2>
             <Tabs className="account__tabs">
               <TabList>
                 <div className="tabs__titles">
@@ -60,13 +61,11 @@ class AccountView extends React.Component {
               </TabList>
               <TabPanel>
                 <AccountForm {...this.props} />
-              <div className="account__social">
                 <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} />
@@ -74,6 +73,7 @@ class AccountView extends React.Component {
             </Tabs>
           </div>
         </section>
+      </React.Fragment>
     );
   }
 }

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;
 }