Merge branch 'develop' of https://github.com/hackforla/tdm-calculator …

…into 1552-remove-filtering-on-context-menu

.github/workflows/tdm-server-tests.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: '14'
+        node-version: 'lts/*'
 
     - name: Change directory
       run: cd server

client/package.json

@@ -89,6 +89,6 @@
     }
   },
   "volta": {
-    "node": "18.18.2"
+    "node": "20.10.0"
   }
 }

client/src/components/Checklist/ChecklistContent.js

@@ -51,6 +51,7 @@ const ChecklistContent = () => {
         Listed below are the documents that you may need when using{" "}
         <a href="/calculation">Create Project.</a>
       </p>
+      <br />
       <div>
         <article className={classes.section}>
           p.1

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": {
@@ -25,6 +29,6 @@
     "lerna": "^7.4.2"
   },
   "volta": {
-    "node": "18.18.2"
+    "node": "20.10.0"
   }
 }