refactor with button atom

frontend/public/stylesheets/filter.css

 .filter {
-  width: 50%;
+  /* width: 50%; */
   display: flex;
-  justify-content: space-evenly;
   align-items: center;
+  padding: 20px;
 }
 
-.filter > * {
+.filter-btns {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.filter-btns > * {
   cursor: pointer;
   display: flex;
   padding: 10px 20px;
+  margin-left: 10px;
   border-radius: 5px;
   border: 1px solid black;
 }
@@ -24,9 +31,11 @@
 .filter-rec.selected {
   background: blue;
 }
+
 .filter-ful.selected {
   background: green;
 }
+
 .filter-can.selected {
   background: red;
 }
\ No newline at end of file

frontend/src/components/atoms/Button.jsx

+const Button = ({ className, onClick, text }) => (
+  <div className={className} onClick={onClick}>
+    {text}
+  </div>
+)
+
+export default Button;
\ No newline at end of file

frontend/src/components/filter/Filter.jsx

 import { useEffect, useState } from "react";
+import Button from "../atoms/Button";
 
 const Filter = ({ orders, setOrdersToShow }) => {
   const [all, setAll] = useState(true);
@@ -77,27 +78,29 @@ const Filter = ({ orders, setOrdersToShow }) => {
 
   return (
     <div className="filter">
-      Filter: 
-      <div className={`filter-all ${all ? "selected" : ""}`} onClick={reset}>
-        All
-      </div>
-      <div
+      <div>Filter:</div>
+
+      <div className="filter-btns">
+        <Button
+          className={`filter-all ${all ? "selected" : ""}`}
+          onClick={reset}
+          text="All"
+        />
+        <Button
           className={`filter-rec ${received ? "selected" : ""}`}
           onClick={receive}
-      >
-        Received
-      </div>
-      <div
+          text="Received"
+        />
+        <Button
           className={`filter-ful ${fulfilled ? "selected" : ""}`}
           onClick={fulfill}
-      >
-        Fulfilled
-      </div>
-      <div
+          text="Fulfilled"
+        />
+        <Button
           className={`filter-can ${cancelled ? "selected" : ""}`}
           onClick={cancel}
-      >
-        Cancelled
+          text="Cancelled"
+        />
       </div>
     </div>
   );

frontend/src/components/order/OrderButtons.jsx

 import React from "react";
 import { connect } from "react-redux";
 import { editOrder } from "../../actions/order_actions";
+import Button from "../atoms/Button";
 
 const OrderButtons = ({ order, editOrder }) => {
   // const { id, orderId, status, orderItems, createdAt, modifiedAt } = order;
@@ -14,20 +15,10 @@ const OrderButtons = ({ order, editOrder }) => {
     }
   };
 
-  const fulfill = (
-    <div className="fulfill-btn" onClick={() => handleUpdate("FULFILL")}>
-      Fulfill
-    </div>
-  );
-
-  const cancel = (
-    <div className="cancel-btn" onClick={() => handleUpdate("CANCEL")}>
-      Cancel
-    </div>
-  );
   return (
     <div className="oii-buttons">
-      {fulfill} {cancel}
+      <Button className="fulfill-btn" onClick={() => handleUpdate("FULFILL")} text="Fulfill"/>
+      <Button className="cancel-btn" onClick={() => handleUpdate("CANCEL")} text="Cancel"/>
     </div>
   );
 };

frontend/src/components/order/OrderIndexItem.jsx

@@ -26,7 +26,7 @@ const OrderIndexItem = ({ order }) => {
       <div className="oii-container">
         <div className="oii-left">
           <FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/>
-          <div className="oii-num">{`Order #: ${orderId}`} {id} </div>
+          <div className="oii-num">{`Order #:${orderId} --`}  {`Warehouse #:${id}`} </div>
         </div>
         {actions}
       </div>