From 8b9d6640d70ba4005642f083b8b08b68c96bea06 Mon Sep 17 00:00:00 2001
From: Tanner <git@tanner.vc>
Date: Sat, 27 Dec 2025 18:15:22 +0000
Subject: [PATCH] style: Consolidate update banner styles and add theme support

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/App.js          |  2 +-
 webclient/src/Style-black.css | 10 ++++++++++
 webclient/src/Style-dark.css  | 10 ++++++++++
 webclient/src/Style-light.css | 16 ++++++++++++++++
 webclient/src/Style-red.css   | 12 ++++++++++++
 5 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 9f12f4a..9c5e192 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -100,7 +100,7 @@ function App() {
 	return (
 		<div className={theme}>
 			{waitingWorker &&
-				<div style={{padding: 10, backgroundColor: '#ffffcc', color: '#000'}}>
+				<div className='update-banner'>
 					Client version mismatch, please refresh:{' '}
 					<button onClick={() => {
 						waitingWorker.postMessage({ type: 'SKIP_WAITING' });
diff --git a/webclient/src/Style-black.css b/webclient/src/Style-black.css
index ce406f6..851ddcc 100644
--- a/webclient/src/Style-black.css
+++ b/webclient/src/Style-black.css
@@ -75,3 +75,13 @@
 .black .copy-button {
 	color: #828282;
 }
+
+.black .update-banner {
+	color: #000;
+}
+
+.black .update-banner button {
+	background-color: #444444;
+	border-color: #bbb;
+	color: #ddd;
+}
diff --git a/webclient/src/Style-dark.css b/webclient/src/Style-dark.css
index b331598..1940d8d 100644
--- a/webclient/src/Style-dark.css
+++ b/webclient/src/Style-dark.css
@@ -71,3 +71,13 @@
 .dark .copy-button {
 	color: #828282;
 }
+
+.dark .update-banner {
+	color: #000;
+}
+
+.dark .update-banner button {
+	background-color: #444444;
+	border-color: #bbb;
+	color: #ddd;
+}
diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css
index 853a2e3..80e0fe1 100644
--- a/webclient/src/Style-light.css
+++ b/webclient/src/Style-light.css
@@ -43,6 +43,22 @@ input {
 	border-radius: 4px;
 }
 
+.update-banner {
+	background-color: #ffffcc;
+	padding: 0.75rem;
+	text-align: center;
+	border-bottom: 1px solid #e6e6b8;
+}
+
+.update-banner button {
+	margin-left: 1rem;
+	padding: 0.25rem 0.75rem;
+	border: 1px solid #828282;
+	border-radius: 4px;
+	background-color: transparent;
+	cursor: pointer;
+}
+
 .fullscreen {
 	margin: 0.25rem;
 	padding: 0.25rem;
diff --git a/webclient/src/Style-red.css b/webclient/src/Style-red.css
index 4c14871..4b0d3fd 100644
--- a/webclient/src/Style-red.css
+++ b/webclient/src/Style-red.css
@@ -93,3 +93,15 @@
 .red .copy-button {
 	color: #690000;
 }
+
+.red .update-banner {
+	background-color: #ffdddd;
+	border-bottom-color: #e6c2c2;
+	color: #b00;
+}
+
+.red .update-banner button {
+	background-color: #440000;
+	border-color: #b00;
+	color: #b00;
+}