Merge pull request #106 from codersforcauses/improve_user_modal_funct…

…ionality

Improve signup/login modal functionality

client/src/components/main/header/Navbar.tsx

@@ -41,16 +41,14 @@ function Links({ isHiddenWhenLg }: { isHiddenWhenLg: boolean }) {
         </Link>
       ) : (
         <div className="flex flex-col items-center justify-center lg:flex-row lg:gap-5">
-          <button className={`${onHoverStyle}`} onClick={() => setLogIn(true)}>
-            Log in
-          </button>
-          <button className={outlineStyle} onClick={() => setSignUp(true)}>
-            Sign up
-          </button>
+          <LogInModal>
+            <button className={`${onHoverStyle}`}>Log in</button>
+          </LogInModal>
+          <SignUpModal>
+            <button className={outlineStyle}>Sign up</button>
+          </SignUpModal>
         </div>
       )}
-      <SignUpModal isOpen={isSignUpOpen} onClose={() => setSignUp(false)} />
-      <LogInModal isOpen={isLogInOpen} onClose={() => setLogIn(false)} />
     </div>
   );
 }

client/src/components/ui/LogInModal.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -8,18 +8,18 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useAuth } from "@/hooks/useAuth";
 
 const onErrorStyle = "border-2 border-red-500";
 interface Props {
-  isOpen: boolean;
-  onClose: () => void;
+  children: ReactNode;
 }
 
-function LogInModal({ isOpen, onClose }: Props) {
+function LogInModal({ children }: Props) {
   const { login } = useAuth();
   const [useremail, setUseremail] = useState("");
   const [password, setPassword] = useState("");
@@ -39,7 +39,8 @@ function LogInModal({ isOpen, onClose }: Props) {
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent
         className="flex h-full max-h-[460px] w-[95%] max-w-[600px] flex-col items-center rounded-[40px] border-0 bg-accent p-1 shadow-lg file:mx-auto"
         style={{ borderRadius: "32px" }}

client/src/components/ui/SignUpModal.tsx

@@ -1,6 +1,6 @@
 import { set } from "date-fns";
 import Image from "next/image";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -25,11 +25,10 @@ import { useAuth } from "@/hooks/useAuth";
 import { SelectBranch } from "./select-branch";
 
 interface Props {
-  isOpen: boolean;
-  onClose: () => void;
+  children: ReactNode;
 }
 
-function SignUpModal({ isOpen, onClose }: Props) {
+function SignUpModal({ children }: Props) {
   const { register } = useAuth();
 
   const [email, setEmail] = useState("");
@@ -162,8 +161,8 @@ function SignUpModal({ isOpen, onClose }: Props) {
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogTrigger asChild></DialogTrigger>
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
       {/* Outer green container */}
       <DialogContent
         className="mx-auto flex h-full max-h-[725px] w-[95%] max-w-[600px] flex-col border-0 bg-accent p-[8px] shadow-lg"