💄 Add basic bootstrap styles

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>

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;

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;

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>

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>
 );
 

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")
+);