Sunny Negi / Meteor-projects

Download as
Browse Code ยป

Commit fec06a89666781deaf5cecb05f8ae08e87af192c

Authored by ajaiprakash
1 parent e0cc9d5d7a
Exists in master

Signup/Login Styling

Showing 6 changed files with 46 additions and 19 deletions   Show diff stats
client/stylesheets/assets/css/bootstrap.css
Diff comments   View file @fec06a8
... ... @@ -1090,7 +1090,7 @@ body {
1090 1090 font-size: 13px;
1091 1091 line-height: 1.5384616;
1092 1092 color: #333333;
1093   - background-color: #eeeded;
  1093 + background-color: White;
1094 1094 }
1095 1095 input,
1096 1096 button,
... ...
imports/client/views/nonOrg/enter/SignupView.js
Diff comments   View file @fec06a8
... ... @@ -5,7 +5,7 @@ import { Row, Col, FormGroup,
5 5 InputGroup, Button } from 'react-bootstrap';
6 6 import handleSignup from './signup';
7 7 import { Orgs } from '/imports/collections/orgs/index';
8   -import './signup.css'
  8 +import './signup.css';
9 9  
10 10 export default class Signup extends React.Component {
11 11 constructor(props) {
... ... @@ -40,22 +40,22 @@ export default class Signup extends React.Component {
40 40 return (
41 41 <div className="Signup">
42 42 <Row>
43   - <Col xs={ 12 } sm={ 6 } md={ 4 }>
  43 + <Col md={ 12 }>
44 44 <h4 className="page-header">Sign Up</h4>
45 45 <form
46 46 ref={ form => (this.signupForm = form) }
47 47 onSubmit={ this.handleSubmit }
48 48 >
49 49 <Row>
50   - <Col xs={ 12 } sm={ 12 }>
  50 + <Col xs={ 10 } sm={ 10 }>
51 51 <FormGroup controlId="orgSlugField" validationState={this.checkExistingOrgSlug()}>
52   - <ControlLabel>Organisation name</ControlLabel>
  52 + <ControlLabel>Organisation URL</ControlLabel>
53 53 <InputGroup>
54 54 <FormControl
55 55 type ="text"
56 56 ref ="orgSlug"
57 57 name ="orgSlug"
58   - placeholder ="School URL"
  58 + placeholder ="Organisation URL"
59 59 onChange = {(e) => this.handleChange(e)}
60 60 />
61 61 <InputGroup.Addon>@yd.com</InputGroup.Addon>
... ... @@ -66,12 +66,12 @@ export default class Signup extends React.Component {
66 66 <Row>
67 67 <Col xs={ 6 } sm={ 6 }>
68 68 <FormGroup>
69   - <ControlLabel>First Name</ControlLabel>
  69 + <ControlLabel>Organisation Name</ControlLabel>
70 70 <FormControl
71 71 type="text"
72 72 ref="orgName"
73 73 name="orgName"
74   - placeholder="School Name"
  74 + placeholder="Organisation Name"
75 75 />
76 76 </FormGroup>
77 77 </Col>
... ... @@ -118,10 +118,10 @@ export default class Signup extends React.Component {
118 118 placeholder="Password"
119 119 />
120 120 </FormGroup>
121   - <Button type="submit" bsStyle="success">Sign Up</Button>
  121 + <Col md={12}
  122 + <Button type="submit" className='bheader' bsStyle="success">Sign Up</Button></Col>
122 123 </form>
123   - <p>Already have an account? <Link to="/login">Log In</Link>.</p>
124   - </Col>
  124 + </Col>
125 125 </Row>
126 126 </div>
127 127 );
... ...
imports/client/views/nonOrg/enter/signup.css
Diff comments   View file @fec06a8
1   -.Signup .row div{
2   - display: block;
3   - margin: auto;
4   - left: 27%;
  1 +.Signup
  2 +{
  3 + background-color: white;
  4 + margin: auto;
  5 + width: 40%;
  6 + border: 3px solid #73AD21;
  7 + padding: 10px;
  8 +}
  9 +
  10 +.page-header .bheader
  11 +{
  12 + text-align: center;
5 13 }
... ...
imports/client/views/org/enter/LoginPane.js
Diff comments   View file @fec06a8
... ... @@ -7,14 +7,16 @@ import { Alert } from &#39;reactstrap&#39;;
7 7 import 'velocity-animate';
8 8 import 'velocity-animate/velocity.ui';
9 9 import { VelocityComponent, VelocityTransitionGroup, velocityHelpers } from 'velocity-react';
  10 +import './loginpane.css';
10 11 import ReactSVG from 'react-svg'
11 12  
12 13  
  14 +
13 15 export class LoginPane extends React.Component {
14 16  
15 17 render() {
16 18 return (
17   - <Col lg={{ size: 6, pull: 2, push: 2, offset: 1 }} md={{ size: 9, pull: 1, push: 1 }} sm={{ size: 10, push: 1, pull: 1 }}>
  19 + <Col md={12} >
18 20 <VelocityTransitionGroup enter={{ animation: "transition.slideRightIn"}} leave={{animation: "transition.fadeOut" }} runOnMount={true}>
19 21 <div className="enterPane__centerVerticallyWrapper">
20 22 <Link
... ... @@ -35,6 +37,7 @@ export class LoginPane extends React.Component {
35 37 { this.props.data.message }
36 38 </Alert>
37 39 <Form onSubmit={ (e) => this.props.onLogin(e) }>
  40 + <Col md={12}>
38 41 <FormGroup>
39 42 <Input type="email" size="lg"
40 43 value={ this.props.data.email }
... ... @@ -42,7 +45,8 @@ export class LoginPane extends React.Component {
42 45 name="email"
43 46 id="email"
44 47 placeholder="Enter your email" />
45   - </FormGroup>
  48 + </FormGroup></Col>
  49 + <Col md={12}>
46 50 <FormGroup>
47 51 <Input type="password" size="lg"
48 52 value={ this.props.data.password }
... ... @@ -51,17 +55,20 @@ export class LoginPane extends React.Component {
51 55 id="password"
52 56 placeholder="Enter your password" />
53 57 </FormGroup>
  58 + </Col>
  59 + <Col md={12}>
54 60 <FormGroup>
55 61 <ActionButton
56 62 loading={ this.props.data.loading }>
57 63 <Button
58   - color="success" size="lg"
  64 + color="success" size="sm"
59 65 type="submit"
60 66 block>
61 67 Log in
62 68 </Button>
63 69 </ActionButton>
64 70 </FormGroup>
  71 + </Col>
65 72 <FormGroup className="enterPane__formGroupLogin--center">
66 73 <Link className="enterPane__link"
67 74 to={ setQueryParam(this.props.location, { enter: 'forgot' }) }>
... ...
imports/client/views/org/enter/loginpane.css
Diff comments   View file @fec06a8
... ... @@ -0,0 +1,12 @@
  1 +.enterPane__box{
  2 +background-color: white;
  3 +margin: auto;
  4 + width: 30%;
  5 + border: 3px solid #73AD21;
  6 + padding: 10px;
  7 + }
  8 +
  9 + .enterPane__header{
  10 + text-align: center;
  11 + font-weight: bold;
  12 + }
... ...
public/css/assets/css/bootstrap.css
Diff comments   View file @fec06a8
... ... @@ -1090,7 +1090,7 @@ body {
1090 1090 font-size: 13px;
1091 1091 line-height: 1.5384616;
1092 1092 color: #333333;
1093   - background-color: #eeeded;
  1093 + background-color: white;
1094 1094 }
1095 1095 input,
1096 1096 button,
... ...