[AFP-47 Shaphen Pangburn]: Modify promo display to better show savings

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

@@ -42,14 +42,21 @@ export default class ProductMarket extends Component {
                     <img id="prod-img" src={ prod.productImageUrl ? prod.productImageUrl : "-no photo-" } />
                     <p id="prod-name">{ prod.productName }</p>
                     <p id="prod-description">{ prod.productDescription }</p>
-                    <p id="prod-price">${ prod.price }</p>
-                    <p id="prod-promotion">
-                      { prod.promo  ? "Order now for " 
-                                    + prod.promo 
-                                    + "% off, making it " 
-                                    + this.calculateDiscount(prod.price, prod.promo) 
-                                    + "!" :  "" }
+                    <p id="prod-price">
+                      { prod.promo ? 
+                        <div id="promo-show">
+                          <p id="promo-show-text-original">
+                            ${ prod.price }
+                          </p>
+                          <p id="promo-show-text">
+                            ${ this.calculateDiscount(prod.price, prod.promo) }
+                          </p>
+                        </div> : prod.price }
                     </p>
+                    {prod.promo ?
+                    <p id="prod-promotion">
+                      { "Save " + prod.promo + "% on your order!"}
+                    </p> : ""}
                     <button id="add-to-cart-button">Add to Cart</button>
                   </div>
                   : 

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

@@ -10,6 +10,7 @@
     text-align: center;
     font-size: 30px;
     margin: 15px 0px 10px;
+    cursor: default;
 
 }
 
@@ -45,12 +46,19 @@
     height: 200px;
 }
 
-#prod-name, #prod-description, #prod-price {
+#prod-name, 
+#prod-description, 
+#prod-price, 
+#prod-promotion {
     width: 100%;
     text-align: center;
     cursor: default;
 }
 
+#prod-promotion {
+    color: red;
+}
+
 #add-to-cart-button {
     cursor: pointer;
     margin-bottom: 10px;
@@ -60,4 +68,22 @@
     text-align: center;
     color: gray;
     cursor: default;
+}
+
+#promo-show {
+    display: flex;
+    justify-content: center;
+}
+
+#promo-show-text, #promo-show-text-original {
+    margin: 0px 3px;
+}
+
+#promo-show-text-original {
+    text-decoration: line-through;
+    color: gray;
+}
+
+#promo-show-text {
+    
 }
\ No newline at end of file