Merge pull request #1557 from hackforla/1530-reimplement-modal-close-…

…animation

re-implement the checklist modal close animation

client/src/components/Checklist/ChecklistModal.js

@@ -1,19 +1,78 @@
 import React from "react";
-import ModalDialog from "../UI/AriaModal/ModalDialog";
+import { createUseStyles } from "react-jss";
+import Modal from "react-modal";
 import PropTypes from "prop-types";
 import ChecklistContent from "./ChecklistContent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+
+import "./ChecklistModal.css";
+
+const useStyles = createUseStyles({
+  modalActions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    margin: "42px auto"
+  },
+  close: {
+    display: "flex",
+    justifyContent: "flex-end",
+    border: "0 solid white",
+    backgroundColor: "transparent",
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+});
+
+const modalStyleDefaultOverrides = {
+  overlay: {
+    zIndex: "999",
+    position: "fixed",
+    width: "100vw",
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.7)",
+    fontSize: "1rem",
+    fontWeight: "normal"
+  },
+  content: {
+    maxWidth: "90vw",
+    minWidth: "40vw",
+    padding: "1rem",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    border: "1px solid #d8dce3",
+    borderRadius: "0",
+    boxSizing: "border-box",
+    boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.5)",
+    backgroundColor: "rgba(255, 255, 255, 1)"
+  }
+};
 
 const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
-  if (!checklistModalOpen) return null;
+  const classes = useStyles();
 
   return (
-    <ModalDialog
-      title="Checklist"
-      mounted={checklistModalOpen}
-      onClose={toggleChecklistModal}
+    <Modal
+      closeTimeoutMS={1500}
+      isOpen={checklistModalOpen}
+      onRequestClose={toggleChecklistModal}
+      shouldCloseOnOverlayClick={true}
+      contentLabel="Checklist Modal"
+      style={modalStyleDefaultOverrides}
+      className={classes.modal}
     >
+      <span className={classes.close} onClick={toggleChecklistModal}>
+        <FontAwesomeIcon icon={faX} />
+      </span>
       <ChecklistContent />
-    </ModalDialog>
+    </Modal>
   );
 };
 

package.json

@@ -10,8 +10,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "eslint": "^8.53.0",
     "react-csv": "^2.2.2",
+    "react-modal": "^3.16.1",
     "wait-on": "^7.1.0"
   },
   "husky": {