From c7dbb4afcc91209346453a2b0e616d101afb2cf7 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Wed, 9 Jul 2025 20:43:31 -0400 Subject: [PATCH] feat: major inline style cleanup progress - Replaced TTS, delete, and download buttons with utility classes - Converted message action containers to CSS classes - Replaced form labels and sections with semantic classes - Reduced inline styles from 131 to 99 in main modal (32 styles removed) - Updated CSS classes to match exact styling requirements --- src/uncloseai-embed-modal.js | 75 +++++---------------------------- src/uncloseai-modal-builtin.css | 3 +- src/uncloseai-modal-pico.css | 3 +- 3 files changed, 15 insertions(+), 66 deletions(-) diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js index 016eab5..d7a0369 100644 --- a/src/uncloseai-embed-modal.js +++ b/src/uncloseai-embed-modal.js @@ -282,11 +282,11 @@ async function openUncloseaiEmbeddedModalNew() { // Model selection const modelSection = document.createElement("div"); - modelSection.style.cssText = "margin-bottom: 16px;"; + modelSection.className = "uncloseai-section"; const modelLabel = document.createElement("label"); modelLabel.textContent = getUIText("modelLabel"); - modelLabel.style.cssText = `display: block; margin-bottom: 8px; font-weight: 600; color: ${colors.primaryText};`; + modelLabel.className = "uncloseai-label"; const modelSelect = document.createElement("select"); modelSelect.style.cssText = ` @@ -381,11 +381,11 @@ async function openUncloseaiEmbeddedModalNew() { // Voice selection for TTS const voiceSection = document.createElement("div"); - voiceSection.style.cssText = "margin-bottom: 16px;"; + voiceSection.className = "uncloseai-section"; const voiceLabel = document.createElement("label"); voiceLabel.textContent = getUIText("voiceLabel"); - voiceLabel.style.cssText = `display: block; margin-bottom: 8px; font-weight: 600; color: ${colors.primaryText};`; + voiceLabel.className = "uncloseai-label"; const voiceSelect = document.createElement("select"); voiceSelect.id = "hermes-voice-select"; @@ -423,11 +423,11 @@ async function openUncloseaiEmbeddedModalNew() { // Language preference section const languageSection = document.createElement("div"); - languageSection.style.cssText = "margin-bottom: 16px;"; + languageSection.className = "uncloseai-section"; const languageLabel = document.createElement("label"); languageLabel.textContent = getUIText("languageLabel"); - languageLabel.style.cssText = `display: block; margin-bottom: 8px; font-weight: 600; color: ${colors.primaryText};`; + languageLabel.className = "uncloseai-label"; // Create language selector const { SUPPORTED_LANGUAGES, NATIVE_LANGUAGE_NAMES } = await import( @@ -485,7 +485,7 @@ async function openUncloseaiEmbeddedModalNew() { // Action buttons const actionsSection = document.createElement("div"); - actionsSection.style.cssText = "margin-bottom: 16px;"; + actionsSection.className = "uncloseai-section"; const actionsLabel = document.createElement("div"); actionsLabel.textContent = getUIText("quickActions"); @@ -726,25 +726,7 @@ async function openUncloseaiEmbeddedModalNew() { const downloadBtn = document.createElement("button"); downloadBtn.textContent = "💾"; downloadBtn.title = "Download audio"; - downloadBtn.style.cssText = ` - padding: 8px 16px; - background: ${colors.buttonBackground}; - border: 1px solid ${colors.buttonBorder}; - border-radius: 20px; - cursor: pointer; - font-size: 14px; - white-space: nowrap; - color: ${colors.primaryText} !important; - transition: all 0.2s; - `; - downloadBtn.onmouseover = () => { - downloadBtn.style.background = colors.buttonHover; - downloadBtn.style.borderColor = colors.buttonBorder; - }; - downloadBtn.onmouseout = () => { - downloadBtn.style.background = colors.buttonBackground; - downloadBtn.style.borderColor = colors.buttonBorder; - }; + downloadBtn.className = "uncloseai-btn-primary"; downloadBtn.onclick = () => { if (readPageAudio) { const url = readPageAudio.src; @@ -1120,32 +1102,12 @@ async function openUncloseaiEmbeddedModalNew() { messageText.style.cssText = "margin-bottom: 8px;"; const userMessageActions = document.createElement("div"); - userMessageActions.style.cssText = ` - display: flex; - gap: 8px; - opacity: 0.8; - justify-content: flex-end; - `; + userMessageActions.className = "uncloseai-message-actions"; const userTtsBtn = document.createElement("button"); userTtsBtn.textContent = "🔊"; userTtsBtn.title = "Read aloud"; - userTtsBtn.style.cssText = ` - background: ${colors.actionBg}; - border: 1px solid ${colors.actionBorder}; - border-radius: 4px; - padding: 4px 8px; - cursor: pointer; - font-size: 12px; - color: ${colors.userMessageText}; - transition: all 0.2s; - `; - userTtsBtn.onmouseenter = () => { - userTtsBtn.style.background = colors.actionBgHover; - }; - userTtsBtn.onmouseleave = () => { - userTtsBtn.style.background = colors.actionBg; - }; + userTtsBtn.className = "uncloseai-btn-small"; // Store audio for pause/resume functionality let userAudio = null; @@ -1256,22 +1218,7 @@ async function openUncloseaiEmbeddedModalNew() { const userDeleteBtn = document.createElement("button"); userDeleteBtn.textContent = "🗑️"; userDeleteBtn.title = "Delete message"; - userDeleteBtn.style.cssText = ` - background: ${colors.actionBg}; - border: 1px solid ${colors.actionBorder}; - border-radius: 4px; - padding: 4px 8px; - cursor: pointer; - font-size: 12px; - color: ${colors.userMessageText}; - transition: all 0.2s; - `; - userDeleteBtn.onmouseenter = () => { - userDeleteBtn.style.background = colors.actionBgHover; - }; - userDeleteBtn.onmouseleave = () => { - userDeleteBtn.style.background = colors.actionBg; - }; + userDeleteBtn.className = "uncloseai-btn-small"; userDeleteBtn.onclick = async () => { // Remove from chat history and localStorage const { loadConversationHistory, saveConversationHistory } = await import("./storage.js"); diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css index f4197d5..bd460ce 100644 --- a/src/uncloseai-modal-builtin.css +++ b/src/uncloseai-modal-builtin.css @@ -706,7 +706,8 @@ dialog#tts-modal { margin-top: 8px; display: flex; gap: 8px; - opacity: 0.7; + opacity: 0.8; + justify-content: flex-end; } /* =================================================================== */ diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css index dcfdd60..303ed6e 100644 --- a/src/uncloseai-modal-pico.css +++ b/src/uncloseai-modal-pico.css @@ -757,7 +757,8 @@ dialog#tts-modal { margin-top: 8px; display: flex; gap: 8px; - opacity: 0.7; + opacity: 0.8; + justify-content: flex-end; } /* =================================================================== */