[Team]: Update product Add to Cart and price/promotion display format

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

@@ -83,40 +83,45 @@ export default class ProductItem extends Component {
                     }
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>
-                <div id="prod-price">
-                    { this.props.item.promo ? 
-                    <div id="promo-show">
-                        <p id="promo-show-text-original">
-                        ${ this.props.item.price }
-                        </p>
-                        <p id="promo-show-text">
-                        ${ discount }
-                        </p>
-                    </div> : "$" + this.props.item.price }
+                <div className="product-price-promo-quantity-add-cart">
+                    <div className="price-and-promo">
+                        <div id="prod-price">
+                            { this.props.item.promo ? 
+                            <div id="promo-show">
+                                <p id="promo-show-text-original">
+                                ${ this.props.item.price }
+                                </p>
+                                <p id="promo-show-text">
+                                ${ discount }
+                                </p>
+                            </div> : "$" + this.props.item.price }
+                        </div>
+                        { this.props.item.promo ?
+                        <p id="prod-promotion">
+                            { "Save " + this.props.item.promo + "%!"}
+                        </p> : ""}
+                    </div>
+                    <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
+                        { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to Add to Cart</p>}
+                        <p id="quantity-text">Qty</p>
+                        <input 
+                            className="order-quantity"
+                            id={ this.props.user?.currentUser ? "" : "disabled" }
+                            type="number"
+                            placeholder="Qty"
+                            disabled={ !this.props.user?.currentUser }
+                            onChange={ this.handleChange("orderItemQuantity") }
+                            value = { this.state.orderItemQuantity }
+                            min="1"
+                            max="99"
+                        />
+                        <button 
+                            disabled={ !this.props.user?.currentUser } 
+                            className="add-to-cart-button"
+                            id={ this.props.user?.currentUser ? "" : "disabled" }
+                        >Add to Cart</button>
+                    </form>
                 </div>
-                { this.props.item.promo ?
-                <p id="prod-promotion">
-                    { "Save " + this.props.item.promo + "% on this item!"}
-                </p> : ""}
-                <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
-                    { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to Add to Cart</p>}
-                    <input 
-                        className="order-quantity"
-                        id={ this.props.user?.currentUser ? "" : "disabled" }
-                        type="number"
-                        placeholder="Qty"
-                        disabled={ !this.props.user?.currentUser }
-                        onChange={ this.handleChange("orderItemQuantity") }
-                        value = { this.state.orderItemQuantity }
-                        min="1"
-                        max="99"
-                    />
-                    <button 
-                        disabled={ !this.props.user?.currentUser } 
-                        className="add-to-cart-button"
-                        id={ this.props.user?.currentUser ? "" : "disabled" }
-                    >Add to Cart</button>
-                </form>
 
                 <Modal
                     id="product-details-modal"

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

@@ -3,6 +3,7 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
+    background-color: rgb(231, 228, 228);
 }
 
 #product-market-title {
@@ -58,14 +59,19 @@
     height: 100%;
     display: flex;
     flex-wrap: wrap;
+    box-shadow: 3px 4px 6px;
+    border-radius: 8px;
+    background-color: white;
     justify-content: center;
     align-items: center;
-    border: 1px solid gray;
+    border: 1px solid lightgray;
     transition: all 0.5s;
 }
 
 .product-item:hover {
     transform: scale(1.03);
+    box-shadow: 5px 6px 10px;
+    border-color: gray;
 }
 
 #prod-img {
@@ -125,10 +131,20 @@
 
 #prod-price {
     font-size: 18px;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 #prod-promotion {
+    font-size: 17px;
     color: red;
+    padding-bottom: 5px;
+}
+
+#quantity-text {
+    padding-top: 4px;
 }
 
 .add-to-cart-button {
@@ -155,6 +171,7 @@
 #promo-show {
     display: flex;
     justify-content: center;
+    margin-top: 5px;
 }
 
 #promo-show-text, #promo-show-text-original {
@@ -192,6 +209,9 @@
 .add-cart-and-quantity {
     display: flex;
     position: relative;
+    flex-wrap: wrap;
+    width: 50%;
+    justify-content: center;
 }
 
 #please-log-in-notice {
@@ -424,6 +444,21 @@
     color: red;
 }
 
+.product-price-promo-quantity-add-cart {
+    width: 100%;
+    display: flex;
+    background-color: rgb(202, 202, 202);
+    padding-top: 9px;
+    margin-bottom: -4px;
+    border-radius: 0px 0px 7px 7px;
+}
+
+.price-and-promo {
+    width: 50%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
 #disabled {
     pointer-events: none;
 }