From eb4846c3c28e02dc6b6d1e9f9b662efcda5c53b8 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Tue, 4 Jun 2019 14:57:48 +0200
Subject: [PATCH] Fix layout on user pages

---
 .../User/pages/EmailVerificationView.jsx      | 32 +++++------
 client/modules/User/pages/LoginView.jsx       | 54 ++++++++++---------
 client/modules/User/pages/NewPasswordView.jsx | 38 ++++++-------
 .../modules/User/pages/ResetPasswordView.jsx  | 50 ++++++++---------
 client/modules/User/pages/SignupView.jsx      | 40 +++++++-------
 5 files changed, 112 insertions(+), 102 deletions(-)

diff --git a/client/modules/User/pages/EmailVerificationView.jsx b/client/modules/User/pages/EmailVerificationView.jsx
index 49d3b7fa..55b5a1f3 100644
--- a/client/modules/User/pages/EmailVerificationView.jsx
+++ b/client/modules/User/pages/EmailVerificationView.jsx
@@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
     }
 
     return (
-      <div className="form-container user">
-        <Helmet>
-          <title>p5.js Web Editor | Email Verification</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.closeLoginPage}>
-            <InlineSVG src={exitUrl} alt="Close Login Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Verify your email</h2>
-          {status}
+      <div className="user">
+        <div className="form-container">
+          <Helmet>
+            <title>p5.js Web Editor | Email Verification</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.closeLoginPage}>
+              <InlineSVG src={exitUrl} alt="Close Login Page" />
+            </button>
+          </div>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Verify your email</h2>
+            {status}
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index 9e0b3656..4ce4ab8d 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -34,32 +34,34 @@ class LoginView extends React.Component {
       return null;
     }
     return (
-      <div className="form-container user">
-        <Helmet>
-          <title>p5.js Web Editor | Login</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.closeLoginPage}>
-            <InlineSVG src={exitUrl} alt="Close Login Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Log In</h2>
-          <LoginForm {...this.props} />
-          <h2 className="form-container__divider">Or</h2>
-          <GithubButton buttonText="Login with Github" />
-          <GoogleButton buttonText="Login with Google" />
-          <p className="form__navigation-options">
-            Don&apos;t have an account?&nbsp;
-            <Link className="form__signup-button" to="/signup">Sign Up</Link>
-          </p>
-          <p className="form__navigation-options">
-            Forgot your password?&nbsp;
-            <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
-          </p>
+      <div className="user">
+        <div className="form-container">
+          <Helmet>
+            <title>p5.js Web Editor | Login</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.closeLoginPage}>
+              <InlineSVG src={exitUrl} alt="Close Login Page" />
+            </button>
+          </div>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Log In</h2>
+            <LoginForm {...this.props} />
+            <h2 className="form-container__divider">Or</h2>
+            <GithubButton buttonText="Login with Github" />
+            <GoogleButton buttonText="Login with Google" />
+            <p className="form__navigation-options">
+              Don&apos;t have an account?&nbsp;
+              <Link className="form__signup-button" to="/signup">Sign Up</Link>
+            </p>
+            <p className="form__navigation-options">
+              Forgot your password?&nbsp;
+              <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
+            </p>
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx
index 6fcd1bde..32b9ae91 100644
--- a/client/modules/User/pages/NewPasswordView.jsx
+++ b/client/modules/User/pages/NewPasswordView.jsx
@@ -35,24 +35,26 @@ class NewPasswordView extends React.Component {
       'user': true
     });
     return (
-      <div className={newPasswordClass}>
-        <Helmet>
-          <title>p5.js Web Editor | New Password</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.gotoHomePage}>
-            <InlineSVG src={exitUrl} alt="Close NewPassword Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Set a New Password</h2>
-          <NewPasswordForm {...this.props} />
-          <p className="new-password__invalid">
-            The password reset token is invalid or has expired.
-          </p>
+      <div className="user">
+        <div className={newPasswordClass}>
+          <Helmet>
+            <title>p5.js Web Editor | New Password</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.gotoHomePage}>
+              <InlineSVG src={exitUrl} alt="Close NewPassword Page" />
+            </button>
+          </div>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Set a New Password</h2>
+            <NewPasswordForm {...this.props} />
+            <p className="new-password__invalid">
+              The password reset token is invalid or has expired.
+            </p>
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/ResetPasswordView.jsx b/client/modules/User/pages/ResetPasswordView.jsx
index 2dfae858..c6db189a 100644
--- a/client/modules/User/pages/ResetPasswordView.jsx
+++ b/client/modules/User/pages/ResetPasswordView.jsx
@@ -34,30 +34,32 @@ class ResetPasswordView extends React.Component {
       'user': true
     });
     return (
-      <div className={resetPasswordClass}>
-        <Helmet>
-          <title>p5.js Web Editor | Reset Password</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.gotoHomePage}>
-            <InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Reset Your Password</h2>
-          <ResetPasswordForm {...this.props} />
-          <p className="reset-password__submitted">
-            Your password reset email should arrive shortly. If you don&apos;t see it, check
-            in your spam folder as sometimes it can end up there.
-          </p>
-          <p className="form__navigation-options">
-            <Link className="form__login-button" to="/login">Log In</Link>
-            &nbsp;or&nbsp;
-            <Link className="form__signup-button" to="/signup">Sign Up</Link>
-          </p>
+      <div className="user">
+        <div className={resetPasswordClass}>
+          <Helmet>
+            <title>p5.js Web Editor | Reset Password</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.gotoHomePage}>
+              <InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
+            </button>
+          </div>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Reset Your Password</h2>
+            <ResetPasswordForm {...this.props} />
+            <p className="reset-password__submitted">
+              Your password reset email should arrive shortly. If you don&apos;t see it, check
+              in your spam folder as sometimes it can end up there.
+            </p>
+            <p className="form__navigation-options">
+              <Link className="form__login-button" to="/login">Log In</Link>
+              &nbsp;or&nbsp;
+              <Link className="form__signup-button" to="/signup">Sign Up</Link>
+            </p>
+          </div>
         </div>
       </div>
     );
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index c8d168f5..bcd98a3a 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -34,25 +34,27 @@ class SignupView extends React.Component {
       return null;
     }
     return (
-      <div className="form-container user">
-        <Helmet>
-          <title>p5.js Web Editor | Signup</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.closeSignupPage}>
-            <InlineSVG src={exitUrl} alt="Close Signup Page" />
-          </button>
-        </div>
-        <div className="form-container__content">
-          <h2 className="form-container__title">Sign Up</h2>
-          <SignupForm {...this.props} />
-          <p className="form__navigation-options">
-            Already have an account?&nbsp;
-            <Link className="form__login-button" to="/login">Log In</Link>
-          </p>
+      <div className="user">
+        <div className="form-container">
+          <Helmet>
+            <title>p5.js Web Editor | Signup</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.closeSignupPage}>
+              <InlineSVG src={exitUrl} alt="Close Signup Page" />
+            </button>
+          </div>
+          <div className="form-container__content">
+            <h2 className="form-container__title">Sign Up</h2>
+            <SignupForm {...this.props} />
+            <p className="form__navigation-options">
+              Already have an account?&nbsp;
+              <Link className="form__login-button" to="/login">Log In</Link>
+            </p>
+          </div>
         </div>
       </div>
     );