basic notification modal

frontend-react/src/components/NotificationModal.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
+
+const modalStyle = function() {
+  let top = 50;
+  let left = 50;
+
+  return {
+    position: "absolute",
+    width: 400,
+    zIndex: 1040,
+    top: top + "%",
+    left: left + "%",
+    border: "1px solid #e5e5e5",
+    backgroundColor: "white",
+    boxShadow: "0 5px 15px rgba(0,0,0,.5)",
+    padding: 20
+  };
+};
+
+class NotificationModal extends React.Component {
+  handleOpen = () => {
+    this.props.onModalOpen();
+  };
+  handleClose = () => {
+    this.props.onModalClose();
+  };
+
+  render() {
+    const { modal } = this.props;
+
+    return (
+      <div>
+        <button onClick={this.handleOpen}>Open Modal</button>
+
+        <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
+          <div>
+            <h4 id="modal-label">Text in a modal</h4>
+            <input type="radio" name="send-option" value="Email" />
+            Email
+            <br />
+            <input type="radio" name="send-option" value="SMS" />
+            SMS <br />
+            <button onClick={this.handleClose}>Close Modal</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default notificationmodalwrapper(NotificationModal);