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"