Changes to savedDealsComp jsx DealListComp jsx and Deal jsx

src/Deal.js

@@ -2,11 +2,19 @@ import React from 'react';
 
 const Deal = (props) => (
 	<div>
-	{props.deal.title} | {props.deal.price} | {props.deal.url}
+		<div className="card" style={{"float": "left", "width": "25rem", "height": "30rem", "margin": "10px"}}>
+			<img className="card-img-top" src={props.deal.imgUrl} alt="Card image cap"></img>
+			<div className="card-block">
+				<h4 className="card-title">{props.deal.merchant}</h4>
+				<p className="card-text">{props.deal.title}</p>
+				<ul className="list-group list-group-flush">
+					<li className="list-group-item">Original Price: ${props.deal.price}</li>
+					<li className="list-group-item">Discount Percent: {props.deal.discount}</li>
+				</ul>
+				<a href={props.deal.url} className="btn btn-primary" style={{"position": "absolute", "bottom": "0px"}}>Deal Link</a>
+			</div>
+		</div>
 	</div>
 )
 
-//Need to change the image so that it is just a thumbnail and not such a large image
-
-
-export default Deal;
+export default Deal;

src/DealListComp.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Coupon from './Deal.js';
 
 const DealListComp = (props) => (
-	<div>
+	<div className="container">
 		<h2>Here's {props.deals.length} deals that you're head over heels for!</h2>
 		{props.deals.map((deal, idx) => <Coupon deal={deal} key={deal.id} />)}
 	</div>

src/SavedDealsComp.js

@@ -32,8 +32,10 @@ class SavedDealsComp extends React.Component {
 
 	render() {
 		return (
-			<div>
-				<h1>Saved Deals!</h1>
+			<div className="container">
+				<div style={{"left": "50px"}}>
+					<h1>Saved Deals!</h1>
+				</div>
 				<DealList deals={this.state.savedDeals}/>
 			</div>
 		)