Implement design for Sign up form

src/components/SignupModal/SignupModal.css

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

src/components/SignupModal/SignupModal.tsx

@@ -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>
+                <Modal styleName="SignupForm">
-                    <input className="Input" name="username" type="text" placeholder="Username" />
+                    <div id="ModalTop">
-                    <input className="Input" name="email" type="text" placeholder="Email address" />
+                        <h1>Sign up</h1>
-                    <input className="Input" name="password" type="password" placeholder="Password" />
+                        <i className='close' onClick={props.close}><New /></i>
-                    <input className="Input" name="confirm_password" type="password" placeholder="Password (again)" />
+                    </div>
-                    <button className="Button">Sign up</button>
+                    <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>
     )