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

fix: add proper tab styling to replace bullet points with visual tab design

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-03 22:17:40 -04:00
parent d8642675df
commit f4c39823b1
1 changed files with 55 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/translate-modal.js
View file

@ -131,9 +131,19 @@ export function openTranslateModal() {
const tabList = document.createElement("ul");
tabList.setAttribute("role", "tablist");
tabList.style.cssText = `
list-style: none;
display: flex;
margin: 0;
padding: 0;
border-bottom: 2px solid #e9ecef;
gap: 0;
`;
// Page tab
const pageTabItem = document.createElement("li");
pageTabItem.style.cssText = "flex: 1; margin: 0;";
const pageTabLink = document.createElement("a");
pageTabLink.setAttribute("role", "tab");
pageTabLink.setAttribute("aria-selected", "true");
@ -141,10 +151,27 @@ export function openTranslateModal() {
pageTabLink.href = "#page-panel";
pageTabLink.textContent = getUIText("translatePageTab");
pageTabLink.setAttribute("data-i18n", "translatePageTab");
pageTabLink.style.cssText = `
display: block;
padding: 12px 16px;
text-decoration: none;
color: #4CAF50;
background: #4CAF50;
color: white;
border: 2px solid #4CAF50;
border-bottom: none;
border-radius: 6px 6px 0 0;
text-align: center;
font-weight: 500;
transition: all 0.2s ease;
margin-bottom: -2px;
`;
pageTabItem.appendChild(pageTabLink);
// Custom text tab
const customTabItem = document.createElement("li");
customTabItem.style.cssText = "flex: 1; margin: 0;";
const customTabLink = document.createElement("a");
customTabLink.setAttribute("role", "tab");
customTabLink.setAttribute("aria-selected", "false");
@ -152,6 +179,20 @@ export function openTranslateModal() {
customTabLink.href = "#custom-panel";
customTabLink.textContent = getUIText("customTextTab");
customTabLink.setAttribute("data-i18n", "customTextTab");
customTabLink.style.cssText = `
display: block;
padding: 12px 16px;
text-decoration: none;
color: #4CAF50;
background: white;
border: 2px solid #4CAF50;
border-bottom: none;
border-radius: 6px 6px 0 0;
text-align: center;
font-weight: 500;
transition: all 0.2s ease;
margin-bottom: -2px;
`;
customTabItem.appendChild(customTabLink);
tabList.appendChild(pageTabItem);
@ -274,6 +315,13 @@ export function openTranslateModal() {
isPageMode = true;
pageTabLink.setAttribute("aria-selected", "true");
customTabLink.setAttribute("aria-selected", "false");
// Update visual styles
pageTabLink.style.background = "#4CAF50";
pageTabLink.style.color = "white";
customTabLink.style.background = "white";
customTabLink.style.color = "#4CAF50";
pageContent.style.display = "block";
customContent.style.display = "none";
translateButton.textContent = getUIText("translatePageButton");
@ -286,6 +334,13 @@ export function openTranslateModal() {
isPageMode = false;
customTabLink.setAttribute("aria-selected", "true");
pageTabLink.setAttribute("aria-selected", "false");
// Update visual styles
customTabLink.style.background = "#4CAF50";
customTabLink.style.color = "white";
pageTabLink.style.background = "white";
pageTabLink.style.color = "#4CAF50";
customContent.style.display = "block";
pageContent.style.display = "none";
translateButton.textContent = getUIText("translateTextButton");