From a9ee670eb43082f9204e281a4415c49222bf2d17 Mon Sep 17 00:00:00 2001
From: youngcw <calebyoung94@gmail.com>
Date: Wed, 26 Jun 2024 10:03:37 -0700
Subject: [PATCH] change the mobile budget balance colors to be the same as
desktop (#2940)
* change the mobile budget colors to be the same as desktop
* fix
* some lint and note
* actual note
* fix mad lint
* another lint
---
.../components/budget/BalanceWithCarryover.tsx | 6 +++---
.../components/mobile/budget/BudgetTable.jsx | 17 +++++++++++++----
upcoming-release-notes/2940.md | 6 ++++++
3 files changed, 22 insertions(+), 7 deletions(-)
create mode 100644 upcoming-release-notes/2940.md
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index 87a3f0769..c90a255d1 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -18,8 +18,8 @@ type BalanceWithCarryoverProps = Omit<
> & {
carryover: Binding;
balance: Binding;
- goal?: Binding;
- budgeted?: Binding;
+ goal: Binding;
+ budgeted: Binding;
disabled?: boolean;
carryoverStyle?: CSSProperties;
};
@@ -79,7 +79,7 @@ export function BalanceWithCarryover({
height={carryoverStyle?.height || 7}
style={makeBalanceAmountStyle(
balanceValue,
- goalValue,
+ isGoalTemplatesEnabled ? goalValue : null,
budgetedValue,
)}
/>
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index 96db06589..73be166ac 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -8,6 +8,7 @@ import { collapseModals, pushModal } from 'loot-core/client/actions';
import { rolloverBudget, reportBudget } from 'loot-core/src/client/queries';
import * as monthUtils from 'loot-core/src/shared/months';
+import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
import { useLocalPref } from '../../../hooks/useLocalPref';
import { useNavigate } from '../../../hooks/useNavigate';
import { SvgLogo } from '../../../icons/logo';
@@ -21,7 +22,7 @@ import { SvgViewShow } from '../../../icons/v2';
import { useResponsive } from '../../../ResponsiveProvider';
import { theme, styles } from '../../../style';
import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover';
-import { makeAmountFullStyle, makeAmountGrey } from '../../budget/util';
+import { makeAmountGrey, makeBalanceAmountStyle } from '../../budget/util';
import { Button } from '../../common/Button';
import { Card } from '../../common/Card';
import { Label } from '../../common/Label';
@@ -331,6 +332,12 @@ const ExpenseCategory = memo(function ExpenseCategory({
}) {
const opacity = blank ? 0 : 1;
+ const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
+ const goalTemp = useSheetValue(goal);
+ const goalValue = isGoalTemplatesEnabled ? goalTemp : null;
+ const budgetedTemp = useSheetValue(budgeted);
+ const budgetedValue = isGoalTemplatesEnabled ? budgetedTemp : null;
+
const [budgetType = 'rollover'] = useLocalPref('budgetType');
const dispatch = useDispatch();
@@ -574,9 +581,11 @@ const ExpenseCategory = memo(function ExpenseCategory({
mode="oneline"
style={{
maxWidth: columnWidth,
- ...makeAmountFullStyle(value, {
- zeroColor: theme.pillTextSubdued,
- }),
+ ...makeBalanceAmountStyle(
+ value,
+ goalValue,
+ budgetedValue,
+ ),
textAlign: 'right',
fontSize: 12,
}}
diff --git a/upcoming-release-notes/2940.md b/upcoming-release-notes/2940.md
new file mode 100644
index 000000000..5bbf2c383
--- /dev/null
+++ b/upcoming-release-notes/2940.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [youngcw]
+---
+
+Fix mobile budget coloring to show template colors
--
GitLab