From 8df14ebbe34f5231c7476db41f0d1ec65fd17e2e Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 29 Apr 2026 17:27:10 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20polish=20SLA=20banner=20component=20?=
 =?UTF-8?q?=E2=80=94=20gradient=20fill,=20dismiss=20persistence,=20termina?=
 =?UTF-8?q?l=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lt-sla-p2 .lt-sla-fill: upgrade from flat amber to gradient (#FFB300 →
  #ffd740) for visual consistency with P1 red→orange fill
- lt-sla-dismiss: add transition (0.15s ease) and :focus-visible outline so
  keyboard users get a visible focus ring
- Demo dismiss: replace .remove() with hidden + sessionStorage so banners
  stay dismissed across page navigation (data-sla-id attribute wires the key)
- Demo icons: swap emoji (🔴 🟠) for terminal-style text [ ! ] / [ ~ ] —
  emoji rendering is platform-specific and breaks the monospace aesthetic

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 base.css  |  8 +++++---
 base.html | 20 ++++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/base.css b/base.css
index fc5bb86..da751ee 100644
--- a/base.css
+++ b/base.css
@@ -4478,8 +4478,8 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
   width: 0%;
   transition: width 0.4s ease;
 }
-.lt-sla-p1 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-red), var(--accent-orange)); box-shadow: 0 0 8px rgba(255,45,85,0.6); }
-.lt-sla-p2 .lt-sla-fill { background: var(--accent-amber); box-shadow: 0 0 8px rgba(255,179,0,0.6); }
+.lt-sla-p1 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-red),   var(--accent-orange)); box-shadow: 0 0 8px rgba(255,45,85,0.6); }
+.lt-sla-p2 .lt-sla-fill { background: linear-gradient(90deg, var(--accent-amber), #ffd740);            box-shadow: 0 0 8px rgba(255,179,0,0.6); }
 .lt-sla-meta {
   font-size: 0.60rem;
   color: var(--text-dim);
@@ -4496,8 +4496,10 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
   flex-shrink: 0;
   padding: 0 0.25rem;
   font-family: var(--font-mono);
+  transition: color 0.15s ease;
 }
-.lt-sla-dismiss:hover { color: var(--text-secondary); }
+.lt-sla-dismiss:hover        { color: var(--text-secondary); }
+.lt-sla-dismiss:focus-visible { outline: 1px dashed var(--accent-cyan); outline-offset: 2px; }
 html[data-theme="light"] .lt-sla-p1 { background: rgba(180,30,50,0.06); border-color: rgba(180,30,50,0.35); }
 html[data-theme="light"] .lt-sla-p2 { background: rgba(138,90,0,0.06);  border-color: rgba(138,90,0,0.35); }
 
diff --git a/base.html b/base.html
index 75b0883..45d8a14 100644
--- a/base.html
+++ b/base.html
@@ -935,17 +935,17 @@
         <!-- SLA BANNERS -->
         <div class="lt-section-header">SLA Banners</div>
         <div class="lt-section-body" style="display:flex;flex-direction:column;gap:var(--space-sm)">
-          <div class="lt-sla-p1" role="alert">
-            <span class="lt-sla-icon" aria-hidden="true">🔴</span>
+          <div class="lt-sla-p1" role="alert" data-sla-id="demo-p1">
+            <span class="lt-sla-icon" aria-hidden="true">[ ! ]</span>
             <div class="lt-sla-info">
-              <div class="lt-sla-title">⚠ P1 Critical — SLA: 6h 42m elapsed of 8h limit</div>
+              <div class="lt-sla-title">P1 Critical — SLA: 6h 42m elapsed of 8h limit</div>
               <div class="lt-sla-bar"><div class="lt-sla-fill" style="width:84%"></div></div>
             </div>
             <div class="lt-sla-meta">Storage array link-down · #123456789</div>
             <button type="button" class="lt-sla-dismiss" aria-label="Dismiss">✕</button>
           </div>
-          <div class="lt-sla-p2" role="alert">
-            <span class="lt-sla-icon" aria-hidden="true">🟠</span>
+          <div class="lt-sla-p2" role="alert" data-sla-id="demo-p2">
+            <span class="lt-sla-icon" aria-hidden="true">[ ~ ]</span>
             <div class="lt-sla-info">
               <div class="lt-sla-title">P2 High — SLA: 9h 37m elapsed of 24h limit</div>
               <div class="lt-sla-bar"><div class="lt-sla-fill" style="width:40%"></div></div>
@@ -2001,11 +2001,15 @@ Storage array link-down on `compute-storage-01`.
         });
       });
 
-      // SLA dismiss buttons
+      // SLA dismiss buttons — hide and persist per session
       document.querySelectorAll('.lt-sla-dismiss').forEach(btn => {
+        const banner = btn.closest('.lt-sla-p1, .lt-sla-p2');
+        if (!banner) return;
+        const id = banner.dataset.slaId;
+        try { if (id && sessionStorage.getItem('lt_sla_dismissed_' + id)) banner.hidden = true; } catch (_) {}
         btn.addEventListener('click', () => {
-          const banner = btn.closest('.lt-sla-p1, .lt-sla-p2');
-          if (banner) banner.remove();
+          banner.hidden = true;
+          try { if (id) sessionStorage.setItem('lt_sla_dismissed_' + id, '1'); } catch (_) {}
         });
       });