Change toggle to checkbox with checkmark

Author: iYassr

docs/app/index.html

@@ -325,49 +325,39 @@
       border-radius: 3px;
     }
 
-    /* Toggle */
-    .toggle {
-      position: relative;
-      width: 40px;
-      height: 22px;
-    }
-
-    .toggle input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    .toggle-slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+    /* Checkbox */
+    .checkbox {
+      width: 20px;
+      height: 20px;
+      appearance: none;
+      -webkit-appearance: none;
       background: var(--bg-light);
-      border-radius: 22px;
-      transition: 0.2s;
+      border: 2px solid var(--border);
+      border-radius: 4px;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.2s;
     }
 
-    .toggle-slider:before {
-      position: absolute;
-      content: "";
-      height: 16px;
-      width: 16px;
-      left: 3px;
-      bottom: 3px;
-      background: white;
-      border-radius: 50%;
-      transition: 0.2s;
+    .checkbox:hover {
+      border-color: var(--accent);
     }
 
-    .toggle input:checked + .toggle-slider {
+    .checkbox:checked {
       background: var(--accent);
+      border-color: var(--accent);
     }
 
-    .toggle input:checked + .toggle-slider:before {
-      transform: translateX(18px);
+    .checkbox:checked::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 1px;
+      width: 6px;
+      height: 11px;
+      border: solid #000;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
     }
 
     /* Export Preview */
@@ -1200,10 +1190,7 @@ <h3>Sanitized</h3>
               </div>
             </td>
             <td>
-              <label class="toggle">
-                <input type="checkbox" ${d.enabled ? 'checked' : ''} data-index="${i}">
-                <span class="toggle-slider"></span>
-              </label>
+              <input type="checkbox" class="checkbox" ${d.enabled ? 'checked' : ''} data-index="${i}">
             </td>
           </tr>
         `;

tests/web-app.spec.ts

@@ -212,14 +212,9 @@ test.describe('Web App - Browser Version', () => {
 
     await page.waitForSelector('#step2:not(.hidden)', { timeout: 10000 })
 
-    // Toggle off the detection by unchecking the checkbox via JS
-    await page.evaluate(() => {
-      const checkbox = document.querySelector('#detectionTable input[type="checkbox"]') as HTMLInputElement
-      if (checkbox) {
-        checkbox.checked = false
-        checkbox.dispatchEvent(new Event('change', { bubbles: true }))
-      }
-    })
+    // Toggle off the detection by clicking the checkbox
+    const checkbox = page.locator('#detectionTable .checkbox').first()
+    await checkbox.click()
 
     // Continue to export
     await page.click('#continueToExport')