From 1a9a5945563839e2138639ee4b59ec143485cd2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Tue, 14 Nov 2023 14:49:05 +0100
Subject: [PATCH 01/14] Refactor design of navbar

---
 frontend/src/components/NavBar/NavBar.tsx     | 22 ++++++++++---------
 .../src/components/NavBar/NavBarDropdown.tsx  | 12 +++++-----
 frontend/src/components/NavBar/NavBarLink.tsx |  2 +-
 .../src/components/NavBar/NavBarUserIcon.tsx  | 11 +++-------
 4 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
index f5c47b16..3d310f9b 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -4,18 +4,20 @@ import NavBarUserIcon from "./NavBarUserIcon";
 
 export default function NavBar() {
   return (
-    <div className="bg-primary w-full h-[52px] flex flex-row justify-between header">
-      <div className="flex flex-row">
+    <div className="bg-primary w-full flex flex-row justify-between header px-4">
+      <div className="flex flex-row gap-8">
         <NavBarLink text="Bemanning" path={`bemanning`} />
       </div>
-      <div className="flex flex-row gap-6 items-center">
-        <Image
-          className="variant-logo"
-          alt="Variant logo"
-          src="/images/variant-logo.svg"
-          width="65"
-          height="16"
-        />
+      <div className="flex flex-row gap-4 items-center">
+        <div className="border-r border-white/20 py-2">
+          <Image
+            className="variant-logo mr-4"
+            alt="Variant logo"
+            src="/images/variant-logo.svg"
+            width="65"
+            height="16"
+          />
+        </div>
         <NavBarUserIcon />
       </div>
     </div>
diff --git a/frontend/src/components/NavBar/NavBarDropdown.tsx b/frontend/src/components/NavBar/NavBarDropdown.tsx
index 01eeeb5f..7ff1a4e3 100644
--- a/frontend/src/components/NavBar/NavBarDropdown.tsx
+++ b/frontend/src/components/NavBar/NavBarDropdown.tsx
@@ -4,7 +4,7 @@ import { signOut } from "next-auth/react";
 import { LogOut } from "react-feather";
 import { useOutsideClick } from "@/hooks/useOutsideClick";
 
-export default function NavBarDropdown(props: { initials: string }) {
+export default function NavBarDropdown(props: { initial: string }) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const menuRef = useRef(null);
@@ -15,14 +15,16 @@ export default function NavBarDropdown(props: { initials: string }) {
 
   return (
     <>
-      <div className="relative p-2" ref={menuRef}>
+      <div className="relative" ref={menuRef}>
         <button
-          className={`flex rounded-full border border-white h-9 min-w-[36px] justify-center items-center ${
-            props.initials.length > 3 && "px-1"
+          className={`flex rounded-full border border-white/50 h-8 w-8 justify-center items-center  ${
+            isOpen ? "bg-white" : "hover:bg-white/10 hover:border-white"
           }`}
           onClick={() => setIsOpen(!isOpen)}
         >
-          <p className="text-white small">{props.initials}</p>
+          <p className={`large ${isOpen ? "text-primary" : "text-white"}`}>
+            {props.initial}
+          </p>
         </button>
         <div
           className={`absolute right-0 top-11 rounded-b text-primary bg-white flex flex-col w-[138px] shadow-md ${
diff --git a/frontend/src/components/NavBar/NavBarLink.tsx b/frontend/src/components/NavBar/NavBarLink.tsx
index 6f313e90..e8802890 100644
--- a/frontend/src/components/NavBar/NavBarLink.tsx
+++ b/frontend/src/components/NavBar/NavBarLink.tsx
@@ -8,7 +8,7 @@ export default function NavBarLink(props: { text: string; path: string }) {
 
   return (
     <a
-      className={`p-4 flex justify-center items-center text-white ${
+      className={`py-4 flex justify-center items-center text-white ${
         isCurrentPath
           ? "large-medium border-b-[3px] border-secondary"
           : "large opacity-70 hover:opacity-100"
diff --git a/frontend/src/components/NavBar/NavBarUserIcon.tsx b/frontend/src/components/NavBar/NavBarUserIcon.tsx
index a7f4f1ee..a1e04959 100644
--- a/frontend/src/components/NavBar/NavBarUserIcon.tsx
+++ b/frontend/src/components/NavBar/NavBarUserIcon.tsx
@@ -9,13 +9,8 @@ export default async function NavBarUserIcon() {
     !process.env.NEXT_PUBLIC_NO_AUTH &&
     (await getCustomServerSession(authOptions));
 
-  const initials =
-    session && session.user && session.user.name
-      ? session.user.name
-          .split(" ")
-          .map((name) => name.charAt(0).toUpperCase())
-          .join("")
-      : "NN";
+  const initial =
+    session && session.user && session.user.name ? session.user.name[0] : "N";
 
-  return <NavBarDropdown initials={initials} />;
+  return <NavBarDropdown initial={initial} />;
 }

From f8d97db7d7a81b2d63ec0c693634716a3c45e1a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Tue, 14 Nov 2023 15:02:38 +0100
Subject: [PATCH 02/14] Move week buttons to the right of the table

---
 frontend/src/components/FilteredConsultantsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index d4de396b..d7cd7e6b 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -13,7 +13,7 @@ export default function FilteredConsultantList() {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-row justify-between items-center gap-6">
         <ActiveFilters />
         <WeekSelection />
       </div>

From 06a788aa34dd752edd828f3d953a578a2ebedbc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Tue, 14 Nov 2023 15:36:57 +0100
Subject: [PATCH 03/14] Fix equal vertical and horizontal gap in booking table

---
 frontend/src/components/ConsultantRow.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 8c8c98e7..81a5ce5f 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -80,6 +80,7 @@ export default function ConsultantRows({
             setHoveredRowWeek={setHoveredRowWeek}
             hoveredRowWeek={hoveredRowWeek}
             columnCount={columnCount}
+            isLastCol={index == consultant.bookings.length - 1}
           />
         ))}
       </tr>
@@ -106,7 +107,6 @@ export default function ConsultantRows({
           </td>
         </tr>
       )}
-      <tr className="h-1" />
     </>
   );
 }
@@ -148,6 +148,7 @@ function WeekCell(props: {
   setHoveredRowWeek: (number: number) => void;
   hoveredRowWeek: number;
   columnCount: number;
+  isLastCol: boolean;
 }) {
   const {
     bookedHoursPerWeek: bookedHoursPerWeek,
@@ -156,6 +157,7 @@ function WeekCell(props: {
     setHoveredRowWeek,
     hoveredRowWeek,
     columnCount,
+    isLastCol,
   } = props;
 
   let pillNumber = 0;
@@ -177,7 +179,10 @@ function WeekCell(props: {
   }
 
   return (
-    <td key={bookedHoursPerWeek.weekNumber} className="h-[52px] px-0.5">
+    <td
+      key={bookedHoursPerWeek.weekNumber}
+      className={`h-[52px] ${isLastCol ? "py-0.5 pl-0.5" : "p-0.5"}`}
+    >
       <div
         className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative ${
           bookedHoursPerWeek.bookingModel.totalOverbooking > 0

From f9befc7e69aff42e53021a684d64732eb5db34d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Tue, 14 Nov 2023 15:44:07 +0100
Subject: [PATCH 04/14] Fix bug of missing text on info pill descriptions

---
 frontend/src/components/InfoPill.tsx             | 4 +++-
 frontend/src/components/InfoPillDescriptions.tsx | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/InfoPill.tsx b/frontend/src/components/InfoPill.tsx
index 80ba9d75..aeb239f5 100644
--- a/frontend/src/components/InfoPill.tsx
+++ b/frontend/src/components/InfoPill.tsx
@@ -5,6 +5,7 @@ export type InfoPillProps = {
   icon: ReactElement;
   colors: string;
   variant: InfoPillVariant;
+  isInfoPillDesc?: boolean;
 };
 
 export type InfoPillVariant = "wide" | "medium" | "narrow" | "circle" | "none";
@@ -14,6 +15,7 @@ export default function InfoPill({
   icon,
   colors,
   variant,
+  isInfoPillDesc = false,
 }: InfoPillProps) {
   return variant == "none" ? (
     <></>
@@ -31,7 +33,7 @@ export default function InfoPill({
       >
         {(variant == "wide" || variant == "narrow") && icon}
         {(variant == "wide" || variant == "medium") && (
-          <p className="hidden lg:flex">{text}</p>
+          <p className={`${!isInfoPillDesc && "hidden"} lg:flex`}>{text}</p>
         )}
       </div>
     </>
diff --git a/frontend/src/components/InfoPillDescriptions.tsx b/frontend/src/components/InfoPillDescriptions.tsx
index 280c41f0..b0b43f70 100644
--- a/frontend/src/components/InfoPillDescriptions.tsx
+++ b/frontend/src/components/InfoPillDescriptions.tsx
@@ -17,42 +17,49 @@ export default function InfoPillDescriptions() {
         colors="bg-primary/[3%] text-black"
         icon={<Briefcase size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
       <InfoPill
         text={"Ledig tid"}
         colors="bg-available text-available_darker"
         icon={<Coffee size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
       <InfoPill
         text={"Tilbud"}
         colors="bg-offer text-primary_darker"
         icon={<FileText size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
       <InfoPill
         text={"Ferie"}
         colors="bg-vacation text-vacation_darker"
         icon={<Sun size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
       <InfoPill
         text={"Helligdag"}
         colors="bg-holiday text-holiday_darker"
         icon={<Calendar size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
       <InfoPill
         text={"Overbooket"}
         colors="bg-overbooked_darker text-white"
         icon={<AlertTriangle size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
       <InfoPill
         text={"Fravær"}
         colors="bg-absence text-absence_darker"
         icon={<Moon size="12" />}
         variant={"wide"}
+        isInfoPillDesc={true}
       />
     </div>
   );

From 9d89b2a736413deb17b858bd3cb6fc28085d4d30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Tue, 14 Nov 2023 15:48:39 +0100
Subject: [PATCH 05/14] Remove unnecessary gap

---
 frontend/src/components/FilteredConsultantsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index d7cd7e6b..377153bd 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -13,7 +13,7 @@ export default function FilteredConsultantList() {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex flex-row justify-between items-center gap-6">
+      <div className="flex flex-row justify-between items-center">
         <ActiveFilters />
         <WeekSelection />
       </div>

From 19afad4570d31c65b0e617533615842756063a46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 13:24:26 +0100
Subject: [PATCH 06/14] Fix bug with hidden detailed bookings with 0 hours

---
 frontend/src/components/ConsultantRow.tsx | 96 ++++++++++++-----------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 72328942..e0640a5f 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -194,11 +194,14 @@ function WeekCell(props: {
         onMouseEnter={() => setHoveredRowWeek(bookedHoursPerWeek.weekNumber)}
         onMouseLeave={() => setHoveredRowWeek(-1)}
       >
-        <HoveredWeek
-          hoveredRowWeek={hoveredRowWeek}
-          bookedHoursPerWeek={bookedHoursPerWeek}
-          consultant={consultant}
-        />
+        {hoveredRowWeek != -1 &&
+          hoveredRowWeek == bookedHoursPerWeek.weekNumber && (
+            <HoveredWeek
+              hoveredRowWeek={hoveredRowWeek}
+              bookedHoursPerWeek={bookedHoursPerWeek}
+              consultant={consultant}
+            />
+          )}
         <div className="flex flex-row justify-end gap-1">
           {bookedHoursPerWeek.bookingModel.totalOffered > 0 && (
             <InfoPill
@@ -250,12 +253,29 @@ function WeekCell(props: {
   );
 }
 
+function isWeekBookingZeroHours(
+  detailedBooking: DetailedBooking,
+  hoveredRowWeek: number,
+): boolean {
+  return (
+    detailedBooking.hours.filter(
+      (weekHours) =>
+        weekHours.week % 100 == hoveredRowWeek && weekHours.hours != 0,
+    ).length == 0
+  );
+}
+
 function HoveredWeek(props: {
   hoveredRowWeek: number;
   bookedHoursPerWeek: BookedHoursPerWeek;
   consultant: Consultant;
 }) {
   const { hoveredRowWeek, bookedHoursPerWeek, consultant } = props;
+
+  const nonZeroHoursDetailedBookings = consultant.detailedBooking.filter(
+    (d) => !isWeekBookingZeroHours(d, hoveredRowWeek),
+  );
+
   return (
     <div
       className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center z-20 pointer-events-none ${
@@ -270,49 +290,35 @@ function HoveredWeek(props: {
         "hidden"
       }`}
     >
-      <div className="rounded-lg bg-white flex flex-col gap-2 min-w-[222px] p-3 shadow-xl">
-        {consultant.detailedBooking.map((detailedBooking, index) => (
-          <div key={index}>
-            {detailedBooking.hours.find(
-              (hour) => hour.week % 100 == bookedHoursPerWeek.weekNumber,
-            )?.hours != 0 && (
+      <div className="rounded-lg bg-white flex flex-col gap-3 min-w-[222px] p-3 shadow-xl">
+        {nonZeroHoursDetailedBookings.map((detailedBooking, index) => (
+          <div
+            key={index}
+            className={`flex flex-row gap-2 justify-between items-center 
+            ${
+              index < nonZeroHoursDetailedBookings.length - 1 &&
+              "pb-3 border-b border-black/10"
+            }`}
+          >
+            <div className="flex flex-row gap-2 items-center">
               <div
-                key={index}
-                className={`flex flex-row gap-2 justify-between items-center
-                ${
-                  index <
-                    consultant.detailedBooking.filter(
-                      (db) =>
-                        db.hours.find(
-                          (hour) =>
-                            hour.week % 100 == bookedHoursPerWeek.weekNumber,
-                        )?.hours != 0,
-                    ).length -
-                      1 && "border-b pb-2 border-black/10"
-                }`}
+                className={`h-8 w-8 flex justify-center align-middle items-center rounded ${getColorByStaffingType(
+                  detailedBooking.bookingDetails.type,
+                )}`}
               >
-                <div className="flex flex-row gap-2 items-center">
-                  <div
-                    className={`h-8 w-8 flex justify-center align-middle items-center rounded ${getColorByStaffingType(
-                      detailedBooking.bookingDetails.type,
-                    )}`}
-                  >
-                    {getIconByBookingType(detailedBooking.bookingDetails.type)}
-                  </div>
-                  <p className="text-black whitespace-nowrap">
-                    {detailedBooking.bookingDetails.name}
-                  </p>
-                </div>
-                <p className="text-black text-opacity-60">
-                  {
-                    detailedBooking.hours.find(
-                      (hour) =>
-                        hour.week % 100 == bookedHoursPerWeek.weekNumber,
-                    )?.hours
-                  }
-                </p>
+                {getIconByBookingType(detailedBooking.bookingDetails.type)}
               </div>
-            )}
+              <p className="text-black whitespace-nowrap">
+                {detailedBooking.bookingDetails.name}
+              </p>
+            </div>
+            <p className="text-black text-opacity-60">
+              {
+                detailedBooking.hours.find(
+                  (hour) => hour.week % 100 == bookedHoursPerWeek.weekNumber,
+                )?.hours
+              }
+            </p>
           </div>
         ))}
       </div>

From 3045531eaabf6bdd41c4aa8c976eefab9d6f678f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 13:28:33 +0100
Subject: [PATCH 07/14] Fix correct arrow size on detailed booking hover

---
 frontend/src/components/ConsultantRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index e0640a5f..4f846b62 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -322,7 +322,7 @@ function HoveredWeek(props: {
           </div>
         ))}
       </div>
-      <div className="w-0 h-0 border-l-[12px] border-l-transparent border-t-[16px] border-t-white border-r-[12px] border-r-transparent"></div>
+      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-t-[8px] border-t-white border-r-[8px] border-r-transparent"></div>
     </div>
   );
 }

From a3a5ab80be8d63e016d635dcf6e9bcb03305ba4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 14:45:45 +0100
Subject: [PATCH 08/14] Fix display of detailed hover on last table column

---
 frontend/src/components/ConsultantRow.tsx | 36 ++++++++++-------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 4f846b62..7988abed 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -198,8 +198,8 @@ function WeekCell(props: {
           hoveredRowWeek == bookedHoursPerWeek.weekNumber && (
             <HoveredWeek
               hoveredRowWeek={hoveredRowWeek}
-              bookedHoursPerWeek={bookedHoursPerWeek}
               consultant={consultant}
+              isLastCol={isLastCol}
             />
           )}
         <div className="flex flex-row justify-end gap-1">
@@ -267,34 +267,26 @@ function isWeekBookingZeroHours(
 
 function HoveredWeek(props: {
   hoveredRowWeek: number;
-  bookedHoursPerWeek: BookedHoursPerWeek;
   consultant: Consultant;
+  isLastCol: boolean;
 }) {
-  const { hoveredRowWeek, bookedHoursPerWeek, consultant } = props;
+  const { hoveredRowWeek, consultant, isLastCol } = props;
 
   const nonZeroHoursDetailedBookings = consultant.detailedBooking.filter(
     (d) => !isWeekBookingZeroHours(d, hoveredRowWeek),
   );
 
   return (
-    <div
-      className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center z-20 pointer-events-none ${
-        (hoveredRowWeek != bookedHoursPerWeek.weekNumber ||
-          consultant.detailedBooking
-            .map((d) =>
-              d.hours
-                .filter((h) => h.week % 100 == bookedHoursPerWeek.weekNumber)
-                .reduce((sum, h) => sum + h.hours, 0),
-            )
-            .reduce((a, b) => a + b, 0) == 0) &&
-        "hidden"
-      }`}
-    >
-      <div className="rounded-lg bg-white flex flex-col gap-3 min-w-[222px] p-3 shadow-xl">
+    <>
+      <div
+        className={`rounded-lg bg-white gap-3 min-w-[222px] p-3 shadow-xl absolute bottom-full mb-2 flex flex-col z-20 ${
+          isLastCol ? "right-0 " : "left-1/2 -translate-x-1/2"
+        } ${nonZeroHoursDetailedBookings.length == 0 && "hidden"}`}
+      >
         {nonZeroHoursDetailedBookings.map((detailedBooking, index) => (
           <div
             key={index}
-            className={`flex flex-row gap-2 justify-between items-center 
+            className={`flex flex-row gap-2 justify-between items-center
             ${
               index < nonZeroHoursDetailedBookings.length - 1 &&
               "pb-3 border-b border-black/10"
@@ -315,15 +307,17 @@ function HoveredWeek(props: {
             <p className="text-black text-opacity-60">
               {
                 detailedBooking.hours.find(
-                  (hour) => hour.week % 100 == bookedHoursPerWeek.weekNumber,
+                  (hour) => hour.week % 100 == hoveredRowWeek,
                 )?.hours
               }
             </p>
           </div>
         ))}
       </div>
-      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-t-[8px] border-t-white border-r-[8px] border-r-transparent"></div>
-    </div>
+      <div
+        className={`absolute bottom-full left-1/2 -translate-x-1/2 flex items-center z-50 w-0 h-0 border-l-2 border-l-transparent border-t-2 border-t-white border-r-2 border-r-transparent`}
+      ></div>
+    </>
   );
 }
 

From 4841a59a6cf20840913e24a99fd82dbaff4f4a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 14:50:24 +0100
Subject: [PATCH 09/14] Fix triangle sizing bug of detailed booking hover

---
 frontend/src/components/ConsultantRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 7988abed..86c9fc43 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -315,7 +315,7 @@ function HoveredWeek(props: {
         ))}
       </div>
       <div
-        className={`absolute bottom-full left-1/2 -translate-x-1/2 flex items-center z-50 w-0 h-0 border-l-2 border-l-transparent border-t-2 border-t-white border-r-2 border-r-transparent`}
+        className={`absolute bottom-full left-1/2 -translate-x-1/2 flex items-center z-50 w-0 h-0 border-l-[8px] border-l-transparent border-t-[8px] border-t-white border-r-[8px] border-r-transparent`}
       ></div>
     </>
   );

From aebffc1cf8fd7434c3a2852e94e71573bdaa50e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 15:16:57 +0100
Subject: [PATCH 10/14] Implement correct design for detailed booking dropdown

---
 frontend/src/components/ConsultantRow.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 86c9fc43..d4317a5c 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -91,7 +91,6 @@ export default function ConsultantRows({
             key={index}
             consultant={consultant}
             detailedBooking={db}
-            isListElementVisible={isListElementVisible}
           />
         ))}
       {isListElementVisible && (
@@ -184,7 +183,7 @@ function WeekCell(props: {
       className={`h-[52px] ${isLastCol ? "py-0.5 pl-0.5" : "p-0.5"}`}
     >
       <div
-        className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative ${
+        className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative border border-transparent hover:border-primary/50 ${
           bookedHoursPerWeek.bookingModel.totalOverbooking > 0
             ? `bg-black text-white`
             : bookedHoursPerWeek.bookingModel.totalSellableTime > 0
@@ -324,18 +323,15 @@ function HoveredWeek(props: {
 function DetailedBookingRows(props: {
   consultant: Consultant;
   detailedBooking: DetailedBooking;
-  isListElementVisible: true;
 }) {
-  const { consultant, detailedBooking, isListElementVisible } = props;
+  const { consultant, detailedBooking } = props;
   return (
     <tr
       key={`${consultant.id}-details-${detailedBooking.bookingDetails.name}`}
       className="h-fit"
     >
-      <td
-        className={`${isListElementVisible && "border-l-secondary border-l-2"}`}
-      ></td>
-      <td className="flex flex-row gap-2 justify-start h-8">
+      <td className="border-l-secondary border-l-2"></td>
+      <td className="flex flex-row gap-2 justify-start p-0.5">
         <div
           className={`h-8 w-8 flex justify-center align-middle items-center rounded ${getColorByStaffingType(
             detailedBooking.bookingDetails.type,
@@ -360,10 +356,10 @@ function DetailedBookingRows(props: {
             className="h-8 p-0.5"
           >
             <p
-              className={`text-right small-medium px-2 py-1 rounded h-full
+              className={`small-medium p-2 rounded h-full flex items-center justify-end
      ${getColorByStaffingType(
        detailedBooking.bookingDetails.type ?? BookingType.Offer,
-     )}`}
+     )} ${hours.hours == 0 && "bg-opacity-30"}`}
             >
               {hours.hours}
             </p>

From f05b4154c4e868875a26f6b38e507eb6552432b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 15:31:05 +0100
Subject: [PATCH 11/14] Implement correct design for "Legg til bemanning"
 button

---
 frontend/src/components/ConsultantRow.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index d4317a5c..99658522 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -13,6 +13,7 @@ import {
   Coffee,
   FileText,
   Moon,
+  Plus,
   Sun,
 } from "react-feather";
 import InfoPill, { InfoPillVariant } from "./InfoPill";
@@ -97,12 +98,12 @@ export default function ConsultantRows({
         <tr>
           <td className={`${"border-l-secondary border-l-2"}`}></td>
           <td>
-            <button
-              disabled
-              className="xsmall text-black/75 text-sm font-semibold leading-none"
-            >
-              + Legg til bemanning
-            </button>
+            <div className="flex flex-row items-center gap-2">
+              <button className="w-8 h-8 flex justify-center items-center rounded bg-primary/0 hover:bg-primary/10">
+                <Plus size={16} className="text-primary" />
+              </button>
+              <p className="small text-primary">Legg til bemanning</p>
+            </div>
           </td>
         </tr>
       )}

From 07ca3c5247cc33b8047925330eba66dfe54d4602 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 15:38:40 +0100
Subject: [PATCH 12/14] Open detailed booking dropdown on cell click

---
 frontend/src/components/ConsultantRow.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 99658522..26b42969 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -77,6 +77,7 @@ export default function ConsultantRows({
             key={index}
             bookedHoursPerWeek={b}
             isListElementVisible={isListElementVisible}
+            setIsListElementVisible={setIsListElementVisible}
             consultant={consultant}
             setHoveredRowWeek={setHoveredRowWeek}
             hoveredRowWeek={hoveredRowWeek}
@@ -144,6 +145,7 @@ function getIconByBookingType(type: BookingType): ReactElement {
 function WeekCell(props: {
   bookedHoursPerWeek: BookedHoursPerWeek;
   isListElementVisible: boolean;
+  setIsListElementVisible: Function;
   consultant: Consultant;
   setHoveredRowWeek: (number: number) => void;
   hoveredRowWeek: number;
@@ -153,6 +155,7 @@ function WeekCell(props: {
   const {
     bookedHoursPerWeek: bookedHoursPerWeek,
     isListElementVisible,
+    setIsListElementVisible,
     consultant,
     setHoveredRowWeek,
     hoveredRowWeek,
@@ -184,7 +187,7 @@ function WeekCell(props: {
       className={`h-[52px] ${isLastCol ? "py-0.5 pl-0.5" : "p-0.5"}`}
     >
       <div
-        className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative border border-transparent hover:border-primary/50 ${
+        className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative border border-transparent hover:border-primary/50 hover:cursor-pointer ${
           bookedHoursPerWeek.bookingModel.totalOverbooking > 0
             ? `bg-black text-white`
             : bookedHoursPerWeek.bookingModel.totalSellableTime > 0
@@ -193,6 +196,7 @@ function WeekCell(props: {
         }`}
         onMouseEnter={() => setHoveredRowWeek(bookedHoursPerWeek.weekNumber)}
         onMouseLeave={() => setHoveredRowWeek(-1)}
+        onClick={() => setIsListElementVisible(!isListElementVisible)}
       >
         {hoveredRowWeek != -1 &&
           hoveredRowWeek == bookedHoursPerWeek.weekNumber && (

From ff27e8dbec08e6c205a78d4f237258e1e4a44654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 18:02:17 +0100
Subject: [PATCH 13/14] Add booking type to detailed hover

---
 frontend/src/components/ConsultantRow.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 26b42969..09f797a2 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -304,11 +304,21 @@ function HoveredWeek(props: {
               >
                 {getIconByBookingType(detailedBooking.bookingDetails.type)}
               </div>
-              <p className="text-black whitespace-nowrap">
-                {detailedBooking.bookingDetails.name}
-              </p>
+              <div className="flex flex-col">
+                <p
+                  className={`xsmall text-black/75 ${
+                    detailedBooking.bookingDetails.type == "Vacation" &&
+                    "hidden"
+                  }`}
+                >
+                  {detailedBooking.bookingDetails.type}
+                </p>
+                <p className="small text-black whitespace-nowrap">
+                  {detailedBooking.bookingDetails.name}
+                </p>
+              </div>
             </div>
-            <p className="text-black text-opacity-60">
+            <p className="small text-black/75">
               {
                 detailedBooking.hours.find(
                   (hour) => hour.week % 100 == hoveredRowWeek,

From 8e13f8df32053714f8288ca902f4743c9bfd9f47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathilde=20Hauk=C3=B8=20Haugum?=
 <mathilde_haugum@hotmail.com>
Date: Wed, 15 Nov 2023 18:04:15 +0100
Subject: [PATCH 14/14] Hide bottom array on empty detailed booking

---
 frontend/src/components/ConsultantRow.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 09f797a2..353efe78 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -329,7 +329,9 @@ function HoveredWeek(props: {
         ))}
       </div>
       <div
-        className={`absolute bottom-full left-1/2 -translate-x-1/2 flex items-center z-50 w-0 h-0 border-l-[8px] border-l-transparent border-t-[8px] border-t-white border-r-[8px] border-r-transparent`}
+        className={`absolute bottom-full left-1/2 -translate-x-1/2 flex items-center z-50 w-0 h-0 border-l-[8px] border-l-transparent border-t-[8px] border-t-white border-r-[8px] border-r-transparent ${
+          nonZeroHoursDetailedBookings.length == 0 && "hidden"
+        }`}
       ></div>
     </>
   );