added logic, thank page, modify page

src/components/Help.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Help (){
+	return (
+		<div style = {{display: 'flex', justifyContent: 'flex-end'}}>
+			<h4> Help </h4>
+		</div>
+		)
+}
+
+export default Help

src/components/Signin.js

@@ -1,30 +1,40 @@
 import React from 'react';
 
-function Signin (){
+function Signin ({onRouteChange}){
 	return ( 
-		<main class="pa4 black-80">
-		  <form class="measure center">
-		    <fieldset id="sign_up" class="ba b--transparent ph0 mh0">
-		      <legend class="f4 fw6 ph0 mh0">Sign In</legend>
-		      <div class="mt3">
-		        <label class="db fw6 lh-copy f6" for="email-address">Email</label>
-		        <input class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address"  id="email-address" />
+		<article className="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 shadow-5 center">
+		<main className="pa4 black-80">
+		  <form className="measure center">
+		    <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
+		      <legend className="f4 fw6 ph0 mh0">Last Step</legend>
+		      <div className="mt3">
+		        <label className="db fw6 lh-copy f6" for="email-address">Yale Email</label>
+		        <input className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address"  id="email-address" />
 		      </div>
-		      <div class="mv3">
-		        <label class="db fw6 lh-copy f6" for="password">Password</label>
-		        <input class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password" />
+		      <div className="ms3">
+		        <label className="db fw6 lh-copy f6" for="password">Name</label>
+		        <input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password" />
 		      </div>
-		      <label class="pa0 ma0 lh-copy f6 pointer"><input type="checkbox"/> Remember me</label>
+		      <div className="mv3">
+		        <label className="db fw6 lh-copy f6" for="password">Phone Number</label>
+		        <input className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password" />
+		      </div>
+		      <label className="pa0 ma0 lh-copy f6 pointer"> <input type="checkbox"/> Remember me</label>
 		    </fieldset>
-		    <div class="">
-		      <input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Sign in" />
+		    <div className="">
+		      <input 
+		      className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" 
+		      type="submit" 
+		      value="Submit"
+		      onClick = {() => onRouteChange('Thank')} />
 		    </div>
-		    <div class="lh-copy mt3">
-		      <a href="#0" class="f6 link dim black db">Sign up</a>
-		      <a href="#0" class="f6 link dim black db">Forgot your password?</a>
+		    <div className="lh-copy mt3">
+		      {/*<a href="#0" className="f6 link dim black db">Register</a> */}
+		      <a href="#0" className="f6 link dim black db">Forgot your password?</a>
 		    </div>
   		  </form>
   		</main> 
+  		</article>
   		);
 }
 

src/components/Thank.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+function Thank ({onRouteChange}) {
+	return (
+		<div className = 'tc'>
+			<h1> Thank you for using Divvy! </h1> 
+			<div>
+				<input 
+				className = 'b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
+				value = 'click to modify'
+				onClick = {onRouteChange} />
+			</div> <br></br> 
+			<div>
+				<input 
+				className = 'b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib'
+				value = 'Fill out another form'
+				onClick = {()=>{onRouteChange ('firsttime')}} />
+			</div>
+		</div>)
+}
+
+export default Thank 

src/components/Top.js

@@ -4,7 +4,7 @@ import './Top.css';
 function Top () {
 	return (
 		<div className = "tc f3">
-			<h1> Welcome to Divvy </h1>
+			<h1 > Welcome to Divvy </h1>
 		</div>)
 }
 

src/containers/Airport2.js

@@ -1,13 +1,12 @@
 import React, {Component} from 'react';
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import './Airport.css';
+import './Airport2.css';
 import Basket from  '../components/Basket.js';
 import '../components/Basket.css';
 import {users, airports} from '../components/fakedata.js';
 import Scroll from '../components/Scroll';
 import './Airport2.css'
-import Signin from '../components/Signin'
 
 class Airport2 extends Component {
 
@@ -16,21 +15,19 @@ class Airport2 extends Component {
 		this.state = {
 			startDate: new Date(),
 			airports: airports,
-			users: users
+			users: users,
 	};}
 
 	onChange = date => {this.setState({startDate: date});};
-
+	
 
 	render () {
 		const Airmaps = this.state.airports.map((name, i) => {
 		return <Block date = {this.state.startDate} airport = {this.state.airports[i]} users = {this.state.users} />
 	});
 
-
 		return (
 			<div className = "f3 tc">
-			<Signin/>
 			<header> 
 				<DatePicker selected = {this.state.startDate} onChange = {this.onChange} />
 			</header>

src/containers/App.js

@@ -1,14 +1,43 @@
 import React, {Component} from 'react';
 import Airport2 from './Airport2';
 import Top from '../components/Top';
-import './App.css';
+import Signin from '../components/Signin';
+import './Airport2.css';
+import Help from '../components/Help'
+import Thank from '../components/Thank'
 
 class App extends Component{ 
+  constructor (){
+  	super()
+  	this.state = {
+  		route: 'firsttime'
+  	};
+  };
+
+ 	onRouteChange = (route) => {
+		this.setState({route:route});
+	}
+
   render () {
     return (
       <div>
+      {this.state.route === 'firsttime'
+      ? <div>
         <Top/>
+		<h5 className = 'tr link dim black underline pa3 pointer'> <Help/> </h5>
+		<h5 className = 'tr link dim black underline pa3 pointer'> Login </h5>
         <Airport2 />
+        <Signin onRouteChange = {this.onRouteChange} /> 
+        </div>
+      :(this.state.route === 'Thank'
+      	? <div>
+          <Thank onRouteChange = {this.onRouteChange}/> 
+          </div>
+        : <div>
+          <Top/>
+          <Airport2/>
+          </div>
+  	  )}
       </div> 
       );
   }