Clean up modal structure

components/AboutModal/index.module.css

@@ -1,14 +0,0 @@
-.AboutModal {
-    padding: 24px;
-}
-
-.AboutModal p {
-    color: #333;
-    font-size: 14px;
-    margin: 0;
-    margin-bottom: 16px;
-}
-
-.AboutModal p:last-of-type {
-    margin-bottom: 0;
-}

components/AboutModal/index.scss

@@ -0,0 +1,10 @@
+.AboutModal p {
+    font-size: $font-regular;
+    line-height: 1.24;
+    margin: 0;
+    margin-bottom: $unit * 2;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}

components/AboutModal/index.tsx

@@ -5,25 +5,26 @@ import api from '~utils/api'
 import Modal from '~components/Modal'
 import Overlay from '~components/Overlay'
 
-import './index.module.css'
+import './index.scss'
 
 interface Props {
     close: () => void
 }
 
 const AboutModal = (props: Props) => {
-    const about = (
-        <div>
-            <p>Siero is a tool to save and share parties for Granblue Fantasy.</p>
-            <p>All you need to do to get started is start adding things. Siero will make a URL and you can share your party with the world.</p>
-            <p>If you want to save your parties for safe keeping or to edit them later, you can make a free account.</p>
-        </div>
-    )
     return (
         createPortal(
             <div>
-                <Modal styleName="AboutModal">
-                    {about}
+                <Modal 
+                    title="About"
+                    styleName="AboutModal"
+                    close={ () => {} }
+                >
+                    <div>
+                        <p>Siero is a tool to save and share parties for <a href="https://game.granbluefantasy.jp">Granblue Fantasy.</a></p>
+                        <p>All you need to do to get started is start adding things. Siero will make a URL and you can share your party with the world.</p>
+                        <p>If you want to save your parties for safe keeping or to edit them later, you can make a free account.</p>
+                    </div>
                 </Modal>
                 <Overlay onClick={props.close} />
             </div>,

components/Fieldset/index.scss

@@ -3,30 +3,31 @@
     display: inline-flex;
     flex-direction: column;
     padding: 0;
-    margin: 0 0 8px 0;
+    margin: 0 0 $unit 0;
+
+    .Input {
+        -webkit-font-smoothing: antialiased;
+        border: none;
+    
+        background-color: white;
+        border-radius: 6px;
+        box-sizing: border-box;
+        color: $grey-00;
+        display: block;
+        font-size: $font-regular;
+        padding: 12px 16px;
+        width: 100%;
+    }
+
+    .InputError {
+        color: $error;
+        font-size: $font-small;
+        margin: $unit 0;
+        padding: ($unit / 2) ($unit * 2);
+    }
 }
 
-.Input {
-    -webkit-font-smoothing: antialiased;
-    border: none;
-
-    background-color: white;
-    border-radius: 6px;
-    color: #555;
-    display: block;
-    font-size: 18px;
-    padding: 12px 16px;
-    width: 100%;
-}
-
-.InputError {
-    color: #D13A3A;
-    font-size: 14px;
-    margin: 0 0 4px 0;
-    padding: 4px 16px;
-}
-
-// ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-//     color: #a9a9a9 !important;
-//     opacity: 1; /* Firefox */
-//   }
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #a9a9a9 !important;
+    opacity: 1; /* Firefox */
+}

components/LoginModal/index.scss

@@ -1,66 +1,14 @@
 .LoginForm {
-    padding: 16px;
+    #fields {
+        display: flex;
+        flex-direction: column;
+        gap: $unit;
+    }
+    .fieldset {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        margin-bottom: 8px;
+    }    
 }
 
-.LoginForm form {
-    margin: 0;
-}
-
-.LoginForm .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;
-}
-
-#ModalBottom a {
-    color: #666;
-    font-size: 13px;
-    font-weight: 500;
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-}
-
-#ModalBottom .Button {
-    min-width: 88px;
-}

components/LoginModal/index.tsx

@@ -108,12 +108,11 @@ const LoginModal = (props: Props) => {
     return (
         createPortal(
             <div>
-                <Modal styleName="LoginForm">
-                    <div id="ModalTop">
-                        <h1>Log in</h1>
-                        {/* <i className='close' onClick={props.close}><New /></i> */}
-                        <i className='close' onClick={props.close}></i>
-                    </div>
+                <Modal 
+                    title="Log in"
+                    styleName="LoginForm"
+                    close={ () => {} }
+                >
                     <form className="form" onSubmit={submit}>
                         <div id="fields">
                             <Fieldset 

components/Modal/index.tsx

@@ -2,9 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 
 import './index.scss'
+import PlusIcon from '~public/icons/plus.svg'
 
 interface Props {
     styleName?: string
+    title: string
+    close: () => void
 }
 
 class Modal extends React.Component<Props> {
@@ -12,6 +15,10 @@ class Modal extends React.Component<Props> {
         return (
             <div className="ModalContainer">
                 <div className={classnames("Modal", this.props.styleName)}>
+                    <div id="ModalTop">
+                        <h2>{this.props.title}</h2>
+                        <PlusIcon onClick={this.props.close} />
+                    </div>
                     {this.props.children}
                 </div>
             </div>

components/SignupModal/index.tsx

@@ -160,11 +160,11 @@ class SignupModal extends React.Component<Props, State> {
         return (
             createPortal(
                 <div>
-                    <Modal styleName="SignupForm">
-                        <div id="ModalTop">
-                            <h1>Sign up</h1>
-                            <i className='close' onClick={this.props.close}><New /></i>
-                        </div>
+                    <Modal 
+                        title="Sign up" 
+                        styleName="SignupForm"
+                        close={ () => {} }
+                    >
                         <form className="form" onSubmit={this.process}>
                             <div id="fields">
                                 <Fieldset