From 1be56db36a944d12ca484d3fd8a76c085483ccc9 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Thu, 27 Jun 2019 13:44:57 -0700 Subject: [PATCH 1/2] added styling for CustomerList and Customer components --- package-lock.json | 5 ++++ package.json | 1 + src/App.js | 1 - src/components/Customer.css | 48 ++++++++++++++++++++++++++++++++++ src/components/Customer.js | 26 ++++++++++-------- src/components/CustomerList.js | 5 +++- src/index.css | 2 ++ src/index.js | 1 + 8 files changed, 76 insertions(+), 13 deletions(-) create mode 100644 src/components/Customer.css diff --git a/package-lock.json b/package-lock.json index 5adc4b8ab..52e5306bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2428,6 +2428,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 12575d78b..2b6042543 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 6cdf0623a..6502baba2 100644 --- a/src/App.js +++ b/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); diff --git a/src/components/Customer.css b/src/components/Customer.css new file mode 100644 index 000000000..5d807245d --- /dev/null +++ b/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; +} diff --git a/src/components/Customer.js b/src/components/Customer.js index e2eb27601..b7b098f73 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import './Customer.css' const Customer = (props) => { const selectCustomer = () => { @@ -7,17 +8,20 @@ const Customer = (props) => { } return ( -
-
-
    {props.name}
-
  • {props.address}
    • -
  • {props.city}, {props.state}
    • -
    {props.postal}
    - -
  • {props.phone}
    • -
  • ${props.account_credit} account credit
    • -
  • Select Customer
    • -
    +
    +
    +
    +
      +
    • {props.name}
      • +
    • {props.address}
      • +
    • {props.city}, {props.state}
      • +
    • ${props.account_credit} account credit
      • +
    + +
    +
    ) diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js index 0a9892d82..1c5ccfad5 100644 --- a/src/components/CustomerList.js +++ b/src/components/CustomerList.js @@ -46,7 +46,10 @@ class CustomerList extends Component { return (
    - {customers} +

    All Customers

    +
    + {customers} +
    ) } diff --git a/src/index.css b/src/index.css index b4cc7250b..721386894 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css?family=Wire+One&display=swap'); + body { margin: 0; padding: 0; diff --git a/src/index.js b/src/index.js index fae3e3500..cb6856b7c 100644 --- a/src/index.js +++ b/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(, document.getElementById('root')); registerServiceWorker(); From 2a85d7defaa5c945127a65d007460c0c346d2e41 Mon Sep 17 00:00:00 2001 From: Ariana Bray Date: Thu, 27 Jun 2019 14:08:01 -0700 Subject: [PATCH 2/2] added styling to RentalLibrary and Movie components --- src/components/Movie.css | 46 +++++++++++++++++++++++++++++++++ src/components/Movie.js | 15 ++++++----- src/components/RentalLibrary.js | 7 +++-- 3 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 src/components/Movie.css diff --git a/src/components/Movie.css b/src/components/Movie.css new file mode 100644 index 000000000..c5a228c46 --- /dev/null +++ b/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; +} diff --git a/src/components/Movie.js b/src/components/Movie.js index 49d7b1e3e..0279413d7 100644 --- a/src/components/Movie.js +++ b/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 ( -
    -
    -

    {props.title}

    - this is an image +
    +
    +

    {props.title}

    + this is an image
    -
    {props.overview}
    +
    {props.overview}
    -
    diff --git a/src/components/RentalLibrary.js b/src/components/RentalLibrary.js index 335a672ec..ffcefbf29 100644 --- a/src/components/RentalLibrary.js +++ b/src/components/RentalLibrary.js @@ -46,8 +46,11 @@ class RentalLibrary extends Component { return (
    -
    - {allRentals} +
    +

    Rent Today!

    +
    + {allRentals} +
    )