new modal style and email validation

frontend-react/src/assets/modalStyle.js

@@ -0,0 +1,115 @@
+const modalStyle = {
+  modal: {
+    borderRadius: "6px",
+    backgroundColor: "#010000"
+  },
+  modalHeader: {
+    borderBottom: "none",
+    paddingTop: "24px",
+    paddingRight: "24px",
+    paddingBottom: "0",
+    paddingLeft: "24px",
+    minHeight: "16.43px",
+    color: "white"
+  },
+  modalTitle: {
+    margin: "0",
+    lineHeight: "1.42857143"
+  },
+  modalCloseButton: {
+    color: "white",
+    marginTop: "-12px",
+    WebkitAppearance: "none",
+    padding: "0",
+    cursor: "pointer",
+    background: "0 0",
+    border: "0",
+    fontSize: "inherit",
+    opacity: ".9",
+    textShadow: "none",
+    fontWeight: "700",
+    lineHeight: "1",
+    float: "right"
+  },
+  modalClose: {
+    width: "16px",
+    height: "16px"
+  },
+  modalBody: {
+    paddingTop: "24px",
+    paddingRight: "24px",
+    paddingBottom: "16px",
+    paddingLeft: "24px",
+    position: "relative"
+  },
+  modalFooter: {
+    padding: "15px",
+    textAlign: "right",
+    paddingTop: "0",
+    margin: "0"
+  },
+  modalFooterCenter: {
+    marginLeft: "auto",
+    marginRight: "auto"
+  },
+  whiteText: {
+    color: "white"
+  },
+  inputStyle: {
+    color: "white",
+    "&:after": {
+      borderBottom: "1px solid #e91e63"
+    }
+  },
+  saveButton: {
+    backgroundColor: "#e91e63 !important",
+    color: "white !important"
+  },
+  closeButton: {
+    backgroundColor: "white",
+    color: "#e91e63"
+  },
+  checkBoxStyle: {
+    color: "#e91e63 !important"
+  },
+  tooltip: {
+    padding: "10px 15px",
+    minWidth: "130px",
+    color: "#e91e63",
+    lineHeight: "1.7em",
+    background: "white",
+    border: "none",
+    borderRadius: "3px",
+    boxShadow:
+      "0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)",
+    maxWidth: "200px",
+    textAlign: "center",
+    fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
+    fontSize: "0.875em",
+    fontStyle: "normal",
+    fontWeight: "400",
+    textShadow: "none",
+    textTransform: "none",
+    letterSpacing: "normal",
+    wordBreak: "normal",
+    wordSpacing: "normal",
+    wordWrap: "normal",
+    whiteSpace: "normal",
+    lineBreak: "auto",
+    zIndex: 5000
+  },
+  buttonStyle: {
+    width: "150px",
+    margin: "0 auto",
+    position: "relative",
+    borderRadius: "8px",
+    display: "block",
+    padding: "10px 10px",
+    textAlign: "center",
+    marginBottom: "20px",
+    color: "white",
+    backgroundColor: "#e91e63",
+    border: "1px solid #e91e63"
+  }
+};
+export default modalStyle;

frontend-react/src/components/NotificationModal.js

@@ -1,39 +1,25 @@
 import React from "react";
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Slide from "@material-ui/core/Slide";
+import withStyles from "@material-ui/core/styles/withStyles";
 import { notificationmodalwrapper } from "utils/notificationmodalwrapper";
+import modalStyle from "assets/modalStyle.js";
+import Button from "@material-ui/core/Button";
+import IconButton from "@material-ui/core/IconButton";
+import Close from "@material-ui/icons/Close";
+import Input from "@material-ui/core/Input";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Typography from "@material-ui/core/Typography";
+import Tooltip from "@material-ui/core/Tooltip";
 import axios from "axios";
 
