add more styling on order details

frontend/public/stylesheets/order.css

@@ -76,22 +76,56 @@
 }
 
 .fulfill-btn {
+  position: relative;
   border: 1px solid green;
   color: green;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
+  0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.fulfill-btn:hover {
+  color: white;
+  background: green;
+  box-shadow: none;
 }
 
 .cancel-btn {
+  position: relative;
   border: 1px solid red;
   color: red;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
+  0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+.cancel-btn:hover {
+  color: white;
+  background: red;
+}
+
+.fulfill-btn:active, .cancel-btn:active {
+  top: 2px;
 }
 
 .order-details {
+  display: flex;
+  flex-direction: column;
+  /* min-height: 0px; */
   max-height: 0px;
   overflow: hidden;
   transition: max-height 1s ease-out;
 }
 
+.order-details-container {
+  overflow: hidden;
+  padding: 0 50px 20px;
+  box-sizing: border-box;
+}
+
 .animate {
   transition: max-height 1s ease-out;
   max-height: 200px;
+}
+
+.item-detail ~ .item-detail {
+  margin-top: 10px;
 }
\ No newline at end of file

frontend/src/actions/order_actions.js

@@ -35,6 +35,7 @@ export const createOrder = (order) => (dispatch) =>
 export const editOrder = (order) => (dispatch) => {
   OrderAPIUtil.editOrder(order)
     .then(res => {
-      dispatch(updateOrder(res.data))
+      // debugger
+      dispatch(updateOrder(res))
     });
 }
\ No newline at end of file

frontend/src/components/order/ItemDetails.jsx

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

frontend/src/components/order/OrderDetails.jsx

@@ -43,10 +43,16 @@ const OrderDetails = ({ order, showDetails }) => {
 
   return (
     <div className={`order-details ${showDetails ? "animate" : ""}`}>
-      Order Details
-      {sampleItems.map( item => (
-        <ItemDetails key={item.itemId}item={item} />
-      ))}
+      <div className="order-details-container">
+        Order Details
+        <ul>
+          {sampleItems.map( item => (
+            <ItemDetails key={item.itemId}item={item} />
+          ))}
+
+        </ul>
+
+      </div>
     </div>
   )
 }

src/main/java/com/ascendfinalproject/warehouse/services/WarehouseOrderService.java

@@ -43,4 +43,6 @@ public class WarehouseOrderService {
 
   }
 
+
+
 }