fix: login modal to use modal

Real-Dev-Squad · Aug 3, 2024 · 417c353 · 417c353
1 parent 22fe08c
commit 417c353
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 65 deletions.
diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx
@@ -1,57 +1,27 @@
 import Link from 'next/link';
-import React, { useEffect, useRef } from 'react';
-import { IoCloseSharp } from 'react-icons/io5';
+import React from 'react';
 
+import SignInWithGoogleIcon from '@/components/icons/signWithGoogle';
+import Modal from '@/components/Modal';
 import { TINY_API_GOOGLE_LOGIN } from '@/constants/url';
 
-import Button from '../Button';
-import SignInWithGoogleIcon from '../icons/signWithGoogle';
-
 interface LoginModalProps {
     onClose: () => void;
     children?: React.ReactNode;
 }
 
 const LoginModal: React.FC<LoginModalProps> = ({ onClose, children }) => {
-    const modalRef = useRef<HTMLDivElement>(null);
-
-    const handleClickOutside = (event: MouseEvent) => {
-        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-            onClose();
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [onClose]);
-
     return (
-        <dialog
-            className="fixed top-0 left-0 w-full h-full flex justify-center items-center bg-transparent backdrop-blur-sm z-50"
-            data-testid="login-modal"
-        >
-            <div
-                ref={modalRef}
-                className="bg-gray-800 p-8 rounded-md w-[330px] relative flex flex-col justify-center items-center shadow-lg"
+        <Modal onClose={onClose} title="Please log in" width="330px">
+            {children || <h2 className="text-2xl font-bold mb-4 text-black">Please log in</h2>}
+            <Link
+                href={TINY_API_GOOGLE_LOGIN}
+                data-testid="sign-in-with-google-button"
+                className="flex items-center justify-center"
             >
-                <Button className="absolute top-2 right-2 text-white" testId="close-modal" onClick={onClose}>
-                    <IoCloseSharp style={{ fontSize: '1.5em' }} />
-                </Button>
-                <h2 className="text-2xl font-bold mb-4 text-white">Please log in</h2>
-                {children}
-                <Link
-                    href={TINY_API_GOOGLE_LOGIN}
-                    data-testid="sign-in-with-google-button"
-                    className="flex items-center justify-center"
-                >
-                    <SignInWithGoogleIcon />
-                </Link>
-            </div>
-        </dialog>
+                <SignInWithGoogleIcon />
+            </Link>
+        </Modal>
     );
 };
 

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -39,7 +39,7 @@ const Modal: React.FC<ModalProps> = ({ onClose, children, title, width = '330px'
                 <button className="absolute top-2 right-2" data-testid="close-modal" onClick={onClose}>
                     <IoCloseSharp style={{ fontSize: '1.5em' }} />
                 </button>
-                {title && <h2 className="text-2xl font-bold mb-4 text-white">{title}</h2>}
+                {title && <h2 className="text-2xl font-bold mb-4 text-black">{title}</h2>}
                 {children}
             </div>
         </dialog>

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -67,10 +67,9 @@ const Navbar = () => {
                 </div>
             </nav>
             {showLoginModal && (
-                <LoginModal
-                    onClose={() => setShowLoginModal(false)}
-                    children={<p className="text-white text-center mb-4">Sign in to your account</p>}
-                />
+                <LoginModal onClose={() => setShowLoginModal(false)}>
+                    <p className="text-black text-center mb-4">Sign in to your account</p>
+                </LoginModal>
             )}
         </>
     );

diff --git a/src/pages/app/index.tsx b/src/pages/app/index.tsx
@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react';
 
 import InputSection from '@/components/App/InputSection';
 import OutputSection from '@/components/App/OutputSection';
-import SignInWithGoogleIcon from '@/components/icons/signWithGoogle';
 import Layout from '@/components/Layout';
+import LoginModal from '@/components/LoginModal';
 import Modal from '@/components/Modal';
 import Toast from '@/components/Toast';
-import { TINY_API_GOOGLE_LOGIN, TINY_SITE } from '@/constants/url';
+import { TINY_SITE } from '@/constants/url';
 import useAuthenticated from '@/hooks/useAuthenticated';
 import useToast from '@/hooks/useToast';
 import { useShortenUrlMutation } from '@/services/api';
@@ -87,16 +87,9 @@ const App = () => {
                     <Toast key={toast.id} {...toast} />
                 ))}
                 {showLoginModal && (
-                    <Modal onClose={() => setShowLoginModal(false)} title="Please log in">
-                        <p className="text-white text-center mb-4">Log in to generate short links</p>
-                        <a
-                            href={TINY_API_GOOGLE_LOGIN}
-                            data-testid="sign-in-with-google-button"
-                            className="flex items-center justify-center"
-                        >
-                            <SignInWithGoogleIcon />
-                        </a>
-                    </Modal>
+                    <LoginModal onClose={() => setShowLoginModal(false)}>
+                        <p className="text-black text-center mb-4">Log in to generate short links</p>
+                    </LoginModal>
                 )}
                 {showOutputModal && (
                     <Modal

diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
@@ -29,12 +29,9 @@ const Dashboard = () => {
         return (
             <Layout title="Dashboard | URL Shortener">
                 <div className="min-h-[calc(100vh-145px)]">
-                    <LoginModal
-                        onClose={() => void 0}
-                        children={
-                            <p className="text-white text-center mb-4">Login to view your URLs and create new ones</p>
-                        }
-                    />
+                    <LoginModal onClose={() => void 0}>
+                        <p className="text-black text-center mb-4">Login to view your URLs and create new ones</p>
+                    </LoginModal>
                 </div>
             </Layout>
         );