From 9384ded04f2d858db0a4dcee8ebcf1594fa25c14 Mon Sep 17 00:00:00 2001 From: jramos Date: Tue, 10 Feb 2026 14:43:51 -0700 Subject: [PATCH] Toned down color scheme. Added modernization --- COLOR_SCHEME_MODERNIZATION.md | 79 ++++++++++ frontend/src/App.css | 272 +++++++++++++++++----------------- frontend/src/App.js | 142 +++++++++--------- 3 files changed, 286 insertions(+), 207 deletions(-) create mode 100644 COLOR_SCHEME_MODERNIZATION.md diff --git a/COLOR_SCHEME_MODERNIZATION.md b/COLOR_SCHEME_MODERNIZATION.md new file mode 100644 index 0000000..d2357c5 --- /dev/null +++ b/COLOR_SCHEME_MODERNIZATION.md @@ -0,0 +1,79 @@ +# CVE Dashboard - Color Scheme Modernization + +## Overview +Successfully modernized the color scheme from retro 80s/neon arcade aesthetic to a professional, sophisticated tactical intelligence platform look. + +## Color Palette Changes + +### Before (Neon/Retro) +- **Accent**: `#00D9FF` - Bright cyan (too neon) +- **Warning**: `#FFB800` - Bright yellow/orange (too saturated) +- **Danger**: `#FF3366` - Neon pink/red +- **Success**: `#00FF88` - Bright green (too bright) +- **Background Dark**: `#0A0E27`, `#131937`, `#1E2749` + +### After (Modern Professional) +- **Accent**: `#0EA5E9` - Sky Blue (professional, refined cyan) +- **Warning**: `#F59E0B` - Amber (sophisticated, warm) +- **Danger**: `#EF4444` - Modern Red (urgent but refined) +- **Success**: `#10B981` - Emerald (professional green) +- **Background Dark**: `#0F172A`, `#1E293B`, `#334155` (Tailwind Slate palette) + +## Design Philosophy + +### Refinement Approach +1. **Reduced Glow Intensity**: Lowered opacity and blur radius on all glows from 0.9 to 0.4-0.5 +2. **Subtler Borders**: Changed from 3px bright borders to 1.5-2px refined borders +3. **Professional Gradients**: Updated background gradients to use slate tones instead of stark blues +4. **Sophisticated Shadows**: Reduced shadow intensity while maintaining depth +5. **Text Shadow Refinement**: Reduced from aggressive glows to subtle halos + +### Key Changes + +#### Severity Badges +- **Critical**: Neon pink → Modern red with refined glow +- **High**: Bright yellow → Amber with warm tones +- **Medium**: Bright cyan → Sky blue professional +- **Low**: Bright green → Emerald sophisticated + +#### Interactive Elements +- **Buttons**: Reduced glow from 25px to 20px radius, lowered opacity +- **Input Fields**: More subtle focus states, refined borders +- **Cards**: Gentler hover effects, professional elevation +- **Stat Cards**: Refined top accent lines, subtle glows + +#### Layout Components +- **Wiki Panel**: Updated to emerald accent with professional borders +- **Calendar**: Sky blue accent with refined styling +- **Tickets Panel**: Amber accent maintaining urgency without neon feel +- **CVE Cards**: Slate-based gradients with professional depth + +## Technical Implementation + +### Files Modified +1. **App.css**: Updated all CSS variables, component styles, and utility classes +2. **App.js**: Updated inline STYLES object and all JSX color references + +### CSS Variables Updated +```css +--intel-darkest: #0F172A +--intel-dark: #1E293B +--intel-medium: #334155 +--intel-accent: #0EA5E9 +--intel-warning: #F59E0B +--intel-danger: #EF4444 +--intel-success: #10B981 +--intel-grid: rgba(14, 165, 233, 0.08) +``` + +### Maintained Features +✓ Pulsing button effects on hover/click +✓ Scanning line animation +✓ Card hover elevations +✓ Badge glow dots +✓ Grid background effect +✓ Three-column layout +✓ All interactive functionality + +## Result +The dashboard now presents a modern, professional tactical intelligence platform aesthetic while preserving all the visual interest, depth, and functionality that made the original design engaging. The color scheme feels premium and sophisticated rather than arcade-like, suitable for enterprise security operations. diff --git a/frontend/src/App.css b/frontend/src/App.css index be6df2b..4194d79 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -18,26 +18,26 @@ } :root { - /* Base Colors */ - --intel-darkest: #0A0E27; - --intel-dark: #131937; - --intel-medium: #1E2749; - --intel-accent: #00D9FF; - --intel-warning: #FFB800; - --intel-danger: #FF3366; - --intel-success: #00FF88; - --intel-grid: rgba(0, 217, 255, 0.1); + /* Base Colors - Modern Slate Foundation */ + --intel-darkest: #0F172A; + --intel-dark: #1E293B; + --intel-medium: #334155; + --intel-accent: #0EA5E9; /* Sky Blue - professional cyan */ + --intel-warning: #F59E0B; /* Amber - sophisticated warning */ + --intel-danger: #EF4444; /* Modern Red - urgent but refined */ + --intel-success: #10B981; /* Emerald - professional green */ + --intel-grid: rgba(14, 165, 233, 0.08); /* Text Colors with proper contrast */ - --text-primary: #FFFFFF; - --text-secondary: #E4E8F1; - --text-tertiary: #B8C5D9; - --text-muted: #8A98B0; + --text-primary: #F8FAFC; + --text-secondary: #E2E8F0; + --text-tertiary: #CBD5E1; + --text-muted: #94A3B8; } body { - background-color: #0A0E27; - color: #E4E8F1; + background-color: #0F172A; + color: #E2E8F0; overflow-x: hidden; } @@ -57,8 +57,8 @@ body { /* Grid background effect */ .grid-bg { background-image: - linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px); + linear-gradient(rgba(14, 165, 233, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(14, 165, 233, 0.025) 1px, transparent 1px); background-size: 20px 20px; } @@ -70,7 +70,7 @@ body { /* Glowing border effect */ .glow-border { position: relative; - border: 1px solid rgba(0, 217, 255, 0.3); + border: 1px solid rgba(14, 165, 233, 0.3); } .glow-border::before { @@ -80,7 +80,7 @@ body { left: -1px; right: -1px; bottom: -1px; - background: linear-gradient(45deg, transparent, rgba(0, 217, 255, 0.1), transparent); + background: linear-gradient(45deg, transparent, rgba(14, 165, 233, 0.08), transparent); border-radius: inherit; opacity: 0; transition: opacity 0.3s; @@ -101,7 +101,7 @@ body { height: 2px; background: linear-gradient(90deg, transparent, - rgba(0, 217, 255, 0.8), + rgba(14, 165, 233, 0.6), transparent ); animation: scan 3s ease-in-out infinite; @@ -119,18 +119,18 @@ body { } } -/* Card hover effects with STRONG depth */ +/* Card hover effects with refined depth */ .intel-card { - background: linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 50%, rgba(19, 25, 55, 1) 100%); - border: 2px solid rgba(0, 217, 255, 0.4); + 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: 1.5px solid rgba(14, 165, 233, 0.3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: - 0 8px 16px rgba(0, 0, 0, 0.6), - 0 4px 8px rgba(0, 0, 0, 0.4), - inset 0 2px 0 rgba(0, 217, 255, 0.15), - inset 0 -2px 0 rgba(0, 217, 255, 0.05); + 0 4px 12px rgba(0, 0, 0, 0.4), + 0 2px 6px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(14, 165, 233, 0.1), + inset 0 -1px 0 rgba(14, 165, 233, 0.05); } .intel-card::after { @@ -142,7 +142,7 @@ body { height: 100%; background: linear-gradient(90deg, transparent, - rgba(0, 217, 255, 0.15), + rgba(14, 165, 233, 0.08), transparent ); transition: left 0.5s; @@ -150,13 +150,13 @@ body { } .intel-card:hover { - border-color: rgba(0, 217, 255, 0.8); - transform: translateY(-3px); + border-color: rgba(14, 165, 233, 0.5); + transform: translateY(-2px); box-shadow: - 0 16px 32px rgba(0, 217, 255, 0.3), - 0 8px 16px rgba(0, 0, 0, 0.5), - inset 0 2px 0 rgba(0, 217, 255, 0.3), - 0 0 40px rgba(0, 217, 255, 0.2); + 0 8px 24px rgba(14, 165, 233, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(14, 165, 233, 0.2), + 0 0 30px rgba(14, 165, 233, 0.1); } .intel-card:hover::after { @@ -189,51 +189,51 @@ body { } .status-critical { - background: linear-gradient(135deg, rgba(255, 51, 102, 0.3) 0%, rgba(255, 51, 102, 0.2) 100%); - border-color: rgba(255, 51, 102, 0.8); - color: #FF6B94; - text-shadow: 0 0 10px rgba(255, 51, 102, 0.8); + background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.15) 100%); + border-color: rgba(239, 68, 68, 0.6); + color: #FCA5A5; + text-shadow: 0 0 8px rgba(239, 68, 68, 0.4); } .status-critical::before { - background: #FF3366; - box-shadow: 0 0 16px #FF3366, 0 0 8px #FF3366; + background: #EF4444; + box-shadow: 0 0 12px rgba(239, 68, 68, 0.6), 0 0 6px rgba(239, 68, 68, 0.4); } .status-high { - background: linear-gradient(135deg, rgba(255, 184, 0, 0.3) 0%, rgba(255, 184, 0, 0.2) 100%); - border-color: rgba(255, 184, 0, 0.8); - color: #FFD966; - text-shadow: 0 0 10px rgba(255, 184, 0, 0.8); + background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%); + border-color: rgba(245, 158, 11, 0.6); + color: #FCD34D; + text-shadow: 0 0 8px rgba(245, 158, 11, 0.4); } .status-high::before { - background: #FFB800; - box-shadow: 0 0 16px #FFB800, 0 0 8px #FFB800; + background: #F59E0B; + box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), 0 0 6px rgba(245, 158, 11, 0.4); } .status-medium { - background: linear-gradient(135deg, rgba(0, 217, 255, 0.3) 0%, rgba(0, 217, 255, 0.2) 100%); - border-color: rgba(0, 217, 255, 0.8); - color: #66E5FF; - text-shadow: 0 0 10px rgba(0, 217, 255, 0.8); + background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(14, 165, 233, 0.15) 100%); + border-color: rgba(14, 165, 233, 0.6); + color: #7DD3FC; + text-shadow: 0 0 8px rgba(14, 165, 233, 0.4); } .status-medium::before { - background: #00D9FF; - box-shadow: 0 0 16px #00D9FF, 0 0 8px #00D9FF; + background: #0EA5E9; + box-shadow: 0 0 12px rgba(14, 165, 233, 0.6), 0 0 6px rgba(14, 165, 233, 0.4); } .status-low { - background: linear-gradient(135deg, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0.2) 100%); - border-color: rgba(0, 255, 136, 0.8); - color: #66FFB3; - text-shadow: 0 0 10px rgba(0, 255, 136, 0.8); + background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.15) 100%); + border-color: rgba(16, 185, 129, 0.6); + color: #6EE7B7; + text-shadow: 0 0 8px rgba(16, 185, 129, 0.4); } .status-low::before { - background: #00FF88; - box-shadow: 0 0 16px #00FF88, 0 0 8px #00FF88; + background: #10B981; + box-shadow: 0 0 12px rgba(16, 185, 129, 0.6), 0 0 6px rgba(16, 185, 129, 0.4); } /* Button styles with depth and glow */ @@ -273,105 +273,105 @@ body { } .intel-button-primary { - background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, rgba(0, 217, 255, 0.15) 100%); - border-color: #00D9FF; - color: #00D9FF; - text-shadow: 0 0 10px rgba(0, 217, 255, 0.3); + background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.1) 100%); + border-color: #0EA5E9; + color: #38BDF8; + text-shadow: 0 0 6px rgba(14, 165, 233, 0.2); } .intel-button-primary:hover { - background: linear-gradient(135deg, rgba(0, 217, 255, 0.3) 0%, rgba(0, 217, 255, 0.25) 100%); + background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.2) 100%); box-shadow: - 0 0 25px rgba(0, 217, 255, 0.4), + 0 0 20px rgba(14, 165, 233, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.15); + inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .intel-button-danger { - background: linear-gradient(135deg, rgba(255, 51, 102, 0.2) 0%, rgba(255, 51, 102, 0.15) 100%); - border-color: #FF3366; - color: #FF3366; - text-shadow: 0 0 10px rgba(255, 51, 102, 0.3); + background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%); + border-color: #EF4444; + color: #F87171; + text-shadow: 0 0 6px rgba(239, 68, 68, 0.2); } .intel-button-danger:hover { - background: linear-gradient(135deg, rgba(255, 51, 102, 0.3) 0%, rgba(255, 51, 102, 0.25) 100%); + background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.2) 100%); box-shadow: - 0 0 25px rgba(255, 51, 102, 0.4), + 0 0 20px rgba(239, 68, 68, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.15); + inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(-1px); } .intel-button-success { - background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 255, 136, 0.15) 100%); - border-color: #00FF88; - color: #00FF88; - text-shadow: 0 0 10px rgba(0, 255, 136, 0.3); + background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%); + border-color: #10B981; + color: #34D399; + text-shadow: 0 0 6px rgba(16, 185, 129, 0.2); } .intel-button-success:hover { - background: linear-gradient(135deg, rgba(0, 255, 136, 0.3) 0%, rgba(0, 255, 136, 0.25) 100%); + background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%); box-shadow: - 0 0 25px rgba(0, 255, 136, 0.4), + 0 0 20px rgba(16, 185, 129, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.15); + inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(-1px); } /* Input fields with better contrast */ .intel-input { - background: rgba(19, 25, 55, 0.7); - border: 1px solid rgba(0, 217, 255, 0.3); - color: #FFFFFF; + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(14, 165, 233, 0.25); + color: #F8FAFC; padding: 0.625rem 1rem; border-radius: 0.375rem; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; transition: all 0.3s; box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.3), - 0 1px 0 rgba(255, 255, 255, 0.05); + inset 0 2px 4px rgba(0, 0, 0, 0.2), + 0 1px 0 rgba(255, 255, 255, 0.03); } .intel-input:focus { outline: none; - border-color: #00D9FF; + border-color: #0EA5E9; box-shadow: - 0 0 0 2px rgba(0, 217, 255, 0.2), - inset 0 2px 4px rgba(0, 0, 0, 0.2), - 0 4px 12px rgba(0, 217, 255, 0.15); - background: rgba(19, 25, 55, 0.9); + 0 0 0 2px rgba(14, 165, 233, 0.15), + inset 0 2px 4px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(14, 165, 233, 0.1); + background: rgba(30, 41, 59, 0.8); } .intel-input::placeholder { - color: rgba(228, 232, 241, 0.4); + color: rgba(226, 232, 240, 0.35); } -/* Stat cards with STRONG depth and glow */ +/* Stat cards with refined depth */ .stat-card { - background: linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 100%); - border: 2px solid rgba(0, 217, 255, 0.5); + background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%); + border: 1.5px solid rgba(14, 165, 233, 0.35); border-radius: 0.5rem; padding: 1rem; position: relative; overflow: hidden; box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.5), - 0 3px 8px rgba(0, 0, 0, 0.3), - inset 0 2px 0 rgba(0, 217, 255, 0.2); + 0 4px 12px rgba(0, 0, 0, 0.4), + 0 2px 6px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(14, 165, 233, 0.15); transition: all 0.3s ease; } .stat-card:hover { - transform: translateY(-3px); - border-color: rgba(0, 217, 255, 0.8); + transform: translateY(-2px); + border-color: rgba(14, 165, 233, 0.5); box-shadow: - 0 12px 28px rgba(0, 217, 255, 0.25), - 0 6px 16px rgba(0, 0, 0, 0.5), - inset 0 2px 0 rgba(0, 217, 255, 0.3), - 0 0 30px rgba(0, 217, 255, 0.2); + 0 8px 20px rgba(14, 165, 233, 0.15), + 0 4px 12px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(14, 165, 233, 0.2), + 0 0 24px rgba(14, 165, 233, 0.1); } .stat-card::before { @@ -380,10 +380,10 @@ body { top: 0; left: 0; right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, #00D9FF, transparent); - opacity: 0.9; - box-shadow: 0 0 12px rgba(0, 217, 255, 0.7); + height: 2px; + background: linear-gradient(90deg, transparent, #0EA5E9, transparent); + opacity: 0.8; + box-shadow: 0 0 8px rgba(14, 165, 233, 0.5); } /* Modal overlay with proper backdrop */ @@ -407,16 +407,16 @@ body { } ::-webkit-scrollbar-track { - background: #131937; + background: #1E293B; } ::-webkit-scrollbar-thumb { - background: rgba(0, 217, 255, 0.3); + background: rgba(14, 165, 233, 0.3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: rgba(0, 217, 255, 0.5); + background: rgba(14, 165, 233, 0.5); } /* Fade in animation */ @@ -534,8 +534,8 @@ body { /* Loading spinner */ .loading-spinner { - border: 2px solid rgba(0, 217, 255, 0.1); - border-top-color: #00D9FF; + border: 2px solid rgba(14, 165, 233, 0.1); + border-top-color: #0EA5E9; border-radius: 50%; animation: spin 1s linear infinite; } @@ -556,8 +556,8 @@ body { left: 50%; transform: translateX(-50%); padding: 0.5rem 0.75rem; - background: linear-gradient(135deg, #1E2749 0%, #2A3458 100%); - border: 1px solid rgba(0, 217, 255, 0.4); + background: linear-gradient(135deg, #334155 0%, #475569 100%); + border: 1px solid rgba(14, 165, 233, 0.3); border-radius: 0.25rem; font-size: 0.75rem; white-space: nowrap; @@ -566,10 +566,10 @@ body { transition: opacity 0.3s; margin-bottom: 0.5rem; font-family: 'JetBrains Mono', monospace; - color: #FFFFFF; + color: #F8FAFC; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), - 0 0 20px rgba(0, 217, 255, 0.2); + 0 0 16px rgba(14, 165, 233, 0.15); } .tooltip:hover::after { @@ -581,21 +581,21 @@ h1.text-intel-accent, h2.text-intel-accent, h3.text-intel-accent { text-shadow: - 0 0 20px rgba(0, 217, 255, 0.4), - 0 0 40px rgba(0, 217, 255, 0.2); + 0 0 16px rgba(14, 165, 233, 0.3), + 0 0 32px rgba(14, 165, 233, 0.15); } /* Enhanced border glow for featured cards */ .border-intel-accent { - box-shadow: 0 0 15px rgba(0, 217, 255, 0.15); + box-shadow: 0 0 12px rgba(14, 165, 233, 0.12); } .border-intel-warning { - box-shadow: 0 0 15px rgba(255, 184, 0, 0.15); + box-shadow: 0 0 12px rgba(245, 158, 11, 0.12); } .border-intel-danger { - box-shadow: 0 0 15px rgba(255, 51, 102, 0.15); + box-shadow: 0 0 12px rgba(239, 68, 68, 0.12); } /* Quick lookup section enhancement */ @@ -609,41 +609,41 @@ h3.text-intel-accent { /* Vendor Cards - nested depth */ .vendor-card { - background: linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(19, 25, 55, 0.9) 100%); - border: 2px solid rgba(0, 217, 255, 0.3); + background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%); + border: 1.5px solid rgba(14, 165, 233, 0.25); border-radius: 0.5rem; padding: 1rem; box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.5), - inset 0 1px 0 rgba(0, 217, 255, 0.1); + 0 3px 10px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(14, 165, 233, 0.08); transition: all 0.3s ease; } .vendor-card:hover { - border-color: rgba(0, 217, 255, 0.6); + border-color: rgba(14, 165, 233, 0.4); box-shadow: - 0 8px 20px rgba(0, 217, 255, 0.2), - 0 4px 12px rgba(0, 0, 0, 0.6), - inset 0 1px 0 rgba(0, 217, 255, 0.2); + 0 6px 16px rgba(14, 165, 233, 0.12), + 0 3px 10px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(14, 165, 233, 0.15); transform: translateX(4px); } /* Document items - recessed appearance */ .document-item { - background: linear-gradient(135deg, rgba(10, 14, 39, 1) 0%, rgba(13, 17, 43, 0.98) 100%); - border: 1px solid rgba(0, 217, 255, 0.25); + background: linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(20, 28, 48, 0.98) 100%); + border: 1px solid rgba(14, 165, 233, 0.2); border-radius: 0.375rem; padding: 0.75rem; box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.4), - 0 1px 2px rgba(0, 0, 0, 0.3); + inset 0 2px 4px rgba(0, 0, 0, 0.3), + 0 1px 2px rgba(0, 0, 0, 0.25); transition: all 0.2s ease; } .document-item:hover { - border-color: rgba(0, 217, 255, 0.5); - background: linear-gradient(135deg, rgba(13, 17, 43, 1) 0%, rgba(19, 25, 55, 0.95) 100%); + border-color: rgba(14, 165, 233, 0.35); + background: linear-gradient(135deg, rgba(20, 28, 48, 1) 0%, rgba(30, 41, 59, 0.95) 100%); box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(0, 217, 255, 0.15); + inset 0 2px 4px rgba(0, 0, 0, 0.25), + 0 2px 8px rgba(14, 165, 233, 0.1); } diff --git a/frontend/src/App.js b/frontend/src/App.js index 8efc080..47854d3 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -17,106 +17,106 @@ const STYLES = { // Main container with visible background mainContainer: { minHeight: '100vh', - background: 'linear-gradient(135deg, #0A0E27 0%, #131937 50%, #0A0E27 100%)', + background: 'linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%)', padding: '1.5rem', position: 'relative', overflow: 'hidden', }, - // Stat cards with BRIGHT CYAN borders + // Stat cards with refined borders statCard: { - background: 'linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 100%)', - border: '3px solid #00D9FF', + background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%)', + border: '2px solid #0EA5E9', borderRadius: '0.5rem', padding: '1rem', - boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 217, 255, 0.3), inset 0 2px 0 rgba(0, 217, 255, 0.2)', + boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.15)', position: 'relative', overflow: 'hidden', }, - // Intel card with thick glowing border + // Intel card with refined glowing border intelCard: { - background: 'linear-gradient(135deg, rgba(19, 25, 55, 1) 0%, rgba(30, 39, 73, 0.95) 50%, rgba(19, 25, 55, 1) 100%)', - border: '3px solid rgba(0, 217, 255, 0.6)', + 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)', borderRadius: '0.5rem', - boxShadow: '0 12px 32px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 217, 255, 0.25), inset 0 2px 0 rgba(0, 217, 255, 0.15)', + boxShadow: '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', }, // Vendor card with depth vendorCard: { - background: 'linear-gradient(135deg, rgba(10, 14, 39, 0.95) 0%, rgba(19, 25, 55, 0.9) 100%)', - border: '2px solid rgba(0, 217, 255, 0.4)', + background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%)', + border: '1.5px solid rgba(14, 165, 233, 0.3)', borderRadius: '0.5rem', padding: '1rem', - boxShadow: '0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 217, 255, 0.1)', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(14, 165, 233, 0.08)', marginBottom: '0.75rem', }, - // CRITICAL severity badge - BRIGHT RED with WHITE text + // CRITICAL severity badge - Modern red with refined glow badgeCritical: { display: 'inline-flex', alignItems: 'center', gap: '0.5rem', - background: 'linear-gradient(135deg, rgba(255, 51, 102, 0.4) 0%, rgba(255, 51, 102, 0.3) 100%)', - border: '2px solid #FF3366', + background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.2) 100%)', + border: '2px solid #EF4444', borderRadius: '0.375rem', padding: '0.375rem 0.875rem', - color: '#FFFFFF', + color: '#FCA5A5', fontWeight: '700', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.5px', - textShadow: '0 0 10px rgba(255, 51, 102, 0.9)', - boxShadow: '0 0 20px rgba(255, 51, 102, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)', + textShadow: '0 0 8px rgba(239, 68, 68, 0.5)', + boxShadow: '0 0 16px rgba(239, 68, 68, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)', }, - // HIGH severity badge - BRIGHT ORANGE/YELLOW with WHITE text + // HIGH severity badge - Amber with refined glow badgeHigh: { display: 'inline-flex', alignItems: 'center', gap: '0.5rem', - background: 'linear-gradient(135deg, rgba(255, 184, 0, 0.4) 0%, rgba(255, 184, 0, 0.3) 100%)', - border: '2px solid #FFB800', + background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%)', + border: '2px solid #F59E0B', borderRadius: '0.375rem', padding: '0.375rem 0.875rem', - color: '#FFFFFF', + color: '#FCD34D', fontWeight: '700', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.5px', - textShadow: '0 0 10px rgba(255, 184, 0, 0.9)', - boxShadow: '0 0 20px rgba(255, 184, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)', + textShadow: '0 0 8px rgba(245, 158, 11, 0.5)', + boxShadow: '0 0 16px rgba(245, 158, 11, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)', }, - // MEDIUM severity badge - BRIGHT CYAN with WHITE text + // MEDIUM severity badge - Sky blue with refined glow badgeMedium: { display: 'inline-flex', alignItems: 'center', gap: '0.5rem', - background: 'linear-gradient(135deg, rgba(0, 217, 255, 0.4) 0%, rgba(0, 217, 255, 0.3) 100%)', - border: '2px solid #00D9FF', + background: 'linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.2) 100%)', + border: '2px solid #0EA5E9', borderRadius: '0.375rem', padding: '0.375rem 0.875rem', - color: '#FFFFFF', + color: '#7DD3FC', fontWeight: '700', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.5px', - textShadow: '0 0 10px rgba(0, 217, 255, 0.9)', - boxShadow: '0 0 20px rgba(0, 217, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)', + textShadow: '0 0 8px rgba(14, 165, 233, 0.5)', + boxShadow: '0 0 16px rgba(14, 165, 233, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)', }, - // LOW severity badge - BRIGHT GREEN with WHITE text + // LOW severity badge - Emerald with refined glow badgeLow: { display: 'inline-flex', alignItems: 'center', gap: '0.5rem', - background: 'linear-gradient(135deg, rgba(0, 255, 136, 0.4) 0%, rgba(0, 255, 136, 0.3) 100%)', - border: '2px solid #00FF88', + background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%)', + border: '2px solid #10B981', borderRadius: '0.375rem', padding: '0.375rem 0.875rem', - color: '#FFFFFF', + color: '#6EE7B7', fontWeight: '700', fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.5px', - textShadow: '0 0 10px rgba(0, 255, 136, 0.9)', - boxShadow: '0 0 20px rgba(0, 255, 136, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4)', + textShadow: '0 0 8px rgba(16, 185, 129, 0.5)', + boxShadow: '0 0 16px rgba(16, 185, 129, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)', }, // Glowing dot for badges glowDot: (color) => ({ @@ -143,11 +143,11 @@ const getSeverityBadgeStyle = (severity) => { // Helper function to get severity dot color const getSeverityDotColor = (severity) => { switch (severity?.toLowerCase()) { - case 'critical': return '#FF3366'; - case 'high': return '#FFB800'; - case 'medium': return '#00D9FF'; - case 'low': return '#00FF88'; - default: return '#00D9FF'; + case 'critical': return '#EF4444'; + case 'high': return '#F59E0B'; + case 'medium': return '#0EA5E9'; + case 'low': return '#10B981'; + default: return '#0EA5E9'; } }; const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:3001'; @@ -770,27 +770,27 @@ export default function App() { - {/* Stats Bar - INLINE STYLES FOR GUARANTEED VISIBILITY */} + {/* Stats Bar - Modern refined styling */}
-
-
Total CVEs
-
{Object.keys(filteredGroupedCVEs).length}
+
+
Total CVEs
+
{Object.keys(filteredGroupedCVEs).length}
-
-
Vendor Entries
-
{cves.length}
+
+
Vendor Entries
+
{cves.length}
-
-
-
Open Tickets
-
{jiraTickets.filter(t => t.status !== 'Closed').length}
+
+
+
Open Tickets
+
{jiraTickets.filter(t => t.status !== 'Closed').length}
-
-
-
Critical
-
{cves.filter(c => c.severity === 'Critical').length}
+
+
+
Critical
+
{cves.filter(c => c.severity === 'Critical').length}
@@ -1259,38 +1259,38 @@ export default function App() {
{/* LEFT PANEL - Wiki/Knowledge Base */}
-
-

+
+

Knowledge Base

{/* Wiki/Blog Style Entries */}
-
+

CVE Response Procedures

Standard operating procedures for vulnerability response and escalation...

Last updated: 2024-02-08
-
+

Vendor Contact Matrix

Emergency contacts and escalation paths for security vendors...

Last updated: 2024-02-05
-
+

Severity Classification Guide

Guidelines for assessing and classifying vulnerability severity levels...

Last updated: 2024-01-28
-
+

Patching Policy

Enterprise patch management timelines and approval workflow...

Last updated: 2024-01-15
-
+

Documentation Standards

Required documentation for vulnerability tracking and audit compliance...

Last updated: 2024-01-10 @@ -1304,7 +1304,7 @@ export default function App() { {/* Quick Check */}
-

Quick CVE Lookup

+

Quick CVE Lookup

{/* Calendar Widget */} -
-

+
+

Calendar

@@ -1808,9 +1808,9 @@ export default function App() {
{/* Open Vendor Tickets */} -
+
-

+

Open Tickets

@@ -1824,14 +1824,14 @@ export default function App() { )}
-
+
{jiraTickets.filter(t => t.status !== 'Closed').length}
Active
{jiraTickets.filter(t => t.status !== 'Closed').slice(0, 10).map(ticket => ( -