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

@@ -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' });

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;
+}

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;
+}

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;

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;
+}