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

fix(hermes): use theme colors for bottom control buttons to ensure visibility

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-02 16:20:07 -04:00
parent 1b04cb5f15
commit f8210bfe39
1 changed files with 39 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/ui.js
View file

@ -1135,9 +1135,9 @@ async function openUncloseaiEmbeddedModalNew() {
controls.style.cssText = ` controls.style.cssText = `
flex-shrink: 0; flex-shrink: 0;
padding: 8px 16px; padding: 8px 16px;
background: white; background: ${colors.panelBackground};
border-top: 1px solid #e9ecef; border-top: 1px solid ${colors.dividerColor};
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid ${colors.dividerColor};
display: flex; display: flex;
gap: 8px; gap: 8px;
overflow-x: auto; overflow-x: auto;
@ -1277,21 +1277,22 @@ async function openUncloseaiEmbeddedModalNew() {
downloadBtn.title = 'Download audio'; downloadBtn.title = 'Download audio';
downloadBtn.style.cssText = ` downloadBtn.style.cssText = `
padding: 8px 16px; padding: 8px 16px;
background: #f8f9fa; background: ${colors.buttonBackground};
border: 1px solid #dee2e6; border: 1px solid ${colors.buttonBorder};
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
color: ${colors.primaryText};
transition: all 0.2s; transition: all 0.2s;
`; `;
downloadBtn.onmouseover = () => { downloadBtn.onmouseover = () => {
downloadBtn.style.background = '#e9ecef'; downloadBtn.style.background = colors.buttonHover;
downloadBtn.style.borderColor = '#adb5bd'; downloadBtn.style.borderColor = colors.buttonBorder;
}; };
downloadBtn.onmouseout = () => { downloadBtn.onmouseout = () => {
downloadBtn.style.background = '#f8f9fa'; downloadBtn.style.background = colors.buttonBackground;
downloadBtn.style.borderColor = '#dee2e6'; downloadBtn.style.borderColor = colors.buttonBorder;
}; };
downloadBtn.onclick = () => { downloadBtn.onclick = () => {
if (readPageAudio) { if (readPageAudio) {
@ -1381,21 +1382,22 @@ async function openUncloseaiEmbeddedModalNew() {
btn.textContent = text; btn.textContent = text;
btn.style.cssText = ` btn.style.cssText = `
padding: 8px 16px; padding: 8px 16px;
background: #f8f9fa; background: ${colors.buttonBackground};
border: 1px solid #dee2e6; border: 1px solid ${colors.buttonBorder};
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
color: ${colors.primaryText};
transition: all 0.2s; transition: all 0.2s;
`; `;
btn.onmouseover = () => { btn.onmouseover = () => {
btn.style.background = '#e9ecef'; btn.style.background = colors.buttonHover;
btn.style.borderColor = '#adb5bd'; btn.style.borderColor = colors.buttonBorder;
}; };
btn.onmouseout = () => { btn.onmouseout = () => {
btn.style.background = '#f8f9fa'; btn.style.background = colors.buttonBackground;
btn.style.borderColor = '#dee2e6'; btn.style.borderColor = colors.buttonBorder;
}; };
btn.onclick = () => action(btn); btn.onclick = () => action(btn);
controls.appendChild(btn); controls.appendChild(btn);
@ -1883,6 +1885,28 @@ async function openUncloseaiEmbeddedModalNew() {
input.style.color = newColors.primaryText; input.style.color = newColors.primaryText;
input.style.borderColor = newColors.borderColor; 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 // Update all message bubbles
chatBox.querySelectorAll('div[style*="align-self: flex-end"]').forEach(userMsg => { chatBox.querySelectorAll('div[style*="align-self: flex-end"]').forEach(userMsg => {
userMsg.style.background = newColors.userMessageBg; userMsg.style.background = newColors.userMessageBg;