From 5d175fb72e1a754e6f4ad9be76efbffa2f896dea Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Wed, 9 Jul 2025 20:38:00 -0400
Subject: [PATCH] feat: continue inline style cleanup with control button
 utility class

- Added uncloseai-btn-control class for standard modal action buttons
- Replaced control button inline styles with CSS class
- Reduced inline styles from 131 to 118 in main modal file
- Established pattern for systematic cleanup of remaining 200+ inline styles
---
 src/uncloseai-embed-modal.js    | 20 +-------------------
 src/uncloseai-modal-builtin.css | 16 ++++++++++++++++
 src/uncloseai-modal-pico.css    | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js
index 422d2a4..016eab5 100644
--- a/src/uncloseai-embed-modal.js
+++ b/src/uncloseai-embed-modal.js
@@ -525,25 +525,7 @@ async function openUncloseaiEmbeddedModalNew() {
 	actions.forEach(({ text, action }) => {
 		const btn = document.createElement("button");
 		btn.textContent = text;
-		btn.style.cssText = `
-			padding: 8px 12px;
-			background: ${colors.buttonBackground};
-			border: 1px solid ${colors.buttonBorder};
-			border-radius: 6px;
-			cursor: pointer;
-			font-size: 13px;
-			color: ${colors.primaryText};
-			transition: all 0.2s;
-			white-space: nowrap;
-		`;
-		btn.onmouseover = () => {
-			btn.style.background = colors.buttonHover;
-			btn.style.borderColor = colors.buttonBorder;
-		};
-		btn.onmouseout = () => {
-			btn.style.background = colors.buttonBackground;
-			btn.style.borderColor = colors.buttonBorder;
-		};
+		btn.className = "uncloseai-btn-control";
 		btn.onclick = action;
 		actionsGrid.appendChild(btn);
 	});
diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index a943f16..f4197d5 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -616,6 +616,22 @@ dialog#tts-modal {
   background: #e9ecef;
 }
 
+.uncloseai-btn-control {
+  padding: 8px 12px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #495057;
+  background: #f8f9fa;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.uncloseai-btn-control:hover {
+  background: #e9ecef;
+}
+
 .uncloseai-btn-close {
   width: 36px;
   height: 36px;
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 948e936..dcfdd60 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -667,6 +667,22 @@ dialog#tts-modal {
   background: #e9ecef;
 }
 
+.uncloseai-btn-control {
+  padding: 8px 12px;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #495057;
+  background: #f8f9fa;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.uncloseai-btn-control:hover {
+  background: #e9ecef;
+}
+
 .uncloseai-btn-close {
   width: 36px;
   height: 36px;