stable init

package.json

@@ -18,6 +18,7 @@
     "react-dropdown": "^1.4.0",
     "react-loading": "^2.0.0",
     "react-modal": "^3.4.2",
+    "react-responsive": "^4.1.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
     "react-time-picker": "^2.3.2"

src/Components/FormContainer.js

@@ -4,6 +4,7 @@ import '../styles/FormContainer.css';
 import { Button } from 'react-bootstrap';
 
 
+
 class FormContainer extends Component {
     constructor(props) {
         super(props); //access props
@@ -39,11 +40,15 @@ class FormContainer extends Component {
                         description = {"Username"}
                         placeholder = {"ex) user@gmail.com"} 
                         type={"text"}
+                        className = {"input"}
                     />
                     <InputField
+                         className= "input"
                          description = {"Password"}
                          placeholder = {""}
-                         type={"password"}/>
+                         type={"password"}
+
+                         />
                 </div>
 
                 <div>

src/Components/InputField.js

@@ -1,10 +1,19 @@
 import React from 'react';
+import '../styles/InputField.css';
+import '../styles/FormContainer.css';
 
 const InputField = (props) => {
     return(
       <div>
           <div> {props.description} </div>
-          <input name = {props.Name} value = {props.Value} onChange={props.onchange} placeholder = {props.placeholder} className ="form-control" type={props.type}/>
+          <input name = {props.Name} 
+              value = {props.Value}
+                 onChange={props.onchange}
+                  placeholder = {props.placeholder}
+                  type={props.type}
+                   //className ="form-control" type={props.type}
+                   className = {props.className}
+                   />
       </div>
     );
   };

src/Components/ListContainer.js

@@ -68,6 +68,7 @@ class ListContainer extends Component{
                              onclick = { this.handleClick.bind(this) } 
                              selected = {this.state.selectedRequest}
                              userName = {this.props.userName}
+                             {...this.props}
                              />
                 <MatchList 
                     selectedRequest = {this.state.selectedRequestData}

src/Components/RequestList.js

@@ -17,7 +17,15 @@ class RequestList extends Component{
         }
     }
 
-    renderRequests(){ //Renders json data       
+    renderRequests(){ //Renders json data      
+
+        if(this.props.requestData.length === 0 ){
+            return(
+                <div className = "emptyRequest" >
+                    Request a Share!
+                </div>
+            )
+        }
 
         const renderedRequestList = this.props.requestData.map((currentReq, index) => 
             <div> 

src/Components/RequestModal.js

@@ -84,6 +84,7 @@ class RequestModal extends Component{
             this.state.time_buffer 
         )
 
+        this.setState({destination: "", time_buffer: "", time: ""})
         this.props.onclick()
         window.location.reload();
     }
@@ -124,7 +125,9 @@ class RequestModal extends Component{
                                 Value = {this.state.time_buffer}
                                 description = {"How long can you wait? (Minutes)"} 
                                 placeholder = {"ex) 30"} 
-                                type={"text"}/>
+                                type={"text"}
+                                className = {"form-control"}
+                                />
                     </div>
 
 

src/Pages/Landing.js

@@ -3,6 +3,8 @@ import LandingNav from '../Components/LandingNav'
 import '../styles/Landing.css';
 import { Navbar, Nav, NavItem, Jumbotron } from 'react-bootstrap';
 import Login from "./Login";
+import LoginMobile from './LoginMobile'
+import MediaQuery from "react-responsive";
 
 
 
@@ -12,12 +14,24 @@ class Landing extends Component{
 	render(){
 	return (
 		<div className="landing">
-			<LandingNav {...this.props}/>
-			<Jumbotron className="landing-jumbo">
-				<h1>Riding, <br /> simplified.</h1>
-				<p className="landing-text">Share Uber fares to airports with Northwestern Students, fairly.</p>
-			</Jumbotron>
-			<Login {...this.props} />
+
+
+			<div className = "LandingMain" >
+				<div className = "mobile-login-landing">
+					<MediaQuery query = "(max-device-width: 1224px)" >
+						<LoginMobile {...this.props} />
+					</MediaQuery>
+
+				</div>
+				<Jumbotron className="landing-jumbo">
+					<h1>Riding, <br /> simplified.</h1>
+					<p className="landing-text">Share Uber fares to airports with Northwestern Students, fairly.</p>
+				</Jumbotron>
+			</div>
+
+			<MediaQuery query="(min-device-width: 1224px)">
+				<Login {...this.props} />
+			</MediaQuery>
 
 		</div>
 		);

src/Pages/Login.js

@@ -27,7 +27,7 @@ class Login extends Component {
     	<Loader className='loader'/> 
     	: 
       <div className = "loginContainer">
-        	<h2> Sign In to FareShare! </h2>
+        	<h2> Sign In </h2>
         	<FormContainer {...this.props}  />
       </div>
     );

src/Pages/LoginMobile.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import '../styles/Login.css';
+import FormContainer from '../Components/FormContainer';
+import Loader from '../Components/Loader';
+
+
+
+
+class LoginMobile extends Component {
+
+	constructor(props) 
+	{
+		super();
+    	this.state = { isLoading: true }
+	}
+
+	componentDidMount() 
+	{
+    this.setState({isLoading: false})
+	}
+
+  render() {
+    return (
+
+    	this.state.isLoading 
+    	? 	
+    	<Loader className='loader'/> 
+    	: 
+      <div className = "loginMobileContainer">
+        	<h2> Sign In </h2>
+        	<FormContainer {...this.props}  />
+      </div>
+    );
+  }
+}
+
+export default LoginMobile;

src/Pages/Main.js

@@ -85,7 +85,10 @@ class Main extends Component{
                 <RequestModal onclick = {this.closeModal} userID = {this.state.userID}/>
             </Modal>
 
-            <ListContainer userName = {this.state.DisplayName} change = {this.changeUserName} userEmail = {location.state.Username}  {...this.props} />
+            <ListContainer userName = {this.state.DisplayName} 
+                change = {this.changeUserName}
+                 userEmail = {location.state.Username}
+                   {...this.props} />
 
             <AddButton onclick = {this.openModal}/>
         </div>

src/styles/FormContainer.css

@@ -1,27 +1,40 @@
 
 .background-rect {
-
     text-align: center;
-    width: 380px;
-    height: 300px;
+    width: 30vw;
+    height: 100%;
 
-
-
-    border-radius: 10px;
-    border: 2px solid  #f4f4f4;
-
 
 
     display: table-cell;
-    vertical-align:  middle;
+
     padding: 30px;
 }
 
-.inputs{
-    margin-bottom: 30px;
-}
 
 .form-button{
     margin-top: 10px;
     width: 100%;
 }
+
+.input-login {
+    width: 100%;
+}
+
+
+
+.inputs{
+    margin-bottom: 30px;
+    text-align: left;
+    text-decoration-color: black;
+}
+
+
+@media screen and (max-width: 1224px){
+    .background-rect{
+        background: wheat;
+
+        width: 50vw;
+        height: 50vw;
+    }
+}

src/styles/Header.css

@@ -8,7 +8,7 @@
 
     font-size: 3vh;
 
-    width: 15%;
+    width: 100%;
 }
 
 .headerContainer{

src/styles/InputField.css

@@ -0,0 +1,19 @@
+.input {
+	width: 100%;
+	border: none;
+	border-bottom: 1px solid #e8e8e8 !important;
+	margin: 15% auto;
+	outline: none;
+}
+
+.input:focus {
+	border-bottom: 1px solid black !important;
+
+}
+
+@media screen and (max-width: 1224px) {
+    input{
+
+        width: 100vw;
+    }
+}

src/styles/Landing.css

@@ -1,27 +1,50 @@
 html {
-	height: 100%;
+	width: 100vw;
+	height: 100vh;
     margin: 0;
 	background-image: url("https://images.unsplash.com/uploads/1413259835094dcdeb9d3/6e609595?ixlib=rb-0.3.5&s=6e10b98782f25fb337a3c1cb2e88a7c7&auto=format&fit=crop&w=2704&q=80");
    	background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 
+.landing{
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+
+}
+
 .container {
 	margin-left: none;
 }
 
+.LandingMain{
+	height: 100vh;
+}
 
-/*
-.landing-text {
-	color: white;
-	font-size: 30px;
-	font-weight: 100;
-	width: 100%;
-}*/
+/* Mobile Login Container */
+
+.mobile-login-landing{
+	height:  50vh;
+
+}
+
+/*******************/
 
 .landing-jumbo {
-	padding-top: 25%;
+	margin-bottom: 0;
+	height: 50vh;
+	padding-left: 5vw;
+	padding-top:  10vh;
+	width: 70vw;
+
 	background-color: inherit;
 	color: white;
 }
+
+@media screen and (max-width: 1224px) {
+	.landing-jumbo{
+		width:  100vw;
+	}
+}

src/styles/LandingNav.css

@@ -12,3 +12,4 @@
 	font-weight: bold;
 }
 
+