-const modalStyle = function() {
-  let top = 20;
-  let left = 20;
-
-  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
-  };
-};
-
-const buttonStyle = function() {
-  return {
-    width: "100px",
-    margin: "0 auto",
-    position: "relative",
-    borderRadius: "8px",
-    display: "block",
-    padding: "10px 10px",
-    textAlign: "center",
-    marginBottom: "20px",
-    color: "white",
-    backgroundColor: "#e91e63",
-    border: "1px solid #e91e63"
-  };
-};
+function Transition(props) {
+  return <Slide direction="down" {...props} />;
+}
 
 class NotificationModal extends React.Component {
   handleOpen = () => {
@@ -43,8 +29,27 @@ class NotificationModal extends React.Component {
     this.props.onModalClose();
   };
 
+  checkEmail = email =>
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+      email
+    );
+
   handleInput = e => {
     this.props.onUserDataChange({ info: "email", value: e.target.value });
+    this.props.onUserDataChange({
+      info: "validEmail",
+      value: this.checkEmail(e.target.value)
+    });
+  };
+
+  isChecked = optionName => Boolean(this.props.userdata[optionName]);
+
+  optionChange = optionName => {
+    const { userdata } = this.props;
+    this.props.onUserDataChange({
+      info: optionName,
+      value: !userdata[optionName]
+    });
   };
 
   handleSaveMarketAlert = () => {
@@ -62,30 +67,105 @@ class NotificationModal extends React.Component {
   };
 
   render() {
-    const { modal } = this.props;
+    const {
+      modal,
+      classes,
+      userdata: { validEmail }
+    } = this.props;
 
     return (
       <div>
-        <button style={buttonStyle()} onClick={this.handleOpen}>
-          Open Modal
+        <button className={classes.buttonStyle} onClick={this.handleOpen}>
+          Napravi notifikaciju
         </button>
-
-        <div style={modalStyle()} aria-labelledby="modal-label" hidden={!modal}>
-          <div>
-            <input
-              type="email"
-              placeholder="email"
-              onChange={this.handleInput}
+        <Dialog
+          classes={{
+            root: classes.center,
+            paper: classes.modal
+          }}
+          open={modal}
+          TransitionComponent={Transition}
+          keepMounted
+          onClose={() => this.handleClose()}
+          aria-labelledby="classic-modal-slide-title"
+          aria-describedby="classic-modal-slide-description"
+        >
+          <DialogTitle
+            id="classic-modal-slide-title"
+            disableTypography
+            className={classes.modalHeader}
+          >
+            <IconButton
+              className={classes.modalCloseButton}
+              key="close"
+              aria-label="Close"
+              color="inherit"
+              onClick={() => this.handleClose()}
+            >
+              <Close className={classes.modalClose} />
+            </IconButton>
+            <h4 className={classes.modalTitle}>Save Market Alert</h4>
+          </DialogTitle>
+          <DialogContent
+            id="classic-modal-slide-description"
+            className={classes.modalBody}
+          >
+            <FormControlLabel
+              className={classes.whiteText}
+              control={
+                <Checkbox
+                  className={classes.checkBoxStyle}
+                  checked={this.isChecked("emailChecked")}
+                  type={"checkbox"}
+                  value={""}
+                  onChange={() => this.optionChange("emailChecked")}
+                />
+              }
+              label={<Typography style={{ color: "white" }}>Email</Typography>}
             />
-            <button onClick={this.handleSaveMarketAlert}>
-              Save Market Alert
-            </button>
-            <button onClick={this.handleClose}>Close Modal</button>
-          </div>
-        </div>
+
+            {this.isChecked("emailChecked") ? (
+              <Input
+                className={classes.inputStyle}
+                placeholder="Email"
+                inputProps={{
+                  "aria-label": "Min"
+                }}
+                type="email"
+                onChange={this.handleInput}
+              />
+            ) : null}
+          </DialogContent>
+          <DialogActions className={classes.modalFooter}>
+            {validEmail ? (
+              <Button className={classes.saveButton}>Save</Button>
+            ) : (
+              <Tooltip
+                title="Provide a valid email"
+                placement="top"
+                classes={{ tooltip: classes.tooltip }}
+              >
+                <div>
+                  <Button disabled className={classes.saveButton}>
+                    Save
+                  </Button>
+                </div>
+              </Tooltip>
+            )}
+
+            <Button
+              className={classes.closeButton}
+              onClick={() => this.handleClose()}
+            >
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
       </div>
     );
   }
 }
 
-export default notificationmodalwrapper(NotificationModal);
+export default withStyles(modalStyle)(
+  notificationmodalwrapper(NotificationModal)
+);