From d91f0563f1d03b1c33ff3d99318b29dff3767705 Mon Sep 17 00:00:00 2001
From: JaneMoroz <moroz.jane@yahoo.com>
Date: Fri, 27 Sep 2024 18:37:47 +0300
Subject: [PATCH] fix: fix dropdown menu styles

---
 src/components/navbar/DropDown.tsx     | 50 +++++++++++++++++---------
 src/components/navbar/DropDownLink.tsx | 19 ----------
 2 files changed, 33 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/navbar/DropDownLink.tsx

diff --git a/src/components/navbar/DropDown.tsx b/src/components/navbar/DropDown.tsx
index 25b464af..f3019e54 100644
--- a/src/components/navbar/DropDown.tsx
+++ b/src/components/navbar/DropDown.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import DropDownLink from "./DropDownLink";
+import Link from "next/link";
 import Button from "@/components/Button";
 import { useAppDispatch, useUser } from "@/store/hooks";
 import { clientSignOut } from "@/store/features/auth/authSlice";
@@ -14,12 +14,18 @@ export default function DropDown({ openState }: { openState?: boolean }) {
   const activeVoyage = allVoyages?.find(
     (item) => item.voyageTeam.voyage.status.name === "Active",
   );
-  const currentVoyage =
-    activeVoyage?.voyageTeam.name ??
-    "Please join a voyage to see your status information.";
+
+  const currentVoyage = activeVoyage?.voyageTeam.name
+    ? `Team - Tier ${activeVoyage.voyageTeam.name
+      .split("-")[1]
+      .split("tier")[1]
+      .toUpperCase()} ${activeVoyage.voyageTeam.name
+      .split("-")[0]
+      .toUpperCase()}`
+    : "Please join a voyage to see your status information.";
   const closed = "hidden";
   const open =
-    "absolute z-[1] w-44 p-4 [&>*]:mt-2 mt-6 shadow bg-base-100 right-0 border border-neutral rounded-2xl";
+    "absolute flex flex-col gap-5 z-[1] w-[250px] p-5 bottom-100 translate-y-[15%] shadow-md bg-base-200 right-0 border border-base-100 rounded-2xl";
 
   async function handleClick() {
     const [res, error] = await serverSignOut();
@@ -35,7 +41,7 @@ export default function DropDown({ openState }: { openState?: boolean }) {
     }
   }
 
-  const handleDropDownClick = (event: React.MouseEvent<HTMLUListElement>) => {
+  const handleDropDownClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
   };
 
@@ -47,15 +53,17 @@ export default function DropDown({ openState }: { openState?: boolean }) {
       >
         <ChevronDownIcon className="w-4 cursor-pointer text-base-300" />
       </label>
-      <ul
+      <div
         tabIndex={0}
         className={openState ? open : closed}
         onClick={handleDropDownClick}
       >
-        <li className="rounded-lg bg-secondary-content p-2 text-xs [&>*]:m-1">
-          <p className="text-xs text-neutral">My Status:</p>
-          {currentVoyage ? (
-            <p className="border border-transparent font-semibold text-base-300">
+        <div className="rounded-lg bg-secondary-content p-2 text-xs [&>*]:m-1">
+          <p className="text-[10px] font-medium text-neutral-focus">
+            My Voyage:
+          </p>
+          {activeVoyage?.voyageTeam.name ? (
+            <p className="border border-transparent text-base font-medium text-base-300">
               {currentVoyage}
             </p>
           ) : (
@@ -63,19 +71,27 @@ export default function DropDown({ openState }: { openState?: boolean }) {
               {currentVoyage}
             </p>
           )}
-        </li>
-        <DropDownLink title="Settings" href="/hello404" />
+        </div>
+        <Link href="/hello404">
+          <Button
+            type="button"
+            variant="link"
+            size="lg"
+            className="m-0 flex w-full justify-start p-2 hover:bg-base-100 hover:text-base-300"
+          >
+            Settings
+          </Button>
+        </Link>
         <Button
-          title="signout"
           type="button"
           onClick={handleClick}
           variant="link"
-          size={"lg"}
-          className="m-0 flex w-full justify-start p-2 hover:bg-neutral-content hover:text-base-300"
+          size="lg"
+          className="m-0 flex w-full justify-start p-2 hover:bg-base-100 hover:text-base-300"
         >
           Sign Out
         </Button>
-      </ul>
+      </div>
     </div>
   );
 }
diff --git a/src/components/navbar/DropDownLink.tsx b/src/components/navbar/DropDownLink.tsx
deleted file mode 100644
index b5ee72c9..00000000
--- a/src/components/navbar/DropDownLink.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Link from "next/link";
-
-interface DropDownLinkProps {
-  title: string;
-  href?: string;
-}
-
-export default function DropDownLink({ title, href = "#" }: DropDownLinkProps) {
-  return (
-    <li>
-      <Link
-        href={href}
-        className="flex w-full items-center justify-start border border-transparent p-2 font-semibold text-base-300 duration-200 hover:rounded-lg hover:bg-neutral-content hover:text-base-300"
-      >
-        {title}
-      </Link>
-    </li>
-  );
-}