From 0457b6649d0a3a0af1f931555632c9ed71ef5218 Mon Sep 17 00:00:00 2001
From: Ryan Jeon <yejeon2020@u.northwestern.edu>
Date: Sat, 21 Apr 2018 18:45:37 -0500
Subject: [PATCH 1/3] stable init

---
 src/Components/ListContainer.js |  1 +
 src/Components/RequestList.js   | 10 +++++++++-
 src/Components/RequestModal.js  |  1 +
 src/Pages/Main.js               |  5 ++++-
 src/styles/Header.css           |  2 +-
 src/styles/UserMatch.css        | 11 +++++++++++
 6 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/Components/ListContainer.js b/src/Components/ListContainer.js
index d6ffca8..75264d7 100644
--- a/src/Components/ListContainer.js
+++ b/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}
diff --git a/src/Components/RequestList.js b/src/Components/RequestList.js
index 9f46571..3d9e761 100644
--- a/src/Components/RequestList.js
+++ b/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> 
diff --git a/src/Components/RequestModal.js b/src/Components/RequestModal.js
index ba65786..f40f27f 100644
--- a/src/Components/RequestModal.js
+++ b/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();
     }
diff --git a/src/Pages/Main.js b/src/Pages/Main.js
index fe36097..6179487 100644
--- a/src/Pages/Main.js
+++ b/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>
diff --git a/src/styles/Header.css b/src/styles/Header.css
index 9f4cbfc..332b2ea 100644
--- a/src/styles/Header.css
+++ b/src/styles/Header.css
@@ -8,7 +8,7 @@
 
     font-size: 3vh;
 
-    width: 15%;
+    width: 100%;
 }
 
 .headerContainer{
diff --git a/src/styles/UserMatch.css b/src/styles/UserMatch.css
index 01a5153..7309404 100644
--- a/src/styles/UserMatch.css
+++ b/src/styles/UserMatch.css
@@ -15,6 +15,17 @@
     background: rgb(226, 226, 226);
 }
 
+.emptyRequest{
+    color: rgb(88, 88, 88);
+
+    vertical-align: middle;
+    line-height: 80vh;
+
+    height: 80%;
+    text-align: center;
+    font-size: 30px;
+}
+
 .requestContainer{
 
 

From 6363a596bd303da4a52d0954a2aa48b6d000455c Mon Sep 17 00:00:00 2001
From: Ryan Jeon <yejeon2020@u.northwestern.edu>
Date: Tue, 1 May 2018 00:32:00 -0500
Subject: [PATCH 2/3] Style Merge

---
 src/Components/FormContainer.js |  2 ++
 src/Components/InputField.js    | 11 ++++++++++-
 src/Pages/Landing.js            |  2 +-
 src/Pages/Login.js              |  2 +-
 src/styles/FormContainer.css    | 24 ++++++++++++++----------
 src/styles/InputField.css       | 12 ++++++++++++
 src/styles/Landing.css          | 22 ++++++++++++++++++----
 src/styles/LandingNav.css       |  1 +
 src/styles/Login.css            | 13 ++++++-------
 9 files changed, 65 insertions(+), 24 deletions(-)
 create mode 100644 src/styles/InputField.css

diff --git a/src/Components/FormContainer.js b/src/Components/FormContainer.js
index e0cf447..f3c2328 100644
--- a/src/Components/FormContainer.js
+++ b/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
@@ -41,6 +42,7 @@ class FormContainer extends Component {
                         type={"text"}
                     />
                     <InputField
+                         class= "input-login"
                          description = {"Password"}
                          placeholder = {""}
                          type={"password"}/>
diff --git a/src/Components/InputField.js b/src/Components/InputField.js
index 3cb66ff..c25e7a6 100644
--- a/src/Components/InputField.js
+++ b/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 ="input"
+                   />
       </div>
     );
   };
diff --git a/src/Pages/Landing.js b/src/Pages/Landing.js
index fc6b760..e9d1a9c 100644
--- a/src/Pages/Landing.js
+++ b/src/Pages/Landing.js
@@ -12,11 +12,11 @@ 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>
diff --git a/src/Pages/Login.js b/src/Pages/Login.js
index 3610655..ac089e3 100644
--- a/src/Pages/Login.js
+++ b/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>
     );
