From fe922ec22e4bb08ad97d5dcb83116e2b010f6f5e Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Sat, 10 Aug 2024 14:00:46 -0500
Subject: [PATCH] Highlight current month in budgets. (#3111)
---
.../src/components/budget/MonthPicker.tsx | 11 ++++++++
.../budget/report/ReportComponents.tsx | 20 ++++++++++++--
.../report/budgetsummary/BudgetSummary.tsx | 5 +++-
.../budget/rollover/RolloverComponents.tsx | 27 +++++++++++++++++--
.../rollover/budgetsummary/BudgetSummary.tsx | 5 +++-
packages/desktop-client/src/style/palette.ts | 1 +
.../desktop-client/src/style/themes/dark.ts | 5 ++++
.../src/style/themes/development.ts | 5 ++++
.../desktop-client/src/style/themes/light.ts | 5 ++++
.../src/style/themes/midnight.ts | 5 ++++
packages/loot-core/src/shared/months.ts | 4 +++
upcoming-release-notes/3111.md | 6 +++++
12 files changed, 93 insertions(+), 6 deletions(-)
create mode 100644 upcoming-release-notes/3111.md
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.tsx b/packages/desktop-client/src/components/budget/MonthPicker.tsx
index 160bcd9a6..501bafd79 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 02c49d315..b0f234534 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 6f524a60e..282db6297 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 49aa03054..9b7ccc9b1 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 0ce4d5c88..746f00c39 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 fa8bbe7f2..3e2cf4788 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 3385e100a..722d886ab 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 3d73f670b..8a1a1f955 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 ad8318f86..e5ce2e1db 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 4ee705558..f19701e6d 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 89aee77ea..1ebbb9759 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 000000000..5faa6916c
--- /dev/null
+++ b/upcoming-release-notes/3111.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Highlight current month in budgets.
--
GitLab