[AFP-47 Shaphen Pangburn]: Fix console errors and add styling to quantity input

ecom-web/src/components/checkout/PaymentMethod.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function PaymentMethod() {
     return (

ecom-web/src/components/checkout/ReviewOrder.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function ReviewOrder() {
     return (

ecom-web/src/components/checkout/ShippingAddress.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function ShippingAddress() {
     return (

ecom-web/src/components/checkout/SubmitOrder.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function SubmitOrder() {
     return (

ecom-web/src/components/checkout/checkout.jsx

-import React, {useState, useEffect} from 'react'
-import ShippingAddress from './ShippingAddress.js'
-import PaymentMethod from './PaymentMethod.js'
-import ReviewOrder from './ReviewOrder.js'
-import SubmitOrder from './SubmitOrder.js'
+// import React, {useState, useEffect} from 'react'
+// import ShippingAddress from './ShippingAddress.js'
+// import PaymentMethod from './PaymentMethod.js'
+// import ReviewOrder from './ReviewOrder.js'
+// import SubmitOrder from './SubmitOrder.js'
 
 
 export default function checkout() {

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

 import React, { Component } from 'react'
+import '../../resources/stylesheets/product-market.css';
 
 export default class ProductItem extends Component {
     constructor(props) {
@@ -14,7 +15,7 @@ export default class ProductItem extends Component {
         return (
             <div className="product-item">
                 <div id="more-details-img-box">
-                    <img id="prod-img" src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } />
+                    <img id="prod-img" alt="" src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } />
                     <p id="more-details-text">More Details</p>
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>

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

+import React, { Component } from 'react'
 import ProductItem from './product-item'
 import '../../resources/stylesheets/product-market.css';
 import '../../resources/stylesheets/reset.css';
 
-import React, { Component } from 'react'
 
 export default class ProductMarket extends Component {
   constructor(props) {
@@ -39,7 +39,8 @@ export default class ProductMarket extends Component {
                   : 
                   <div className="product-item">
                     <p id="prod-not-available">This Product is No Longer Available</p>
-                  </div> }
+                  </div> 
+                }
               </div>
             )
           })}

ecom-web/src/components/shopping-cart/CartItem.js

@@ -14,7 +14,7 @@ export default function CartItem(props) {
 
             {/* Left image div */}
             <div id="productImageContainer">
-                <img className="productImage" src={props.productInfo.productImageUrl} />
+                <img className="productImage" alt="" src={props.productInfo.productImageUrl} />
             </div>
 
             {/* Name and Product details */}

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

@@ -146,6 +146,15 @@
     padding: 6px;
 }
 
+#order-quantity {
+    border: 1px dotted rgba(0,0,0,0.3);
+    outline: none;
+    transition: all 0.5s;
+}
+#order-quantity:focus {
+    border: 1px solid black;
+}
+
 .add-cart-and-quantity {
     display: flex;
 }