Redesign Signup Modal
This commit is contained in:
parent
d656ba7eba
commit
829146f1bd
5 changed files with 126 additions and 121 deletions
|
|
@ -132,5 +132,7 @@
|
|||
|
||||
.text {
|
||||
color: inherit;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,14 +83,7 @@ const HeaderMenu = (props: Props) => {
|
|||
/>
|
||||
) : null}
|
||||
|
||||
<li className="MenuItem" onClick={openSignupModal}>
|
||||
<span>Sign up</span>
|
||||
</li>
|
||||
{signupOpen ? (
|
||||
<SignupModal
|
||||
close={closeSignupModal}
|
||||
/>
|
||||
) : null}
|
||||
<SignupModal />
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,46 @@
|
|||
.SignupForm {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.SignupForm form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.SignupForm #fields {
|
||||
.Signup.Dialog form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
gap: $unit / 2;
|
||||
margin-bottom: $unit;
|
||||
|
||||
#ModalTop {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
#ModalTop h1 {
|
||||
margin: 0;
|
||||
font-size: $font-xlarge;
|
||||
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;
|
||||
.Button {
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
padding: ($unit * 1.5) ($unit * 2);
|
||||
width: 100%;
|
||||
|
||||
#ModalBottom .Button {
|
||||
min-width: 88px;
|
||||
&.btn-disabled {
|
||||
background: $grey-90;
|
||||
color: $grey-70;
|
||||
}
|
||||
|
||||
&:not(.btn-disabled) {
|
||||
background: $grey-90;
|
||||
color: $grey-40;
|
||||
|
||||
&:hover {
|
||||
background: $grey-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terms {
|
||||
color: $grey-40;
|
||||
font-size: $font-small;
|
||||
line-height: 1.2;
|
||||
margin-top: $unit;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
|
||||
&:hover {
|
||||
color: darken($blue, 30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: $grey-90;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import React, { useState } from 'react'
|
|||
import { withCookies, Cookies } from 'react-cookie'
|
||||
import { createPortal } from 'react-dom'
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog'
|
||||
|
||||
import api from '~utils/api'
|
||||
import { accountState } from '~utils/accountState'
|
||||
|
||||
|
|
@ -10,12 +12,10 @@ import Fieldset from '~components/Fieldset'
|
|||
import Modal from '~components/Modal'
|
||||
import Overlay from '~components/Overlay'
|
||||
|
||||
import CrossIcon from '~public/icons/Cross.svg'
|
||||
import './index.scss'
|
||||
|
||||
interface Props {
|
||||
cookies: Cookies
|
||||
close: () => void
|
||||
}
|
||||
interface Props {}
|
||||
|
||||
interface ErrorMap {
|
||||
[index: string]: string
|
||||
|
|
@ -28,6 +28,7 @@ interface ErrorMap {
|
|||
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
|
||||
const SignupModal = (props: Props) => {
|
||||
// Set up error handling
|
||||
const [formValid, setFormValid] = useState(false)
|
||||
const [errors, setErrors] = useState<ErrorMap>({
|
||||
username: '',
|
||||
|
|
@ -36,6 +37,7 @@ const SignupModal = (props: Props) => {
|
|||
passwordConfirmation: ''
|
||||
})
|
||||
|
||||
// Set up form refs
|
||||
const usernameInput = React.createRef<HTMLInputElement>()
|
||||
const emailInput = React.createRef<HTMLInputElement>()
|
||||
const passwordInput = React.createRef<HTMLInputElement>()
|
||||
|
|
@ -153,15 +155,26 @@ const SignupModal = (props: Props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
createPortal(
|
||||
<div>
|
||||
<Modal
|
||||
title="Sign up"
|
||||
styleName="SignupForm"
|
||||
close={ () => {} }
|
||||
>
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<li className="MenuItem">
|
||||
<span>Sign up</span>
|
||||
</li>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="Signup Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
|
||||
<div className="DialogHeader">
|
||||
<Dialog.Title className="DialogTitle">Sign up</Dialog.Title>
|
||||
<Dialog.Close className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<form className="form" onSubmit={process}>
|
||||
<div id="fields">
|
||||
<Fieldset
|
||||
fieldName="username"
|
||||
placeholder="Username"
|
||||
|
|
@ -195,16 +208,17 @@ const SignupModal = (props: Props) => {
|
|||
error={errors.passwordConfirmation}
|
||||
ref={passwordConfirmationInput}
|
||||
/>
|
||||
</div>
|
||||
<div id="ModalBottom">
|
||||
|
||||
<Button disabled={!formValid}>Sign up</Button>
|
||||
</div>
|
||||
|
||||
<Dialog.Description className="terms">
|
||||
By signing up, I agree to the<br /><a href="#">Terms and Conditions</a> and <a href="#">Usage Guidelines</a>.
|
||||
</Dialog.Description>
|
||||
</form>
|
||||
</Modal>
|
||||
<Overlay onClick={props.close} />
|
||||
</div>,
|
||||
document.body
|
||||
)
|
||||
</Dialog.Content>
|
||||
<Dialog.Overlay className="Overlay" />
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -90,16 +90,18 @@ select {
|
|||
}
|
||||
|
||||
.Dialog {
|
||||
$multiplier: 4;
|
||||
|
||||
animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running openModal;
|
||||
background: white;
|
||||
border-radius: $unit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit * 3;
|
||||
gap: $unit * $multiplier;
|
||||
height: auto;
|
||||
min-width: $unit * 48;
|
||||
min-height: $unit * 12;
|
||||
padding: $unit * 3;
|
||||
padding: $unit * $multiplier;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -108,28 +110,43 @@ select {
|
|||
|
||||
.DialogHeader {
|
||||
display: flex;
|
||||
gap: $unit;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
gap: $unit;
|
||||
|
||||
p {
|
||||
color: $grey-40;
|
||||
font-size: $font-small;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.DialogClose {
|
||||
background: transparent;
|
||||
height: 21px;
|
||||
width: 21px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
fill: $grey-00;
|
||||
fill: $error;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $grey-40;
|
||||
float: right;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.DialogTitle {
|
||||
font-size: $font-large;
|
||||
font-size: $font-xlarge;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue