From f4c39823b11bb084a05ebcb7aa0521e4f60605a4 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 3 Jul 2025 22:17:40 -0400
Subject: [PATCH] fix: add proper tab styling to replace bullet points with
 visual tab design

---
 src/translate-modal.js | 55 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/translate-modal.js b/src/translate-modal.js
index 120eddc..45d6c2c 100644
--- a/src/translate-modal.js
+++ b/src/translate-modal.js
@@ -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");