fix: update button styles to use transparent backgrounds and adjust color classes for better visibility

This commit is contained in:
Sergey Kurdin 2025-06-15 11:40:59 -04:00
parent 605b8a669a
commit e55f757e99
4 changed files with 11 additions and 17 deletions

View File

@ -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]"

View File

@ -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 && (

View File

@ -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' })

View File

@ -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' })}