From ac33d25a1d611ec7114ed9d8e18603ab08b79b29 Mon Sep 17 00:00:00 2001
From: Paoda <musukarekai@gmail.com>
Date: Fri, 8 Feb 2019 20:03:17 -0600
Subject: [PATCH] Prevented inner modal div from closing the whole modal on
 click

---
 src/components/Modal.js                 |  4 +++-
 src/components/Modal/SettingsManager.js | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal.js b/src/components/Modal.js
index 2de49f5..dcecae1 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -35,7 +35,9 @@ export default class Modal extends React.Component {
     return this.state.style.display !== state.style.display
   }
 
-  handleClick() {
+  handleClick(e) {
+    if(e.target.classList[0] !== "modal") return;
+
     this.setState({
       style: { display: "none" }
     });
diff --git a/src/components/Modal/SettingsManager.js b/src/components/Modal/SettingsManager.js
index fa51eb6..786938a 100644
--- a/src/components/Modal/SettingsManager.js
+++ b/src/components/Modal/SettingsManager.js
@@ -4,11 +4,21 @@ import Modal from '../Modal';
 const Settings = window.require("electron-settings");
 
 export default class SettingsManager extends Modal {
-
+    constructor() {
+        super();
+        this.JSX =
+        <div className='settings-window'>
+            <form>
+                <h3>Settings</h3>
+                <label for="table-data">
+                    Delete Table Data: <input type="button" value="Delete" name="delete-table" id="delete-table-btn" />
+                </label>
+            </form>
+        </div>;
+    }
     render() {
-        const JSX = <div className='settings-window'>Hello</div>
         return(
-            <Modal content={JSX} />
+            <Modal content={this.JSX} />
         );
     }
 }
\ No newline at end of file