[AFP-131 Shaphen Pangburn]: Adjust price and promotions sizing and placement

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

@@ -94,7 +94,7 @@ export default class ProductItem extends Component {
                                 <p id="promo-show-text">
                                 ${ discount }
                                 </p>
-                            </div> : <p id="prod-price-text">${ this.props.item.price } </p> }
+                            </div> : <p id={ this.props.item.promo ? "promo-price-text" : "prod-price-text" }>${ this.props.item.price } </p> }
                         </div>
                         { this.props.item.promo ?
                         <p id="prod-promotion">

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

@@ -173,7 +173,7 @@
 #promo-show {
     display: flex;
     justify-content: center;
-    margin-top: 5px;
+    margin-top: 3px;
     padding-top: 2px;
     height: 24px;
 }
@@ -185,12 +185,12 @@
 #promo-show-text-original {
     text-decoration: line-through;
     font-size: 15px;
-    padding-top: 4px;
+    padding-top: 6px;
     color: gray;
 }
 
 #promo-show-text {
-    font-size: 18px;
+    font-size: 20px;
     padding-top: 2px;
 }
 
@@ -263,6 +263,12 @@
     background-color: rgba(202, 202, 202, 0.6);
 }
 
+#prod-price-text {
+    font-size: 27px;
+    padding-bottom: 6px;
+    margin-right: 7px;
+}
+
 #prod-details-box {
     width: 100%;
     height: 30%;