Fix auth modals

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);
+    gap: $unit;
-    margin-bottom: $unit-3x;
+    padding: 0 $unit-4x;
-    padding: 0 $unit-3x;
   }
 }

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
+          <div className="Fields">
-            className="Bound"
+            <Input
-            name="email"
+              className="Bound"
-            placeholder={t('modals.login.placeholders.email')}
+              name="email"
-            onChange={handleChange}
+              placeholder={t('modals.login.placeholders.email')}
-            error={errors.email}
+              onChange={handleChange}
-            ref={emailInput}
+              error={errors.email}
-          />
+              ref={emailInput}
+            />
 
-          <Input
+            <Input
-            className="Bound"
+              className="Bound"
-            name="password"
+              name="password"
-            placeholder={t('modals.login.placeholders.password')}
+              placeholder={t('modals.login.placeholders.password')}
-            type="password"
+              type="password"
-            onChange={handleChange}
+              onChange={handleChange}
-            error={errors.password}
+              error={errors.password}
-            ref={passwordInput}
+              ref={passwordInput}
-          />
+            />
-
+          </div>
-          <Button
+          <div className="DialogFooter" ref={footerRef}>
-            disabled={!formValid}
+            <div className="Buttons Span">
-            text={t('modals.login.buttons.confirm')}
+              <Button
-          />
+                disabled={!formValid}
+                text={t('modals.login.buttons.confirm')}
+              />
+            </div>
+          </div>
         </form>
       </DialogContent>
     </Dialog>

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-4x;
-    padding: 0 $unit-3x;
 
     .terms {
       color: $grey-50;

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
+          <div className="Fields">
-            className="Bound"
+            <Input
-            name="username"
+              className="Bound"
-            placeholder={t('modals.signup.placeholders.username')}
+              name="username"
-            onChange={handleNameChange}
+              placeholder={t('modals.signup.placeholders.username')}
-            error={errors.username}
+              onChange={handleNameChange}
-            ref={usernameInput}
+              error={errors.username}
-          />
+              ref={usernameInput}
+            />
 
-          <Input
+            <Input
-            className="Bound"
+              className="Bound"
-            name="email"
+              name="email"
-            placeholder={t('modals.signup.placeholders.email')}
+              placeholder={t('modals.signup.placeholders.email')}
-            onChange={handleNameChange}
+              onChange={handleNameChange}
-            error={errors.email}
+              error={errors.email}
-            ref={emailInput}
+              ref={emailInput}
-          />
+            />
 
-          <Input
+            <Input
-            className="Bound"
+              className="Bound"
-            name="password"
+              name="password"
-            placeholder={t('modals.signup.placeholders.password')}
+              placeholder={t('modals.signup.placeholders.password')}
-            type="password"
+              type="password"
-            onChange={handlePasswordChange}
+              onChange={handlePasswordChange}
-            error={errors.password}
+              error={errors.password}
-            ref={passwordInput}
+              ref={passwordInput}
-          />
+            />
 
-          <Input
+            <Input
-            className="Bound"
+              className="Bound"
-            name="confirm_password"
+              name="confirm_password"
-            placeholder={t('modals.signup.placeholders.password_confirm')}
+              placeholder={t('modals.signup.placeholders.password_confirm')}
-            type="password"
+              type="password"
-            onChange={handlePasswordChange}
+              onChange={handlePasswordChange}
-            error={errors.passwordConfirmation}
+              error={errors.passwordConfirmation}
-            ref={passwordConfirmationInput}
+              ref={passwordConfirmationInput}
-          />
+            />
+          </div>
 
-          <Button
+          <div className="DialogFooter" ref={footerRef}>
-            disabled={!formValid}
+            <div className="Buttons Span">
-            text={t('modals.signup.buttons.confirm')}
+              <Button
-          />
+                disabled={!formValid}
+                text={t('modals.signup.buttons.confirm')}
+              />
+            </div>
+          </div>
 
           <p className="terms">
             {/* <Trans i18nKey="modals.signup.agreement">