MyriamWD · MyriamWD · Jun 27, 2019 · Jun 26, 2019 · Jun 27, 2019
diff --git a/src/App.css b/src/App.css
@@ -1,32 +1,120 @@
 .App {
-  padding: 10px;
-  display: grid;
   width: 100%;
-  height: 100vh;
-  grid-template-columns: 0.75fr 1fr 1fr;
+  min-height: 900vh;
+  display: grid;
+  grid-template-columns: 250px auto;
+  grid-template-rows: 60px 300px auto;
+  grid-template-areas:
+    "navigation navigation" 
+    "checkout site "
+    "message site"
 }
 
-.menu-items {
-  list-style-type: none;
+.site-content {
+  grid-area: site;
+  background-color: #F7FFF7;
 }
 
 .checkout {
-  padding-left: 40px;
+  grid-area: checkout;
+  background-color: #1A535C;
+  grid-column-start: 1; 
+  grid-row-start: 2; 
+  box-sizing: border-box;
+  padding-top: 40px;
+  padding-left: px;
 }
 
-.site-content {
-  grid-column-start: 2;
-  grid-column-end: 4;
+nav {
+  grid-area: navigation;
+  background-color: #39968F;
+}
+
+li {
+  list-style: none;
+  float: right;
+  margin-right: 60px;
+}
+
+.home-link {
+  float: left;
+}
+
+.home-page {
+  grid-area: site;
+  background-color: red;
+}
+
+
+.nav-option {
+  display: block;
+  padding: 20px;
+  color: white;
+}
+
+.nav-option {
+  display: inline-block;
+  border: none;
+  color: #FFFFFF;
+  text-align: left;
+  font-size: 20px;
+  padding: 20px;
+  width: 100px;
+  transition: all 0.5s;
+  cursor: pointer;
 }
 
-.search-result {
-  grid-column-start: 2;
-  grid-column-end: 4;
+.nav-option span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
 }
 
-.nav-bar {
-  position: fixed;
+.nav-option span:after {
+  position: absolute;
+  opacity: 0;
+  top: 0;
 }
 
+.nav-option:hover span {
+  padding: 20px;
+  background-color: #FFE66D;
+}
+
+.nav-option:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+.result-message-{
+  grid-area: message;
+  background-color: #1A535C;
+  font-size: 30px;
+}
+
+.result-message-display{
+  grid-area: message;
+  background-color: #E86262;
+  color: white;
+  text-align: center;
+  padding: 20px;
+  font-size: 20px;
+  font-family: "Courier New", Courier, monospace;
+}
+
+.btn {
+  color: #F7FFF7 !important;
+  background-color: #39968F !important;
+  border-color: #39968F !important;
+}
+.btn:hover {
+  background-color: #A34545 !important;
+  border-color: #A34545 !important;
+}
+
+
+
+
 
 
diff --git a/src/App.js b/src/App.js
@@ -8,7 +8,7 @@ import MovieLibrary from './components/MovieLibrary';
 import Checkout from './components/Checkout';
 import SearchResult from './components/SearchResult';
 import CustomerList from './components/CustomerList';
-
+import Home from './components/Home'
 
 const URL_MOVIES = 'http://localhost:4000/movies';
 const URL_CUSTOMERS = 'http://localhost:4000/customers';
@@ -20,11 +20,13 @@ class App extends Component {
       selectedCustomerName: '',
       selectedCustomerId: null,
       selectedMovie: '',
-      searchResults: [],
+      searchResults: undefined,
       movieLibrary: [],
       allCustomers: [],
       addConfirmation: true,
-      behaviorMessage: ''
+      behaviorMessage: '',
+      messageStatus: '', 
+      welcomeMessage: 'Welcome to our Movie store',
     }
   }
 
@@ -63,19 +65,22 @@ class App extends Component {
     } else {
       axios.get(URL_MOVIES, {params: {query: searchInput}})
       .then((response) => {
+        console.log(response)
         this.displaySearchResults(response.data)
       })
       .catch((error) => {
         const apiErrorMessage = error.data || error.message
+        console.log(error.message)
         this.displayMessages(apiErrorMessage)
       })
     }
     this.setState({
-      searchResults: [],
+      searchResults: undefined,
     })
   }
 
   displaySearchResults = (result) => {
+    console.log(result)
     this.setState({
       searchResults: result,
     });
@@ -133,44 +138,53 @@ class App extends Component {
 
   clearSearchResults = () => {
     this.setState({
-      searchResults: [],
+      searchResults: undefined,
+      welcomeMessage: '',
     })
   }
 
   displayMessages = (message) => {
+    console.log(message)
     if (message == 'Network Error'){
       message += ' - Make sure the API is running!'
     } else {
-      setTimeout(() => {this.setState({behaviorMessage: ''})}, 3000);
+      setTimeout(() => {this.setState({behaviorMessage: '', messageStatus: ''})}, 3000);
     }
     this.setState({
       behaviorMessage: message,
+      messageStatus: 'display'
     });
+    console.log(message)
     return (
       <p>{message}</p>
     )
   }
 
   render() {
+
     return (
       <div className="App">
+
         <Router>
-          <nav className="nav-bar">
-            <ul className="menu-items">
-              <li className="menu-item">
-                <Link to='/' onClick={this.clearSearchResults}>Home</Link>
+          <nav>
+            <ul>
+              <li className="home-link">
+                <Link className="nav-option" to='/' onClick={this.clearSearchResults}><span>Home</span></Link>
               </li>
+
               <li>
-                <Link to='/search'>Search</Link>
+                <Link className="nav-option" to='/movielibrary' onClick={this.clearSearchResults}><span>Movies</span></Link>
               </li>
               <li>
-                <Link to='/movielibrary' onClick={this.clearSearchResults}>Movie Library</Link>
+                <Link className="nav-option" to='/customerlist' onClick={this.clearSearchResults}><span>Customers</span> </Link>
               </li>
               <li>
-                <Link to='/customerlist' onClick={this.clearSearchResults}>Customer List</Link>
+                <Link className="nav-option" to='/search' onClick={this.clearSearchResults}><span>Search</span></Link>
               </li>
             </ul>
-            <section className="checkout">
+          </nav>
+
+          <section className="checkout">
               <Checkout 
                 selectedCustomerName={this.state.selectedCustomerName}
                 selectedCustomerId={this.state.selectedCustomerId}
@@ -180,23 +194,20 @@ class App extends Component {
                 refreshList={this.componentDidMount}
                 />
             </section>
-          </nav>
-          <section className="site-content">
-            <Route path="/" />
-            <Route path="/movielibrary" render={(props) => <MovieLibrary {...props} allMovies={this.state.movieLibrary} selectedMovie={this.selectMovie} />} />
-            <Route path="/search" render={(props) => <Search onSearchButtonCallback={this.onSearchButtonCallback}/>} />
-            <Route path="/customerlist" render={(props) => <CustomerList {...props} allCustomers={this.state.allCustomers} selectedCustomer={this.selectCustomer} displayMessages={this.displayMessages}/>} />
-          </section>
-
-        </Router>
 
-        <section className="action-result-message">
-          {this.state.behaviorMessage} 
-        </section>
+            <section className={"result-message-" + this.state.messageStatus}>
+              {this.state.behaviorMessage} 
+            </section>
 
-        <section className="search-result">
-          <SearchResult result={this.state.searchResults} addMovieToLibraryCallback={this.addMovieToLibraryCallback}/>
-        </section>  
+            <section className="site-content">
+              <Route path="/" render={(props) => <Home welcomeMessage={this.state.welcomeMessage} />}/>
+              <Route path="/movielibrary" render={(props) => <MovieLibrary {...props} allMovies={this.state.movieLibrary} selectedMovie={this.selectMovie} />} />
+              <Route path="/search" render={(props) => <Search onSearchButtonCallback={this.onSearchButtonCallback}/>} />
+              <Route path="/customerlist" render={(props) => <CustomerList {...props} allCustomers={this.state.allCustomers} selectedCustomer={this.selectCustomer} displayMessages={this.displayMessages}/>} />
+              <SearchResult result= {this.state.searchResults} addMovieToLibraryCallback={this.addMovieToLibraryCallback}/>
+            </section>
+        </Router>
+
       </div>
     )
   }

diff --git a/src/components/Checkout.css b/src/components/Checkout.css
@@ -0,0 +1,43 @@
+.checkout-container{
+	height: 200px;
+	margin: 10px;
+	text-align: center;
+	background-color: #FFEC94; 
+  border:2px solid #E2C044;
+	border-radius:10px;
+	/* background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat; */
+	/* background-position: 0 0; */
+	/* cursor: pointer; */
+	/* animation: fave-heart 1s steps(28); */
+}
+
+.btn-info {
+	margin: 15px;
+  background-color: #39968F !important;
+}
+
+.checkout-title {
+	margin: 15px;
+	color:Black;
+  font-family: 'Raleway', sans-serif;
+  letter-spacing:1px;
+}
+
+.checkout-info {
+	margin: 5px;
+}
+
+/* 
+.checkout-container:hover {
+	background-position: -2800px 0;
+	transition: background 1s steps(28);
+} */
+
+/* @keyframes fave-heart {
+	0% {
+		background-position: 0 0;
+	}
+	100% {
+		background-position: -2800px 0;
+	}
+} */
diff --git a/src/components/Checkout.js b/src/components/Checkout.js
@@ -21,9 +21,10 @@ class Checkout extends Component {
 
     axios.post(checkoutUrl, queryParams)
     .then((response) => {
-      const successMessages = `Movie: ${movieTitle} was successfully checked out!`
-      this.props.displayMessages(successMessages);
+      console.log(response)
+      let successMessages = `Movie: ${movieTitle} was successfully checked out!`
       this.props.refreshList();
+      this.props.displayMessages(successMessages);
     })
     .catch((error) => {
       const errorMessages = error.message || error.response
@@ -46,17 +47,17 @@ class Checkout extends Component {
   render() {
     return(
       <div className="checkout-container">
-        <h5>Current selections</h5>
-        <div>
+        <h5 className="checkout-title">Current selections</h5>
+        <div className="checkout-info">
           Customer: {this.props.selectedCustomerName}
         </div>
-        <div>
+        <div className="checkout-info">
           Movie: {this.props.selectedMovie}
         </div>
         <div>
           <button 
             onClick={this.onCheckoutButtonClick}
-            className="btn btn-primary"
+            className="btn btn-info"
           >
             Check out
           </button>

diff --git a/src/components/Customer.css b/src/components/Customer.css
@@ -0,0 +1,9 @@
+.customer-row:hover{
+  background-color: lightgrey;
+}
+
+.btn {
+  color: #fff;
+  background-color: #FF6B6B;
+  border-color: #007bff;
+}
diff --git a/src/components/Customer.js b/src/components/Customer.js
@@ -1,17 +1,18 @@
 import React from 'react';
+import './Customer.css'
 
 const Customer = (props) => {
   const onClickHandler = () => {
     props.selectedCallback(props.customerId);
   }
 
   return(
-    <tr>
+    <tr className="customer-row">
       <td>{props.customerId}</td>
       <td>{props.name}</td>
       <td>{props.numMoviesCheckedOut}</td>
       <td >${props.accountCredit}</td>
-      <td><button type="button" className="btn btn-primary" onClick={onClickHandler}>Add</button></td>
+      <td><button type="button" className="btn btn-primary" onClick={onClickHandler}>Select</button></td>
     </tr>
   );
 }