From 829146f1bd127b22799e18b53828dd636ed77dbd Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 14:16:04 -0800 Subject: [PATCH] Redesign Signup Modal --- components/Button/index.scss | 2 + components/HeaderMenu/index.tsx | 9 +-- components/SignupModal/index.scss | 91 +++++++++-------------- components/SignupModal/index.tsx | 116 +++++++++++++++++------------- styles/globals.scss | 29 ++++++-- 5 files changed, 126 insertions(+), 121 deletions(-) diff --git a/components/Button/index.scss b/components/Button/index.scss index e2d7ce8d..616c9cf0 100644 --- a/components/Button/index.scss +++ b/components/Button/index.scss @@ -132,5 +132,7 @@ .text { color: inherit; + display: block; + width: 100%; } } diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx index 00b87ae1..bb4c030b 100644 --- a/components/HeaderMenu/index.tsx +++ b/components/HeaderMenu/index.tsx @@ -83,14 +83,7 @@ const HeaderMenu = (props: Props) => { /> ) : null} -
  • - Sign up -
    • - {signupOpen ? ( - - ) : null} + diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss index 5affc575..d515648a 100644 --- a/components/SignupModal/index.scss +++ b/components/SignupModal/index.scss @@ -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; -} + .Button { + font-size: $font-regular; + padding: ($unit * 1.5) ($unit * 2); + width: 100%; -#ModalTop h1 { - margin: 0; - font-size: $font-xlarge; - text-align: left; - flex-grow: 1; -} + &.btn-disabled { + background: $grey-90; + color: $grey-70; + } -#ModalTop i { - padding: 8px; -} + &:not(.btn-disabled) { + background: $grey-90; + color: $grey-40; -#ModalTop i:hover { - cursor: pointer; -} + &:hover { + background: $grey-80; + } + } + } -#ModalTop i:hover svg { - color: #444; -} + .terms { + color: $grey-40; + font-size: $font-small; + line-height: 1.2; + margin-top: $unit; + text-align: center; -#ModalTop svg { - color: #888; - height: 18px; - width: 18px; - transform: rotate(45deg); -} + a { + color: $blue; -#ModalBottom { - display: flex; - flex-direction: row; - justify-content: flex-end; -} + &:hover { + color: darken($blue, 30); + } + } + } -#ModalBottom a { - color: #666; - font-size: $font-regular; - font-weight: 500; - flex-grow: 1; - display: flex; - align-items: center; -} - -#ModalBottom .Button { - min-width: 88px; + input { + background: $grey-90; + } } diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx index ee6e15b4..79934dd3 100644 --- a/components/SignupModal/index.tsx +++ b/components/SignupModal/index.tsx @@ -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({ username: '', @@ -36,6 +37,7 @@ const SignupModal = (props: Props) => { passwordConfirmation: '' }) + // Set up form refs const usernameInput = React.createRef() const emailInput = React.createRef() const passwordInput = React.createRef() @@ -153,58 +155,70 @@ const SignupModal = (props: Props) => { } return ( - createPortal( -
    - {} } - > + + +
  • + Sign up +
    • +     + + event.preventDefault() }> +
    + Sign up + + + + + +
    + + +
    -
    -
    +
    -
    +
    -
    +
    -
    -
    -
    - -
    +
    + + + + + By signing up, I agree to the
    Terms and Conditions and Usage Guidelines. +     - - -
    , - document.body - ) + + + + ) } diff --git a/styles/globals.scss b/styles/globals.scss index 2a49d5a9..d7f43e04 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -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; }