[AFP-47 Shaphen Pangburn]: Resize modal and inherit product details to display on modal

ecom-web/src/components/product-market/product-details.jsx

+import React, { Component } from 'react'
+
+export default class ProductDetails extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+    
+    render() {
+        return (
+            <div className="product-details-container">
+                Whoa its a modal!
+            </div>
+        )
+    }
+}

ecom-web/src/components/product-market/product-item.jsx

 import React, { Component } from 'react'
 import Modal from 'react-modal';
+import ProductDetails from './product-details';
 import '../../resources/stylesheets/product-market.css';
 
 export default class ProductItem extends Component {
@@ -30,7 +31,7 @@ export default class ProductItem extends Component {
                         src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } 
                         onClick={ this.toggleDetailsModal }
                     />
-                    <p id="more-details-text">More Details</p>
+                    <p onClick={ this.toggleDetailsModal } id="more-details-text">More Details</p>
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>
                 <div id="prod-price">
@@ -60,16 +61,16 @@ export default class ProductItem extends Component {
                     onRequestClose={ this.toggleDetailsModal }
                     style={{
                         content: {
-                          position: "absolute",
-                          top: '55px',
-                          left: '85px',
+                            top: '50%',
+                            left: '50%',
                             right: '0',
                             bottom: '0',
-                          border: '1px solid black',
-                          padding: '7px',
-                          width: '210px',
-                          height: '134px',
-                          background: 'white'
+                            marginLeft: "-465px",
+                            marginTop: "-372px",
+                            width: '890px',
+                            height: '775px',
+                            background: 'white',
+                            borderRadius: "10px"
                         },
                         overlay: {
                             position: 'fixed',
@@ -78,7 +79,7 @@ export default class ProductItem extends Component {
                         }
                       }}
                 >
-                    Whoa its a modal!
+                    <ProductDetails product={ this.props.item } />
                 </Modal>
             </div>
         )

ecom-web/src/resources/stylesheets/product-market.css

@@ -159,6 +159,10 @@
     display: flex;
 }
 
+#product-details-modal {
+    box-shadow: 10px 10px 20px;
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;