From 31ed6cb8a245b6e0e23c8538241c17f235c74393 Mon Sep 17 00:00:00 2001 From: heejung1180 Date: Wed, 6 Dec 2023 23:32:30 -0800 Subject: [PATCH 1/2] re-implement the checklist modal close animation --- .../components/Checklist/ChecklistModal.js | 61 ++++++++-- package-lock.json | 106 +++++++++++++++++- package.json | 1 + 3 files changed, 160 insertions(+), 8 deletions(-) diff --git a/client/src/components/Checklist/ChecklistModal.js b/client/src/components/Checklist/ChecklistModal.js index 0517e2db..2b7ba095 100644 --- a/client/src/components/Checklist/ChecklistModal.js +++ b/client/src/components/Checklist/ChecklistModal.js @@ -1,19 +1,66 @@ 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 "./ChecklistModal.css"; + +const useStyles = createUseStyles({ + modalActions: { + display: "flex", + justifyContent: "flex-end", + margin: "42px auto" + }, + close: { + display: "flex", + justifyContent: "flex-end", + fontSize: "25px", + cursor: "pointer" + } +}); + +const modalStyleDefaultOverrides = { + overlay: { + backgroundColor: "rgba(15, 41, 64, 0.4)", + display: "flex", + justifyContent: "center", + alignItems: "center", + zIndex: "20" + }, + content: { + position: "static", + top: "50px", + right: "auto", + bottom: "auto", + left: "200px", + boxSizing: "border-box", + maxHeight: "fit-content", + width: "500px", + padding: "25px", + backgroundColor: "#ffffff", + boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.2)" + } +}; + const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => { - if (!checklistModalOpen) return null; + const classes = useStyles(); return ( - + + x + - + ); }; diff --git a/package-lock.json b/package-lock.json index 95d1a1ab..47df7ca2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "eslint": "^8.53.0", "react-csv": "^2.2.2", + "react-modal": "^3.16.1", "wait-on": "^7.1.0" }, "devDependencies": { @@ -3049,6 +3050,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/exponential-backoff": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz", @@ -4229,7 +4235,6 @@ }, "node_modules/js-tokens": { "version": "4.0.0", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -4770,6 +4775,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -5950,6 +5966,14 @@ "node": ">=12" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -6651,6 +6675,21 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/prop-types/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/protocols": { "version": "2.0.1", "dev": true, @@ -6697,17 +6736,65 @@ "node": ">=8" } }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/react-csv": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz", "integrity": "sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==" }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, + "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-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/read": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/read/-/read-2.1.0.tgz", @@ -7252,6 +7339,15 @@ "dev": true, "license": "MIT" }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -8440,6 +8536,14 @@ "form-data": "^4.0.0" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/wcwidth": { "version": "1.0.1", "dev": true, diff --git a/package.json b/package.json index 883269e3..b6c80630 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "eslint": "^8.53.0", "react-csv": "^2.2.2", + "react-modal": "^3.16.1", "wait-on": "^7.1.0" }, "husky": { From d76a1a5691db85bbe5ffd4a3655d3d216ccc97bb Mon Sep 17 00:00:00 2001 From: heejung1180 Date: Mon, 18 Dec 2023 12:08:51 -0800 Subject: [PATCH 2/2] ChecklistModal css adjustment --- .../components/Checklist/ChecklistModal.js | 42 ++++++++++------ package-lock.json | 48 +++++++++++++++++++ package.json | 3 ++ 3 files changed, 78 insertions(+), 15 deletions(-) diff --git a/client/src/components/Checklist/ChecklistModal.js b/client/src/components/Checklist/ChecklistModal.js index 2b7ba095..2e7ea291 100644 --- a/client/src/components/Checklist/ChecklistModal.js +++ b/client/src/components/Checklist/ChecklistModal.js @@ -3,6 +3,8 @@ 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"; @@ -15,31 +17,41 @@ const useStyles = createUseStyles({ close: { display: "flex", justifyContent: "flex-end", - fontSize: "25px", - cursor: "pointer" + border: "0 solid white", + backgroundColor: "transparent", + "&:hover": { + cursor: "pointer" + } } }); const modalStyleDefaultOverrides = { overlay: { - backgroundColor: "rgba(15, 41, 64, 0.4)", + zIndex: "999", + position: "fixed", + width: "100vw", + height: "100vh", display: "flex", + flexDirection: "column", justifyContent: "center", alignItems: "center", - zIndex: "20" + backgroundColor: "rgba(255, 255, 255, 0.7)", + fontSize: "1rem", + fontWeight: "normal" }, content: { - position: "static", - top: "50px", - right: "auto", - bottom: "auto", - left: "200px", + maxWidth: "90vw", + minWidth: "40vw", + padding: "1rem", + position: "relative", + display: "flex", + flexDirection: "column", + alignItems: "stretch", + border: "1px solid #d8dce3", + borderRadius: "0", boxSizing: "border-box", - maxHeight: "fit-content", - width: "500px", - padding: "25px", - backgroundColor: "#ffffff", - boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.2)" + boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.5)", + backgroundColor: "rgba(255, 255, 255, 1)" } }; @@ -57,7 +69,7 @@ const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => { className={classes.modal} > - x + diff --git a/package-lock.json b/package-lock.json index 47df7ca2..580becb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "root", "version": "0.2.48", "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", @@ -190,6 +193,51 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", + "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", + "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", + "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", diff --git a/package.json b/package.json index b6c80630..d31cb05b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "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",