Implement design for Login form

assets/new.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V7.00006H11C11.5523 7.00006 12 6.55235 12 6.00006C12 5.44778 11.5523 5.00006 11 5.00006H7V1C7 0.447715 6.55228 0 6 0C5.44771 0 5 0.447715 5 1V5.00006H1C0.447715 5.00006 0 5.44778 0 6.00006C0 6.55235 0.447715 7.00006 1 7.00006H5V11Z" />
 </svg>

src/components/Button/Button.css

@@ -16,6 +16,8 @@
 
 .Button .icon {
     color: #c9c9c9;
+    height: 12px;
+    width: 12px;
 }
 
 .Button .text {

src/components/LoginModal/LoginForm.css

@@ -0,0 +1,62 @@
+.LoginForm {
+    padding: 16px;
+}
+
+.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 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;
+}

src/components/LoginModal/LoginModal.tsx

@@ -4,16 +4,35 @@ import Portal from '~utils/Portal'
 import Modal from '~components/Modal/Modal'
 import Overlay from '~components/Overlay/Overlay'
 
-const LoginModal = (close: () => null ) => {
+import './LoginForm.css'
+
+import New from '../../../assets/new'
+
+interface Props {
+    close: () => void
+}
+
+const LoginModal = (props: Props) => {
     return (
         <Portal>
             <div>
-                <Modal>
+                <Modal styleName="LoginForm">
-                    <input className="Input" name="email" type="text" placeholder="Email address" />
+                    <div id="ModalTop">
-                    <input className="Input" name="password" type="password" placeholder="Password" />
+                        <h1>Log in</h1>
-                    <button className="Button">Log in</button>
+                        <i className='close' onClick={props.close}><New /></i>
+                    </div>
+                    <form>
+                        <div className="fieldset">
+                            <input className="Input" name="email" type="text" placeholder="Email address" />
+                            <input className="Input" name="password" type="password" placeholder="Password" />
+                        </div>
+                        <div id="ModalBottom">
+                            <a>Forgot your password?</a>
+                            <button className="Button">Log in</button>
+                        </div>
+                    </form>
                 </Modal>
-                <Overlay onClick={close} />
+                <Overlay onClick={props.close} />
             </div>
         </Portal>
     )

src/components/Modal/Modal.css

@@ -16,7 +16,7 @@
     border-radius: 8px;
     display: flex;
     flex-direction: column;
-    height: 320px;
+
     min-width: 360px;
     max-width: 480px;
     overflow-y: auto;
@@ -34,8 +34,7 @@
     display: block;
     font-size: 18px;
     margin-bottom: 8px;
-    padding: 12px 0;
+    padding: 12px 16px;
-    text-align: center;
 }
 
 .Modal .Button {

src/components/WeaponGridMainhand/WeaponGridMainhand.tsx

@@ -14,7 +14,7 @@ function WeaponGridMainhand(props: WeaponGridProps) {
     const { open, openModal, closeModal } = useModal()
 
     useEffect(() => {
-        console.log('Mainhand weapon prop was updated.')
+        // console.log('Mainhand weapon prop was updated.')
     }, [props.weapon])
     
     let imgSrc

src/components/WeaponGridUnit/WeaponGridUnit.tsx

@@ -27,13 +27,11 @@ function WeaponGridUnit(props: WeaponGridProps) {
 
     const openModalIfEditable = (props.editable) ? openModal : () => {}
 
-    console.log(props.weapon)
     const classes = classnames({
         WeaponGridUnit: true,
         'editable': props.editable,
         'filled': (props.weapon !== undefined)
     })
-    console.log(`Classes: ${classes}`)
 
     const weapon = props.weapon