alternating backgrounds if more than one order in history

ecom-web/src/components/order-confirmation/order-confirmation.jsx

@@ -23,7 +23,7 @@ const OrderConfirmation = () => {
     return (
         <main>
             <h1 id="order-confirmation-header">Thanks for your order!</h1>
-            <Order order={orderResponse} />
+            <Order order={orderResponse} alt={0}/>
 
         </main>
         

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

@@ -5,14 +5,14 @@ import OrderItem from './OrderItem';
 
 const Order = (props) => {
 
-    const {order} = props;
+    const {order, alt} = props;
     const {orderItems, customerAddress} = order;
 
     const orderTotalPrice = totalPrice(orderItems);
     const orderPlaced = new Date(order.orderCreatedAt);
 
     return (
-        <div className="order">
+        <div className={`order order-${alt%2}`}>
             <p className="order-number">Order #: {order.id}</p>
             <div className="products-ordered">
                 {orderItems.map((orderItem, ind) => {

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

@@ -7,7 +7,7 @@ main {
     display: flex;
     flex-direction: column;
     padding: 20px;
-    margin-bottom: 50px;
+    margin-bottom: 10px;
 }
 
 .products-ordered {
@@ -97,4 +97,8 @@ main {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+}
+
+.order-1 {
+    background-color: #f0f0f0;
 }
\ No newline at end of file

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

@@ -29,8 +29,8 @@ const OrderHistory = () => {
                 <div>Please login to place orders!</div>
             ) : null}
             <div id="orders">
-                {orderHistory.map(order => {
-                    return <Order order={order}/>;
+                {orderHistory.map((order, ind) => {
+                    return <Order order={order} key={ind} alt={ind}/>;
                 })}
             </div>
         </main>