engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: major inline style cleanup progress

Browse source 
- 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
This commit is contained in:
Russell Ballestrini 2025-07-09 20:43:31 -04:00
parent 5d175fb72e
commit c7dbb4afcc
3 changed files with 15 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/uncloseai-embed-modal.js
View file

@ -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");

3
src/uncloseai-modal-builtin.css
View file

@ -706,7 +706,8 @@ dialog#tts-modal {
margin-top: 8px;
display: flex;
gap: 8px;
opacity: 0.7;
opacity: 0.8;
justify-content: flex-end;
}
/* =================================================================== */

3
src/uncloseai-modal-pico.css
View file

@ -757,7 +757,8 @@ dialog#tts-modal {
margin-top: 8px;
display: flex;
gap: 8px;
opacity: 0.7;
opacity: 0.8;
justify-content: flex-end;
}
/* =================================================================== */