granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix auth modals

Browse source
This commit is contained in:
Justin Edmund 2023-06-23 19:14:42 -07:00
parent 558a4e74a1
commit 23f35fc35f
4 changed files with 51 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/auth/LoginModal/index.module.scss
View file

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

34
components/auth/LoginModal/index.tsx
View file

@ -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">
<div className="DialogTitle">
<h1>{t('modals.login.title')}</h1>
</div>
<DialogClose className="DialogClose">
<CrossIcon />
</DialogClose>
</div>
<form className="form" onSubmit={login}>
<div className="Fields">
<DialogHeader title={t('modals.login.title')} />
<form onSubmit={login}>
<div className={styles.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}>
<div className="Buttons Span">
<DialogFooter
ref={footerRef}
rightElements={[
<Button
contained={true}
disabled={!formValid}
key="confirm"
text={t('modals.login.buttons.confirm')}
/>
</div>
</div>
/>,
]}
/>
</form>
</DialogContent>
</Dialog>

35
components/auth/SignupModal/index.module.scss
View file

@ -1,27 +1,22 @@
.Signup.DialogContent {
.fields {
display: flex;
flex-direction: column;
gap: $unit;
// min-width: $unit * 52;
padding: 0 $unit-4x;
}
.Fields {
display: flex;
flex-direction: column;
gap: calc($unit / 2);
padding: 0 $unit-4x;
.terms {
color: $grey-50;
font-size: $font-small;
line-height: 1.2;
margin-top: $unit;
text-align: center;
.terms {
color: $grey-50;
font-size: $font-small;
line-height: 1.2;
margin-top: $unit;
text-align: center;
a {
color: $blue;
a {
color: $blue;
&:hover {
color: darken($blue, 30);
}
}
&:hover {
color: darken($blue, 30);
}
}
}

36
components/auth/SignupModal/index.tsx
View file

@ -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">
<div className="DialogTitle">
<h1>{t('modals.signup.title')}</h1>
</div>
<DialogClose className="DialogClose">
<CrossIcon />
</DialogClose>
</div>
<form className="form" onSubmit={register}>
<div className="Fields">
<DialogHeader title={t('modals.signup.title')} />
<form onSubmit={register}>
<div className={styles.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}>
<div className="Buttons Span">
<DialogFooter
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">