From fdbe2e0d9f3587c7b0d249ab8d2af8fd7aad93bb Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Tue, 20 Jun 2023 22:08:16 +0330
Subject: [PATCH] changes + improvements

---
 components/Dropdown.tsx               |  2 +-
 components/Modal/Link/LinkDetails.tsx |  4 +---
 layouts/MainLayout.tsx                | 10 +++++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
index 7da33c4..dffec26 100644
--- a/components/Dropdown.tsx
+++ b/components/Dropdown.tsx
@@ -24,7 +24,7 @@ export default function Dropdown({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-10`}
+      className={`${className} py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
     >
       {items.map((e, i) => {
         const inner = (
diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx
index 558a9d1..2dc3f4c 100644
--- a/components/Modal/Link/LinkDetails.tsx
+++ b/components/Modal/Link/LinkDetails.tsx
@@ -194,11 +194,9 @@ export default function LinkDetails({ link }: Props) {
       </div>
       {link.description && (
         <>
-          <hr className="my-3" />
-          <div className="text-sky-900 max-h-[20rem] rounded-md overflow-y-auto hyphens-auto">
+          <div className="text-gray-500 max-h-[20rem] my-3 rounded-md overflow-y-auto hyphens-auto">
             {link.description}
           </div>
-          <hr className="my-3" />
         </>
       )}
 
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index 6e099d0..9135149 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -1,11 +1,12 @@
 import Navbar from "@/components/Navbar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { useSession } from "next-auth/react";
 import Loader from "../components/Loader";
 import useRedirect from "@/hooks/useRedirect";
 import { useRouter } from "next/router";
 import ModalManagement from "@/components/ModalManagement";
+import useModalStore from "@/store/modals";
 
 interface Props {
   children: ReactNode;
@@ -16,6 +17,13 @@ export default function MainLayout({ children }: Props) {
   const router = useRouter();
   const redirect = useRedirect();
   const routeExists = router.route === "/_error" ? false : true;
+  const { modal } = useModalStore();
+
+  useEffect(() => {
+    modal
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+  }, [modal]);
 
   if (status === "authenticated" && !redirect && routeExists)
     return (