diff --git a/src/styles/FormContainer.css b/src/styles/FormContainer.css
index 953281b..ff6a111 100644
--- a/src/styles/FormContainer.css
+++ b/src/styles/FormContainer.css
@@ -1,27 +1,31 @@
 
 .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;
+}
diff --git a/src/styles/InputField.css b/src/styles/InputField.css
new file mode 100644
index 0000000..f26c868
--- /dev/null
+++ b/src/styles/InputField.css
@@ -0,0 +1,12 @@
+.input {
+	width: 100%;
+	border: none;
+	border-bottom: 1px solid #e8e8e8 !important;
+	margin: 15% auto;
+	outline: none;
+}
+
+.input:focus {
+	border-bottom: 1px solid black !important;
+
+}
\ No newline at end of file
diff --git a/src/styles/Landing.css b/src/styles/Landing.css
index 4d4a191..5959499 100644
--- a/src/styles/Landing.css
+++ b/src/styles/Landing.css
@@ -1,5 +1,6 @@
 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;
@@ -7,21 +8,34 @@ html {
     background-size: cover;
 }
 
+.landing{
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+
+}
+
 .container {
 	margin-left: none;
 }
 
 
-/*
+
 .landing-text {
+
 	color: white;
 	font-size: 30px;
 	font-weight: 100;
 	width: 100%;
-}*/
+}
 
 .landing-jumbo {
-	padding-top: 25%;
+	
+
+	padding-left: 5vw;
+	width: 70vw;
+	padding-top: 60vh;
 	background-color: inherit;
 	color: white;
 }
+
diff --git a/src/styles/LandingNav.css b/src/styles/LandingNav.css
index 5a7bb50..dd21889 100644
--- a/src/styles/LandingNav.css
+++ b/src/styles/LandingNav.css
@@ -12,3 +12,4 @@
 	font-weight: bold;
 }
 
+
diff --git a/src/styles/Login.css b/src/styles/Login.css
index 9d94399..640996c 100644
--- a/src/styles/Login.css
+++ b/src/styles/Login.css
@@ -12,12 +12,11 @@ body {
 
 
 .loginContainer{
-  position: absolute;
 
-  top: 10vh;
-  left: 68vw;
+  
 
-  color: white;
+  background: white;
+  color: black;
 
   display: block;
   text-align: center;
@@ -25,7 +24,7 @@ body {
 
   
 
-
-  height: 90vh;
-  padding-top: 10vh;
+  width: 30vw;
+  height: 100vh;
 }
+

From 83be1ab62874f5e5d114eda07929b0b99719d518 Mon Sep 17 00:00:00 2001
From: Ryan Jeon <yejeon2020@u.northwestern.edu>
Date: Tue, 1 May 2018 11:27:08 -0500
Subject: [PATCH 3/3] I should be studying for midterm but

---
 package-lock.json               | 23 ++++++++++++++++++++
 package.json                    |  1 +
 src/Components/FormContainer.js |  7 +++++--
 src/Components/InputField.js    |  2 +-
 src/Components/RequestModal.js  |  4 +++-
 src/Pages/Landing.js            | 24 ++++++++++++++++-----
 src/Pages/LoginMobile.js        | 37 +++++++++++++++++++++++++++++++++
 src/styles/FormContainer.css    | 13 ++++++++++--
 src/styles/InputField.css       |  7 +++++++
 src/styles/Landing.css          | 25 +++++++++++++++-------
 src/styles/Login.css            | 13 ++++++++++++
 11 files changed, 137 insertions(+), 19 deletions(-)
 create mode 100644 src/Pages/LoginMobile.js

diff --git a/package-lock.json b/package-lock.json
index c59ad6e..09419bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2569,6 +2569,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -6772,6 +6777,14 @@
         "object-visit": "1.0.1"
       }
     },
+    "matchmediaquery": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
+      "integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
+      "requires": {
+        "css-mediaquery": "0.1.2"
+      }
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -9322,6 +9335,16 @@
         "warning": "3.0.0"
       }
     },
+    "react-responsive": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
+      "integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
+      "requires": {
+        "hyphenate-style-name": "1.0.2",
+        "matchmediaquery": "0.2.1",
+        "prop-types": "15.6.1"
+      }
+    },
     "react-router": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz",
