Merge pull request #8 from aribray/customer_styling

Customer styling

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "dotenv": "^8.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/App.js

@@ -39,7 +39,6 @@ class App extends Component {
   }
 
   addMovie = (movie) => {
-    console.log(this.state.movieList)
     const list = [...this.state.movieList]
     list.push(movie);
 

src/components/Customer.css

@@ -0,0 +1,48 @@
+.customer {
+  font-family: "Wire One", sans-serif;
+  text-align: center;
+  font-weight: bolder;
+}
+
+.card-title {
+  text-align: left;
+}
+
+.content {
+  font-family: 'Wire One', sans-serif;
+  font-size: 2rem;
+  font-weight: bolder;
+}
+
+.card {
+  margin: 5px;
+  width: 30rem;
+}
+
+.card-text {
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding-right: 35px;
+}
+
+.card-text.money {
+  font-size: 1.3rem;
+  text-decoration-line: underline
+}
+
+.customer__info {
+  list-style-type: none;
+}
+
+.select__button {
+  text-align: center;
+}
+
+.select__customer a {
+  color: white;
+}
+
+.select__customer a:hover {
+  color: goldenrod;
+}

src/components/Customer.js

@@ -1,23 +1,27 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import './Customer.css'
 
 const Customer = (props) => {
   const selectCustomer = () => {
     return props.selectCustomerCallback(props.id)
   }
 
   return (
-    <div className="customer">
-        <div className="content">
-          <ul>{props.name}</ul>
-            <li>{props.address}</li>
-            <li>{props.city}, {props.state}</li>
-            <div>{props.postal}</div>
-
-            <li>{props.phone}</li>
-            <li>${props.account_credit} account credit</li>
-            <li><a href="#" onClick={selectCustomer}>Select Customer</a></li>
-        </div>
+    <div>
+        <div className="customer card">
+            <div className="content card-body">
+              <ul className="customer__info">
+                <li className="card-title">{props.name}</li>
+                  <li className="card-text">{props.address}</li>
+                  <li className="card-text">{props.city}, {props.state}</li>
+                  <li className="card-text money">${props.account_credit} account credit</li>
+                  </ul>
+                  <div className="select__button">
+                    <button className="select__customer btn btn-dark"><a href="#" onClick={selectCustomer}>Select Customer</a></button>
+                  </div>
+            </div>
+          </div>
     </div>
 
   )

src/components/CustomerList.js

@@ -46,7 +46,10 @@ class CustomerList extends Component {
 
     return (
       <div>
-        {customers}
+        <h1 className="customer">All Customers</h1>
+        <div className="row">
+          {customers}
+        </div>
       </div>
     )
   }

src/components/Movie.css

@@ -0,0 +1,46 @@
+.movie {
+  font-family: "Wire One", sans-serif;
+}
+
+.movie__header {
+  text-align: center;
+  font-size: 4rem;
+  font-weight: bolder;
+}
+
+.movie__title {
+  text-align: center;
+  font-weight: bolder;
+  font-size: 3rem;
+}
+
+.card {
+  margin: 5px;
+  width: 30rem;
+}
+
+.card-text.text {
+  padding-left: 10px;
+  text-align: center;
+  font-size: 1.4rem;
+  font-weight: bolder;
+  text-decoration: underline;
+}
+
+
+.customer__info {
+  list-style-type: none;
+}
+
+.select_button {
+  padding-top: 5px;
+  text-align: center;
+}
+
+.select__movie a {
+  color: white;
+}
+
+.select__movie a:hover {
+  color: goldenrod;
+}

src/components/Movie.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import "./Movie.css"
 
 
 const Movie = (props) => {
@@ -8,15 +9,15 @@ const Movie = (props) => {
   }
 
   return (
-    <div className="movie">
-        <div className="movie__section">
-          <h3 className="movie__title">{props.title}</h3>
-            <img className="image" src={props.image_url} alt="this is an image"/>
+    <div className="movie card">
+        <div className="movie__section card-body">
+          <h3 className="movie__title card-title">{props.title}</h3>
+            <img className="image card-img-top" src={props.image_url} alt="this is an image"/>
             <div className="middle">
-              <div className="text">{props.overview}</div>
+              <div className="text card-text">{props.overview}</div>
             </div>
-          <div className="movie__info">
-          <li><a href="#" onClick={selectMovie}>Select Movie</a></li>
+          <div className="select_button">
+            <button className=" select__movie btn btn-dark"><a href="#" onClick={selectMovie}>Select Movie</a></button>
           </div>
         </div>
     </div>

src/components/RentalLibrary.js

@@ -46,8 +46,11 @@ class RentalLibrary extends Component {
 
     return (
       <div >
-        <div className="rentals">
-          {allRentals}
+        <div>
+          <h1 className="movie movie__header">Rent Today!</h1>
+          <div className="row">
+            {allRentals}
+          </div>
         </div>
       </div>
     )

src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Wire+One&display=swap');
+
 body {
   margin: 0;
   padding: 0;

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import 'bootstrap/dist/css/bootstrap.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();