add final touches on order details and search

frontend/public/stylesheets/filter.css

@@ -88,7 +88,7 @@
 
 .search > select {
   cursor: pointer;
-  border: none;
+  padding: 10px 0;
   font-size: 16px;
   font-family: "Times New Roman", Times, serif;
 }
@@ -106,8 +106,9 @@
   background: #2b4162;
 }
 
-.error {
-  color: red;
+.search-select-error,
+.search-input-error {
+  border: 2px solid #c1292e;
 }
 
 .fs-collapse {

frontend/public/stylesheets/order.css

@@ -156,7 +156,7 @@
   font-weight: 400;
   font-size: 16px;
   font-style: italic;
-  width: 280px;
+  width: 275px;
 }
 
 .order-details-dates > div {

frontend/public/stylesheets/reset.css

@@ -40,4 +40,7 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+}
+select:focus, input:focus {
+	outline: none;
 }
\ No newline at end of file

frontend/src/components/atoms/Input.jsx

-const Input = ({ className, type, placeholder, value, onChange, onKeyPress }) => (
-  <input 
+const Input = ({
+  className,
+  type,
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+  onKeyPress,
+}) => (
+  <input
     type={type || "text"}
     className={className}
     placeholder={placeholder}
     value={value}
     onChange={onChange}
+    onBlur={onBlur}
     onKeyPress={onKeyPress}
   />
 );

frontend/src/components/atoms/Select.jsx

-const Select = ({ defaultVal, value, onChange, options }) => (
+const Select = ({ className, defaultVal, value, onChange, options }) => (
   <select
+    className={className}
     value={value ? value : defaultVal}
     onChange={onChange}
   >

frontend/src/components/filter/Search.jsx

@@ -9,14 +9,21 @@ const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
   const [searchInput, setSearchInput] = useState("");
   const [searchBy, setSearchBy] = useState("");
   const [error, setError] = useState("");
+  const [inputError, setInputError] = useState(false);
+  const [byError, setByError] = useState(false);
 
   const searchOptions = ["Warehouse ID", "Order ID"];
 
   const search = () => {
-    if (!searchInput.length) {
-      setError("Please enter a search parameter.");
+    setInputError(false);
+    setByError(false);
+    if (!searchInput.length && !searchBy.length) {
+      setInputError(true);
+      setByError(true);
+    } else if (!searchInput.length) {
+      setInputError(true);
     } else if (!searchBy.length) {
-      setError("Please enter search method.");
+      setByError(true);
     } else {
       const searchResult = { allIds: [], byId: {} };
       const searchedOrder =
@@ -33,12 +40,17 @@ const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
       if (searchBy.length) {
         setOrdersToShow(searchResult);
       }
-      setError("");
       setSearchInput("");
       setFiltersOn(false);
     } 
   };
 
+  const handleInputBlur = (e) => {
+    if (!e.target.value.length) {
+      setInputError(true);
+    }
+  }
+
   const handleSearchEnter = (e) => {
     if (e.key === "Enter") {
       search();
@@ -49,21 +61,28 @@ const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
     <div className="search">
       <div className="text">Search:</div>
       <Select
+        className={byError ? "search-select-error" : ""}
         defaultVal={"Choose one.."}
         value={searchBy}
         options={searchOptions}
         onChange={(e) => {
+          setByError(false);
           setSearchBy(e.target.selectedOptions[0].value);
         }}
       />
       <Input
+        className={inputError ? "search-input-error" : ""}
         placeholder={"Search by ID"}
         value={searchInput}
-        onChange={(e) => setSearchInput(e.target.value)}
+        onChange={(e) => {
+          setInputError(false);
+          setSearchInput(e.target.value);
+        }}
+        onBlur={handleInputBlur}
         onKeyPress={handleSearchEnter}
       />
       <Button className="search-btn" text="Search" onClick={search} />
-      {error.length ? <Error text={error}/> : null}
+      {/* {error.length ? <Error text={error} /> : null} */}
     </div>
   );
 };

frontend/src/components/order/OrderDetails.jsx

@@ -10,8 +10,11 @@ const OrderDetails = ({ order, showDetails }) => {
     const month = date.toLocaleString("default", { month: "short" });
     const day = date.getDate();
     const year = date.getFullYear();
-    const time = date.toLocaleTimeString("en-US");
-    return `${month} ${day > 9 ? day : `0${day}`}, ${year} at ${time}`;
+    const hour = date.getHours();
+    const cHour = hour > 12 ? hour - 12 : hour;
+    const minute = date.getMinutes();
+    const time = `${cHour > 9 ? cHour : `0${cHour}`}:${minute > 9 ? minute : `0${minute}`}`;
+    return `${month} ${day > 9 ? day : `0${day}`}, ${year} at ${time} ${hour > 11 ? "PM" : "AM"}`;
   };
 
   return (