diff --git a/client/package-lock.json b/client/package-lock.json index 41a7747c..316ab27d 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -29,6 +29,7 @@ "react-input-mask": "^2.0.4", "react-jss": "^10.8.2", "react-loader": "^2.4.7", + "react-modal": "^3.16.1", "react-quill": "^2.0.0", "react-router-dom": "^6.18.0", "react-select": "^5.2.2", @@ -8103,6 +8104,11 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -14515,6 +14521,11 @@ "react": ">=16.8.6" } }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-loader": { "version": "2.4.7", "license": "MIT", @@ -14528,6 +14539,24 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0" } }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-onclickoutside": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", @@ -24425,6 +24454,11 @@ "strip-final-newline": "^2.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -28466,6 +28500,11 @@ "tiny-warning": "^1.0.2" } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-loader": { "version": "2.4.7", "requires": { @@ -28474,6 +28513,17 @@ "spin.js": "2.x" } }, + "react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-onclickoutside": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", diff --git a/client/package.json b/client/package.json index f5af8ec1..bc4c467c 100644 --- a/client/package.json +++ b/client/package.json @@ -50,6 +50,7 @@ "react-input-mask": "^2.0.4", "react-jss": "^10.8.2", "react-loader": "^2.4.7", + "react-modal": "^3.16.1", "react-quill": "^2.0.0", "react-router-dom": "^6.18.0", "react-select": "^5.2.2", diff --git a/client/src/components/Checklist/ChecklistModal.js b/client/src/components/Checklist/ChecklistModal.js index 0517e2db..2e7ea291 100644 --- a/client/src/components/Checklist/ChecklistModal.js +++ b/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 ( - + + + - + ); }; diff --git a/client/src/components/Projects/ProjectContextMenu.js b/client/src/components/Projects/ProjectContextMenu.js index 6cfa5446..c2e7bce9 100644 --- a/client/src/components/Projects/ProjectContextMenu.js +++ b/client/src/components/Projects/ProjectContextMenu.js @@ -10,7 +10,8 @@ import { faCamera, faTrash, faClone, - faFileCsv + faFileCsv, + faPencil } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -31,6 +32,12 @@ const useStyles = createUseStyles({ cursor: "pointer" } }, + listItemDisabled: { + display: "flex", + flexDirection: "row", + padding: "0.5rem", + color: "gray" + }, listItemIcon: { marginRight: "0.3rem" } }); @@ -40,6 +47,7 @@ const ProjectContextMenu = ({ handleCopyModalOpen, handleDeleteModalOpen, handleSnapshotModalOpen, + handleRenameSnapshotModalOpen, handleDownloadCsv, handlePrintPdf, handleHide @@ -55,7 +63,32 @@ const ProjectContextMenu = ({ return (