fix(web): preserve action button contrast across themes (#1340)

* fix(web): use theme colors for storage refresh button

* fix(web): use theme colors for share fallback action

web/src/routes/settings/storage.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { describe, expect, it, vi } from 'vitest'
+import { I18nProvider } from '@/lib/i18n-context'
+import SettingsStoragePage from './storage'
+
+const getSqliteStorageUsage = vi.fn().mockResolvedValue({
+    path: 'C:\\hapi\\hapi.db',
+    databaseBytes: 1,
+    walBytes: 2,
+    shmBytes: 3,
+    totalBytes: 6,
+})
+
+vi.mock('@/lib/app-context', () => ({
+    useAppContext: () => ({ api: { getSqliteStorageUsage } }),
+}))
+
+describe('SettingsStoragePage', () => {
+    it('uses paired button theme colors for the refresh action', () => {
+        const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+        render(
+            <QueryClientProvider client={queryClient}>
+                <I18nProvider>
+                    <SettingsStoragePage />
+                </I18nProvider>
+            </QueryClientProvider>,
+        )
+
+        const refreshButton = screen.getByRole('button')
+        expect(refreshButton).toHaveClass('bg-[var(--app-button)]')
+        expect(refreshButton).toHaveClass('text-[var(--app-button-text)]')
+        expect(refreshButton).not.toHaveClass('text-white')
+    })
+})

web/src/routes/settings/storage.tsx

@@ -44,7 +44,7 @@ export default function SettingsStoragePage() {
                 type="button"
                 onClick={() => void query.refetch()}
                 disabled={query.isFetching}
-                className="rounded-lg bg-[var(--app-link)] px-3 py-2 text-sm font-medium text-white disabled:opacity-50"
+                className="rounded-lg bg-[var(--app-button)] px-3 py-2 text-sm font-medium text-[var(--app-button-text)] disabled:opacity-50"
             >
                 {query.isFetching ? t('settings.storage.refreshing') : t('settings.storage.refresh')}
             </button>

web/src/routes/share/index.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import SharePage from './index'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => vi.fn(),
+    useSearch: () => ({}),
+}))
+
+vi.mock('@/lib/app-context', () => ({
+    useAppContext: () => ({ api: {} }),
+}))
+
+vi.mock('@/hooks/queries/useSessions', () => ({
+    useSessions: () => ({ sessions: [], isLoading: false }),
+}))
+
+vi.mock('@/lib/use-translation', () => ({
+    useTranslation: () => ({ t: (key: string) => key }),
+}))
+
+describe('SharePage', () => {
+    it('uses paired button theme colors for the missing-share action', async () => {
+        render(<SharePage />)
+
+        const backButton = await screen.findByRole('button', { name: 'share.backToSessions' })
+        expect(backButton).toHaveClass('bg-[var(--app-button)]')
+        expect(backButton).toHaveClass('text-[var(--app-button-text)]')
+        expect(backButton).not.toHaveClass('text-white')
+    })
+})

web/src/routes/share/index.tsx

@@ -203,7 +203,7 @@ export default function SharePage() {
                 <button
                     type="button"
                     onClick={() => navigate({ to: '/sessions', replace: true })}
-                    className="rounded-md bg-[var(--app-link)] px-3 py-1.5 text-sm text-white"
+                    className="rounded-md bg-[var(--app-button)] px-3 py-1.5 text-sm text-[var(--app-button-text)]"
                 >
                     {t('share.backToSessions')}
                 </button>