Update packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -61,16 +61,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,7 +89,7 @@ export function BalanceWithCarryover({
   goal,
   budgeted,
   longGoal,
-  disabled,
+  isDisabled,
   CarryoverIndicator: CarryoverIndicatorComponent = CarryoverIndicator,
   children,
   ...props
@@ -91,7 +100,7 @@ export function BalanceWithCarryover({
   const budgetedValue = useSheetValue(budgeted);
   const longGoalValue = useSheetValue(longGoal);
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
-  const getBalanceStyle = useCallback(
+  const getBalanceAmountStyle = useCallback(
     (balanceValue: number) =>
       makeBalanceAmountStyle(
         balanceValue,
@@ -102,7 +111,7 @@ export function BalanceWithCarryover({
   );
   const format = useFormat();
 
-  const differenceToGoal = useCallback(
+  const getDifferenceToGoal = useCallback(
     (balanceValue: number) =>
       longGoalValue === 1
         ? balanceValue - goalValue
@@ -110,93 +119,105 @@ 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 ? (
+          <Tooltip
-            children({ type, name, value: balanceValue })
+            content={
-          ) : (
+              <View style={{ padding: 10 }}>
-            <Tooltip
+                <span style={{ fontWeight: 'bold' }}>
-              content={
+                  {getDifferenceToGoal(balanceValue) === 0 ? (
-                <View style={{ padding: 10 }}>
+                    <span style={{ color: theme.noticeText }}>
-                  <span style={{ fontWeight: 'bold' }}>
+                      {t('Fully funded')}
-                    {differenceToGoal(balanceValue) === 0 ? (
+                    </span>
-                      <span style={{ color: theme.noticeText }}>
+                  ) : getDifferenceToGoal(balanceValue) > 0 ? (
-                        {t('Fully funded')}
+                    <span style={{ color: theme.noticeText }}>
-                      </span>
+                      {t('Overfunded ({{amount}})', {
-                    ) : differenceToGoal(balanceValue) > 0 ? (
+                        amount: format(
-                      <span style={{ color: theme.noticeText }}>
+                          getDifferenceToGoal(balanceValue),
-                        {t('Overfunded ({{amount}})', {
+                          'financial',
-                          amount: format(
+                        ),
-                            differenceToGoal(balanceValue),
+                      })}
-                            'financial',
+                    </span>
-                          ),
+                  ) : (
-                        })}
+                    <span style={{ color: theme.errorText }}>
-                      </span>
+                      {t('Underfunded ({{amount}})', {
-                    ) : (
+                        amount: format(
-                      <span style={{ color: theme.errorText }}>
+                          getDifferenceToGoal(balanceValue),
-                        {t('Underfunded ({{amount}})', {
+                          'financial',
-                          amount: format(
+                        ),
-                            differenceToGoal(balanceValue),
+                      })}
-                            'financial',
+                    </span>
-                          ),
+                  )}
-                        })}
+                </span>
-                      </span>
+                <GoalTooltipRow>
-                    )}
+                  <div>{t('Goal Type:')}</div>
-                  </span>
+                  <div>{longGoalValue === 1 ? t('Long') : t('Template')}</div>
-                  <GoalTooltipRow>
+                </GoalTooltipRow>
-                    <div>{t('Goal Type:')}</div>
+                <GoalTooltipRow>
-                    <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
+                  <div>{t('Goal:')}</div>
-                  </GoalTooltipRow>
+                  <div>{format(goalValue, 'financial')}</div>
-                  <GoalTooltipRow>
+                </GoalTooltipRow>
-                    <div>{t('Goal:')}</div>
+                <GoalTooltipRow>
-                    <div>{format(goalValue, 'financial')}</div>
+                  {longGoalValue !== 1 ? (
-                  </GoalTooltipRow>
+                    <>
-                  <GoalTooltipRow>
+                      <div>{t('Budgeted:')}</div>
-                    {longGoalValue !== 1 ? (
+                      <div>{format(budgetedValue, 'financial')}</div>
-                      <>
+                    </>
-                        <div>{t('Budgeted:')}</div>
+                  ) : (
-                        <div>{format(budgetedValue, 'financial')}</div>
+                    <>
-                      </>
+                      <div>{t('Balance:')}</div>
-                    ) : (
+                      <div>{format(balanceValue, type)}</div>
-                      <>
+                    </>
-                        <div>{t('Balance:')}</div>
+                  )}
-                        <div>{format(balanceValue, type)}</div>
+                </GoalTooltipRow>
-                      </>
+              </View>
-                    )}
+            }
-                  </GoalTooltipRow>
+            style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
-                </View>
+            placement="bottom"
-              }
+            triggerProps={{
-              style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+              delay: 750,
-              placement="bottom"
+              isDisabled: !isGoalTemplatesEnabled || goalValue == null,
-              triggerProps={{
+            }}
-                delay: 750,
+          >
-                isDisabled: !isGoalTemplatesEnabled || goalValue == null,
+            {children ? (
-              }}
+              children({
-            >
+                type,
+                name,
+                value: balanceValue,
+                className: getDefaultClassName(balanceValue),
+              })
+            ) : (
               <CellValueText
                 type={type}
                 name={name}
                 value={balanceValue}
-                className={String(
+                className={getDefaultClassName(balanceValue)}
-                  css({
-                    ...getBalanceStyle(balanceValue),
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    textAlign: 'right',
-                    ...(!disabled && {
-                      cursor: 'pointer',
-                    }),
-                    ':hover': { textDecoration: 'underline' },
-                  }),
-                )}
               />
-            </Tooltip>
+            )}
-          )}
+          </Tooltip>
+
           {carryoverValue && (
             <CarryoverIndicatorComponent
-              style={getBalanceStyle(balanceValue)}
+              style={getBalanceAmountStyle(balanceValue)}
             />
           )}
         </>

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)}

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)}

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)}

upcoming-release-notes/3492.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile balance modal not properly coloring balance.