Added issue buttons

frontend/src/components/TableRow.js

@@ -6,6 +6,8 @@ import {
   checkWebWorker,
   checkScreenProperties,
 } from './main';
+import { ReactComponent as XCircle } from '../images/xCircle.svg';
+import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const TableRow = ({ item }) => {
   const [workerData, setWorkerData] = useState('');
@@ -30,18 +32,19 @@ const TableRow = ({ item }) => {
       <td>{item.value}</td>
       <td>
         {issues ? (
-          <>
+          <XCircle className="circleButton" />
-            {item.issues.map((ele, index) => (
-              <div className="newline" key={index}>
-                {ele}
-              </div>
-            ))}
-            <div className="newline">
-              {workerData && <>{`Did not match web worker (${workerData})`}</>}
-            </div>
-          </>
         ) : (
-          'No issues'
+          // <>
+          //   {item.issues.map((ele, index) => (
+          //     <div className="newline" key={index}>
+          //       {ele}
+          //     </div>
+          //   ))}
+          //   <div className="newline">
+          //     {workerData && <>{`Did not match web worker (${workerData})`}</>}
+          //   </div>
+          // </>
+          <CheckCircle className="circleButton" />
         )}
       </td>
     </tr>

frontend/src/images/checkCircle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="#c3e6cb">
+    <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
+  </g>
+</svg>

frontend/src/images/xCircle.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="#721c24">
+    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/>
+  </g>
+</svg>

frontend/src/styles/App.css

@@ -44,7 +44,7 @@
 }
 
 .centerBlockInner {
-  width: 800px;
+  width: 650px;
   margin: 24px 0 0 0;
 }
 
@@ -144,12 +144,8 @@ tbody:not(:last-child) {
   border-bottom: 1px solid var(--border);
 }
 
-tr:hover {
-  color: var(--main);
-}
-
 td {
-  vertical-align: top;
+  /* vertical-align: top; */
   padding: 12px;
 }
 
@@ -159,6 +155,17 @@ td:first-child {
   word-break: normal;
 }
 
+td:nth-child(3) {
+  width: 40px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.circleButton {
+  display: flex;
+  width: 20px;
+}
+
 p {
   margin: 12px 0 0 0;
 }