Terminal aesthetic polish: Consolidate styles & fix visual bugs

## Issue 1: User-Header Consolidation (COMPLETED)
- Added centralized user-header CSS to dashboard.css
- Removed 156 lines of duplicate inline styles from 3 PHP files
- Updated to use proper terminal aesthetic colors:
  * Background: var(--bg-secondary) instead of #2c3e50
  * Text: var(--terminal-green) with glow effects
  * App title: var(--terminal-amber) with amber glow
  * Admin badge: Transparent with priority-1 border and [brackets]
- Removed border-radius from admin badge (terminal aesthetic)
- Added hover effects with color changes and glow

## Issue 2: Status Badge Text Wrapping (FIXED)
- Fixed "In Progress" status badge wrapping to new line
- Updated dashboard.css .status-In-Progress:
  * Increased min-width from 100px to 140px
  * Added white-space: nowrap
  * Added display: inline-block
- Updated ticket.css .status-In-Progress with same fixes
- Badge now displays `[ In Progress ]` on single line

## Issue 3: Border-Radius Cleanup (100% TERMINAL AESTHETIC)
- Removed ALL rounded corners across entire application
- Changed 14 instances in dashboard.css to border-radius: 0
- Changed 9 instances in ticket.css to border-radius: 0
- Includes avatar/profile images (now square boxes)
- Complete terminal aesthetic compliance: sharp rectangular edges

## Code Quality Improvements
- Net reduction: 69 lines of code (191 removed, 122 added)
- Single source of truth for user-header styling
- All colors use CSS variables for consistency
- Zero duplicate CSS remaining
- Easier maintenance going forward

## Visual Changes
- User header: Terminal green with amber accents
- Admin badge: Red border with [brackets], no rounded corners
- Back link: Green with amber hover + glow effects
- Status badges: Single line display, no wrapping
- All UI elements: Sharp rectangular corners (0px radius)

## Files Modified
- assets/css/dashboard.css: +102 lines (user-header CSS, status fix, border-radius cleanup)
- assets/css/ticket.css: +3 lines (status fix, border-radius cleanup)
- views/DashboardView.php: -53 lines (removed inline styles)
- views/TicketView.php: -57 lines (removed inline styles)
- views/CreateTicketView.php: -57 lines (removed inline styles)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-07 16:15:24 -05:00
parent 719905872b
commit 0f25c49d5c
5 changed files with 122 additions and 191 deletions

View File

@@ -42,6 +42,9 @@
text-transform: uppercase;
font-size: 0.9em;
letter-spacing: 0.5px;
min-width: 140px;
white-space: nowrap;
display: inline-block;
font-family: var(--font-mono);
text-shadow: 0 0 5px var(--status-in-progress), 0 0 10px var(--status-in-progress);
}
@@ -323,7 +326,7 @@
.editable {
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
border-radius: 0;
background: var(--bg-primary);
color: var(--text-primary);
transition: all 0.3s ease;
@@ -360,7 +363,7 @@ textarea.editable {
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
border-radius: 0;
cursor: pointer;
font-weight: 500;
background: var(--bg-primary);
@@ -599,7 +602,7 @@ textarea.editable {
min-height: 100px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
border-radius: 0;
background: var(--bg-primary);
}
@@ -612,13 +615,13 @@ textarea.editable {
.markdown-preview code {
background: var(--bg-secondary);
padding: 2px 4px;
border-radius: 4px;
border-radius: 0;
}
.markdown-preview pre {
background: var(--bg-secondary);
padding: 10px;
border-radius: 6px;
border-radius: 0;
overflow-x: auto;
}
@@ -664,11 +667,11 @@ textarea.editable {
}
.slider.round {
border-radius: 24px;
border-radius: 0;
}
.slider.round:before {
border-radius: 50%;
border-radius: 0;
}
input:checked + .slider {
@@ -695,7 +698,7 @@ input:checked + .slider:before {
background: var(--bg-secondary);
color: var(--text-primary);
padding: 10px 20px;
border-radius: 6px;
border-radius: 0;
border: 1px solid var(--border-color);
cursor: pointer;
transition: background-color 0.3s ease;
@@ -840,7 +843,7 @@ body.dark-mode .timeline-date {
/* Status select dropdown */
.status-select {
padding: 8px 16px;
border-radius: 6px;
border-radius: 0;
font-weight: 500;
text-transform: uppercase;
font-size: 0.9em;