From f3d2ff9662392c2030b3f563e7e656d97e4cfa33 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 28 Feb 2022 16:40:48 -0800
Subject: [PATCH] Implement new LoginModal in HeaderMenu

---
 components/Fieldset/index.tsx     |  2 +-
 components/HeaderMenu/index.tsx   | 15 +--------------
 components/SignupModal/index.scss |  1 +
 components/SignupModal/index.tsx  |  4 +---
 4 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/components/Fieldset/index.tsx b/components/Fieldset/index.tsx
index b8a98e39..1eb78e55 100644
--- a/components/Fieldset/index.tsx
+++ b/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
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index bb4c030b..7a72a754 100644
--- a/components/HeaderMenu/index.tsx
+++ b/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}>
-                        <span>Log in</span>
-                    </li>
-                    {loginOpen ? (
-                        <LoginModal 
-                            close={closeLoginModal}
-                        />
-                    ) : null}
-
+                    <LoginModal />
                     <SignupModal />
                 </div>
-                
             </ul>
         )
     }
diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss
index d515648a..fad95e51 100644
--- a/components/SignupModal/index.scss
+++ b/components/SignupModal/index.scss
@@ -12,6 +12,7 @@
         &.btn-disabled {
             background: $grey-90;
             color: $grey-70;
+            cursor: not-allowed;
         }
 
         &:not(.btn-disabled) {
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index a069e83d..431a0cc6 100644
--- a/components/SignupModal/index.tsx
+++ b/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"