From b7f98912f2707b2de2b2aac126708064b079ed99 Mon Sep 17 00:00:00 2001
From: Daniel Dada <doesdeos@gmail.com>
Date: Fri, 6 Feb 2026 12:01:15 +0300
Subject: [PATCH] restyled buttons

---
 list-manager/list-manager.css  | 95 ++++++++++++++++++++++++++++++++--
 list-manager/list-manager.html |  4 +-
 popup/popup.css                | 44 ++++++++++++----
 3 files changed, 128 insertions(+), 15 deletions(-)

diff --git a/list-manager/list-manager.css b/list-manager/list-manager.css
index 36f4308..24a14bc 100644
--- a/list-manager/list-manager.css
+++ b/list-manager/list-manager.css
@@ -84,6 +84,12 @@ body.dark .title img {
   opacity: 0.6;
 }
 
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .topbar-actions button {
   min-height: 28px;
   padding: 4px 10px;
@@ -95,13 +101,26 @@ body.dark .title img {
 }
 
 .topbar-actions button.primary {
-  background: var(--accent);
-  color: var(--accent-text);
-  border: none;
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
 }
 
 .topbar-actions button.primary:hover {
-  background: var(--accent-hover);
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .topbar-actions button.primary,
+body.dark .topbar-actions button.primary {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .topbar-actions button.primary:hover,
+body.dark .topbar-actions button.primary:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
 }
 
 .topbar-actions button.ghost {
@@ -188,6 +207,27 @@ body.dark .title img {
   min-height: 28px;
 }
 
+.lists-panel .panel-actions button.ghost {
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text-color);
+}
+
+.lists-panel .panel-actions button.ghost:hover {
+  background: var(--section-bg);
+}
+
+.lists-panel .panel-actions button.danger {
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: var(--danger);
+}
+
+.lists-panel .panel-actions button.danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.45);
+}
+
 .panel-actions.secondary {
   margin-top: 0;
   gap: 6px;
@@ -426,6 +466,29 @@ body.dark .list-item.selected {
   flex-shrink: 0;
 }
 
+.add-words button.primary {
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
+}
+
+.add-words button.primary:hover {
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .add-words button.primary,
+body.dark .add-words button.primary {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .add-words button.primary:hover,
+body.dark .add-words button.primary:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
+}
+
 /* Word controls: action row matches popup .word-actions-row / .word-action-btn */
 .word-controls .row {
   display: flex;
@@ -458,6 +521,30 @@ body.dark .list-item.selected {
   background: rgba(239, 68, 68, 0.2);
 }
 
+/* Subdued primary/danger in list manager – outline style, less distracting */
+.compact-btn.primary {
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
+}
+
+.compact-btn.primary:hover {
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .compact-btn.primary,
+body.dark .compact-btn.primary {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .compact-btn.primary:hover,
+body.dark .compact-btn.primary:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
+}
+
 .word-controls input[type="text"],
 .word-controls select {
   flex: 1;
diff --git a/list-manager/list-manager.html b/list-manager/list-manager.html
index ebf0b64..e2df92f 100644
--- a/list-manager/list-manager.html
+++ b/list-manager/list-manager.html
@@ -36,8 +36,8 @@
         <div class="panel-header">
           <h2 data-i18n="tab_lists">Lists</h2>
           <div class="panel-actions">
-            <button id="duplicateListBtn"><i class="fa-solid fa-clone"></i> <span data-i18n="duplicate">Duplicate</span></button>
-            <button id="mergeListsBtn"><i class="fa-solid fa-code-merge"></i> <span data-i18n="merge">Merge</span></button>
+            <button id="duplicateListBtn" class="ghost"><i class="fa-solid fa-clone"></i> <span data-i18n="duplicate">Duplicate</span></button>
+            <button id="mergeListsBtn" class="ghost"><i class="fa-solid fa-code-merge"></i> <span data-i18n="merge">Merge</span></button>
             <button id="deleteListsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="delete_selected">Delete</span></button>
           </div>
         </div>
diff --git a/popup/popup.css b/popup/popup.css
index a492ffc..ff99c86 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -590,7 +590,7 @@ body.dark .header-logo {
   opacity: 0.6;
 }
 
-/* Apply Button */
+/* Apply Button – same subdued primary style as list-manager */
 .apply-button {
   width: 100%;
   height: 32px;
@@ -598,9 +598,9 @@ body.dark .header-logo {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  background: var(--accent);
-  color: var(--accent-text);
-  border: none;
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
   border-radius: 6px;
   cursor: pointer;
   font-size: var(--text-base);
@@ -610,7 +610,20 @@ body.dark .header-logo {
 }
 
 .apply-button:hover {
-  background: var(--accent-hover);
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .apply-button,
+body.dark .apply-button {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .apply-button:hover,
+body.dark .apply-button:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
 }
 
 .apply-button i {
@@ -673,9 +686,9 @@ body.dark .header-logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--accent);
-  color: var(--accent-text);
-  border: none;
+  background: rgba(255, 140, 0, 0.1);
+  color: var(--accent);
+  border: 1px solid rgba(255, 140, 0, 0.35);
   border-radius: 8px;
   cursor: pointer;
   font-size: var(--text-md);
@@ -684,7 +697,20 @@ body.dark .header-logo {
 }
 
 .add-words-button:hover {
-  background: var(--accent-hover);
+  background: rgba(255, 140, 0, 0.18);
+  border-color: rgba(255, 140, 0, 0.5);
+}
+
+html.dark .add-words-button,
+body.dark .add-words-button {
+  background: rgba(255, 140, 0, 0.12);
+  border-color: rgba(255, 140, 0, 0.4);
+}
+
+html.dark .add-words-button:hover,
+body.dark .add-words-button:hover {
+  background: rgba(255, 140, 0, 0.2);
+  border-color: rgba(255, 140, 0, 0.55);
 }
 
 .add-words-button:disabled {