From f8210bfe39e20e5fb200028c9856fad422a1908f Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Wed, 2 Jul 2025 16:20:07 -0400
Subject: [PATCH] fix(hermes): use theme colors for bottom control buttons to
 ensure visibility

---
 src/ui.js | 54 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index 54c5a66..57803a1 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1135,9 +1135,9 @@ async function openUncloseaiEmbeddedModalNew() {
 	controls.style.cssText = `
 		flex-shrink: 0;
 		padding: 8px 16px;
-		background: white;
-		border-top: 1px solid #e9ecef;
-		border-bottom: 1px solid #e9ecef;
+		background: ${colors.panelBackground};
+		border-top: 1px solid ${colors.dividerColor};
+		border-bottom: 1px solid ${colors.dividerColor};
 		display: flex;
 		gap: 8px;
 		overflow-x: auto;
@@ -1277,21 +1277,22 @@ async function openUncloseaiEmbeddedModalNew() {
 					downloadBtn.title = 'Download audio';
 					downloadBtn.style.cssText = `
 						padding: 8px 16px;
-						background: #f8f9fa;
-						border: 1px solid #dee2e6;
+						background: ${colors.buttonBackground};
+						border: 1px solid ${colors.buttonBorder};
 						border-radius: 20px;
 						cursor: pointer;
 						font-size: 14px;
 						white-space: nowrap;
+						color: ${colors.primaryText};
 						transition: all 0.2s;
 					`;
 					downloadBtn.onmouseover = () => {
-						downloadBtn.style.background = '#e9ecef';
-						downloadBtn.style.borderColor = '#adb5bd';
+						downloadBtn.style.background = colors.buttonHover;
+						downloadBtn.style.borderColor = colors.buttonBorder;
 					};
 					downloadBtn.onmouseout = () => {
-						downloadBtn.style.background = '#f8f9fa';
-						downloadBtn.style.borderColor = '#dee2e6';
+						downloadBtn.style.background = colors.buttonBackground;
+						downloadBtn.style.borderColor = colors.buttonBorder;
 					};
 					downloadBtn.onclick = () => {
 						if (readPageAudio) {
@@ -1381,21 +1382,22 @@ async function openUncloseaiEmbeddedModalNew() {
 		btn.textContent = text;
 		btn.style.cssText = `
 			padding: 8px 16px;
-			background: #f8f9fa;
-			border: 1px solid #dee2e6;
+			background: ${colors.buttonBackground};
+			border: 1px solid ${colors.buttonBorder};
 			border-radius: 20px;
 			cursor: pointer;
 			white-space: nowrap;
 			font-size: 14px;
+			color: ${colors.primaryText};
 			transition: all 0.2s;
 		`;
 		btn.onmouseover = () => {
-			btn.style.background = '#e9ecef';
-			btn.style.borderColor = '#adb5bd';
+			btn.style.background = colors.buttonHover;
+			btn.style.borderColor = colors.buttonBorder;
 		};
 		btn.onmouseout = () => {
-			btn.style.background = '#f8f9fa';
-			btn.style.borderColor = '#dee2e6';
+			btn.style.background = colors.buttonBackground;
+			btn.style.borderColor = colors.buttonBorder;
 		};
 		btn.onclick = () => action(btn);
 		controls.appendChild(btn);
@@ -1883,6 +1885,28 @@ async function openUncloseaiEmbeddedModalNew() {
 		input.style.color = newColors.primaryText;
 		input.style.borderColor = newColors.borderColor;
 		
+		// Update controls panel
+		controls.style.background = newColors.panelBackground;
+		controls.style.borderTopColor = newColors.dividerColor;
+		controls.style.borderBottomColor = newColors.dividerColor;
+		
+		// Update all control buttons
+		controls.querySelectorAll('button').forEach(btn => {
+			btn.style.background = newColors.buttonBackground;
+			btn.style.borderColor = newColors.buttonBorder;
+			btn.style.color = newColors.primaryText;
+			
+			// Re-attach hover handlers with new colors
+			btn.onmouseover = () => {
+				btn.style.background = newColors.buttonHover;
+				btn.style.borderColor = newColors.buttonBorder;
+			};
+			btn.onmouseout = () => {
+				btn.style.background = newColors.buttonBackground;
+				btn.style.borderColor = newColors.buttonBorder;
+			};
+		});
+		
 		// Update all message bubbles
 		chatBox.querySelectorAll('div[style*="align-self: flex-end"]').forEach(userMsg => {
 			userMsg.style.background = newColors.userMessageBg;