Implement new LoginModal in HeaderMenu

components/HeaderMenu/index.tsx

@@ -19,10 +19,6 @@ interface Props {
 }
 
 const HeaderMenu = (props: Props) => {
-    const { open: signupOpen, openModal: openSignupModal, closeModal: closeSignupModal } = useSignupModal()
-    const { open: loginOpen, openModal: openLoginModal, closeModal: closeLoginModal } = useLoginModal()
-    const { open: aboutOpen, openModal: openAboutModal, closeModal: closeAboutModal } = useAboutModal()
-
     function authItems() {
         return (
             <nav>
@@ -74,18 +70,9 @@ const HeaderMenu = (props: Props) => {
                         </li>
                     </div>
                 <div className="MenuGroup">
-                    <li className="MenuItem" onClick={openLoginModal}>
+                    <LoginModal />
-                        <span>Log in</span>
-                    </li>
-                    {loginOpen ? (
-                        <LoginModal 
-                            close={closeLoginModal}
-                        />
-                    ) : null}
-
                     <SignupModal />
                 </div>
-                
             </ul>
         )
     }

components/SignupModal/index.scss

@@ -12,6 +12,7 @@
         &.btn-disabled {
             background: $grey-90;
             color: $grey-70;
+            cursor: not-allowed;
         }
 
         &:not(.btn-disabled) {

components/SignupModal/index.tsx

@@ -220,8 +220,6 @@ const SignupModal = (props: Props) => {
                         </Dialog.Close>
                     </div>
 
-                    
-
                     <form className="form" onSubmit={register}>
                         <Fieldset 
                             fieldName="username"