From 5f4d52c28899696da6b0f26e1afaf52e8d560d34 Mon Sep 17 00:00:00 2001
From: anoracleofra-code <anoracleofra@gmail.com>
Date: Thu, 26 Mar 2026 20:58:50 -0600
Subject: [PATCH] style: make threat alert cards larger and more prominent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header: 10px → 14px with wider letter spacing
- Body text: 9px → 12px, max-width 160px → 260px
- Footer: 8px → 10px
- Card: min-width 120→200, border 1.5→2px, stronger glow
- Box width constant: 180→280 for collision avoidance
- Font: JetBrains Mono for consistency with terminal reskin
---
 frontend/src/components/map/MapMarkers.tsx | 35 +++++++++++-----------
 frontend/src/lib/constants.ts              |  2 +-
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/map/MapMarkers.tsx b/frontend/src/components/map/MapMarkers.tsx
index 6918d4c..fbf0856 100644
--- a/frontend/src/components/map/MapMarkers.tsx
+++ b/frontend/src/components/map/MapMarkers.tsx
@@ -375,19 +375,19 @@ export function ThreatMarkers({
                 style={{
                   opacity: isVisible ? 1.0 : 0.0,
                   pointerEvents: isVisible ? 'auto' : 'none',
-                  backgroundColor: 'rgba(5, 5, 5, 0.95)',
-                  border: `1.5px solid ${riskColor}`,
+                  backgroundColor: 'rgba(5, 5, 5, 0.96)',
+                  border: `2px solid ${riskColor}`,
                   borderRadius: '4px',
-                  padding: '5px 16px 5px 8px',
+                  padding: '8px 20px 8px 12px',
                   color: riskColor,
-                  fontFamily: 'monospace',
-                  fontSize: '9px',
+                  fontFamily: "'JetBrains Mono', monospace",
+                  fontSize: '12px',
                   fontWeight: 'bold',
                   textAlign: 'center',
-                  boxShadow: `0 0 12px ${riskColor}60`,
+                  boxShadow: `0 0 20px ${riskColor}80, 0 0 40px ${riskColor}30`,
                   zIndex: 10,
-                  lineHeight: '1.2',
-                  minWidth: '120px',
+                  lineHeight: '1.3',
+                  minWidth: '200px',
                 }}
               >
                 {n.showLine && isVisible && (
@@ -419,13 +419,13 @@ export function ThreatMarkers({
                     }}
                     style={{
                       position: 'absolute',
-                      top: '2px',
-                      right: '4px',
+                      top: '4px',
+                      right: '6px',
                       background: 'transparent',
                       border: 'none',
                       cursor: 'pointer',
                       color: riskColor,
-                      fontSize: '12px',
+                      fontSize: '16px',
                       fontWeight: 'bold',
                       lineHeight: 1,
                       padding: '0 2px',
@@ -438,24 +438,23 @@ export function ThreatMarkers({
                     ×
                   </button>
                 )}
-                <div style={{ fontSize: '10px', letterSpacing: '0.5px' }}>
+                <div style={{ fontSize: '14px', letterSpacing: '1.5px', textTransform: 'uppercase' as const }}>
                   !! ALERT LVL {score} !!
                 </div>
                 <div
                   style={{
                     color: '#fff',
-                    fontSize: '9px',
-                    marginTop: '2px',
-                    maxWidth: '160px',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
+                    fontSize: '12px',
+                    marginTop: '4px',
+                    maxWidth: '260px',
+                    lineHeight: '1.4',
                   }}
                 >
                   {n.title}
                 </div>
                 {count > 1 && (
                   <div
-                    style={{ color: riskColor, opacity: 0.8, fontSize: '8px', marginTop: '2px' }}
+                    style={{ color: riskColor, opacity: 0.9, fontSize: '10px', marginTop: '4px', letterSpacing: '0.5px' }}
                   >
                     [+{count - 1} ACTIVE THREATS IN AREA]
                   </div>
diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
index c813abc..53d4e90 100644
--- a/frontend/src/lib/constants.ts
+++ b/frontend/src/lib/constants.ts
@@ -17,5 +17,5 @@ export const NOMINATIM_DEBOUNCE_MS = 350;
 export const INTERP_TICK_MS = 2000;
 
 // ─── News/Alert Layout ──────────────────────────────────────────────────────
-export const ALERT_BOX_WIDTH_PX = 180;
+export const ALERT_BOX_WIDTH_PX = 280;
 export const ALERT_MAX_OFFSET_PX = 350;