From b03a9cfc8cd1dfcac348fce750adf72ab08c872e Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Fri, 20 Mar 2026 11:08:52 -0400 Subject: [PATCH] Extract hardcoded rgba colors and inline styles to CSS classes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add .inline-error and .inline-warning utility classes to dashboard.css with correctly-matched terminal palette rgba values (replaces off-palette rgba(231,76,60,0.1) and rgba(241,196,15,0.1)) - Add .key-generated-alert class for the new API key display frame - Add base .dependency-item, .dependency-group h4, .dependency-item a, .dependency-title, .btn-small overrides to ticket.css - Remove all inline styles from the dependency list template in ticket.js — layout, colors, and sizing now come from CSS classes - Update CreateTicketView.php and ApiKeysView.php to use the new classes Co-Authored-By: Claude Sonnet 4.6 --- assets/css/dashboard.css | 21 +++++++++++++++++++++ assets/css/ticket.css | 32 ++++++++++++++++++++++++++++++++ assets/js/ticket.js | 12 ++++++------ views/CreateTicketView.php | 4 ++-- views/admin/ApiKeysView.php | 2 +- 5 files changed, 62 insertions(+), 9 deletions(-) diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css index fc6aac0..739d0d9 100644 --- a/assets/css/dashboard.css +++ b/assets/css/dashboard.css @@ -4642,6 +4642,27 @@ table td:nth-child(4) { border-top: 1px solid var(--terminal-green); } +/* ===== INLINE ALERT BOXES ===== */ + +.inline-error { + color: var(--priority-1); + border: 2px solid var(--priority-1); + padding: 1rem; + background: rgba(255, 68, 68, 0.1); +} + +.inline-warning { + border: 2px solid var(--terminal-amber); + background: rgba(255, 176, 0, 0.1); + padding: 1rem; +} + +/* New API key display — amber tinted alert frame */ +.key-generated-alert { + background: rgba(255, 176, 0, 0.1); + border-color: var(--terminal-amber); +} + /* ===== RELATIVE TIMESTAMP CELLS ===== */ /* Inline spans with data-ts show relative time; title attr has the full date */ diff --git a/assets/css/ticket.css b/assets/css/ticket.css index c86a56f..37c8550 100644 --- a/assets/css/ticket.css +++ b/assets/css/ticket.css @@ -2139,6 +2139,38 @@ span.ts-cell { font-family: var(--font-mono); } +/* Dependency list items */ +.dependency-group h4 { + color: var(--terminal-amber); + margin: 0.5rem 0; +} + +.dependency-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem; + border-bottom: 1px dashed var(--terminal-green-dim); +} + +.dependency-item a { + color: var(--terminal-green); +} + +.dependency-item .dependency-title { + margin-left: 0.5rem; +} + +.dependency-item .status-badge { + margin-left: 0.5rem; + font-size: 0.8rem; +} + +.dependency-item .btn-small { + padding: 0.25rem 0.5rem; + font-size: 0.8rem; +} + /* Upload progress */ .upload-progress { margin-top: 1rem; diff --git a/assets/js/ticket.js b/assets/js/ticket.js index 6ce611f..938137d 100644 --- a/assets/js/ticket.js +++ b/assets/js/ticket.js @@ -627,19 +627,19 @@ function renderDependencies(dependencies) { if (items.length > 0) { hasAny = true; html += `
-

${typeLabels[type]}

`; +

${typeLabels[type]}

`; items.forEach(dep => { const statusClass = 'status-' + dep.status.toLowerCase().replace(/ /g, '-'); - html += `
+ html += `
- + #${lt.escHtml(dep.depends_on_id)} - ${lt.escHtml(dep.title)} - ${lt.escHtml(dep.status)} + ${lt.escHtml(dep.title)} + ${lt.escHtml(dep.status)}
- +
`; }); diff --git a/views/CreateTicketView.php b/views/CreateTicketView.php index d5e4798..d0cf543 100644 --- a/views/CreateTicketView.php +++ b/views/CreateTicketView.php @@ -62,7 +62,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
-
+
[ ! ] ERROR:
@@ -109,7 +109,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
-