fix styling and search

frontend/public/stylesheets/header.css

@@ -11,6 +11,12 @@
   font-weight: 700;
 }
 
+.nisum-logo {
+  margin-right: 10px;
+  width: 100px;
+  height: 50px;
+}
+
 .header-module {
   position: absolute;
   top: 0;
@@ -27,12 +33,6 @@
   align-items: center;
 }
 
-.header img {
-  margin-right: 10px;
-  width: 32px;
-  height: 32px;
-}
-
 .user {
   cursor: pointer;
   position: relative;
@@ -46,6 +46,13 @@
   color: #CCCDCF;
 }
 
+.user img {
+  margin-right: 10px;
+  width: 32px;
+  width: 32px;
+  border-radius: 50%;
+}
+
 .dropdown {
   cursor: auto;
   width: 100%;

frontend/src/components/atoms/Image.jsx

-const Image = ({ src }) => (
-  <img src={src} alt=""/>
+const Image = ({ className, src }) => (
+  <img className={className} src={src} alt=""/>
 )
 
 export default Image;
\ No newline at end of file

frontend/src/components/filter/Search.jsx

@@ -27,17 +27,13 @@ const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
       setByError(true);
     } else {
       const searchResult = { allIds: [], byId: {} };
-      const searchedOrder =
-        searchBy === searchOptions[0]
-          ? orders.byId[searchInput]
-          : searchBy === searchOptions[1]
-          ? orders.byOrderId[searchInput]
-          : null;
-
-      if (searchedOrder) {
-        searchResult.allIds.push(searchedOrder.id);
-        searchResult.byId[searchedOrder.id] = searchedOrder;
+      orders.allIds.map(id => {
+        const order = orders.byId[id];
+        if (order.orderId.toLowerCase().includes(searchInput.toLowerCase())) {
+          searchResult.allIds.push(id);
+          searchResult.byId[id] = orders.byId[id];
         }
+      })
       if (searchBy.length) {
         setOrdersToShow(searchResult);
       }

frontend/src/components/header/Header.jsx

@@ -6,9 +6,11 @@ import User from "./User";
 const Header = ({ isLoggedIn, user, logout }) => {
   return (
     <div className="header">
-      <div>Ascend</div>
+      <div>
+        <Image className="nisum-logo" src="./nisum.jpeg" />
+      </div>
+      {/* <div>Ascend</div> */}
       <div className="header-module">
-        {/* <Image src="./logo.svg" /> */}
         <div>Warehouse Management</div>
       </div>
       <div>{isLoggedIn ? <User user={user.user} /> : null}</div>

frontend/src/components/order/OrderIndexItem.jsx

@@ -11,6 +11,7 @@ const OrderIndexItem = ({
   setExpandAll,
 }) => {
   const { orderId, status } = order;
+  const idToShow = orderId.slice(-7).toUpperCase();
 
   const [showDetails, setShowDetails] = useState(false);
 
@@ -44,7 +45,7 @@ const OrderIndexItem = ({
             className={`oii-drop ${showDetails ? "rotate" : ""}`}
             onClick={handleDropDown}
           />
-          <div className="oii-num">{`Order #: ${orderId}`}</div>
+          <div className="oii-num">{`Order #: ${idToShow}`}</div>
         </div>
         {actions}
       </div>

frontend/src/reducers/entities/orders_reducer.js

@@ -17,12 +17,10 @@ const OrdersReducer = (oldState = initialState, action) => {
       const orderState = {
         byId: {},
         allIds: [],
-        byOrderId: {},
       };
       action.orders.forEach( order => {
         orderState.allIds.push(order.id);
         orderState.byId[order.id] = order;
-        orderState.byOrderId[order.orderId] = order;
       })
       return orderState;
     case UPDATE_ORDER: