[AFP-48 Shaphen Pangburn]: Refactor css to adapt to bootstrap formatting

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

@@ -26,8 +26,8 @@ export default class ProductDetails extends Component {
                     <div id="product-details-condenser">
                         <div id="prod-details-shipping">
                             <p id="express-shipping">Express shipping & free returns</p>
-                            <p>Free Delivery: <span>Everywhere!</span></p>
-                            <p>Get it by: <span>Never!</span></p>
+                            <p id="free-delivery">Free Delivery: <span>Everywhere!</span></p>
+                            <p id="get-it-by">Get it by: <span>Never!</span></p>
                         </div>
                         {
                             this.props.product.promo ? 
@@ -37,7 +37,7 @@ export default class ProductDetails extends Component {
                                 <p id="prod-details-promo-original-price">Normally: ${ this.props.product.price }</p>
                             </div>
                             :
-                            ""
+                            <p id="prod-details-original-price">Price: ${ this.props.product.price }</p>
                         }
                         <input type="number" id="prod-details-quantity" placeholder="Quantity" />
                         <button id="prod-details-add-to-cart">

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

@@ -66,8 +66,8 @@ export default class ProductItem extends Component {
                             left: '50%',
                             right: '0',
                             bottom: '0',
-                            marginLeft: "-346px",
-                            marginTop: "-372px",
+                            marginLeft: "-325px",
+                            marginTop: "-320px",
                             width: '650px',
                             height: '600px',
                             background: 'white',

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

@@ -154,6 +154,9 @@
 #order-quantity {
     border: 1px dotted rgba(0,0,0,0.3);
     outline: none;
+    width: 42px;
+    height: 30px;
+    margin-top: 2px;
     color: rgb(29, 29, 29);
     transition: all 0.5s;
 }
@@ -247,9 +250,9 @@
 }
 
 #product-details-condenser {
-    height: 28%;
+    height: 48%;
     width: 100%;
-    margin: 185px 0px 0px 20px;
+    margin: 148px 0px 0px 20px;
 }
 
 #prod-details-shipping {
@@ -272,12 +275,22 @@
 }
 
 #express-shipping {
-    font-size: 14.3px;
+    font-size: 13.8px;
     margin-bottom: 10px;
 }
 
+#free-delivery {
+    font-size: 15.5px;
+}
+
+#get-it-by {
+    text-align: left;
+    width: 100%;
+}
+
 #prod-details-quantity {
     border: 1px dotted rgba(0,0,0,0.3);
+    border-radius: 5px;
     outline: none;
     margin-left: 3px;
     color: rgb(29, 29, 29);
@@ -291,7 +304,7 @@
 #prod-details-add-to-cart {
     cursor: pointer;
     padding: 5px 40px;
-    margin: 10px 2px;
+    margin: 10px 3px;
     width: 98%;
     border-radius: 5px;
     border: 1px solid black;
@@ -318,6 +331,13 @@
     margin-bottom: 10px;
 }
 
+#prod-details-original-price {
+    text-align: center;
+    font-size: 17px;
+    margin-bottom: 10px;
+    color: red;
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;