fix filter/search and update no orders

frontend/public/stylesheets/filter.css

@@ -10,7 +10,7 @@
 }
 
 .filter-search > * ~ * {
-  margin-left: 100px;
+  margin-left: 50px;
 }
 
 .filter {
@@ -49,32 +49,32 @@
 }
 
 .filter-all:hover {
-  background: orange;
+  background: #E2C391;
   color: white;
 }
 .filter-all.selected {
-  background: orange;
+  background: #E2C391;
 }
 .filter-rec:hover {
-  background: blue;
+  background: #2292A4;
   color: white;
 }
 .filter-rec.selected {
-  background: blue;
+  background: #2292A4;
 }
 .filter-ful:hover {
-  background: green;
+  background: #4daa57;
   color: white;
 }
 .filter-ful.selected {
-  background: green;
+  background: #4daa57;
 }
 .filter-can:hover {
-  background: red;
+  background: #c1292e;
   color: white;
 }
 .filter-can.selected {
-  background: red;
+  background: #c1292e;
 }
 
 .search {
@@ -103,7 +103,7 @@
 .collapse-btn:hover,
 .expand-btn:hover {
   color: white;
-  background: gray;
+  background: #2b4162;
 }
 
 .error {

frontend/public/stylesheets/header.css

@@ -4,8 +4,8 @@
   align-items: center;
   padding: 10px 20px;
   height: 50px;
-  background: gray;
-  color: white;
+  background: #2b4162;
+  color: #fff;;
   font-size: 28px;
   font-weight: 700;
 }
\ No newline at end of file

frontend/public/stylesheets/master.css

@@ -2,4 +2,12 @@
 @import './header.css';
 @import './footer.css';
 @import './filter.css';
-@import './order.css';
\ No newline at end of file
+@import './order.css';
+
+/* background: #2b4162; */
+/* background: #4daa57 */
+/* background: #c1292e */
+/* background: #2292A4; */
+
+/* background: #f5f0f6; */
+/* background: #acb0bd; */

frontend/public/stylesheets/order.css

@@ -4,7 +4,7 @@
 .order-index > h1 {
   padding: 10px 20px;
   margin-bottom: 2px;
-  background: blue;
+  background: #2b4162;
   color: white;
   font-size: 24px;
   font-weight: 700;
@@ -18,7 +18,7 @@
   flex-direction: column;
   justify-content: center;
   min-height: 70px;
-  background: lightgray;
+  background: #eee;
   border-radius: 5px;
   font-size: 24px;
 }
@@ -78,37 +78,37 @@
 }
 
 .oii-status.fulfilled {
-  color: green;
+  color: #4daa57;
 }
 .oii-status.cancelled {
-  color: red;
+  color: #c1292e;
 }
 
 .fulfill-btn {
   position: relative;
-  border: 1px solid green;
-  color: green;
+  border: 1px solid #4daa57;
+  color: #4daa57;
   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;
+  background: #4daa57;
   box-shadow: none;
 }
 
 .cancel-btn {
   position: relative;
-  border: 1px solid red;
-  color: red;
+  border: 1px solid #c1292e;
+  color: #c1292e;
   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;
+  background: #c1292e;
 }
 
 .fulfill-btn:active, .cancel-btn:active {
@@ -188,4 +188,11 @@
 .order-detail-table th ~ th,
 .order-detail-table td ~ td {
   border-left: 1px solid black;
+}
+
+.no-orders {
+  padding: 50px; 
+  display: flex;
+  justify-content: center;
+  font-size: 28px;
 }
\ No newline at end of file

frontend/src/components/filter/Filter.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Button from "../atoms/Button";
 
-const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
+const Filter = ({ orders, filtersOn, setFiltersOn, setOrdersToShow }) => {
   const [all, setAll] = useState(false);
   const [received, setReceived] = useState(false);
   const [fulfilled, setFulfilled] = useState(false);
@@ -14,12 +14,14 @@ const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
 
   const reset = () => {
     setAll(true);
+    setFiltersOn(true);
     setReceived(false);
     setFulfilled(false);
     setCancelled(false);
   };
   const receive = () => {
     setAll(false);
+    setFiltersOn(true);
     setReceived(!received);
     if (received && !fulfilled && !cancelled) {
       setAll(true);
@@ -27,6 +29,7 @@ const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
   };
   const fulfill = () => {
     setAll(false);
+    setFiltersOn(true);
     setFulfilled(!fulfilled);
     if (!received && fulfilled && !cancelled) {
       setAll(true);
@@ -34,6 +37,7 @@ const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
   };
   const cancel = () => {
     setAll(false);
+    setFiltersOn(true);
     setCancelled(!cancelled);
     if (!received && !fulfilled && cancelled) {
       setAll(true);

frontend/src/components/filter/FilterSearch.jsx

@@ -2,13 +2,17 @@ import { useState } from "react";
 import Filter from "./Filter";
 import Search from "./Search";
 
-const FilterSearch = ({ orders, setOrdersToShow }) => {
+const FilterSearch = ({ setOrdersToShow }) => {
   const [filtersOn, setFiltersOn] = useState(true);
 
   return (
     <div className="filter-search">
-      <Filter filtersOn={filtersOn} setOrdersToShow={setOrdersToShow} />
-      <Search setOrdersToShow={setOrdersToShow} setFiltersOn={setFiltersOn}/>
+      <Filter
+        filtersOn={filtersOn}
+        setFiltersOn={setFiltersOn}
+        setOrdersToShow={setOrdersToShow}
+      />
+      <Search setOrdersToShow={setOrdersToShow} setFiltersOn={setFiltersOn} />
     </div>
   );
 };

frontend/src/components/order/NoOrders.jsx

 const NoOrders = () => (
-  <div>
-    No Orders To Show
+  <div className="no-orders">
+    Hmm, it doesn't seem like there were any orders found...
   </div>
 )
 export default NoOrders;
\ No newline at end of file

frontend/src/components/order/OrderIndex.jsx

@@ -9,7 +9,7 @@ const OrderIndex = ({
 }) => {
   return (
     <div className="order-index">
-      <h1>Order Index</h1>
+      <h1>Orders</h1>
       {orders.allIds.map((orderId) => {
         const order = orders.byId[orderId];
         return (

frontend/src/components/order/OrderIndexItem.jsx

@@ -23,7 +23,7 @@ const OrderIndexItem = ({
     }
     setCollapseAll(false);
     setExpandAll(false);
-  }, [showDetails, collapseAll, expandAll]);
+  }, [showDetails, collapseAll, expandAll, setCollapseAll, setExpandAll]);
 
   const handleDropDown = () => {
     setShowDetails(!showDetails);