diff --git a/frontend/package.json b/frontend/package.json index b36d4b4..8c267e1 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "html-react-parser": "^1.2.8", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-modal": "^3.14.3", "react-scripts": "4.0.3", "react-tsparticles": "^1.28.0", "react-webworker": "^2.1.0", diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js index 63b8b96..fe45a14 100644 --- a/frontend/src/components/TableRow.js +++ b/frontend/src/components/TableRow.js @@ -1,6 +1,10 @@ +/* eslint-disable react/button-has-type */ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable no-return-assign */ /* eslint-disable no-unused-vars */ import parse from 'html-react-parser'; import { useState, useEffect } from 'react'; +import Modal from 'react-modal'; import { checkNavigatorProperties, checkWebWorker, @@ -9,9 +13,35 @@ import { import { ReactComponent as XCircle } from '../images/xCircle.svg'; import { ReactComponent as CheckCircle } from '../images/checkCircle.svg'; +const customStyles = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + }, +}; + +Modal.setAppElement('#root'); + const TableRow = ({ item }) => { const [workerData, setWorkerData] = useState(''); const [issues, setIssues] = useState(false); + const [modalIsOpen, setIsOpen] = useState(false); + + function openModal() { + if (issues) setIsOpen(true); + } + + function afterOpenModal() { + // references are now sync'd and can be accessed. + } + + function closeModal() { + setIsOpen(false); + } useEffect(() => { if (item.issues.filter(Boolean).length !== 0) { @@ -27,27 +57,40 @@ const TableRow = ({ item }) => { }, [workerData]); return ( - - {item.key} - {item.value} - - {issues ? ( - - ) : ( - // <> - // {item.issues.map((ele, index) => ( - //
- // {ele} - //
- // ))} - //
- // {workerData && <>{`Did not match web worker (${workerData})`}} - //
- // - - )} - - + <> + + {item.key} + {item.value} + + {issues ? ( + <> + + + ) : ( + + )} + + + + + <> + {item.issues.map((ele, index) => ( +
+ {ele} +
+ ))} +
+ {workerData && <>{`Did not match web worker (${workerData})`}} +
+ +
+ ); }; diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index ad76799..b3bb655 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -148,7 +148,7 @@ td { padding: 12px; } -td:first-letter { +td:nth-child(2):first-letter { text-transform: uppercase; } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index eff3e31..3585fcc 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -4714,6 +4714,11 @@ execa@^4.0.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + exit@^0.1.2: version "0.1.2" resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz" @@ -7006,7 +7011,7 @@ loglevel@^1.6.8: resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz" integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw== -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -9049,6 +9054,21 @@ react-is@^17.0.1: resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.14.3: + version "3.14.3" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0" + integrity sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-property@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6" @@ -11015,6 +11035,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack-chokidar2@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"