cleaned up home page, added find page

package.json

@@ -9,24 +9,27 @@
     "react-scripts": "^1.0.17"
   },
   "dependencies": {
+    "materialize-css": "^0.100.2",
     "node-sass-chokidar": "^1.2.2",
     "npm-run-all": "^4.1.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-google-login": "^3.1.0",
+    "react-materialize": "^2.1.4",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "next",
+    "react-select": "^1.2.1",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",
     "redux-thunk": "^2.2.0",
     "sanitize.css": "^5.0.0"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar src/index.scss -o src/",
+    "build-css": "node-sass-chokidar src/styles/index.scss -o src/styles",
     "watch-css":
-      "npm run build-css && node-sass-chokidar src/index.scss -o src/ --watch --recursive",
+      "npm run build-css && node-sass-chokidar src/styles/index.scss -o src/styles --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",

public/index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,5 +31,7 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
+    <!-- JQuery is required for Calendar Component -->
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   </body>
 </html>

src/components/Button/index.js

@@ -3,7 +3,8 @@ import React from "react";
 const Button = props => (
   <div>
     <button className={`btn btn-${props.color}`} onClick={props.onClick}>
-      {props.label}
+      <span>{props.label}</span>
+      <i className="material-icons right">{props.materialIcon}</i>
     </button>
   </div>
 );

src/components/Button/style.scss

@@ -3,9 +3,15 @@
 	height: 40px;
 	border-width: 0;
 	text-transform: uppercase;
-	font-size: 9px;
+	font-size: 12px;
 	font-weight: 600;
-	padding: 0 15px 0 15px;
+	padding: 0 20px 0 20px;
+	cursor: pointer;
+	margin-bottom: 10px;
+
+	i {
+		vertical-align: middle;
+	}
 
 	&-primary {
 		background-color: #7c4dff; 

src/components/Header/index.js

@@ -1,10 +1,12 @@
 import React from "react";
-import logo from "../../static/img/logo.png";
+import logo from "../../static/img/logo.svg";
 import { Link } from "react-router-dom";
 
 const Header = () => (
   <div className="header">
-    <img id="logo" src={logo} alt="BPool" />
+    <Link to="/">
+      <img id="logo" src={logo} alt="BPool" />
+    </Link>
     <div id="login">
       <Link to="/login">Login</Link>
     </div>

src/components/Header/style.scss

@@ -2,7 +2,7 @@
   height: 50px; 
 
   #logo {
-	  width: 100px;
+	  width: 150px;
 	  padding: 20px 0 0 40px; 
 	}
 

src/components/Landing/index.js

@@ -6,26 +6,28 @@ import { connect } from "react-redux";
 
 const Landing = props => (
   <div className="landing">
-    <h1>Share a ride from UCLA to anywhere.</h1>
+    <h2>Share a ride from UCLA to anywhere.</h2>
     <Button
       label="Find a Ride"
       color="primary"
-      onClick={() => props.changePage("find")}
+      onClick={() => props.changePage("/find")}
     />
 
-    <h3>Driving somewhere and have seats?</h3>
+    <br />
+
+    <h5>Driving somewhere and have seats?</h5>
     <Button
       label="Make a Ride Listing"
       color="secondary"
-      onClick={() => props.changePage("create")}
+      onClick={() => props.changePage("/create")}
     />
   </div>
 );
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
-      changePage: link => push(`/${link}`)
+      changePage: link => push(link)
     },
     dispatch
   );

