From 0b3358910603c002d20afe5cd5b137d48a808b01 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 10 May 2026 23:18:33 -0400
Subject: [PATCH] CSS: extract notification panel inline styles to classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- lt-notif-empty: replaces all hardcoded padding/font/color/align on
  the empty-state and loading/error text in the notification bell panel
- lt-notif-view-all: replaces width/text-align/display/font-size inline
  style on the 'View dashboard' footer link
- lt-notif-dot: moves border-radius:50%;margin-top from inline style
  (only background color remains inline, which is dynamic per-severity)
- Initial 'Loading…' text in the panel HTML uses lt-notif-empty

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/style.css    | 19 +++++++++++++++++++
 templates/base.html | 10 +++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/static/style.css b/static/style.css
index 950a07a..ec83b7c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -124,6 +124,25 @@
 /* ── Search input size variant ───────────────────────────────────── */
 .lt-search-input--sm { width: 180px; }
 
+/* ── Notification panel helpers ──────────────────────────────────── */
+.lt-notif-empty {
+  padding: 1rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.lt-notif-view-all {
+  width: 100%;
+  text-align: center;
+  display: block;
+  font-size: 0.72rem;
+}
+.lt-notif-dot {
+  border-radius: 50%;
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
 /* ── Divider compact variant ─────────────────────────────────────── */
 .lt-divider--compact { margin: 1rem 0 0.75rem; }
 
diff --git a/templates/base.html b/templates/base.html
index 2d83bba..21a4576 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -133,10 +133,10 @@
             <button type="button" class="lt-notif-panel-clear" id="lt-notif-clear-btn">Mark all read</button>
           </div>
           <div class="lt-notif-panel-list" id="lt-notif-list">
-            <div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Loading&hellip;</div>
+            <div class="lt-notif-empty">Loading&hellip;</div>
           </div>
           <div class="lt-notif-panel-footer">
-            <a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm" style="width:100%;text-align:center;display:block;font-size:0.72rem">View dashboard</a>
+            <a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-view-all">View dashboard</a>
           </div>
         </div>
       </div>
@@ -455,14 +455,14 @@
         lt.notif.set(bell, unreadCount);
 
         if (!active.length) {
-          list.innerHTML = '<div style="padding:1rem;font-size:0.75rem;color:var(--text-muted);text-align:center">&#x2714; No active alerts</div>';
+          list.innerHTML = '<div class="lt-notif-empty">&#x2714; No active alerts</div>';
           return;
         }
         list.innerHTML = active.slice(0, 25).map(function(e) {
           var isUnread = toMs(e.last_seen) > readBefore;
           var dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
           return '<div class="lt-notif-item' + (isUnread ? ' lt-notif-item--unread' : '') + '">' +
-            '<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + ';border-radius:50%;margin-top:4px"></div>' +
+            '<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + '"></div>' +
             '<div class="lt-notif-item-body">' +
               '<div class="lt-notif-item-title">' + esc(e.target_name) + (e.target_detail ? ' &middot; ' + esc(e.target_detail) : '') + '</div>' +
               '<div class="lt-notif-item-time">' + esc(e.event_type.replace(/_/g,' ')) + ' &middot; ' + fmtAgo(e.last_seen) + '</div>' +
@@ -486,7 +486,7 @@
             }
           })
           .catch(function() {
-            if (andRender) list.innerHTML = '<div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Could not load</div>';
+            if (andRender) list.innerHTML = '<div class="lt-notif-empty">Could not load</div>';
           });
       }