fix: resolve hardcoded light backgrounds breaking dark mode across 5 pages
Replace hardcoded light colors (#e6f9e6, #fde8e8, white, #e9ecef) with theme-aware alternatives using usePreferencesStore. Affected pages: - CashFlowForecastPage: forecast row and striped row backgrounds - MonthlyActualsPage: sticky column backgrounds, borders, section headers - BudgetsPage: sticky column backgrounds, borders, section headers - BudgetVsActualPage: income/expense section header backgrounds - QuarterlyReportPage: income/expense and total row backgrounds Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@ import {
|
||||
} from '@mantine/core';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import api from '../../services/api';
|
||||
import { usePreferencesStore } from '../../stores/preferencesStore';
|
||||
|
||||
interface BudgetVsActualLine {
|
||||
account_id: string;
|
||||
@@ -46,6 +47,9 @@ const monthFilterOptions = [
|
||||
export function BudgetVsActualPage() {
|
||||
const [year, setYear] = useState(new Date().getFullYear().toString());
|
||||
const [month, setMonth] = useState('');
|
||||
const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
|
||||
const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
|
||||
const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';
|
||||
|
||||
const yearOptions = Array.from({ length: 5 }, (_, i) => {
|
||||
const y = new Date().getFullYear() - 2 + i;
|
||||
@@ -92,7 +96,7 @@ export function BudgetVsActualPage() {
|
||||
|
||||
const renderSection = (title: string, sectionLines: BudgetVsActualLine[], isExpense: boolean, totalBudget: number, totalActual: number) => (
|
||||
<>
|
||||
<Table.Tr style={{ background: isExpense ? '#fde8e8' : '#e6f9e6' }}>
|
||||
<Table.Tr style={{ background: isExpense ? expenseBg : incomeBg }}>
|
||||
<Table.Td colSpan={6} fw={700}>{title}</Table.Td>
|
||||
</Table.Tr>
|
||||
{sectionLines.map((line) => {
|
||||
|
||||
Reference in New Issue
Block a user