From 925dc21f0db0d82683726e0e9c72178cb39b3417 Mon Sep 17 00:00:00 2001
From: Ross Blair <rosswilsonblair@gmail.com>
Date: Thu, 7 Nov 2024 15:47:42 -0600
Subject: [PATCH 1/3] Show a message on no errors or warnings

---
 web/src/App.tsx      | 22 +++++++++++++++++++++-
 web/src/Collapse.css |  9 ++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 7b613b11..d85ad2ef 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from "react"
 import "./App.css"
 import { directoryOpen } from "https://esm.sh/browser-fs-access@0.35.0"
+import confetti, { create } from 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.module.mjs';
 import { fileListToTree, validate } from "../dist/validator/main.js"
 import type { ValidationResult } from "../../src/types/validation-result.ts"
 import { Collapse } from "./Collapse.tsx"
 import { Summary } from "./Summary.tsx"
+console.log(confetti)
 
 function Files({ issues }) {
   const unique = new Map(issues.map(({ location, issueMessage }) => {
@@ -61,6 +63,7 @@ function App() {
   if (validation) {
     const errorList = []
     const warningList = []
+    let success = ""
     for (const [code, issues] of validation.issues.filter({ severity: 'error' }).groupBy('code')) {
       if (code === 'None') {
         continue
@@ -73,6 +76,20 @@ function App() {
       }
       warningList.push(...Issue({ data: issues }))
     }
+    if (errorList.length === 0 && warningList.length === 0) {
+      success = (
+      <div className="success">
+        <Collapse label="No Issues Detected!">
+          <div>Thanks for Everything. I Have No Complaints Whatsoever.</div>
+        </Collapse>
+      </div>
+      )
+      confetti({
+        particleCount: 500,
+        spread: 180,
+        ticks: 400
+      });
+    }
     validatorOutput = (
       <>
         <button onClick={validateDir}>Reselect Files</button>
@@ -80,6 +97,7 @@ function App() {
           <ul className="issues-list">
             {errorList}
             {warningList}
+            {success}
           </ul>
           <Summary data={validation.summary} />
           <a
@@ -92,7 +110,10 @@ function App() {
         </div>
       </>
     )
+    if (errorList.length === 0) {
+    }
   } else {
+
     validatorOutput = (
       <>
         <h2>
@@ -106,7 +127,6 @@ function App() {
       </>
     )
   }
-
   return (
     <>
       <h1>BIDS Validator</h1>
diff --git a/web/src/Collapse.css b/web/src/Collapse.css
index 53f501e6..1572a147 100644
--- a/web/src/Collapse.css
+++ b/web/src/Collapse.css
@@ -40,6 +40,10 @@ input[type='checkbox'] {
   background: #D55E00;
 }
 
+.success .lbl-toggle {
+  background: #E6E7E7
+}
+
 @media (prefers-color-scheme: light) {
   .lbl-toggle {
     color: #000;
@@ -57,6 +61,9 @@ input[type='checkbox'] {
   .error .lbl-toggle {
     background: #D55E00;
   }
+  .success .lbl-toggle {
+    background: #E5F8E7
+  }
 }
 
 .lbl-toggle::before {
@@ -98,4 +105,4 @@ input[type='checkbox'] {
   border-bottom-right-radius: 7px;
   padding: .5rem 1rem;
   text-align: left;
-}
\ No newline at end of file
+}

From de926963e64565600ba9a2bf570cbf1df9a65bba Mon Sep 17 00:00:00 2001
From: Ross Blair <rosswilsonblair@gmail.com>
Date: Thu, 7 Nov 2024 15:52:29 -0600
Subject: [PATCH 2/3] Remove test console.log

---
 web/src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index d85ad2ef..28fb180d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -6,7 +6,6 @@ import { fileListToTree, validate } from "../dist/validator/main.js"
 import type { ValidationResult } from "../../src/types/validation-result.ts"
 import { Collapse } from "./Collapse.tsx"
 import { Summary } from "./Summary.tsx"
-console.log(confetti)
 
 function Files({ issues }) {
   const unique = new Map(issues.map(({ location, issueMessage }) => {

From 2b960ef2c536ff4a1f735481f4ed2fae7e77e6d4 Mon Sep 17 00:00:00 2001
From: Ross Blair <rosswilsonblair@gmail.com>
Date: Thu, 7 Nov 2024 15:56:25 -0600
Subject: [PATCH 3/3] darken the green

---
 web/src/Collapse.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/Collapse.css b/web/src/Collapse.css
index 1572a147..3ab9aec8 100644
--- a/web/src/Collapse.css
+++ b/web/src/Collapse.css
@@ -41,7 +41,7 @@ input[type='checkbox'] {
 }
 
 .success .lbl-toggle {
-  background: #E6E7E7
+  background: #49E048;
 }
 
 @media (prefers-color-scheme: light) {
@@ -62,7 +62,7 @@ input[type='checkbox'] {
     background: #D55E00;
   }
   .success .lbl-toggle {
-    background: #E5F8E7
+    background: #49E048;
   }
 }