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 = `
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;