From 43c67cf153587894dc991115a474118679a05bc1 Mon Sep 17 00:00:00 2001
From: "Chagarlamudi, Aneela" <aneela.chagarlamudi@peoplefluent.com>
Date: Wed, 17 Nov 2021 14:41:38 -0500
Subject: [PATCH] :lipstick: Add basic bootstrap styles

---
 src/components/Cart.js         |  2 +-
 src/components/Product.js      |  6 +++---
 src/components/ProductItem.js  | 14 +++++++++----
 src/components/ProductsList.js |  2 +-
 src/containers/App.js          | 14 ++++---------
 src/index.js                   | 36 ++++++++++++++++------------------
 6 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/components/Cart.js b/src/components/Cart.js
index a4c58fb..fd4d0c0 100644
--- a/src/components/Cart.js
+++ b/src/components/Cart.js
@@ -39,7 +39,7 @@ const Cart = ({
   );
 
   return (
-    <div>
+    <div className="col-3">
       <h3>Your shopping cart</h3>
       <div>{nodes}</div>
       <p>
diff --git a/src/components/Product.js b/src/components/Product.js
index 2a0b3f1..712a8fd 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -2,20 +2,20 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const Product = ({ price, quantity, title, discount }) => (
-  <div>
+  <p className="my-2">
     {title} - {price}
     {quantity ? ` x ${quantity}` : null}
     {discount
       ? ` - discount: buy ${discount.get}, pay for ${discount.pay}`
       : null}
-  </div>
+  </p>
 );
 
 Product.propTypes = {
   price: PropTypes.number,
   quantity: PropTypes.number,
   title: PropTypes.string,
-  discount: PropTypes.object
+  discount: PropTypes.object,
 };
 
 export default Product;
diff --git a/src/components/ProductItem.js b/src/components/ProductItem.js
index 7ac0e01..7866c26 100644
--- a/src/components/ProductItem.js
+++ b/src/components/ProductItem.js
@@ -4,8 +4,14 @@ import Product from "./Product";
 
 const ProductItem = ({ product, discount, onAddToCartClicked }) => (
   <div style={{ marginBottom: 20 }}>
-    <Product title={product.title} price={product.price} discount={discount} />
+    <Product
+      className="mt-2"
+      title={product.title}
+      price={product.price}
+      discount={discount}
+    />
     <button
+      className="btn btn-primary my-2"
       onClick={onAddToCartClicked}
       disabled={product.inventory > 0 ? "" : "disabled"}
     >
@@ -18,14 +24,14 @@ ProductItem.propTypes = {
   product: PropTypes.shape({
     title: PropTypes.string.isRequired,
     price: PropTypes.number.isRequired,
-    inventory: PropTypes.number.isRequired
+    inventory: PropTypes.number.isRequired,
   }).isRequired,
   discount: PropTypes.shape({
     id: PropTypes.number,
     get: PropTypes.number,
-    pay: PropTypes.number
+    pay: PropTypes.number,
   }),
-  onAddToCartClicked: PropTypes.func.isRequired
+  onAddToCartClicked: PropTypes.func.isRequired,
 };
 
 export default ProductItem;
diff --git a/src/components/ProductsList.js b/src/components/ProductsList.js
index f0265fc..a742c10 100644
--- a/src/components/ProductsList.js
+++ b/src/components/ProductsList.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const ProductsList = ({ title, children }) => (
-  <div>
+  <div className="col-9 px-4">
     <h3>{title}</h3>
     <div>{children}</div>
   </div>
diff --git a/src/containers/App.js b/src/containers/App.js
index 3dd8776..9bfade2 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -2,19 +2,13 @@ import React from "react";
 import ProductsContainer from "./ProductsContainer";
 import CartHolder from "./CartHolder";
 
-const style = {
-  width: "75%"
-};
 const App = () => (
-  <div>
-    <h1>Fruit Shopping Cart</h1>
-    <table />
-    <th style={style}>
+  <div className="col-12">
+    <h1 className="text-center mt-3">Fruit Shopping Cart</h1>
+    <div className="d-flex mt-4">
       <ProductsContainer />
-    </th>
-    <th style={style}>
       <CartHolder />
-    </th>
+    </div>
   </div>
 );
 
diff --git a/src/index.js b/src/index.js
index d20a717..7b7db6c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,29 +1,27 @@
-import React from 'react'
-import { render } from 'react-dom'
-import { createStore, applyMiddleware } from 'redux'
-import { Provider } from 'react-redux'
-import { createLogger } from 'redux-logger'
-import thunk from 'redux-thunk'
-import reducer from './reducers'
-import { getAllProducts, getAllDiscounts } from './actions'
-import App from './containers/App'
+import React from "react";
+import { render } from "react-dom";
+import { createStore, applyMiddleware } from "redux";
+import { Provider } from "react-redux";
+import { createLogger } from "redux-logger";
+import thunk from "redux-thunk";
+import reducer from "./reducers";
+import { getAllProducts, getAllDiscounts } from "./actions";
+import App from "./containers/App";
+import 'bootstrap/dist/css/bootstrap.css';
 
-const middleware = [ thunk ];
-if (process.env.NODE_ENV !== 'production') {
+const middleware = [thunk];
+if (process.env.NODE_ENV !== "production") {
   middleware.push(createLogger());
 }
 
-const store = createStore(
-  reducer,
-  applyMiddleware(...middleware)
-)
+const store = createStore(reducer, applyMiddleware(...middleware));
 
-store.dispatch(getAllProducts())
-store.dispatch(getAllDiscounts())
+store.dispatch(getAllProducts());
+store.dispatch(getAllDiscounts());
 
 render(
   <Provider store={store}>
     <App />
   </Provider>,
-  document.getElementById('root')
-)
+  document.getElementById("root")
+);