Fix layout on user pages
This commit is contained in:
parent
1f95718f58
commit
eb4846c3c2
5 changed files with 112 additions and 102 deletions
|
@ -65,21 +65,23 @@ class EmailVerificationView extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="form-container user">
|
<div className="user">
|
||||||
<Helmet>
|
<div className="form-container">
|
||||||
<title>p5.js Web Editor | Email Verification</title>
|
<Helmet>
|
||||||
</Helmet>
|
<title>p5.js Web Editor | Email Verification</title>
|
||||||
<div className="form-container__header">
|
</Helmet>
|
||||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
<div className="form-container__header">
|
||||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||||
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
</button>
|
||||||
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
||||||
</button>
|
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
||||||
</div>
|
</button>
|
||||||
<div className="form-container__content">
|
</div>
|
||||||
<h2 className="form-container__title">Verify your email</h2>
|
<div className="form-container__content">
|
||||||
{status}
|
<h2 className="form-container__title">Verify your email</h2>
|
||||||
|
{status}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -34,32 +34,34 @@ class LoginView extends React.Component {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="form-container user">
|
<div className="user">
|
||||||
<Helmet>
|
<div className="form-container">
|
||||||
<title>p5.js Web Editor | Login</title>
|
<Helmet>
|
||||||
</Helmet>
|
<title>p5.js Web Editor | Login</title>
|
||||||
<div className="form-container__header">
|
</Helmet>
|
||||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
<div className="form-container__header">
|
||||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||||
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
</button>
|
||||||
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
<button className="form-container__exit-button" onClick={this.closeLoginPage}>
|
||||||
</button>
|
<InlineSVG src={exitUrl} alt="Close Login Page" />
|
||||||
</div>
|
</button>
|
||||||
<div className="form-container__content">
|
</div>
|
||||||
<h2 className="form-container__title">Log In</h2>
|
<div className="form-container__content">
|
||||||
<LoginForm {...this.props} />
|
<h2 className="form-container__title">Log In</h2>
|
||||||
<h2 className="form-container__divider">Or</h2>
|
<LoginForm {...this.props} />
|
||||||
<GithubButton buttonText="Login with Github" />
|
<h2 className="form-container__divider">Or</h2>
|
||||||
<GoogleButton buttonText="Login with Google" />
|
<GithubButton buttonText="Login with Github" />
|
||||||
<p className="form__navigation-options">
|
<GoogleButton buttonText="Login with Google" />
|
||||||
Don't have an account?
|
<p className="form__navigation-options">
|
||||||
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
Don't have an account?
|
||||||
</p>
|
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
||||||
<p className="form__navigation-options">
|
</p>
|
||||||
Forgot your password?
|
<p className="form__navigation-options">
|
||||||
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
|
Forgot your password?
|
||||||
</p>
|
<Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -35,24 +35,26 @@ class NewPasswordView extends React.Component {
|
||||||
'user': true
|
'user': true
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className={newPasswordClass}>
|
<div className="user">
|
||||||
<Helmet>
|
<div className={newPasswordClass}>
|
||||||
<title>p5.js Web Editor | New Password</title>
|
<Helmet>
|
||||||
</Helmet>
|
<title>p5.js Web Editor | New Password</title>
|
||||||
<div className="form-container__header">
|
</Helmet>
|
||||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
<div className="form-container__header">
|
||||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||||
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
</button>
|
||||||
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
|
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={exitUrl} alt="Close NewPassword Page" />
|
||||||
</div>
|
</button>
|
||||||
<div className="form-container__content">
|
</div>
|
||||||
<h2 className="form-container__title">Set a New Password</h2>
|
<div className="form-container__content">
|
||||||
<NewPasswordForm {...this.props} />
|
<h2 className="form-container__title">Set a New Password</h2>
|
||||||
<p className="new-password__invalid">
|
<NewPasswordForm {...this.props} />
|
||||||
The password reset token is invalid or has expired.
|
<p className="new-password__invalid">
|
||||||
</p>
|
The password reset token is invalid or has expired.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -34,30 +34,32 @@ class ResetPasswordView extends React.Component {
|
||||||
'user': true
|
'user': true
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<div className={resetPasswordClass}>
|
<div className="user">
|
||||||
<Helmet>
|
<div className={resetPasswordClass}>
|
||||||
<title>p5.js Web Editor | Reset Password</title>
|
<Helmet>
|
||||||
</Helmet>
|
<title>p5.js Web Editor | Reset Password</title>
|
||||||
<div className="form-container__header">
|
</Helmet>
|
||||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
<div className="form-container__header">
|
||||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||||
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
</button>
|
||||||
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
|
<button className="form-container__exit-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={exitUrl} alt="Close ResetPassword Page" />
|
||||||
</div>
|
</button>
|
||||||
<div className="form-container__content">
|
</div>
|
||||||
<h2 className="form-container__title">Reset Your Password</h2>
|
<div className="form-container__content">
|
||||||
<ResetPasswordForm {...this.props} />
|
<h2 className="form-container__title">Reset Your Password</h2>
|
||||||
<p className="reset-password__submitted">
|
<ResetPasswordForm {...this.props} />
|
||||||
Your password reset email should arrive shortly. If you don't see it, check
|
<p className="reset-password__submitted">
|
||||||
in your spam folder as sometimes it can end up there.
|
Your password reset email should arrive shortly. If you don't see it, check
|
||||||
</p>
|
in your spam folder as sometimes it can end up there.
|
||||||
<p className="form__navigation-options">
|
</p>
|
||||||
<Link className="form__login-button" to="/login">Log In</Link>
|
<p className="form__navigation-options">
|
||||||
or
|
<Link className="form__login-button" to="/login">Log In</Link>
|
||||||
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
or
|
||||||
</p>
|
<Link className="form__signup-button" to="/signup">Sign Up</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -34,25 +34,27 @@ class SignupView extends React.Component {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="form-container user">
|
<div className="user">
|
||||||
<Helmet>
|
<div className="form-container">
|
||||||
<title>p5.js Web Editor | Signup</title>
|
<Helmet>
|
||||||
</Helmet>
|
<title>p5.js Web Editor | Signup</title>
|
||||||
<div className="form-container__header">
|
</Helmet>
|
||||||
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
<div className="form-container__header">
|
||||||
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
<button className="form-container__logo-button" onClick={this.gotoHomePage}>
|
||||||
</button>
|
<InlineSVG src={logoUrl} alt="p5js Logo" />
|
||||||
<button className="form-container__exit-button" onClick={this.closeSignupPage}>
|
</button>
|
||||||
<InlineSVG src={exitUrl} alt="Close Signup Page" />
|
<button className="form-container__exit-button" onClick={this.closeSignupPage}>
|
||||||
</button>
|
<InlineSVG src={exitUrl} alt="Close Signup Page" />
|
||||||
</div>
|
</button>
|
||||||
<div className="form-container__content">
|
</div>
|
||||||
<h2 className="form-container__title">Sign Up</h2>
|
<div className="form-container__content">
|
||||||
<SignupForm {...this.props} />
|
<h2 className="form-container__title">Sign Up</h2>
|
||||||
<p className="form__navigation-options">
|
<SignupForm {...this.props} />
|
||||||
Already have an account?
|
<p className="form__navigation-options">
|
||||||
<Link className="form__login-button" to="/login">Log In</Link>
|
Already have an account?
|
||||||
</p>
|
<Link className="form__login-button" to="/login">Log In</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue