From 41101d3b237a6cf7106ee171835ec67ad106e1c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <69193134+mathildehaugum@users.noreply.github.com>
Date: Wed, 25 Oct 2023 14:42:04 +0200
Subject: [PATCH] 193 list frontend (#206)

---
 frontend/src/app/globals.css                  |  2 +-
 .../src/components/ConsultantListElement.tsx  | 56 ++++++++++++-------
 .../components/FilteredConsultantsList.tsx    |  8 ++-
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 92284dcb..0bc63034 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -66,7 +66,7 @@
 
   .body-bold {
     font-size: 0.9rem;
-    font-family: "Graphik-SemiBold";
+    font-family: "Graphik-Medium";
     line-height: 1rem;
   }
 
diff --git a/frontend/src/components/ConsultantListElement.tsx b/frontend/src/components/ConsultantListElement.tsx
index eb8b0fa3..65b93cef 100644
--- a/frontend/src/components/ConsultantListElement.tsx
+++ b/frontend/src/components/ConsultantListElement.tsx
@@ -11,32 +11,50 @@ export default function ConsultantListElement({
   consultant,
 }: ConsultantListElementProps) {
   const [isListElementVisible, setIsListElementVisible] = useState(false);
+  const [isButtonHovered, setIsButtonHovered] = useState(false);
 
   function toggleListElementVisibility() {
     setIsListElementVisible(!isListElementVisible);
   }
 
   return (
-    <div
-      className={`flex flex-col ${
-        isListElementVisible && "bg-primary_l4"
-      } border-t  border-primary_l4 `}
-    >
-      <button
-        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-2 ${isListElementVisible && "rotate-180"}`}>
-          <ChevronDown className={`text-primary_default`} />
+    <div className="flex flex-row gap-2">
+      <div
+        className={`py-0 w-0.5 rounded-lg ${
+          isButtonHovered ? "bg-primary_default" : "bg-primary_l4"
+        } ${isListElementVisible && "bg-secondary_default"}`}
+      ></div>
+      <div className="flex flex-col flex-grow">
+        <div
+          className="flex flex-row gap-2 items-center h-[52px]"
+          onMouseEnter={() => setIsButtonHovered(true)}
+          onMouseLeave={() => setIsButtonHovered(false)}
+        >
+          <button
+            className={`p-2 rounded-lg hover:bg-primary_default hover:bg-opacity-10 ${
+              isListElementVisible && "rotate-180"
+            }`}
+            onClick={toggleListElementVisibility}
+          >
+            <ChevronDown className={`text-primary_default w-6 h-6`} />
+          </button>
+          <div className="flex flex-col gap-1">
+            <p
+              className={`text-black text-start ${
+                isListElementVisible ? "body-bold" : "body"
+              }`}
+            >
+              {consultant.name}
+            </p>
+            <p className="detail text-neutral_l1 text-start">
+              {`${consultant.yearsOfExperience} RÅ år`}
+            </p>
+          </div>
         </div>
-        <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.yearsOfExperience} RÅ år`}
-          </p>
-        </div>
-      </button>
-      <div className={`${!isListElementVisible && "hidden"} h-[198px] `}></div>
+        <div
+          className={`${!isListElementVisible && "hidden"} h-[198px] `}
+        ></div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index 26080b59..2134a38d 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -19,9 +19,11 @@ export default function FilteredConsultantList() {
           </p>
         </div>
       </div>
-      {consultants?.map((consultant) => (
-        <ConsultantListElement key={consultant.id} consultant={consultant} />
-      ))}
+      <div className="flex flex-col gap-1">
+        {consultants?.map((consultant) => (
+          <ConsultantListElement key={consultant.id} consultant={consultant} />
+        ))}
+      </div>
     </div>
   );
 }