💄 add more visual distinction for reproduction sucess/failure

Author: ctcpip

security/site/main.js

@@ -117,6 +117,7 @@ function changeVersion() {
 
 		// bring this line back after fixing errors
 		cveButtons.forEach(b => b.click());
+		document.querySelectorAll('.cve').forEach(e => e.classList.remove('hide'));
 	};
 
 	const versionParts = version.split('.');
@@ -129,6 +130,7 @@ function changeVersion() {
 		else {
 			error(`failed to load jQuery ${loadVersion}.`);
 		}
+		document.querySelectorAll('.cve').forEach(e => e.classList.add('hide'));
 	};
 
   s.src = `vendor/jquery-${loadVersion}.js`;
@@ -140,6 +142,7 @@ function changeVersion() {
 		cve[1].triggerCount = 0;
 	}
 
+	document.querySelectorAll('.cve__footer').forEach(e => e.classList.remove('cve__footer--error'));
 	document.querySelectorAll('.cve__footer-status').forEach(e => e.textContent= '');
 	document.querySelectorAll('.cve__footer-note').forEach(e => e.textContent= '');
 	errors.innerHTML = '';
@@ -164,6 +167,7 @@ function updateCVE(cve) {
 	let { triggerCount } = cve[1];
 
 	if(triggered){
+		$relevantCVEFooter.addClass('cve__footer--error');
 		triggerCount = Number.isInteger(triggerCount) ? triggerCount += 1 : 1;
 		$footerStatus.text(`CVE triggered ${triggerCount} time${triggerCount > 1 ? 's' : ''}`);
 		cve[1].triggerCount = triggerCount;

security/site/styles.css

@@ -8,7 +8,7 @@
 	--grey: #a6b7c8;
 	--header: #6f70ff;
 	--mono: IBM Plex Mono, Consolas, monospace;
-	--red: #ff6f70;
+	--purp: #884a9c;
 	--text: #ececec;
 }
 
@@ -87,6 +87,7 @@ input[type="checkbox"] {
 	color: var(--bg);
 	font-size: 1.8rem;
 	font-weight: bold;
+	height: 2.7rem;
 	padding: 1rem;
 	text-align: center;
 	&::selection {
@@ -105,10 +106,15 @@ input[type="checkbox"] {
 
 .cve__footer {
 	background-color: var(--blue-med);
+	min-height: 2.7rem;
 	padding: 1rem;
 	text-align: center;
 }
 
+.cve__footer--error {
+	background-color: var(--purp);
+}
+
 .cve__footer-status {
 	display: inline-block;
 	font-size: 1.8rem;
@@ -130,12 +136,15 @@ input[type="checkbox"] {
 }
 
 #errors {
-	background-color: var(--red);
-	color: var(--bg);
+	background-color: var(--purp);
 
 	p {
-		border-bottom: solid .1rem var(--bg);
+		border-bottom: solid .1rem var(--text);
 		margin: 0;
 		padding: 1rem;
 	}
 }
+
+.hide {
+	display: none;
+}