From 6e627c4e2e20f350454719bbb4f9eb822bc2e8bb Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Wed, 25 Sep 2024 21:02:42 -0700
Subject: [PATCH] Fix mobile balance modal colors (#3492)
* Fix mobile balance modal colors
* Release notes
* Update packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* Disable balance tooltip for mobile
* Fix lint error
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
.../budget/BalanceWithCarryover.tsx | 186 ++++++++++--------
.../tracking/TrackingBudgetComponents.tsx | 2 +-
.../modals/EnvelopeBalanceMenuModal.tsx | 2 +-
.../modals/TrackingBalanceMenuModal.tsx | 2 +-
upcoming-release-notes/3492.md | 6 +
5 files changed, 114 insertions(+), 84 deletions(-)
create mode 100644 upcoming-release-notes/3492.md
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index bc107376c..c751cc14a 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -10,6 +10,7 @@ import { css } from 'glamor';
import { useFeatureFlag } from '../../hooks/useFeatureFlag';
import { SvgArrowThinRight } from '../../icons/v1';
+import { useResponsive } from '../../ResponsiveProvider';
import { type CSSProperties, theme, styles } from '../../style';
import { Tooltip } from '../common/Tooltip';
import { View } from '../common/View';
@@ -61,16 +62,25 @@ function GoalTooltipRow({ children }) {
);
}
+type CellValueChildren = ComponentPropsWithoutRef<typeof CellValue>['children'];
+
+type ChildrenWithClassName = (
+ props: Parameters<CellValueChildren>[0] & {
+ className: string;
+ },
+) => ReturnType<CellValueChildren>;
+
type BalanceWithCarryoverProps = Omit<
ComponentPropsWithoutRef<typeof CellValue>,
- 'binding'
+ 'children' | 'binding'
> & {
+ children?: ChildrenWithClassName;
carryover: Binding<'envelope-budget', 'carryover'>;
balance: Binding<'envelope-budget', 'leftover'>;
goal: Binding<'envelope-budget', 'goal'>;
budgeted: Binding<'envelope-budget', 'budget'>;
longGoal: Binding<'envelope-budget', 'long-goal'>;
- disabled?: boolean;
+ isDisabled?: boolean;
CarryoverIndicator?: ComponentType<CarryoverIndicatorProps>;
};
@@ -80,18 +90,19 @@ export function BalanceWithCarryover({
goal,
budgeted,
longGoal,
- disabled,
+ isDisabled,
CarryoverIndicator: CarryoverIndicatorComponent = CarryoverIndicator,
children,
...props
}: BalanceWithCarryoverProps) {
const { t } = useTranslation();
+ const { isNarrowWidth } = useResponsive();
const carryoverValue = useSheetValue(carryover);
const goalValue = useSheetValue(goal);
const budgetedValue = useSheetValue(budgeted);
const longGoalValue = useSheetValue(longGoal);
const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
- const getBalanceStyle = useCallback(
+ const getBalanceAmountStyle = useCallback(
(balanceValue: number) =>
makeBalanceAmountStyle(
balanceValue,
@@ -102,7 +113,7 @@ export function BalanceWithCarryover({
);
const format = useFormat();
- const differenceToGoal = useCallback(
+ const getDifferenceToGoal = useCallback(
(balanceValue: number) =>
longGoalValue === 1
? balanceValue - goalValue
@@ -110,93 +121,106 @@ export function BalanceWithCarryover({
[budgetedValue, goalValue, longGoalValue],
);
+ const getDefaultClassName = useCallback(
+ (balanceValue: number) =>
+ String(
+ css({
+ ...getBalanceAmountStyle(balanceValue),
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ textAlign: 'right',
+ ...(!isDisabled && {
+ cursor: 'pointer',
+ }),
+ ':hover': { textDecoration: 'underline' },
+ }),
+ ),
+ [getBalanceAmountStyle, isDisabled],
+ );
+
return (
<CellValue binding={balance} type="financial" {...props}>
{({ type, name, value: balanceValue }) => (
<>
- {children ? (
- children({ type, name, value: balanceValue })
- ) : (
- <Tooltip
- content={
- <View style={{ padding: 10 }}>
- <span style={{ fontWeight: 'bold' }}>
- {differenceToGoal(balanceValue) === 0 ? (
- <span style={{ color: theme.noticeText }}>
- {t('Fully funded')}
- </span>
- ) : differenceToGoal(balanceValue) > 0 ? (
- <span style={{ color: theme.noticeText }}>
- {t('Overfunded ({{amount}})', {
- amount: format(
- differenceToGoal(balanceValue),
- 'financial',
- ),
- })}
- </span>
- ) : (
- <span style={{ color: theme.errorText }}>
- {t('Underfunded ({{amount}})', {
- amount: format(
- differenceToGoal(balanceValue),
- 'financial',
- ),
- })}
- </span>
- )}
- </span>
- <GoalTooltipRow>
- <div>{t('Goal Type:')}</div>
- <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
- </GoalTooltipRow>
- <GoalTooltipRow>
- <div>{t('Goal:')}</div>
- <div>{format(goalValue, 'financial')}</div>
- </GoalTooltipRow>
- <GoalTooltipRow>
- {longGoalValue !== 1 ? (
- <>
- <div>{t('Budgeted:')}</div>
- <div>{format(budgetedValue, 'financial')}</div>
- </>
- ) : (
- <>
- <div>{t('Balance:')}</div>
- <div>{format(balanceValue, type)}</div>
- </>
- )}
- </GoalTooltipRow>
- </View>
- }
- style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
- placement="bottom"
- triggerProps={{
- delay: 750,
- isDisabled: !isGoalTemplatesEnabled || goalValue == null,
- }}
- >
+ <Tooltip
+ content={
+ <View style={{ padding: 10 }}>
+ <span style={{ fontWeight: 'bold' }}>
+ {getDifferenceToGoal(balanceValue) === 0 ? (
+ <span style={{ color: theme.noticeText }}>
+ {t('Fully funded')}
+ </span>
+ ) : getDifferenceToGoal(balanceValue) > 0 ? (
+ <span style={{ color: theme.noticeText }}>
+ {t('Overfunded ({{amount}})', {
+ amount: format(
+ getDifferenceToGoal(balanceValue),
+ 'financial',
+ ),
+ })}
+ </span>
+ ) : (
+ <span style={{ color: theme.errorText }}>
+ {t('Underfunded ({{amount}})', {
+ amount: format(
+ getDifferenceToGoal(balanceValue),
+ 'financial',
+ ),
+ })}
+ </span>
+ )}
+ </span>
+ <GoalTooltipRow>
+ <div>{t('Goal Type:')}</div>
+ <div>{longGoalValue === 1 ? t('Long') : t('Template')}</div>
+ </GoalTooltipRow>
+ <GoalTooltipRow>
+ <div>{t('Goal:')}</div>
+ <div>{format(goalValue, 'financial')}</div>
+ </GoalTooltipRow>
+ <GoalTooltipRow>
+ {longGoalValue !== 1 ? (
+ <>
+ <div>{t('Budgeted:')}</div>
+ <div>{format(budgetedValue, 'financial')}</div>
+ </>
+ ) : (
+ <>
+ <div>{t('Balance:')}</div>
+ <div>{format(balanceValue, type)}</div>
+ </>
+ )}
+ </GoalTooltipRow>
+ </View>
+ }
+ style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+ placement="bottom"
+ triggerProps={{
+ delay: 750,
+ isDisabled:
+ !isGoalTemplatesEnabled || goalValue == null || isNarrowWidth,
+ }}
+ >
+ {children ? (
+ children({
+ type,
+ name,
+ value: balanceValue,
+ className: getDefaultClassName(balanceValue),
+ })
+ ) : (
<CellValueText
type={type}
name={name}
value={balanceValue}
- className={String(
- css({
- ...getBalanceStyle(balanceValue),
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- textAlign: 'right',
- ...(!disabled && {
- cursor: 'pointer',
- }),
- ':hover': { textDecoration: 'underline' },
- }),
- )}
+ className={getDefaultClassName(balanceValue)}
/>
- </Tooltip>
- )}
+ )}
+ </Tooltip>
+
{carryoverValue && (
<CarryoverIndicatorComponent
- style={getBalanceStyle(balanceValue)}
+ style={getBalanceAmountStyle(balanceValue)}
/>
)}
</>
diff --git a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
index 1093f16c6..c241bf876 100644
--- a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
@@ -398,7 +398,7 @@ export const CategoryMonth = memo(function CategoryMonth({
onClick={() => !category.is_income && setBalanceMenuOpen(true)}
>
<BalanceWithCarryover
- disabled={category.is_income}
+ isDisabled={category.is_income}
carryover={trackingBudget.catCarryover(category.id)}
balance={trackingBudget.catBalance(category.id)}
goal={trackingBudget.catGoal(category.id)}
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
index fdaa827bf..b0ac9c706 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
@@ -66,7 +66,7 @@ export function EnvelopeBalanceMenuModal({
Balance
</Text>
<BalanceWithCarryover
- disabled
+ isDisabled
carryover={envelopeBudget.catCarryover(categoryId)}
balance={envelopeBudget.catBalance(categoryId)}
goal={envelopeBudget.catGoal(categoryId)}
diff --git a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
index 3850eaa4c..3581c7900 100644
--- a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
@@ -64,7 +64,7 @@ export function TrackingBalanceMenuModal({
Balance
</Text>
<BalanceWithCarryover
- disabled
+ isDisabled
carryover={trackingBudget.catCarryover(categoryId)}
balance={trackingBudget.catBalance(categoryId)}
goal={trackingBudget.catGoal(categoryId)}
diff --git a/upcoming-release-notes/3492.md b/upcoming-release-notes/3492.md
new file mode 100644
index 000000000..cd068c750
--- /dev/null
+++ b/upcoming-release-notes/3492.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile balance modal not properly coloring balance.
--
GitLab