[AFP-47 Shaphen Pangburn]: Populate and add css to product details modal

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

@@ -9,7 +9,27 @@ export default class ProductDetails extends Component {
     render() {
         return (
             <div className="product-details-container">
-                Whoa its a modal!
+                <div id="product-details-left">
+                    <div id="prod-details-container">
+                        <img alt="" src={ this.props.product.productImageUrl } id="prod-details-img" />
+                        <div id="prod-details-box">
+                            <p id="details-title">{ this.props.product.productName }</p>
+                            <p id="details-sku"><span>sku:</span> { this.props.product.sku }</p>
+                            <p id="details-description">{ this.props.product.productDescription }</p>
+                        </div>
+                    </div>
+                </div>
+                <div id="product-details-right">
+                    <div id="product-details-condenser">
+                        <div id="prod-details-shipping">
+                            [Shipping Estimate]
+                        </div>
+                        <input type="number" id="prod-details-quantity" placeholder="Quantity" />
+                        <button id="prod-details-add-to-cart">
+                            Add to Cart
+                        </button>
+                    </div>
+                </div>
             </div>
         )
     }

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

@@ -104,6 +104,7 @@
     border-radius: 5px;
     border: 1px solid black;
     font-size: 15px;
+    background-color: rgb(240, 239, 239);
     transition: all 0.3s;
 }
 
@@ -149,6 +150,7 @@
 #order-quantity {
     border: 1px dotted rgba(0,0,0,0.3);
     outline: none;
+    color: rgb(29, 29, 29);
     transition: all 0.5s;
 }
 #order-quantity:focus {
@@ -166,6 +168,110 @@
     animation-duration: 0.5s;
 }
 
+.product-details-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+#product-details-right, 
+#product-details-left {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+#product-details-right {
+    width: 35%;
+}
+
+#prod-details-box {
+    width: 100%;
+    height: 30%;
+    text-align: center;
+    font-size: 30px;
+}
+
+#details-title {
+    margin-top: 10px;
+}
+
+#details-sku {
+    font-size: 15px;
+    margin: 5px 0px 10px;
+    opacity: 0.5;
+}
+
+#details-description {
+    font-size: 20px;
+    height: 55%;
+    padding-top: 10px;
+}
+
+#prod-details-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#prod-details-img {
+    width: 100%;
+    height: 65%;
+}
+
+#prod-info-container {
+    width: 100%;
+    text-align: center;
+}
+
+#product-details-left {
+    width: 65%;
+}
+
+#product-details-condenser {
+    height: 50%;
+    width: 100%;
+    margin: 65px 0px 0px 20px;
+}
+
+#prod-details-shipping {
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid;
+    margin-bottom: 10px;
+}
+
+#prod-details-quantity {
+    border: 1px dotted rgba(0,0,0,0.3);
+    outline: none;
+    margin-left: 13px;
+    color: rgb(29, 29, 29);
+    transition: all 0.5s;
+}
+
+#prod-details-quantity:focus {
+    border: 1px solid black;
+}
+
+#prod-details-add-to-cart {
+    cursor: pointer;
+    padding: 5px 40px;
+    margin: 10px 11px;
+    width: 90%;
+    border-radius: 5px;
+    border: 1px solid black;
+    font-size: 15px;
+    background-color: rgb(240, 239, 239);
+    transition: all 0.3s;
+}
+
+#prod-details-add-to-cart:hover {
+    background-color: rgb(207, 205, 205);
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;