From ce95e555d56c7d85689fb4084c3106fb52ebf7e0 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 20 Mar 2026 21:20:55 -0400
Subject: [PATCH] CSS class migrations: admin views and boot overlay fade-out

- Replace style.display with .is-hidden classList in ApiKeysView, CustomFieldsView, RecurringTicketsView
- Convert boot overlay fade-out from style.opacity to .boot-overlay--fade-out CSS class
- Add .boot-overlay--fade-out rule to dashboard.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/dashboard.css             | 1 +
 views/DashboardView.php              | 2 +-
 views/admin/ApiKeysView.php          | 4 ++--
 views/admin/CustomFieldsView.php     | 4 ++--
 views/admin/RecurringTicketsView.php | 8 ++++----
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
index 0a6cfed..a947949 100644
--- a/assets/css/dashboard.css
+++ b/assets/css/dashboard.css
@@ -2725,6 +2725,7 @@ input[type="checkbox"]:checked {
     justify-content: center;
     transition: opacity 0.5s;
 }
+.boot-overlay--fade-out { opacity: 0; }
 
 #boot-text {
     font-family: var(--font-mono);
diff --git a/views/DashboardView.php b/views/DashboardView.php
index 41c5727..fd42bbe 100644
--- a/views/DashboardView.php
+++ b/views/DashboardView.php
@@ -63,7 +63,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                         i++;
                     } else {
                         setTimeout(() => {
-                            bootOverlay.style.opacity = '0';
+                            bootOverlay.classList.add('boot-overlay--fade-out');
                             setTimeout(() => bootOverlay.remove(), 500);
                         }, 500);
                         clearInterval(interval);
diff --git a/views/admin/ApiKeysView.php b/views/admin/ApiKeysView.php
index 0e3a2e1..7ea4933 100644
--- a/views/admin/ApiKeysView.php
+++ b/views/admin/ApiKeysView.php
@@ -66,7 +66,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             </div>
 
             <!-- New Key Display (hidden by default) -->
-            <div id="newKeyDisplay" class="ascii-frame-inner key-generated-alert" style="display: none;">
+            <div id="newKeyDisplay" class="ascii-frame-inner key-generated-alert is-hidden">
                 <h3 class="admin-section-title">New API Key Generated</h3>
                 <p class="text-danger text-sm mb-1">
                     Copy this key now. You won't be able to see it again!
@@ -195,7 +195,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             if (data.success) {
                 // Show the new key
                 document.getElementById('newKeyValue').value = data.api_key;
-                document.getElementById('newKeyDisplay').style.display = 'block';
+                document.getElementById('newKeyDisplay').classList.remove('is-hidden');
                 document.getElementById('keyName').value = '';
 
                 lt.toast.success('API key generated successfully');
diff --git a/views/admin/CustomFieldsView.php b/views/admin/CustomFieldsView.php
index 1bde973..d063068 100644
--- a/views/admin/CustomFieldsView.php
+++ b/views/admin/CustomFieldsView.php
@@ -123,7 +123,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                             <option value="number">Number</option>
                         </select>
                     </div>
-                    <div class="setting-row" id="options_row" style="display: none;">
+                    <div class="setting-row is-hidden" id="options_row">
                         <label for="field_options">Options (one per line)</label>
                         <textarea id="field_options" name="field_options" rows="4" placeholder="Option 1&#10;Option 2&#10;Option 3"></textarea>
                     </div>
@@ -208,7 +208,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
 
         function toggleOptionsField() {
             const type = document.getElementById('field_type').value;
-            document.getElementById('options_row').style.display = type === 'select' ? 'block' : 'none';
+            document.getElementById('options_row').classList.toggle('is-hidden', type !== 'select');
         }
 
         function saveField(e) {
diff --git a/views/admin/RecurringTicketsView.php b/views/admin/RecurringTicketsView.php
index 3bb7ab1..11906ae 100644
--- a/views/admin/RecurringTicketsView.php
+++ b/views/admin/RecurringTicketsView.php
@@ -135,7 +135,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                             <option value="monthly">Monthly</option>
                         </select>
                     </div>
-                    <div class="setting-row" id="schedule_day_row" style="display: none;">
+                    <div class="setting-row is-hidden" id="schedule_day_row">
                         <label for="schedule_day">Schedule Day</label>
                         <select id="schedule_day" name="schedule_day"></select>
                     </div>
@@ -251,15 +251,15 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             daySelect.innerHTML = '';
 
             if (type === 'daily') {
-                dayRow.style.display = 'none';
+                dayRow.classList.add('is-hidden');
             } else if (type === 'weekly') {
-                dayRow.style.display = 'flex';
+                dayRow.classList.remove('is-hidden');
                 const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                 days.forEach((day, i) => {
                     daySelect.innerHTML += `<option value="${i + 1}">${day}</option>`;
                 });
             } else if (type === 'monthly') {
-                dayRow.style.display = 'flex';
+                dayRow.classList.remove('is-hidden');
                 for (let i = 1; i <= 28; i++) {
                     daySelect.innerHTML += `<option value="${i}">Day ${i}</option>`;
                 }