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

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

@@ -102,7 +102,7 @@ export default class ProductItem extends Component {
                         </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>}
+                        { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to <br /> Add to Cart</p>}
                         <p id="quantity-text">Qty</p>
                         <input 
                             className="order-quantity"

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

@@ -140,7 +140,7 @@
 #prod-promotion {
     font-size: 17px;
     color: red;
-    padding-bottom: 5px;
+    padding-bottom: 6px;
 }
 
 #quantity-text {
@@ -172,6 +172,8 @@
     display: flex;
     justify-content: center;
     margin-top: 5px;
+    padding-top: 2px;
+    height: 24px;
 }
 
 #promo-show-text, #promo-show-text-original {
@@ -217,10 +219,12 @@
 #please-log-in-notice {
     display: none;
     position: absolute;
-    bottom: 47px;
-    left: 22px;
+    text-align: center;
+    bottom: 50px;
+    width: 80%;
     padding: 3px 10px;
     border-radius: 5px;
+    cursor: default;
     background-color: rgb(248, 76, 76);
 
     animation: fadeInUp;