From 2f9af856dc0b7fb5cd6918b7bec5cb6ae29e6d36 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Thu, 19 Mar 2026 22:37:19 -0400 Subject: [PATCH] Fix design system violations: replace off-brand colors with terminal palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - dashboard.css: replace all hardcoded Tailwind hex colors (#2d3748, #1a202c, #e2e8f0, #4a5568, #007cba, #3b82f6 etc.) in dark-mode sections and component styles with terminal CSS variables (--bg-*, --text-*, --border-color, --terminal-green/amber) - dashboard.css: fix card-priority colors white/black → var(--bg-primary) - dashboard.css: fix card-assignee border-radius: 50% → 0 (no circles rule) - dashboard.css: fix mobile bottom-sheet border-radius: 12px → 0 - dashboard.css: fix search-box focus border (#007cba → var(--terminal-green)) - dashboard.css: fix save-filter button blue (#3b82f6) → terminal green - dashboard.css: fix search-results-info blue highlight → terminal green - dashboard.css: fix btn-bulk/btn-secondary dark-mode bootstrap colors → terminal - ticket.css: replace comprehensive dark-mode Tailwind hex block with CSS vars - ticket.css: fix status-select white/black text → var(--bg-primary) - ticket.css: fix status-select.status-resolved hardcoded #28a745 → var(--status-open) - ticket.css: fix timeline dark-mode hardcoded colors → CSS vars - ticket.css: fix .slider:before background white → var(--bg-primary) - ticket.css: fix .btn-danger:hover color white → var(--bg-primary) - ticket.css: fix visibility-groups-list label border-radius: 4px → 0 - ticket.css: add will-change: opacity to age-warning/age-critical animations - views: bump CSS version strings to v=20260319c - views/DashboardView.php: add aria-labels to card view quick action buttons Co-Authored-By: Claude Sonnet 4.6 --- assets/css/dashboard.css | 129 +++++++++++++++++-------------------- assets/css/ticket.css | 86 +++++++++++-------------- views/CreateTicketView.php | 8 +-- views/DashboardView.php | 33 +++++----- views/TicketView.php | 8 +-- 5 files changed, 122 insertions(+), 142 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index e0de4fb..ab8e62a 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -2115,44 +2115,43 @@ input[type="checkbox"]:checked { .search-box:focus { outline: none; - border-color: #007cba; + border-color: var(--terminal-green); } .search-btn { - padding: 10px 20px; - background-color: #007cba; - color: white; - border: none; - border-radius: 0; - cursor: pointer; - font-size: 16px; - transition: background-color 0.3s; + background: transparent; + color: var(--terminal-green); + border: 2px solid var(--terminal-green); + transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .search-btn:hover { - background-color: #005a87; + background: rgba(0, 255, 65, 0.15); + color: var(--terminal-amber); + border-color: var(--terminal-amber); } .clear-search-btn { - padding: 10px 15px; - background-color: #6c757d; - color: white; + padding: 6px 10px; + color: var(--text-muted); text-decoration: none; - border-radius: 0; - font-size: 14px; - transition: background-color 0.3s; + font-family: var(--font-mono); + font-size: 1rem; + transition: color 0.15s ease; + line-height: 1; } .clear-search-btn:hover { - background-color: #545b62; + color: var(--terminal-red); + text-decoration: none; } /* Show search results info */ .search-results-info { margin: 10px 0; padding: 10px; - background-color: #e7f3ff; - border-left: 4px solid #007cba; + background-color: rgba(0, 255, 65, 0.05); + border-left: 4px solid var(--terminal-green); border-radius: 0; } @@ -2210,8 +2209,8 @@ input[type="checkbox"]:checked { margin-top: 10px; width: 100%; padding: 8px; - background: #3b82f6; - color: white; + background: var(--terminal-green); + color: var(--bg-primary); border: none; border-radius: 0; cursor: pointer; @@ -2825,25 +2824,25 @@ th.sort-desc::after { /* Dark mode bulk actions */ body.dark-mode .bulk-actions-toolbar { - --toolbar-bg: #2d3748; - --toolbar-border: #ffc107; - --text-primary: #f8f9fa; - background: #2d3748 !important; + --toolbar-bg: var(--bg-tertiary); + --toolbar-border: var(--terminal-amber); + --text-primary: var(--terminal-green); + background: var(--bg-tertiary) !important; } body.dark-mode .bulk-actions-info { - color: #ffc107; + color: var(--terminal-amber); font-weight: bold; } body.dark-mode .btn-bulk { - --btn-bulk-bg: #0d6efd; - --btn-bulk-hover: #0b5ed7; + --btn-bulk-bg: var(--terminal-green); + --btn-bulk-hover: var(--text-secondary); } body.dark-mode .btn-secondary { - --btn-secondary-bg: #495057; - --btn-secondary-hover: #343a40; + --btn-secondary-bg: var(--bg-tertiary); + --btn-secondary-hover: var(--bg-secondary); } /* Modal styles */ @@ -2901,19 +2900,7 @@ body.dark-mode .btn-secondary { justify-content: flex-end; } -/* Dark mode modal */ -body.dark-mode .modal-content { - --bg-primary: #2d3748; - --bg-secondary: #1a202c; - --text-primary: #f7fafc; - --border-color: #4a5568; -} - -body.dark-mode .modal-body select { - background: #1a202c; - color: #f7fafc; - border-color: #4a5568; -} +/* Dark mode modal — terminal CSS variables already apply; no overrides needed */ /* Checkbox styling in table */ .ticket-checkbox { @@ -2956,60 +2943,60 @@ body.dark-mode .modal-body select { } } -/* Comprehensive Dark Mode Fix - Dashboard */ +/* Comprehensive Dark Mode Fix - Dashboard (terminal palette) */ body.dark-mode { - background: #1a202c !important; - color: #e2e8f0 !important; + background: var(--bg-secondary) !important; + color: var(--text-primary) !important; } body.dark-mode .dashboard-container, body.dark-mode .dashboard-content { - background: #1a202c !important; - color: #e2e8f0 !important; + background: var(--bg-secondary) !important; + color: var(--text-primary) !important; } /* Ensure table has dark background */ body.dark-mode table { - background: #2d3748 !important; + background: var(--bg-tertiary) !important; } body.dark-mode table thead { - background: #1a202c !important; + background: var(--bg-secondary) !important; } body.dark-mode table tbody tr { - background: #2d3748 !important; + background: var(--bg-tertiary) !important; } body.dark-mode table tbody tr:hover { - background: #374151 !important; + background: var(--hover-bg) !important; } body.dark-mode table td, body.dark-mode table th { - color: #e2e8f0 !important; - border-color: #4a5568 !important; + color: var(--text-primary) !important; + border-color: var(--border-color) !important; } /* Fix search box */ body.dark-mode .search-box, body.dark-mode input[type="search"], body.dark-mode input[type="text"] { - background: #2d3748 !important; - color: #e2e8f0 !important; - border-color: #4a5568 !important; + background: var(--bg-tertiary) !important; + color: var(--text-primary) !important; + border-color: var(--border-color) !important; } /* Fix any white backgrounds in modals */ body.dark-mode .modal-content { - background: #2d3748 !important; - color: #e2e8f0 !important; + background: var(--bg-tertiary) !important; + color: var(--text-primary) !important; } /* Fix dropdown menus */ body.dark-mode select option { - background: #2d3748 !important; - color: #e2e8f0 !important; + background: var(--bg-tertiary) !important; + color: var(--text-primary) !important; } /* ===== RESPONSIVE DESIGN - TERMINAL EDITION ===== */ @@ -4954,11 +4941,11 @@ table td:nth-child(4) { font-weight: bold; } -.card-priority.p1 { background: var(--priority-1); color: white; } -.card-priority.p2 { background: var(--priority-2); color: black; } -.card-priority.p3 { background: var(--priority-3); color: white; } -.card-priority.p4 { background: var(--priority-4); color: black; } -.card-priority.p5 { background: var(--priority-5); color: white; } +.card-priority.p1 { background: var(--priority-1); color: var(--bg-primary); } +.card-priority.p2 { background: var(--priority-2); color: var(--bg-primary); } +.card-priority.p3 { background: var(--priority-3); color: var(--bg-primary); } +.card-priority.p4 { background: var(--priority-4); color: var(--bg-primary); } +.card-priority.p5 { background: var(--priority-5); color: var(--bg-primary); } .card-title { color: var(--terminal-green); @@ -4990,7 +4977,7 @@ table td:nth-child(4) { height: 28px; background: var(--terminal-cyan); color: var(--bg-primary); - border-radius: 50%; + border-radius: 0; display: flex; align-items: center; justify-content: center; @@ -5202,7 +5189,7 @@ table td:nth-child(4) { min-height: 44px; font-size: 0.95rem; background: rgba(0, 255, 65, 0.05); - border-radius: 4px; + border-radius: 0; } .dashboard-sidebar .filter-group label:active { @@ -5593,7 +5580,7 @@ table td:nth-child(4) { width: 100% !important; max-width: 100% !important; max-height: 90vh; - border-radius: 12px 12px 0 0; + border-radius: 0; margin: 0; } @@ -5635,7 +5622,7 @@ table td:nth-child(4) { width: 100% !important; max-width: 100% !important; max-height: 85vh; - border-radius: 12px 12px 0 0; + border-radius: 0; } /* ===== ADMIN DROPDOWN ===== */ @@ -5648,7 +5635,7 @@ table td:nth-child(4) { width: 100%; max-height: 60vh; overflow-y: auto; - border-radius: 12px 12px 0 0; + border-radius: 0; z-index: 1002; } diff --git a/assets/css/ticket.css b/assets/css/ticket.css index 7bf1d31..f7a7171 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -347,6 +347,7 @@ textarea[data-field="description"]:not(:disabled)::after { background: rgba(255, 176, 0, 0.1); box-shadow: 0 0 6px rgba(255, 176, 0, 0.4); animation: pulse-warning 2s ease-in-out infinite; + will-change: opacity; } .ticket-age.age-critical { @@ -355,6 +356,7 @@ textarea[data-field="description"]:not(:disabled)::after { background: rgba(255, 77, 77, 0.15); box-shadow: 0 0 8px rgba(255, 77, 77, 0.5); animation: pulse-critical 1s ease-in-out infinite; + will-change: opacity; } @keyframes pulse-warning { @@ -1172,7 +1174,7 @@ textarea.editable { width: 16px; left: 4px; bottom: 4px; - background-color: white; + background-color: var(--bg-primary); transition: transform 0.4s ease; } @@ -1331,24 +1333,24 @@ input:checked + .slider:before { } body.dark-mode .timeline-content { - --card-bg: #2d3748; - --border-color: #444; - --text-muted: #a0aec0; - --text-secondary: #cbd5e0; - background: #2d3748; - color: #f7fafc; + --card-bg: var(--bg-tertiary); + --border-color: var(--border-color); + --text-muted: var(--text-muted); + --text-secondary: var(--text-secondary); + background: var(--bg-tertiary); + color: var(--text-primary); } body.dark-mode .timeline-header strong { - color: #f7fafc; + color: var(--text-primary); } body.dark-mode .timeline-action { - color: #a0aec0; + color: var(--text-muted); } body.dark-mode .timeline-date { - color: #718096; + color: var(--text-secondary); } /* Status select dropdown */ .status-select { @@ -1376,22 +1378,22 @@ body.dark-mode .timeline-date { /* Status colors for dropdown */ .status-select.status-open { background-color: var(--status-open) !important; - color: white !important; + color: var(--bg-primary) !important; } .status-select.status-in-progress { background-color: var(--status-in-progress) !important; - color: #212529 !important; + color: var(--bg-primary) !important; } .status-select.status-closed { background-color: var(--status-closed) !important; - color: white !important; + color: var(--bg-primary) !important; } .status-select.status-resolved { - background-color: #28a745 !important; - color: white !important; + background-color: var(--status-open) !important; + color: var(--bg-primary) !important; } /* Dropdown options inherit colors */ @@ -1402,8 +1404,8 @@ body.dark-mode .timeline-date { } body.dark-mode .status-select option { - background-color: #2d3748; - color: #f7fafc; + background-color: var(--bg-tertiary); + color: var(--text-primary); } /* Dark mode for Activity tab and general improvements */ @@ -1420,48 +1422,38 @@ body.dark-mode #activity-tab p { color: var(--text-primary, #f7fafc); } -/* Comprehensive Dark Mode Fix - Ensure no white on white */ -body.dark-mode { - --bg-primary: #1a202c; - --bg-secondary: #2d3748; - --bg-tertiary: #4a5568; - --text-primary: #e2e8f0; - --text-secondary: #cbd5e0; - --text-muted: #a0aec0; - --border-color: #4a5568; - --card-bg: #2d3748; -} +/* Comprehensive Dark Mode Fix - terminal CSS variables apply throughout */ /* Ensure ticket container has dark background */ body.dark-mode .ticket-container { - background: #1a202c !important; - color: #e2e8f0 !important; + background: var(--bg-secondary) !important; + color: var(--text-primary) !important; } /* Ensure all ticket details sections are dark */ body.dark-mode .ticket-details { - background: #1a202c !important; - color: #e2e8f0 !important; + background: var(--bg-secondary) !important; + color: var(--text-primary) !important; } /* Ensure detail groups are dark */ body.dark-mode .detail-group { background: transparent !important; - color: #e2e8f0 !important; + color: var(--text-primary) !important; } /* Ensure labels are visible */ body.dark-mode .detail-group label, body.dark-mode label { - color: #cbd5e0 !important; + color: var(--text-secondary) !important; } /* Fix textarea and input fields */ body.dark-mode textarea, body.dark-mode input[type="text"] { - background: #2d3748 !important; - color: #e2e8f0 !important; - border-color: #4a5568 !important; + background: var(--bg-tertiary) !important; + color: var(--text-primary) !important; + border-color: var(--border-color) !important; } /* Ensure timeline event backgrounds are dark */ @@ -1471,30 +1463,30 @@ body.dark-mode .timeline-event { /* Fix any remaining white text issues */ body.dark-mode .timeline-details { - color: #cbd5e0 !important; + color: var(--text-secondary) !important; background: transparent !important; } /* Fix comment sections */ body.dark-mode .comment { - background: #2d3748 !important; - color: #e2e8f0 !important; + background: var(--bg-tertiary) !important; + color: var(--text-primary) !important; } body.dark-mode .comment-text { - color: #e2e8f0 !important; + color: var(--text-primary) !important; } body.dark-mode .comment-header { - color: #cbd5e0 !important; + color: var(--text-secondary) !important; } /* Fix any form elements */ body.dark-mode select, body.dark-mode .editable { - background: #2d3748 !important; - color: #e2e8f0 !important; - border-color: #4a5568 !important; + background: var(--bg-tertiary) !important; + color: var(--text-primary) !important; + border-color: var(--border-color) !important; } /* ===== RESPONSIVE DESIGN - TERMINAL EDITION ===== */ @@ -1759,7 +1751,7 @@ body.dark-mode .editable { .btn-danger:hover { background: var(--priority-1); - color: white; + color: var(--bg-primary); } /* Mobile responsiveness for attachments */ @@ -2647,7 +2639,7 @@ body.dark-mode .editable { min-height: 44px; padding: 0.5rem; background: rgba(0, 255, 65, 0.05); - border-radius: 4px; + border-radius: 0; } } diff --git a/views/CreateTicketView.php b/views/CreateTicketView.php index 7b390ab..670e9a9 100644 --- a/views/CreateTicketView.php +++ b/views/CreateTicketView.php @@ -12,8 +12,8 @@ $nonce = SecurityHeadersMiddleware::getNonce(); Create New Ticket - - + + @@ -109,11 +109,11 @@ $nonce = SecurityHeadersMiddleware::getNonce(); - diff --git a/views/DashboardView.php b/views/DashboardView.php index 3260f1c..c45b201 100644 --- a/views/DashboardView.php +++ b/views/DashboardView.php @@ -13,7 +13,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); Ticket Dashboard - + @@ -87,7 +87,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); [ ]
- +
TEMPLATES WORKFLOW @@ -279,7 +279,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); - ✗ + ✗
@@ -292,7 +292,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
@@ -408,7 +408,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); - + $label) { if ($col === '_actions') { - echo "$label"; + echo "$label"; } else { $newDir = ($currentSort === $col && $currentDir === 'asc') ? 'desc' : 'asc'; $sortClass = ($currentSort === $col) ? "sort-$currentDir" : ''; + $ariaSort = ($currentSort === $col) ? "aria-sort='" . ($currentDir === 'asc' ? 'ascending' : 'descending') . "'" : ''; $sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]); $sortUrl = '?' . http_build_query($sortParams); - echo "$label"; + echo "$label"; } } ?> @@ -452,7 +453,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); // Add checkbox column for admins if ($GLOBALS['currentUser']['is_admin'] ?? false) { - echo ""; + echo ""; } echo "{$row['ticket_id']}"; @@ -468,9 +469,9 @@ $nonce = SecurityHeadersMiddleware::getNonce(); // Quick actions column echo ""; echo "
"; - echo ""; - echo ""; - echo ""; + echo ""; + echo ""; + echo ""; echo "
"; echo ""; echo ""; @@ -518,8 +519,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
- - + +
Ticket # - - + + @@ -244,7 +244,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
- " data-field="status" data-action="update-ticket-status" aria-label="Change ticket status"> @@ -463,7 +463,7 @@ $nonce = SecurityHeadersMiddleware::getNonce(); - +