diff --git a/package.json b/package.json
index c27263b..53981b2 100644
--- a/package.json
+++ b/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"
diff --git a/src/Components/FormContainer.js b/src/Components/FormContainer.js
index f3c2328..7f325cd 100644
--- a/src/Components/FormContainer.js
+++ b/src/Components/FormContainer.js
@@ -40,12 +40,15 @@ class FormContainer extends Component {
                         description = {"Username"}
                         placeholder = {"ex) user@gmail.com"} 
                         type={"text"}
+                        className = {"input"}
                     />
                     <InputField
-                         class= "input-login"
+                         className= "input"
                          description = {"Password"}
                          placeholder = {""}
-                         type={"password"}/>
+                         type={"password"}
+                         
+                         />
                 </div>
 
                 <div>
diff --git a/src/Components/InputField.js b/src/Components/InputField.js
index c25e7a6..1a376d0 100644
--- a/src/Components/InputField.js
+++ b/src/Components/InputField.js
@@ -12,7 +12,7 @@ const InputField = (props) => {
                   placeholder = {props.placeholder}
                   type={props.type}
                    //className ="form-control" type={props.type}
-                   className ="input"
+                   className = {props.className}
                    />
       </div>
     );
diff --git a/src/Components/RequestModal.js b/src/Components/RequestModal.js
index f40f27f..ac9f07b 100644
--- a/src/Components/RequestModal.js
+++ b/src/Components/RequestModal.js
@@ -125,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>
 
                     
diff --git a/src/Pages/Landing.js b/src/Pages/Landing.js
index e9d1a9c..8a3f5ee 100644
--- a/src/Pages/Landing.js
+++ b/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">
-			<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>
 		);
diff --git a/src/Pages/LoginMobile.js b/src/Pages/LoginMobile.js
new file mode 100644
index 0000000..d686b9a
--- /dev/null
+++ b/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;
diff --git a/src/styles/FormContainer.css b/src/styles/FormContainer.css
index ff6a111..7661e80 100644
--- a/src/styles/FormContainer.css
+++ b/src/styles/FormContainer.css
@@ -4,11 +4,10 @@
     width: 30vw;
     height: 100%;
     
- 
 
 
     display: table-cell;
-    vertical-align:  middle;
+
     padding: 30px;
 }
 
@@ -29,3 +28,13 @@
     text-align: left;
     text-decoration-color: black;
 }
+
+
+@media screen and (max-width: 1224px){
+    .background-rect{
+        background: wheat;
+        
+        width: 50vw;
+        height: 50vw;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/InputField.css b/src/styles/InputField.css
index f26c868..5610fc4 100644
--- a/src/styles/InputField.css
+++ b/src/styles/InputField.css
@@ -9,4 +9,11 @@
 .input:focus {
 	border-bottom: 1px solid black !important;
 
+}
+
+@media screen and (max-width: 1224px) {
+    input{
+
+        width: 100vw;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/Landing.css b/src/styles/Landing.css
index 5959499..3cd1fc0 100644
--- a/src/styles/Landing.css
+++ b/src/styles/Landing.css
@@ -19,23 +19,32 @@ html {
 	margin-left: none;
 }
 
+.LandingMain{
+	height: 100vh;
+}
 
+/* Mobile Login Container */
 
-.landing-text {
+.mobile-login-landing{
+	height:  50vh;
 
-	color: white;
-	font-size: 30px;
-	font-weight: 100;
-	width: 100%;
 }
 
-.landing-jumbo {
-	
+/*******************/
 
+.landing-jumbo {
+	margin-bottom: 0;
+	height: 50vh;
 	padding-left: 5vw;
+	padding-top:  10vh;
 	width: 70vw;
-	padding-top: 60vh;
+
 	background-color: inherit;
 	color: white;
 }
 
+@media screen and (max-width: 1224px) {
+	.landing-jumbo{
+		width:  100vw;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/Login.css b/src/styles/Login.css
index 640996c..4eb3cee 100644
--- a/src/styles/Login.css
+++ b/src/styles/Login.css
@@ -28,3 +28,16 @@ body {
   height: 100vh;
 }
 
+.loginMobileContainer{
+  
+  
+  color: black;
+  
+  text-align: center;
+  font-family: 'Open Sans', sans-serif;
+
+  
+
+  width: 100%;
+  height: 50vh;
+}