From 58d71a863bf419a5768ac33020c5d27f072516cb Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 1 May 2024 17:15:00 -0400
Subject: [PATCH] small improvement

---
 components/Modal.tsx | 41 ++++++++++++++++++++++++++---------------
 pages/login.tsx      |  9 ++++++---
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index 1620b2c..4691df7 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -6,9 +6,15 @@ type Props = {
   toggleModal: Function;
   children: ReactNode;
   className?: string;
+  dismissible?: boolean;
 };
 
-export default function Modal({ toggleModal, className, children }: Props) {
+export default function Modal({
+  toggleModal,
+  className,
+  children,
+  dismissible = true,
+}: Props) {
   const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
 
   useEffect(() => {
@@ -26,14 +32,17 @@ export default function Modal({ toggleModal, className, children }: Props) {
     return (
       <Drawer.Root
         open={drawerIsOpen}
-        onClose={() => setTimeout(() => toggleModal(), 100)}
+        onClose={() => dismissible && setTimeout(() => toggleModal(), 100)}
+        dismissible={dismissible}
       >
         <Drawer.Portal>
           <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-          <ClickAwayHandler onClickOutside={() => setDrawerIsOpen(false)}>
-            <Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
+          <ClickAwayHandler
+            onClickOutside={() => dismissible && setDrawerIsOpen(false)}
+          >
+            <Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
               <div
-                className="p-4 pb-32 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
+                className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
                 data-testid="mobile-modal-container"
               >
                 <div
@@ -55,7 +64,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         data-testid="modal-outer"
       >
         <ClickAwayHandler
-          onClickOutside={toggleModal}
+          onClickOutside={() => dismissible && toggleModal()}
           className={`w-full mt-auto sm:m-auto sm:w-11/12 sm:max-w-2xl ${
             className || ""
           }`}
@@ -64,15 +73,17 @@ export default function Modal({ toggleModal, className, children }: Props) {
             className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100 overflow-y-auto sm:overflow-y-visible"
             data-testid="modal-container"
           >
-            <div
-              onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-              className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
-            >
-              <i
-                className="bi-x text-neutral text-2xl"
-                data-testid="close-modal-button"
-              ></i>
-            </div>
+            {dismissible && (
+              <div
+                onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
+                className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
+              >
+                <i
+                  className="bi-x text-neutral text-2xl"
+                  data-testid="close-modal-button"
+                ></i>
+              </div>
+            )}
             {children}
           </div>
         </ClickAwayHandler>
diff --git a/pages/login.tsx b/pages/login.tsx
index 13941d1..1824afe 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -69,7 +69,7 @@ export default function Login({
   function displayLoginCredential() {
     if (availableLogins.credentialsEnabled === "true") {
       return (
-        <div data-testid="login-form">
+        <>
           <p className="text-3xl text-black dark:text-white text-center font-extralight">
             Enter your credentials
           </p>
@@ -127,7 +127,7 @@ export default function Login({
           {availableLogins.buttonAuths.length > 0 ? (
             <div className="divider my-1">OR</div>
           ) : undefined}
-        </div>
+        </>
       );
     }
   }
@@ -171,7 +171,10 @@ export default function Login({
   return (
     <CenteredForm text="Sign in to your account">
       <form onSubmit={loginUser}>
-        <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <div
+          className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"
+          data-testid="login-form"
+        >
           {displayLoginCredential()}
           {displayLoginExternalButton()}
           {displayRegistration()}