diff --git a/packages/desktop-client/src/components/budget/MonthPicker.tsx b/packages/desktop-client/src/components/budget/MonthPicker.tsx
index 160bcd9a6f4fa8d1824d52e3436dd7c534555bff..501bafd79ffe7a6f219e599f960bce34b13391e9 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.tsx
+++ b/packages/desktop-client/src/components/budget/MonthPicker.tsx
@@ -133,6 +133,17 @@ export const MonthPicker = ({
!selected && {
backgroundColor: theme.buttonBareBackgroundHover,
}),
+ ...(!hovered &&
+ !selected &&
+ current && {
+ backgroundColor: theme.buttonBareBackgroundHover,
+ filter: 'brightness(120%)',
+ }),
+ ...(hovered &&
+ selected &&
+ current && {
+ filter: 'brightness(120%)',
+ }),
...(hovered &&
selected && {
backgroundColor: theme.tableBorderHover,
diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
index 02c49d315512cc1c19fcf935dc8e0a21135af676..b0f2345343ac92af078edfe1fc0d52ce9ebac977 100644
--- a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
+++ b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
@@ -3,6 +3,7 @@ import React, { memo, useRef, useState } from 'react';
import { reportBudget } from 'loot-core/src/client/queries';
import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
+import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import { SvgCheveronDown } from '../../../icons/v1';
@@ -88,13 +89,25 @@ export function IncomeHeaderMonth() {
}
type GroupMonthProps = {
+ month: string;
group: { id: string; is_income: boolean };
};
-export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
+export const GroupMonth = memo(function GroupMonth({
+ month,
+ group,
+}: GroupMonthProps) {
const { id } = group;
return (
- <View style={{ flex: 1, flexDirection: 'row' }}>
+ <View
+ style={{
+ flex: 1,
+ flexDirection: 'row',
+ backgroundColor: monthUtils.isCurrentMonth(month)
+ ? theme.budgetHeaderCurrentMonth
+ : theme.budgetHeaderOtherMonth,
+ }}
+ >
<SheetCell
name="budgeted"
width="flex"
@@ -174,6 +187,9 @@ export const CategoryMonth = memo(function CategoryMonth({
style={{
flex: 1,
flexDirection: 'row',
+ backgroundColor: monthUtils.isCurrentMonth(month)
+ ? theme.budgetCurrentMonth
+ : theme.budgetOtherMonth,
'& .hover-visible': {
opacity: 0,
transition: 'opacity .25s',
diff --git a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
index 6f524a60e635fe4575b8ec3aa632bf3d3b70b988..282db62978169f75eac8a9a1440e1b7790233a92 100644
--- a/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/budgetsummary/BudgetSummary.tsx
@@ -50,7 +50,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
return (
<View
style={{
- backgroundColor: theme.tableBackground,
+ backgroundColor:
+ month === currentMonth
+ ? theme.budgetCurrentMonth
+ : theme.budgetOtherMonth,
boxShadow: styles.cardShadow,
borderRadius: 6,
marginLeft: 0,
diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
index 49aa030549f5276ad4cdc2a9e6a1aef7a35c7665..9b7ccc9b10e7ad4000c3eb1558447fe4f5d949d2 100644
--- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
@@ -3,6 +3,7 @@ import { memo, useRef, useState } from 'react';
import { rolloverBudget } from 'loot-core/src/client/queries';
import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
+import * as monthUtils from 'loot-core/src/shared/months';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import { SvgCheveronDown } from '../../../icons/v1';
@@ -113,15 +114,25 @@ export function IncomeHeaderMonth() {
}
type ExpenseGroupMonthProps = {
+ month: string;
group: { id: string };
};
export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
+ month,
group,
}: ExpenseGroupMonthProps) {
const { id } = group;
return (
- <View style={{ flex: 1, flexDirection: 'row' }}>
+ <View
+ style={{
+ flex: 1,
+ flexDirection: 'row',
+ backgroundColor: monthUtils.isCurrentMonth(month)
+ ? theme.budgetHeaderCurrentMonth
+ : theme.budgetHeaderOtherMonth,
+ }}
+ >
<RolloverSheetCell
name="budgeted"
width="flex"
@@ -197,6 +208,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
style={{
flex: 1,
flexDirection: 'row',
+ backgroundColor: monthUtils.isCurrentMonth(month)
+ ? theme.budgetCurrentMonth
+ : theme.budgetOtherMonth,
'& .hover-visible': {
opacity: 0,
transition: 'opacity .25s',
@@ -379,7 +393,10 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
);
});
-export function IncomeGroupMonth() {
+type IncomeGroupMonthProps = {
+ month: string;
+};
+export function IncomeGroupMonth({ month }: IncomeGroupMonthProps) {
return (
<View style={{ flex: 1 }}>
<RolloverSheetCell
@@ -390,6 +407,9 @@ export function IncomeGroupMonth() {
fontWeight: 600,
paddingRight: styles.monthRightPadding,
...styles.tnum,
+ backgroundColor: monthUtils.isCurrentMonth(month)
+ ? theme.budgetHeaderCurrentMonth
+ : theme.budgetHeaderOtherMonth,
}}
valueProps={{
binding: rolloverBudget.groupIncomeReceived,
@@ -426,6 +446,9 @@ export function IncomeCategoryMonth({
paddingRight: styles.monthRightPadding,
textAlign: 'right',
...(isLast && { borderBottomWidth: 0 }),
+ backgroundColor: monthUtils.isCurrentMonth(month)
+ ? theme.budgetCurrentMonth
+ : theme.budgetOtherMonth,
}}
>
<span onClick={() => onShowActivity(category.id, month)}>
diff --git a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
index 0ce4d5c887efb211ee48028fb40b6c2e78d56963..746f00c395a4f7a4a903a18228ee2c66ef8b12bf 100644
--- a/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/budgetsummary/BudgetSummary.tsx
@@ -51,7 +51,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
<View
data-testid="budget-summary"
style={{
- backgroundColor: theme.tableBackground,
+ backgroundColor:
+ month === currentMonth
+ ? theme.budgetCurrentMonth
+ : theme.budgetOtherMonth,
boxShadow: styles.cardShadow,
borderRadius: 6,
marginLeft: 0,
diff --git a/packages/desktop-client/src/style/palette.ts b/packages/desktop-client/src/style/palette.ts
index fa8bbe7f229145dd9b5c4bb8aae05090bee95122..3e2cf47883bc7229f20d9513ba9f67260396321f 100644
--- a/packages/desktop-client/src/style/palette.ts
+++ b/packages/desktop-client/src/style/palette.ts
@@ -2,6 +2,7 @@ import * as oldColors from './colors';
// Only for use in contextual color definitions
export const gray50 = '#f6f8fa';
+export const gray80 = '#f0f4f6';
export const gray100 = '#e8ecf0';
export const gray150 = '#d4dae0';
export const gray200 = '#bdc5cf';
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 3385e100a4223b9c8e3e50604cc56df376b4224c..722d886ab8435ce0d82f2e086a90f64c2bc15ca0 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -196,3 +196,8 @@ export const reportsInnerLabel = colorPalette.navy800;
export const noteTagBackground = colorPalette.purple700;
export const noteTagBackgroundHover = colorPalette.purple500;
export const noteTagText = colorPalette.purple100;
+
+export const budgetOtherMonth = colorPalette.navy900;
+export const budgetCurrentMonth = tableBackground;
+export const budgetHeaderOtherMonth = colorPalette.navy800;
+export const budgetHeaderCurrentMonth = tableHeaderBackground;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index 3d73f670b6407567bce82ae2f95e47a81ab4f0d7..8a1a1f955d7537b8b160a3d86300d1d0c1eb6920 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -195,3 +195,8 @@ export const reportsInnerLabel = colorPalette.navy800;
export const noteTagBackground = colorPalette.purple100;
export const noteTagBackgroundHover = colorPalette.purple150;
export const noteTagText = colorPalette.purple700;
+
+export const budgetCurrentMonth = tableBackground;
+export const budgetOtherMonth = colorPalette.gray50;
+export const budgetHeaderCurrentMonth = budgetOtherMonth;
+export const budgetHeaderOtherMonth = colorPalette.gray80;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index ad8318f869e0445a2ef2e64499c342206fee7a14..e5ce2e1db16115eb83c260727b6ff4cd48d9e0d3 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -198,3 +198,8 @@ export const reportsInnerLabel = colorPalette.navy800;
export const noteTagBackground = colorPalette.purple100;
export const noteTagBackgroundHover = colorPalette.purple150;
export const noteTagText = colorPalette.purple700;
+
+export const budgetCurrentMonth = tableBackground;
+export const budgetOtherMonth = colorPalette.gray50;
+export const budgetHeaderCurrentMonth = budgetOtherMonth;
+export const budgetHeaderOtherMonth = colorPalette.gray80;
diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
index 4ee705558857f598500956d8305fe3a106b69131..f19701e6db2dd0b1878b6a913a2804bdf86aeed4 100644
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/packages/desktop-client/src/style/themes/midnight.ts
@@ -198,3 +198,8 @@ export const reportsInnerLabel = colorPalette.navy800;
export const noteTagBackground = colorPalette.purple800;
export const noteTagBackgroundHover = colorPalette.purple600;
export const noteTagText = colorPalette.purple100;
+
+export const budgetOtherMonth = colorPalette.gray700;
+export const budgetCurrentMonth = tableBackground;
+export const budgetHeaderOtherMonth = colorPalette.gray800;
+export const budgetHeaderCurrentMonth = tableHeaderBackground;
diff --git a/packages/loot-core/src/shared/months.ts b/packages/loot-core/src/shared/months.ts
index 89aee77ea0e2e47c29252f8948ef0e9642057e0b..1ebbb9759910c2b966a153d8f80e81f9f8b2ed1d 100644
--- a/packages/loot-core/src/shared/months.ts
+++ b/packages/loot-core/src/shared/months.ts
@@ -216,6 +216,10 @@ export function isAfter(month1: DateLike, month2: DateLike): boolean {
return d.isAfter(_parse(month1), _parse(month2));
}
+export function isCurrentMonth(month: DateLike): boolean {
+ return month === currentMonth();
+}
+
// TODO: This doesn't really fit in this module anymore, should
// probably live elsewhere
export function bounds(month: DateLike): { start: number; end: number } {
diff --git a/upcoming-release-notes/3111.md b/upcoming-release-notes/3111.md
new file mode 100644
index 0000000000000000000000000000000000000000..5faa6916c204bb6de01d9ead61c98f7d8d043a76
--- /dev/null
+++ b/upcoming-release-notes/3111.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Highlight current month in budgets.