From e55f757e99a20180de727fd27d5e48957583bdfd Mon Sep 17 00:00:00 2001
From: Sergey Kurdin <kurdin@gmail.com>
Date: Sun, 15 Jun 2025 11:40:59 -0400
Subject: [PATCH] fix: update button styles to use transparent backgrounds and
 adjust color classes for better visibility

---
 .../ClipboardHistory/ClipboardHistoryIconMenu.tsx  |  2 +-
 .../components/Menu/components/MenuIconMenu.tsx    |  2 +-
 .../src/pages/main/ClipboardHistoryPage.tsx        | 10 +++++-----
 .../src/pages/main/PasteMenuPage.tsx               | 14 ++++----------
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryIconMenu.tsx b/packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryIconMenu.tsx
index d055d552..5b259c67 100644
--- a/packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryIconMenu.tsx
+++ b/packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryIconMenu.tsx
@@ -209,7 +209,7 @@ export const ClipboardHistoryIconMenu = ({
         <Button
           variant="light"
           id="history-menu-button_tour"
-          className="w-10 text-gray-400 hover:text-gray-500 hover:dark:text-gray-400 dark:text-gray-500 bg-gray-100 p-1 relative hover:bg-gray-100/70 dark:bg-gray-900 dark:hover:bg-gray-700/70"
+          className="w-10 text-gray-400 hover:text-gray-500 hover:dark:text-gray-400 dark:text-gray-500 bg-transparent p-1 relative hover:bg-gray-100/70 dark:bg-gray-900 dark:hover:bg-gray-700/70"
         >
           <HistoryIcon
             className="w-5 max-w-[22px] min-w-[16px] stroke-[1.3px]"
diff --git a/packages/pastebar-app-ui/src/pages/components/Menu/components/MenuIconMenu.tsx b/packages/pastebar-app-ui/src/pages/components/Menu/components/MenuIconMenu.tsx
index 96c9d507..306c0aef 100644
--- a/packages/pastebar-app-ui/src/pages/components/Menu/components/MenuIconMenu.tsx
+++ b/packages/pastebar-app-ui/src/pages/components/Menu/components/MenuIconMenu.tsx
@@ -110,7 +110,7 @@ export const MenuIconMenu = ({
         <Button
           variant="light"
           id="menu-icon-menu-button_tour"
-          className="w-10 text-gray-400 hover:text-gray-500 hover:dark:text-gray-400 dark:text-gray-500 bg-gray-100 p-1 relative hover:bg-gray-100/70 dark:bg-gray-900 dark:hover:bg-gray-700/70"
+          className="w-10 text-gray-400 hover:text-gray-500 hover:dark:text-gray-400 dark:text-gray-500 bg-transparent p-1 relative hover:bg-gray-100/70 dark:bg-gray-900 dark:hover:bg-gray-700/70"
         >
           <MenuSquare className="stroke-[1.3px]" size={22} />
           {selectedItemIds.length > 1 && (
diff --git a/packages/pastebar-app-ui/src/pages/main/ClipboardHistoryPage.tsx b/packages/pastebar-app-ui/src/pages/main/ClipboardHistoryPage.tsx
index 49e2ebc0..86100712 100644
--- a/packages/pastebar-app-ui/src/pages/main/ClipboardHistoryPage.tsx
+++ b/packages/pastebar-app-ui/src/pages/main/ClipboardHistoryPage.tsx
@@ -871,8 +871,8 @@ export default function ClipboardHistoryPage() {
                   : 'h-[calc(100vh-70px)] shadow-sm rounded-xl'
               } flex flex-col ${
                 isSimplifiedLayout
-                  ? 'bg-gray-200/50 dark:bg-gray-800'
-                  : 'bg-slate-200/90 dark:bg-gray-800'
+                  ? 'bg-slate-200/90 dark:bg-slate-800'
+                  : 'bg-slate-200/90 dark:bg-slate-800'
               } dark:border-gray-700 dark:shadow-gray-700/[.8] pb-6 pt-4 px-3 pr-3`}
             >
               <AutoSize disableWidth>
@@ -1919,14 +1919,14 @@ export default function ClipboardHistoryPage() {
                             />
                           )}
                           <TabsList
-                            className="self-center bg-gray-100 dark:bg-gray-700"
+                            className="self-center bg-transparent"
                             id="tabs-history_tour"
                           >
                             {!activeDragId ? (
                               <>
                                 <TabsTrigger
                                   value="/history"
-                                  className="min-w-[90px] bg-gray-100 dark:bg-gray-700"
+                                  className="min-w-[90px] data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-600"
                                 >
                                   {panelSize < getDefaultPanelWidth()
                                     ? t('History', { ns: 'common' })
@@ -1934,7 +1934,7 @@ export default function ClipboardHistoryPage() {
                                 </TabsTrigger>
                                 <TabsTrigger
                                   value="/menu"
-                                  className="min-w-[90px] bg-gray-100 dark:bg-gray-700"
+                                  className="min-w-[90px] data-[state=active]:bg-gray-100 dark:data-[state=active]:bg-gray-600"
                                 >
                                   {panelSize < getDefaultPanelWidth()
                                     ? t('Menu', { ns: 'common' })
diff --git a/packages/pastebar-app-ui/src/pages/main/PasteMenuPage.tsx b/packages/pastebar-app-ui/src/pages/main/PasteMenuPage.tsx
index 2deec6de..5154e3c7 100644
--- a/packages/pastebar-app-ui/src/pages/main/PasteMenuPage.tsx
+++ b/packages/pastebar-app-ui/src/pages/main/PasteMenuPage.tsx
@@ -397,7 +397,7 @@ export default function PasteMenuPage() {
                 : 'h-[calc(100vh-70px)] shadow-sm rounded-xl'
             } flex flex-col ${
               isSimplifiedLayout
-                ? 'bg-gray-200/50 dark:bg-gray-800'
+                ? 'bg-slate-200/90 dark:bg-gray-800'
                 : 'bg-slate-200/90 dark:bg-gray-800'
             }  dark:border-gray-700 dark:shadow-slate-700/[.8] pb-4 pt-4 px-3 pr-3`}
           >
@@ -576,21 +576,15 @@ export default function PasteMenuPage() {
                       }}
                     >
                       <TabsList
-                        className="self-center bg-gray-100 dark:bg-gray-700"
+                        className="self-center bg-transparent"
                         id="tabs-menu_tour"
                       >
-                        <TabsTrigger
-                          value="/history"
-                          className="min-w-[90px] bg-gray-100 dark:bg-gray-700"
-                        >
+                        <TabsTrigger value="/history" className="min-w-[90px]">
                           {panelSize < getDefaultPanelWidth()
                             ? t('History', { ns: 'common' })
                             : t('Clipboard History', { ns: 'common' })}
                         </TabsTrigger>
-                        <TabsTrigger
-                          value="/menu"
-                          className="min-w-[90px] bg-gray-100 dark:bg-gray-700"
-                        >
+                        <TabsTrigger value="/menu" className="min-w-[90px]">
                           {panelSize < getDefaultPanelWidth()
                             ? t('Menu', { ns: 'common' })
                             : t('Paste Menu', { ns: 'common' })}