src/components/Search/index.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { get } from "lodash";
+import { push } from "react-router-redux";
+import { bindActionCreators } from "redux";
+import { connect } from "react-redux";
+import { Input } from "react-materialize";
+import Button from "../Button";
+import SelectInput from "../SelectInput";
+import cities from "../../config/cities";
+
+// used for calendar component
+import "materialize-css/dist/css/materialize.min.css";
+import "materialize-css/dist/js/materialize.min.js";
+
+class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      source: "",
+      destination: "",
+      date: "" // this is stored as a 13 digit epoch time
+    };
+  }
+
+  handleChange = (e, input) => {
+    this.setState({
+      [input]: get(e, "value", "")
+    });
+  };
+
+  onFind = () => {
+    // TODO: Check if all fields are complete and mabye push /rides/<params> ?
+    this.props.changePage("/rides");
+    // TODO: need to dispatch a fetch to the api here to get list of rides
+  };
+
+  render() {
+    return (
+      <div className="search">
+        <h3>Find a ride</h3>
+        <h5>
+          Currently we only support UCLA as an origin. Check back later for more
+          locations!
+        </h5>
+
+        <SelectInput
+          materialIcon="person_pin"
+          label="Origin"
+          value={this.state.source}
+          placeholder="Choose your origin"
+          onChange={e => this.handleChange(e, "source")}
+          options={cities}
+        />
+
+        <SelectInput
+          materialIcon="pin_drop"
+          label="Destination"
+          value={this.state.destination}
+          placeholder="Choose your destination"
+          onChange={e => this.handleChange(e, "destination")}
+          options={cities}
+        />
+
+        <div className="input">
+          <i className="material-icons prefix">date_range</i>
+          <Input
+            placeholder="Date"
+            type="date"
+            onChange={e => this.handleChange({ value: e.timeStamp }, "date")}
+          />
+        </div>
+
+        <Button
+          label="Find"
+          color="primary"
+          materialIcon="search"
+          onClick={this.onFind}
+        />
+      </div>
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators(
+    {
+      changePage: link => push(link)
+    },
+    dispatch
+  );
+
+export default connect(null, mapDispatchToProps)(Search);

src/components/Search/style.scss

@@ -0,0 +1,20 @@
+.search {
+	margin: 0 auto;
+	margin-top: 20px;
+	text-align: left;
+	width: 600px;
+
+	@media only screen and (max-width: 600px) {
+	   width: 300px;
+	}
+
+	.input-field {
+		margin-top: 0;
+		padding-left: 20px;
+		width: 100%;
+
+		input::placeholder {
+			color: gray;
+		}
+	}
+}

src/components/SelectInput/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Select from "react-select";
+
+const SelectInput = props => (
+  <div className="input">
+    <i className="material-icons prefix">{props.materialIcon}</i>
+    <div className="field">
+      <label>{props.label}</label>
+      <Select
+        value={props.value}
+        placeholder={props.placeholder}
+        onChange={props.onChange}
+        options={props.options}
+      />
+    </div>
+  </div>
+);
+
+export default SelectInput;

src/components/SelectInput/style.scss

@@ -0,0 +1,48 @@
+.input {
+	padding: 15px 0;
+	display: flex;
+
+	label {
+		color: #bbb;
+		font-size: 12px;
+	}
+
+	.field {
+		width: 100%;
+		padding-left: 20px;
+	}
+
+	i {
+		vertical-align: middle;
+  	font-size: 2rem;
+		line-height: 2em;
+	}
+
+	/* Custom CSS for React Select Component */
+
+	.Select-placeholder, .Select-input, .Select-value {
+		color: black;
+		font-size: 15px;
+		padding-left: 0 !important;
+		line-height: 40px !important;
+
+		input {
+			padding: 0;
+		}
+	}
+
+	.Select-control {
+		border: none;
+		border-bottom: 1px solid #ccc;
+		border-radius: 0;
+	}
+
+	.Select.is-focused:not(.is-open) > .Select-control {
+		box-shadow: none;
+		border-color: #aaa;
+	}
+
+	.Select-menu > div {
+		color: #26a69a;		
+	}
+}

src/config/cities.js

@@ -0,0 +1,30 @@
+export default [
+  {
+    label: "UCLA",
+    value: "UCLA"
+  },
+  {
+    label: "San Diego",
+    value: "San Diego"
+  },
+  {
+    label: "Santa Barbara",
+    value: "Santa Barbara"
+  },
+  {
+    label: "Irvine",
+    value: "Irvine"
+  },
+  {
+    label: "San Francisco",
+    value: "San Francisco"
+  },
+  {
+    label: "Riverside",
+    value: "Riverside"
+  },
+  {
+    label: "SLO",
+    value: "SLO"
+  }
+];

src/containers/app.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Route } from "react-router-dom";
 import Home from "./home.js";
+import Find from "./find.js";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Login from "../components/Login/login";
@@ -10,6 +11,7 @@ const App = () => (
     <Header />
 
     <Route exact path="/" component={Home} />
+    <Route exact path="/find" component={Find} />
     <Route path="/login" component={Login} />
 
     <Footer />

src/containers/find.js

@@ -0,0 +1,10 @@
+import React from "react";
+import Search from "../components/Search";
+
+const Find = () => (
+  <div className="find">
+    <Search />
+  </div>
+);
+
+export default Find;

src/containers/home.js

@@ -2,7 +2,7 @@ import React from "react";
 import Landing from "../components/Landing";
 
 const Home = () => (
-  <div id="home">
+  <div className="home">
     <Landing />
   </div>
 );