Fix auth modals

components/auth/LoginModal/index.module.scss

@@ -1,11 +1,6 @@
-.Login.DialogContent {
+.fields {
-  gap: $unit;
-  // min-width: $unit * 52;
-
-  .Fields {
   display: flex;
   flex-direction: column;
   gap: $unit;
   padding: 0 $unit-4x;
-  }
 }

components/auth/LoginModal/index.tsx

@@ -10,12 +10,13 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogClose } from '~components/common/Dialog'
+import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import changeLanguage from '~utils/changeLanguage'
 
-import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
+import DialogHeader from '~components/common/DialogHeader'
+import DialogFooter from '~components/common/DialogFooter'
 
 interface ErrorMap {
   [index: string]: string
@@ -221,19 +222,11 @@ const LoginModal = (props: Props) => {
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="DialogHeader">
+        <DialogHeader title={t('modals.login.title')} />
-          <div className="DialogTitle">
+        <form onSubmit={login}>
-            <h1>{t('modals.login.title')}</h1>
+          <div className={styles.fields}>
-          </div>
-          <DialogClose className="DialogClose">
-            <CrossIcon />
-          </DialogClose>
-        </div>
-
-        <form className="form" onSubmit={login}>
-          <div className="Fields">
             <Input
-              className="Bound"
+              bound={true}
               name="email"
               placeholder={t('modals.login.placeholders.email')}
               onChange={handleChange}
@@ -242,6 +235,7 @@ const LoginModal = (props: Props) => {
             />
 
             <Input
+              bound={true}
               className="Bound"
               name="password"
               placeholder={t('modals.login.placeholders.password')}
@@ -251,15 +245,17 @@ const LoginModal = (props: Props) => {
               ref={passwordInput}
             />
           </div>
-          <div className="DialogFooter" ref={footerRef}>
+          <DialogFooter
-            <div className="Buttons Span">
+            ref={footerRef}
+            rightElements={[
               <Button
                 contained={true}
                 disabled={!formValid}
+                key="confirm"
                 text={t('modals.login.buttons.confirm')}
+              />,
+            ]}
           />
-            </div>
-          </div>
         </form>
       </DialogContent>
     </Dialog>

components/auth/SignupModal/index.module.scss

@@ -1,14 +1,11 @@
-.Signup.DialogContent {
+.fields {
-  gap: $unit;
-  // min-width: $unit * 52;
-
-  .Fields {
   display: flex;
   flex-direction: column;
-    gap: calc($unit / 2);
+  gap: $unit;
   padding: 0 $unit-4x;
+}
 
-    .terms {
+.terms {
   color: $grey-50;
   font-size: $font-small;
   line-height: 1.2;
@@ -22,6 +19,4 @@
       color: darken($blue, 30);
     }
   }
-    }
-  }
 }

components/auth/SignupModal/index.tsx

@@ -10,10 +10,11 @@ import { accountState } from '~utils/accountState'
 
 import Button from '~components/common/Button'
 import Input from '~components/common/Input'
-import { Dialog, DialogClose } from '~components/common/Dialog'
+import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
-import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
+import DialogHeader from '~components/common/DialogHeader'
+import DialogFooter from '~components/common/DialogFooter'
 
 interface Props {
   open: boolean
@@ -300,18 +301,11 @@ const SignupModal = (props: Props) => {
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="DialogHeader">
+        <DialogHeader title={t('modals.signup.title')} />
-          <div className="DialogTitle">
+        <form onSubmit={register}>
-            <h1>{t('modals.signup.title')}</h1>
+          <div className={styles.fields}>
-          </div>
-          <DialogClose className="DialogClose">
-            <CrossIcon />
-          </DialogClose>
-        </div>
-
-        <form className="form" onSubmit={register}>
-          <div className="Fields">
             <Input
+              bound={true}
               className="Bound"
               name="username"
               placeholder={t('modals.signup.placeholders.username')}
@@ -321,6 +315,7 @@ const SignupModal = (props: Props) => {
             />
 
             <Input
+              bound={true}
               className="Bound"
               name="email"
               placeholder={t('modals.signup.placeholders.email')}
@@ -330,6 +325,7 @@ const SignupModal = (props: Props) => {
             />
 
             <Input
+              bound={true}
               className="Bound"
               name="password"
               placeholder={t('modals.signup.placeholders.password')}
@@ -340,7 +336,7 @@ const SignupModal = (props: Props) => {
             />
 
             <Input
-              className="Bound"
+              bound={true}
               name="confirm_password"
               placeholder={t('modals.signup.placeholders.password_confirm')}
               type="password"
@@ -350,15 +346,17 @@ const SignupModal = (props: Props) => {
             />
           </div>
 
-          <div className="DialogFooter" ref={footerRef}>
+          <DialogFooter
-            <div className="Buttons Span">
+            ref={footerRef}
+            rightElements={[
               <Button
                 contained={true}
                 disabled={!formValid}
+                key="confirm"
                 text={t('modals.signup.buttons.confirm')}
+              />,
+            ]}
           />
-            </div>
-          </div>
 
           <p className="terms">
             {/* <Trans i18nKey="modals.signup.agreement">