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

Implement design for Sign up form

Browse source
This commit is contained in:
Justin Edmund 2020-09-18 12:59:59 -07:00
parent f5ed72764c
commit d3d437235f
2 changed files with 93 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/SignupModal/SignupModal.css Normal file
View file

@ -0,0 +1,67 @@
.SignupForm {
padding: 16px;
}
.SignupForm form {
margin: 0;
}
.SignupForm .fieldset {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
}
#ModalTop {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 16px;
margin-right: -8px;
}
#ModalTop h1 {
margin: 0;
font-size: 24px;
text-align: left;
flex-grow: 1;
}
#ModalTop i {
padding: 8px;
}
#ModalTop i:hover {
cursor: pointer;
}
#ModalTop i:hover svg {
color: #444;
}
#ModalTop svg {
color: #888;
height: 18px;
width: 18px;
transform: rotate(45deg);
}
#ModalBottom {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#ModalBottom a {
color: #666;
font-size: 13px;
font-weight: 500;
flex-grow: 1;
display: flex;
align-items: center;
}
#ModalBottom .Button {
min-width: 88px;
}

34
src/components/SignupModal/SignupModal.tsx
View file

@ -4,18 +4,36 @@ import Portal from '~utils/Portal'
import Modal from '~components/Modal/Modal'
import Overlay from '~components/Overlay/Overlay'
const SignupModal = ({ close }) => {
import './SignupModal.css'
import New from '../../../assets/new'
interface Props {
close: () => void
}
const SignupModal = (props: Props) => {
return (
<Portal>
<div>
<Modal>
<input className="Input" name="username" type="text" placeholder="Username" />
<input className="Input" name="email" type="text" placeholder="Email address" />
<input className="Input" name="password" type="password" placeholder="Password" />
<input className="Input" name="confirm_password" type="password" placeholder="Password (again)" />
<button className="Button">Sign up</button>
<Modal styleName="SignupForm">
<div id="ModalTop">
<h1>Sign up</h1>
<i className='close' onClick={props.close}><New /></i>
</div>
<form>
<div className="fieldset">
<input className="Input" name="username" type="text" placeholder="Username" />
<input className="Input" name="email" type="text" placeholder="Email address" />
<input className="Input" name="password" type="password" placeholder="Password" />
<input className="Input" name="confirm_password" type="password" placeholder="Password (again)" />
</div>
<div id="ModalBottom">
<button className="Button">Sign up</button>
</div>
</form>
</Modal>
<Overlay onClick={close} />
<Overlay onClick={props.close} />
</div>
</Portal>
)