From aa41e607f5afcca89a8bab867f0cac7ca26b1ee1 Mon Sep 17 00:00:00 2001
From: Sigrid <55406589+sigtheidiot@users.noreply.github.com>
Date: Thu, 12 Oct 2023 15:27:39 +0200
Subject: [PATCH] Update list over consultants based on comments from PO (#131)

---
 frontend/src/components/ConsultantListElement.tsx   | 10 +++++-----
 frontend/src/components/FilteredConsultantsList.tsx |  2 +-
 frontend/src/components/SearchBarComponent.tsx      |  8 +++++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ConsultantListElement.tsx b/frontend/src/components/ConsultantListElement.tsx
index 7574c008..80316e05 100644
--- a/frontend/src/components/ConsultantListElement.tsx
+++ b/frontend/src/components/ConsultantListElement.tsx
@@ -20,17 +20,17 @@ export default function ConsultantListElement({
     <div
       className={`flex flex-col ${
         isListElementVisible && "bg-primary_l4"
-      } border-t-2  border-primary_l4 `}
+      } border-t  border-primary_l4 `}
     >
       <button
-        className="flex flex-row gap-6 p-3  hover:bg-primary_default hover:bg-opacity-5"
+        className="flex flex-row gap-3 py-0.5  hover:bg-primary_default hover:bg-opacity-5"
         onClick={toggleListElementVisibility}
       >
-        <div className={`w-6 h-6 m-3 ${isListElementVisible && "rotate-180"}`}>
+        <div className={`w-6 h-6 m-2 ${isListElementVisible && "rotate-180"}`}>
           <ChevronDown className={`text-primary_default`} />
         </div>
-        <div className="flex flex-col gap-1 justify-center items-start">
-          <p className="body text-black"> {consultant.name}</p>
+        <div className="flex flex-col justify-center items-start">
+          <p className="body text-black text-sm"> {consultant.name}</p>
           <p className="detail text-neutral_l1">{consultant.email}</p>
         </div>
       </button>
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index 96750e34..f615f262 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -18,7 +18,7 @@ export default function FilteredConsultantList({
     var newFilteredConsultants = consultants;
     if (search && search.length > 0) {
       newFilteredConsultants = newFilteredConsultants?.filter((consultant) =>
-        consultant.name.toLowerCase().includes(search.toLowerCase()),
+        consultant.name.match(new RegExp(`\\b${search}.*\\b`, "gi")),
       );
     }
     if (filter && filter.length > 0) {
diff --git a/frontend/src/components/SearchBarComponent.tsx b/frontend/src/components/SearchBarComponent.tsx
index 0e146b4d..f056babb 100644
--- a/frontend/src/components/SearchBarComponent.tsx
+++ b/frontend/src/components/SearchBarComponent.tsx
@@ -6,7 +6,9 @@ import { Search } from "react-feather";
 export default function SearchBarComponent() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState(
+    searchParams.get("search") || "",
+  );
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -22,6 +24,9 @@ export default function SearchBarComponent() {
       ) {
         inputRef.current.focus();
       }
+      if (e.code.includes("Escape")) {
+        setSearchText("");
+      }
     }
     document.addEventListener("keydown", keyDownHandler);
 
@@ -42,6 +47,7 @@ export default function SearchBarComponent() {
           onChange={(e) => setSearchText(e.target.value)}
           autoFocus
           ref={inputRef}
+          value={searchText}
         ></input>
       </div>
     </div>