Implement new LoginModal in HeaderMenu

components/Fieldset/index.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const Fieldset = React.forwardRef<HTMLInputElement, Props>(function fieldSet(props, ref) {
     const fieldType = (['password', 'confirm_password'].includes(props.fieldName)) ? 'password' : 'text'
-    
+
     return (
         <fieldset className="Fieldset">
             <input

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

@@ -88,7 +88,7 @@ const SignupModal = (props: Props) => {
         const fieldName = event.target.name
         const value = event.target.value
 
-        if (value.length >= 3) {            
+        if (value.length >= 3) {
             api.check(fieldName, value)
                 .then((response) => {
                     processNameCheck(fieldName, value, response.data.available)
@@ -220,8 +220,6 @@ const SignupModal = (props: Props) => {
                         </Dialog.Close>
                     </div>
 
-                    
-
                     <form className="form" onSubmit={register}>
                         <Fieldset 
                             fieldName="username"