[AFP-47 Shaphen Pangburn]: Add spacing and borders for each item. Add 'product...

[AFP-47 Shaphen Pangburn]: Add spacing and borders for each item. Add 'product no longer available' message for null products

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

@@ -37,7 +37,7 @@ export default class ProductMarket extends Component {
           {this.props.products.map(prod => {
             return (
               <div className="product-item-container" key={ prod.sku }>
-                {prod.productName ?
+                { prod.productName ?
                   <div className="product-item">
                     <img id="prod-img" src={ prod.productImageUrl ? prod.productImageUrl : "-no photo-" } />
                     <p id="prod-name">{ prod.productName }</p>
@@ -52,7 +52,10 @@ export default class ProductMarket extends Component {
                     </p>
                     <button id="add-to-cart-button">Add to Cart</button>
                   </div>
-                : ""}
+                  : 
+                  <div className="product-item">
+                    <p id="prod-not-available">This Product is No Longer Available</p>
+                  </div> }
               </div>
             )
           })}

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

@@ -18,14 +18,19 @@
 }
 
 .product-item-container {
-    width: 25%;
+    width: 330px;
+    height: 335px;
+    margin: 8px;
 }
 
 .product-item {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
+    border: 1px solid gray;
 }
 
 #prod-img {
@@ -35,4 +40,9 @@
 #prod-name, #prod-description, #prod-price {
     width: 100%;
     text-align: center;
+}
+
+#prod-not-available {
+    text-align: center;
+    color: gray;
 }
\ No newline at end of file