From 307c2ecbb6d20872bb498127d815b4fe0ebe574e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 25 Jan 2022 01:35:56 -0800
Subject: [PATCH] Clean up modal structure

---
 components/AboutModal/index.module.css | 14 -----
 components/AboutModal/index.scss       | 10 ++++
 components/AboutModal/index.tsx        | 21 ++++----
 components/Fieldset/index.scss         | 51 +++++++++---------
 components/LoginModal/index.scss       | 74 ++++----------------------
 components/LoginModal/index.tsx        | 11 ++--
 components/Modal/index.tsx             |  7 +++
 components/SignupModal/index.tsx       | 10 ++--
 8 files changed, 75 insertions(+), 123 deletions(-)
 delete mode 100644 components/AboutModal/index.module.css
 create mode 100644 components/AboutModal/index.scss

diff --git a/components/AboutModal/index.module.css b/components/AboutModal/index.module.css
deleted file mode 100644
index d9294a3e..00000000
--- a/components/AboutModal/index.module.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/components/AboutModal/index.scss b/components/AboutModal/index.scss
new file mode 100644
index 00000000..2a96b969
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/components/AboutModal/index.tsx b/components/AboutModal/index.tsx
index 62413a0f..6c01e75e 100644
--- a/components/AboutModal/index.tsx
+++ b/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>,
diff --git a/components/Fieldset/index.scss b/components/Fieldset/index.scss
index 25f5a9cd..949a05eb 100644
--- a/components/Fieldset/index.scss
+++ b/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 */
-//   }
\ No newline at end of file
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #a9a9a9 !important;
+    opacity: 1; /* Firefox */
+}
\ No newline at end of file
diff --git a/components/LoginModal/index.scss b/components/LoginModal/index.scss
index a6b541bb..ea98dd58 100644
--- a/components/LoginModal/index.scss
+++ b/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;
-}
diff --git a/components/LoginModal/index.tsx b/components/LoginModal/index.tsx
index 61f88055..e7452db1 100644
--- a/components/LoginModal/index.tsx
+++ b/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 
diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
index aaccd49f..6922afb9 100644
--- a/components/Modal/index.tsx
+++ b/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>
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index a72b7f1f..845c67cc 100644
--- a/components/SignupModal/index.tsx
+++ b/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