start table styling

frontend/public/stylesheets/header.css

 .header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
   padding: 10px 20px;
   height: 50px;

frontend/public/stylesheets/order.css

@@ -126,8 +126,9 @@
 
 .order-details-container {
   overflow: hidden;
-  padding: 0 50px 20px;
+  padding: 20px 50px;
   box-sizing: border-box;
+  /* background: white; */
 }
 
 .animate {
@@ -135,6 +136,22 @@
   max-height: 200px;
 }
 
+.order-details-header {
+  padding: 4px 0;
+  font-size: 20px;
+  font-weight: 700;
+  border-bottom: 1px solid red; 
+}
+
+.order-detail-table {
+  /* margin: 20px; */
+  /* border-spacing: 30px; */
+}
+
+.order-details thead {
+  font-weight: 700;
+}
+
 .item-detail ~ .item-detail {
-  margin-top: 10px;
+  border-top: 1px solid red;
 }

frontend/src/components/header/Header.jsx

@@ -5,8 +5,7 @@ import Logout from "../session/Logout";
 const Header = () => {
   return (
     <div className="header">
-      Warehouse Management
-      <Login />
+      <div>Warehouse Management</div>
       <Logout />
     </div>
   );

frontend/src/components/order/ItemDetails.jsx

@@ -3,9 +3,15 @@ const ItemDetails = ({ item }) => {
   const { itemId, itemName, itemQuantity, itemPrice, itemSku } = item;
 
   return (
-    <li className="item-detail">
-      {`${itemName} -- x ${itemQuantity} bought at ${itemPrice}/ea.`}
-    </li>
+    <tr className="item-detail">
+      <th>{itemSku}</th>
+      <th>{itemName}</th>
+      <th>{`$${itemPrice}`}</th>
+      <th>{itemQuantity}</th>
+    </tr>
+    // <li className="item-detail">
+    //   {`${itemName} -- x ${itemQuantity} bought at ${itemPrice}/ea.`}
+    // </li>
   )
 }
 

frontend/src/components/order/OrderDetails.jsx

@@ -5,17 +5,29 @@ const OrderDetails = ({ order, showDetails }) => {
   return (
     <div className={`order-details ${showDetails ? "animate" : ""}`}>
       <div className="order-details-container">
-        <div>
-          {`Order Details - Warehouse Order #: ${order.id}`}
+        {`Warehouse Order #: ${order.id}`}
+
+        <div className="order-details-header">
+          Order Details
         </div>
-        <ul>
-          {order.orderItems.map( item => (
-            <ItemDetails key={item.itemId}item={item} />
+        <table className="order-detail-table">
+          <thead>
+            <tr>
+              <th>SKU #</th>
+              <th>Name</th>
+              <th>Price</th>
+              <th>Quantity</th>
+            </tr>
+          </thead>
+          <tbody>
+            {order.orderItems.map((item) => (
+              <ItemDetails key={item.itemId} item={item} />
             ))}
-        </ul>
+          </tbody>
+        </table>
       </div>
     </div>
-  )
+  );
 }
 
 export default OrderDetails;
\ No newline at end of file