Extract inline styles to CSS classes
Move JavaScript style objects from home page components into reusable CSS classes in App.css. This follows the existing pattern (intel-button, intel-card, intel-input) and consolidates all visual styling in one place. New CSS classes added: - .panel-card (--accent, --warning, --teal) — sidebar panels - .section-heading (--accent, --warning, --teal) — monospace headings - .stat-card modifiers (--clickable, --active, --warning, --danger) - .stat-card__label / .stat-card__value (--accent, --neutral, etc.) - .severity-badge (--critical, --high, --medium, --low) - .glow-dot (--critical, --high, --medium, --low) - .sidebar-ticket — compact ticket cards - .workflow-item — Ivanti workflow entries - .workflow-state-badge — teal state pill - .ticket-status-badge — small status indicator - .archive-item (--active, --resolved) — finding archive entries - .big-counter (--warning, --teal) — large centered stat numbers Benefits: - 578 fewer lines of JavaScript across components - Styles are browser-cached separately from JS bundle - Single source of truth for the design system - Easier to update colors/spacing project-wide
This commit is contained in:
Jordan Ramos
@@ -845,3 +845,230 @@ h3.text-intel-accent {
|
||||
color: #CBD5E1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
HOME PAGE COMPONENT CLASSES
|
||||
============================================ */
|
||||
|
||||
/* Panel card — used for right-sidebar panels (Calendar, Tickets, Ivanti) */
|
||||
.panel-card {
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%);
|
||||
border: 2px solid rgba(14, 165, 233, 0.4);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 28px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.12);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.panel-card--accent { border-left: 3px solid #0EA5E9; }
|
||||
.panel-card--warning { border-left: 3px solid #F59E0B; }
|
||||
.panel-card--teal { border-left: 3px solid #0D9488; }
|
||||
|
||||
/* Section heading — monospace uppercase with glow */
|
||||
.section-heading {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.section-heading--accent {
|
||||
color: #0EA5E9;
|
||||
text-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
|
||||
}
|
||||
|
||||
.section-heading--warning {
|
||||
color: #F59E0B;
|
||||
text-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.section-heading--teal {
|
||||
color: #0D9488;
|
||||
text-shadow: 0 0 12px rgba(13, 148, 136, 0.4);
|
||||
}
|
||||
|
||||
/* Stat card — clickable variant with border color modifiers */
|
||||
.stat-card--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stat-card--clickable:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.stat-card--active {
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 28px rgba(14, 165, 233, 0.4);
|
||||
}
|
||||
|
||||
.stat-card--warning {
|
||||
border-color: #F59E0B;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(245, 158, 11, 0.15);
|
||||
}
|
||||
|
||||
.stat-card--warning::before {
|
||||
background: linear-gradient(90deg, transparent, #F59E0B, transparent);
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
|
||||
}
|
||||
|
||||
.stat-card--danger {
|
||||
border-color: #EF4444;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.stat-card--danger::before {
|
||||
background: linear-gradient(90deg, transparent, #EF4444, transparent);
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
/* Stat card label and value */
|
||||
.stat-card__label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: #CBD5E1;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-card__value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.stat-card__value--accent { color: #0EA5E9; text-shadow: 0 0 16px rgba(14, 165, 233, 0.4); }
|
||||
.stat-card__value--neutral { color: #E2E8F0; }
|
||||
.stat-card__value--warning { color: #F59E0B; text-shadow: 0 0 16px rgba(245, 158, 11, 0.4); }
|
||||
.stat-card__value--danger { color: #EF4444; text-shadow: 0 0 16px rgba(239, 68, 68, 0.4); }
|
||||
.stat-card__value--teal { color: #0D9488; text-shadow: 0 0 16px rgba(13, 148, 136, 0.4); }
|
||||
|
||||
/* Glow dot — pulsing indicator */
|
||||
.glow-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.glow-dot--critical { background: #EF4444; box-shadow: 0 0 12px #EF4444, 0 0 6px #EF4444; }
|
||||
.glow-dot--high { background: #F59E0B; box-shadow: 0 0 12px #F59E0B, 0 0 6px #F59E0B; }
|
||||
.glow-dot--medium { background: #0EA5E9; box-shadow: 0 0 12px #0EA5E9, 0 0 6px #0EA5E9; }
|
||||
.glow-dot--low { background: #10B981; box-shadow: 0 0 12px #10B981, 0 0 6px #10B981; }
|
||||
|
||||
/* Severity badge — combined style (replaces inline badge objects) */
|
||||
.severity-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.375rem 0.875rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.severity-badge--critical {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.2) 100%);
|
||||
border-color: #EF4444;
|
||||
color: #FCA5A5;
|
||||
text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
||||
box-shadow: 0 0 16px rgba(239, 68, 68, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.severity-badge--high {
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%);
|
||||
border-color: #F59E0B;
|
||||
color: #FCD34D;
|
||||
text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
|
||||
box-shadow: 0 0 16px rgba(245, 158, 11, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.severity-badge--medium {
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.2) 100%);
|
||||
border-color: #0EA5E9;
|
||||
color: #7DD3FC;
|
||||
text-shadow: 0 0 8px rgba(14, 165, 233, 0.5);
|
||||
box-shadow: 0 0 16px rgba(14, 165, 233, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.severity-badge--low {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%);
|
||||
border-color: #10B981;
|
||||
color: #6EE7B7;
|
||||
text-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
|
||||
box-shadow: 0 0 16px rgba(16, 185, 129, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Sidebar ticket item — compact variant */
|
||||
.sidebar-ticket {
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%);
|
||||
border: 1px solid rgba(245, 158, 11, 0.25);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* Ivanti workflow item — teal accent */
|
||||
.workflow-item {
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%);
|
||||
border: 1px solid rgba(13, 148, 136, 0.25);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* Workflow state badge */
|
||||
.workflow-state-badge {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(13, 148, 136, 0.2);
|
||||
border: 1px solid #0D9488;
|
||||
color: #0D9488;
|
||||
white-space: nowrap;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* Ticket status badge — small variant */
|
||||
.ticket-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.65rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
/* Archive finding item */
|
||||
.archive-item {
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75));
|
||||
border: 1px solid rgba(100, 116, 139, 0.25);
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.archive-item--active { border-left: 3px solid #F59E0B; }
|
||||
.archive-item--resolved { border-left: 3px solid #10B981; }
|
||||
|
||||
/* Big counter display — centered stat number */
|
||||
.big-counter {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-counter--warning { color: #F59E0B; text-shadow: 0 0 16px rgba(245, 158, 11, 0.4); }
|
||||
.big-counter--teal { color: #0D9488; text-shadow: 0 0 16px rgba(13, 148, 136, 0.4); }
|
||||
|
||||
Reference in New Issue
Block a user