add signup for styling

This commit is contained in:
catarak 2016-06-13 21:07:00 -04:00
parent c4cdc92c4b
commit a79391c96c
8 changed files with 82 additions and 8 deletions

View file

@ -43,6 +43,7 @@
"cookie-parser": "^1.4.1", "cookie-parser": "^1.4.1",
"dotenv": "^2.0.0", "dotenv": "^2.0.0",
"express": "^4.13.4", "express": "^4.13.4",
"express-session": "^1.13.0",
"mongoose": "^4.4.16", "mongoose": "^4.4.16",
"passport": "^0.3.2", "passport": "^0.3.2",
"passport-github": "^1.1.0", "passport-github": "^1.1.0",
@ -51,6 +52,7 @@
"react-dom": "^15.0.2", "react-dom": "^15.0.2",
"react-inlinesvg": "^0.4.2", "react-inlinesvg": "^0.4.2",
"react-redux": "^4.4.5", "react-redux": "^4.4.5",
"react-router": "^2.4.1",
"redux": "^3.5.2", "redux": "^3.5.2",
"redux-form": "^5.2.5", "redux-form": "^5.2.5",
"redux-thunk": "^2.1.0" "redux-thunk": "^2.1.0"

View file

@ -4,11 +4,23 @@ class SignupForm extends React.Component {
render() { render() {
const {fields: { username, email, password, confirmPassword }, handleSubmit} = this.props; const {fields: { username, email, password, confirmPassword }, handleSubmit} = this.props;
return ( return (
<form onSubmit={handleSubmit(this.props.signUpUser.bind(this))}> <form className="signup-form" onSubmit={handleSubmit(this.props.signUpUser.bind(this))}>
<input type="text" placeholder="Username" {...username}/> <p>
<input type="text" placeholder="Email" {...email}/> <label className="signup-form__username-label" for="username">Username:</label>
<input type="password" placeholder="Password" {...password}/> <input className="signup-form__username-input" id="username" type="text" placeholder="Username" {...username}/>
<input type="password" placeholder="Confirm Password" {...confirmPassword}/> </p>
<p>
<label className="signup-form__email-label" for="email">Email:</label>
<input className="signup-form__email-input" id="email" type="text" placeholder="Email" {...email}/>
</p>
<p>
<label className="signup-form__password-label" for="password">Password:</label>
<input className="signup-form__password-input" id="password" type="password" placeholder="Password" {...password}/>
</p>
<p>
<label className="signup-form__confirm-password-label" for="confirm-password">Confirm Password:</label>
<input className="signup-form__confirm-password-input" id="confirm-password" type="password" placeholder="Confirm Password" {...confirmPassword}/>
</p>
<input type="submit" value="Sign Up" /> <input type="submit" value="Sign Up" />
</form> </form>
) )

View file

@ -8,7 +8,10 @@ import SignupForm from '../../components/SignupForm/SignupForm'
class SignupView extends React.Component { class SignupView extends React.Component {
render() { render() {
return ( return (
<SignupForm {...this.props} /> <div className="signup">
<h1>Sign Up</h1>
<SignupForm {...this.props} />
</div>
) )
} }
} }

View file

@ -33,6 +33,25 @@
} }
} }
%button {
background-color: $light-button-background-color;
color: $light-button-color;
cursor: pointer;
border: 1px solid $light-button-border-color;
border-radius: 2px;
padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
&:hover {
border-color: $light-button-background-hover-color;
background-color: $light-button-background-hover-color;
color: $light-button-hover-color;
}
&:active {
border-color: $light-button-background-active-color;
background-color: $light-button-background-active-color;
color: $light-button-active-color;
}
}
%preferences-button { %preferences-button {
@extend %button; @extend %button;
background-color: $light-preferences-button-background-color; background-color: $light-preferences-button-background-color;

View file

@ -14,6 +14,7 @@ $light-background-color: #fdfdfd;
$light-button-background-color: #f4f4f4; $light-button-background-color: #f4f4f4;
$light-button-color: $black; $light-button-color: $black;
$light-button-border-color: #979797;
$light-toolbar-button-color: $p5js-pink; $light-toolbar-button-color: $p5js-pink;
$light-button-background-hover-color: $p5js-pink; $light-button-background-hover-color: $p5js-pink;
$light-button-background-active-color: #f10046; $light-button-background-active-color: #f10046;
@ -35,6 +36,7 @@ $dark-button-active-color: $white;
$editor-border-color: #f4f4f4; $editor-border-color: #f4f4f4;
$editor-selected-line-color: #f3f3f3; $editor-selected-line-color: #f3f3f3;
$input-border-color: #979797;
$light-preferences-background-color: #f4f4f4; $light-preferences-background-color: #f4f4f4;

View file

@ -2,11 +2,11 @@
box-sizing: border-box; box-sizing: border-box;
} }
html { html, body {
font-size: #{$base-font-size}px; font-size: #{$base-font-size}px;
} }
body { body, input, button {
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
color: $light-primary-text-color; color: $light-primary-text-color;
} }
@ -24,3 +24,17 @@ a {
color: $light-primary-text-color; color: $light-primary-text-color;
} }
} }
input, button {
font-size: 1rem;
}
input {
padding: #{5 / $base-font-size}rem;
border-radius: 2px;
border: 1px solid $input-border-color;
}
button, input[type="submit"] {
@extend %button;
}

View file

@ -0,0 +1,21 @@
.signup {
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.signup-form__username-label,
.signup-form__email-label,
.signup-form__password-label,
.signup-form__confirm-password-label {
display: none;
}
.signup-form__username-input,
.signup-form__email-input,
.signup-form__password-input,
.signup-form__confirm-password-input {
width: #{300 / $base-font-size}rem;
}

View file

@ -11,5 +11,6 @@
@import 'components/nav'; @import 'components/nav';
@import 'components/toolbar'; @import 'components/toolbar';
@import 'components/preferences'; @import 'components/preferences';
@import 'components/signup';
@import 'layout/ide'; @import 'layout/ide';