Redesign Signup Modal

components/Button/index.scss

@@ -132,5 +132,7 @@
     
     .text {
         color: inherit;
+        display: block;
+        width: 100%;
     }
 }

components/HeaderMenu/index.tsx

@@ -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>

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;
+    }
 }

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<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,58 +155,70 @@ 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"
-                                onBlur={check}
-                                onChange={handleChange}
-                                error={errors.username}
-                                ref={usernameInput}
-                            />
+                        <Fieldset 
+                            fieldName="username"
+                            placeholder="Username"
+                            onBlur={check}
+                            onChange={handleChange}
+                            error={errors.username}
+                            ref={usernameInput}
+                        />
 
-                            <Fieldset 
-                                fieldName="email"
-                                placeholder="Email address"
-                                onBlur={check}
-                                onChange={handleChange}
-                                error={errors.email}
-                                ref={emailInput}
-                            />
+                        <Fieldset 
+                            fieldName="email"
+                            placeholder="Email address"
+                            onBlur={check}
+                            onChange={handleChange}
+                            error={errors.email}
+                            ref={emailInput}
+                        />
 
-                            <Fieldset 
-                                fieldName="password"
-                                placeholder="Password"
-                                onChange={handleChange}
-                                error={errors.password}
-                                ref={passwordInput}
-                            />
+                        <Fieldset 
+                            fieldName="password"
+                            placeholder="Password"
+                            onChange={handleChange}
+                            error={errors.password}
+                            ref={passwordInput}
+                        />
 
-                            <Fieldset 
-                                fieldName="confirm_password"
-                                placeholder="Password (again)"
-                                onChange={handleChange}
-                                error={errors.passwordConfirmation}
-                                ref={passwordConfirmationInput}
-                            />
-                        </div>
-                        <div id="ModalBottom">
-                            <Button disabled={!formValid}>Sign up</Button>
-                        </div>
+                        <Fieldset 
+                            fieldName="confirm_password"
+                            placeholder="Password (again)"
+                            onChange={handleChange}
+                            error={errors.passwordConfirmation}
+                            ref={passwordConfirmationInput}
+                        />
+
+                        <Button disabled={!formValid}>Sign up</Button>
+
+                        <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>
     )
 }
 

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;
     }