From da1bca2c05a92e7b090b0e0f0a766d638227fdd4 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 21 Jan 2023 08:37:11 -0800
Subject: [PATCH] Fix auth modals

---
 components/LoginModal/index.scss  |  7 ++-
 components/LoginModal/index.tsx   | 53 +++++++++++--------
 components/SignupModal/index.scss |  5 +-
 components/SignupModal/index.tsx  | 87 +++++++++++++++++--------------
 4 files changed, 83 insertions(+), 69 deletions(-)

diff --git a/components/LoginModal/index.scss b/components/LoginModal/index.scss
index c7cfb390..137816e4 100644
--- a/components/LoginModal/index.scss
+++ b/components/LoginModal/index.scss
@@ -2,11 +2,10 @@
   gap: $unit;
   min-width: $unit * 52;
 
-  form {
+  .Fields {
     display: flex;
     flex-direction: column;
-    gap: calc($unit / 2);
-    margin-bottom: $unit-3x;
-    padding: 0 $unit-3x;
+    gap: $unit;
+    padding: 0 $unit-4x;
   }
 }
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index 60252c43..15d485c9 100644
--- a/components/LoginModal/index.tsx
+++ b/components/LoginModal/index.tsx
@@ -9,7 +9,7 @@ import setUserToken from '~utils/setUserToken'
 import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
-import Input from '~components/LabelledInput'
+import Input from '~components/Input'
 import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
 import DialogContent from '~components/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
@@ -43,6 +43,7 @@ const LoginModal = () => {
   // Set up form refs
   const emailInput: React.RefObject<HTMLInputElement> = React.createRef()
   const passwordInput: React.RefObject<HTMLInputElement> = React.createRef()
+  const footerRef: React.RefObject<HTMLDivElement> = React.createRef()
   const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
 
   function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -199,6 +200,7 @@ const LoginModal = () => {
       </DialogTrigger>
       <DialogContent
         className="Login"
+        footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
@@ -212,29 +214,34 @@ const LoginModal = () => {
         </div>
 
         <form className="form" onSubmit={login}>
-          <Input
-            className="Bound"
-            name="email"
-            placeholder={t('modals.login.placeholders.email')}
-            onChange={handleChange}
-            error={errors.email}
-            ref={emailInput}
-          />
+          <div className="Fields">
+            <Input
+              className="Bound"
+              name="email"
+              placeholder={t('modals.login.placeholders.email')}
+              onChange={handleChange}
+              error={errors.email}
+              ref={emailInput}
+            />
 
-          <Input
-            className="Bound"
-            name="password"
-            placeholder={t('modals.login.placeholders.password')}
-            type="password"
-            onChange={handleChange}
-            error={errors.password}
-            ref={passwordInput}
-          />
-
-          <Button
-            disabled={!formValid}
-            text={t('modals.login.buttons.confirm')}
-          />
+            <Input
+              className="Bound"
+              name="password"
+              placeholder={t('modals.login.placeholders.password')}
+              type="password"
+              onChange={handleChange}
+              error={errors.password}
+              ref={passwordInput}
+            />
+          </div>
+          <div className="DialogFooter" ref={footerRef}>
+            <div className="Buttons Span">
+              <Button
+                disabled={!formValid}
+                text={t('modals.login.buttons.confirm')}
+              />
+            </div>
+          </div>
         </form>
       </DialogContent>
     </Dialog>
diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss
index 595141b9..5bf08462 100644
--- a/components/SignupModal/index.scss
+++ b/components/SignupModal/index.scss
@@ -2,12 +2,11 @@
   gap: $unit;
   min-width: $unit * 52;
 
-  form {
+  .Fields {
     display: flex;
     flex-direction: column;
     gap: calc($unit / 2);
-    margin-bottom: $unit-2x;
-    padding: 0 $unit-3x;
+    padding: 0 $unit-4x;
 
     .terms {
       color: $grey-50;
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index 3c745913..88c96372 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -9,7 +9,7 @@ import setUserToken from '~utils/setUserToken'
 import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
-import Input from '~components/LabelledInput'
+import Input from '~components/Input'
 import { Dialog, DialogTrigger, DialogClose } from '~components/Dialog'
 import DialogContent from '~components/DialogContent'
 import CrossIcon from '~public/icons/Cross.svg'
@@ -49,6 +49,8 @@ const SignupModal = (props: Props) => {
   const emailInput = React.createRef<HTMLInputElement>()
   const passwordInput = React.createRef<HTMLInputElement>()
   const passwordConfirmationInput = React.createRef<HTMLInputElement>()
+  const footerRef = React.createRef<HTMLDivElement>()
+
   const form = [
     usernameInput,
     emailInput,
@@ -279,6 +281,7 @@ const SignupModal = (props: Props) => {
       </DialogTrigger>
       <DialogContent
         className="Signup"
+        footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
@@ -292,48 +295,54 @@ const SignupModal = (props: Props) => {
         </div>
 
         <form className="form" onSubmit={register}>
-          <Input
-            className="Bound"
-            name="username"
-            placeholder={t('modals.signup.placeholders.username')}
-            onChange={handleNameChange}
-            error={errors.username}
-            ref={usernameInput}
-          />
+          <div className="Fields">
+            <Input
+              className="Bound"
+              name="username"
+              placeholder={t('modals.signup.placeholders.username')}
+              onChange={handleNameChange}
+              error={errors.username}
+              ref={usernameInput}
+            />
 
-          <Input
-            className="Bound"
-            name="email"
-            placeholder={t('modals.signup.placeholders.email')}
-            onChange={handleNameChange}
-            error={errors.email}
-            ref={emailInput}
-          />
+            <Input
+              className="Bound"
+              name="email"
+              placeholder={t('modals.signup.placeholders.email')}
+              onChange={handleNameChange}
+              error={errors.email}
+              ref={emailInput}
+            />
 
-          <Input
-            className="Bound"
-            name="password"
-            placeholder={t('modals.signup.placeholders.password')}
-            type="password"
-            onChange={handlePasswordChange}
-            error={errors.password}
-            ref={passwordInput}
-          />
+            <Input
+              className="Bound"
+              name="password"
+              placeholder={t('modals.signup.placeholders.password')}
+              type="password"
+              onChange={handlePasswordChange}
+              error={errors.password}
+              ref={passwordInput}
+            />
 
-          <Input
-            className="Bound"
-            name="confirm_password"
-            placeholder={t('modals.signup.placeholders.password_confirm')}
-            type="password"
-            onChange={handlePasswordChange}
-            error={errors.passwordConfirmation}
-            ref={passwordConfirmationInput}
-          />
+            <Input
+              className="Bound"
+              name="confirm_password"
+              placeholder={t('modals.signup.placeholders.password_confirm')}
+              type="password"
+              onChange={handlePasswordChange}
+              error={errors.passwordConfirmation}
+              ref={passwordConfirmationInput}
+            />
+          </div>
 
-          <Button
-            disabled={!formValid}
-            text={t('modals.signup.buttons.confirm')}
-          />
+          <div className="DialogFooter" ref={footerRef}>
+            <div className="Buttons Span">
+              <Button
+                disabled={!formValid}
+                text={t('modals.signup.buttons.confirm')}
+              />
+            </div>
+          </div>
 
           <p className="terms">
             {/* <Trans i18nKey="modals.signup.agreement">