new order styling

ecom-web/src/components/order-history/Order.jsx

@@ -14,19 +14,6 @@ const Order = (props) => {
     return (
         <div className="order">
             <p className="order-number">Order #: {order.id}</p>
-            <p><span className="order-field">Order Status:</span> {order.orderStatus}</p>
-            <p><span className="order-field">Order Placed:</span> {orderPlaced.getUTCMonth()}
-                /{orderPlaced.getUTCDay()}
-                /{orderPlaced.getUTCFullYear()}
-            </p>
-            <p>
-            <span className="order-field">Delivery Address:</span> {`
-                ${customerAddress.street},
-                ${customerAddress.city},
-                ${customerAddress.state} ${customerAddress.zip}
-                `}
-            </p>
-            <p><span className="order-field">Items Ordered:</span></p>
             <div className="products-ordered">
                 {orderItems.map((orderItem, ind) => {
                     return (
@@ -34,8 +21,27 @@ const Order = (props) => {
                     )
                 })}
             </div>
+            <div className="total-price">
             <p><span className="order-field">Total Price:</span> ${orderTotalPrice}</p>
-
+            </div>
+            <div className="order-details">
+                <div className="order-description">
+                    <p className="order-status-header">Status</p>
+                    <p><span className="order-field">Order Placed:</span> {orderPlaced.getUTCMonth()}
+                    /{orderPlaced.getUTCDay()}
+                    /{orderPlaced.getUTCFullYear()}
+                    </p>
+                    <p><span className="order-field">Order Status:</span> {order.orderStatus}</p>
+                </div>
+                <div className="shipping-details">
+                    <p className="shipping-details-header">Shipping Address</p>
+                    <span>{customerAddress.street},</span>
+                    <p>{`${customerAddress.city},
+                    ${customerAddress.state} ${customerAddress.zip}
+                    `}
+                    </p>
+                </div>
+            </div>
         </div>
     )
 }

ecom-web/src/components/order-history/OrderItem.jsx

@@ -18,16 +18,16 @@ const OrderItem = (props) => {
     return (
         <div className="order-item">
             <div className="pic-container">
-                <img src={fullItemDetails.productImageUrl} />
+                <img className="order-item-pic" src={fullItemDetails.productImageUrl} />
             </div>
             <div className="item-details-container">
-                <p>Item: {itemName}</p>
-                <p>Quantity: {itemQuantity}</p>
+                <p className="order-item-name">{itemName}</p>
+                <p className="order-item-quantity">QTY: {itemQuantity}</p>
                 
             </div>
             <div className="item-price-container">
                 <p>Price Per Unit: ${itemPrice.toFixed(2)}</p>
-                <p>Subtotal: ${subTotal.toFixed(2)}</p>
+                <p className="order-subtotal">Subtotal: ${subTotal.toFixed(2)}</p>
             </div>
 
             

ecom-web/src/components/order-history/order-history.css

@@ -7,6 +7,7 @@ main {
     display: flex;
     flex-direction: column;
     padding: 20px;
+    margin-bottom: 50px;
 }
 
 .products-ordered {
@@ -18,7 +19,7 @@ main {
     display: grid;
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-rows: auto;
-    border: 1px solid red;
+    border-bottom: 1px solid lightgray;
     width: 100%;
 }
 
@@ -32,3 +33,68 @@ main {
     text-align: center;
     padding: 10px;
 }
+
+.order-item-pic {
+    width: 200px;
+    height: 200px;
+    padding: 25px;
+}
+
+.item-details-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.order-item-name {
+    font-size: 24px;
+}
+
+.order-item-quantity {
+    color: gray;
+}
+
+.item-price-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.order-subtotal {
+    font-weight: 600;
+}
+
+.order-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+
+}
+
+.total-price {
+    display: flex;
+    justify-content: flex-end;
+    border-bottom: 1px solid lightgray;
+    padding: 20px;
+    font-weight: 600;
+    font-size: 20px;
+
+}
+
+.order-status-header, .shipping-details-header {
+    font-weight: 600;
+    border-bottom: 1px solid black ;
+    width: fit-content;
+    margin-bottom: 10px;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+.shipping-details, .order-description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
\ No newline at end of file