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>
actualbudget · Sep 26, 2024 · 6e627c4 · 6e627c4
1 parent 0f41e95
commit 6e627c4
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 84 deletions.
diff --git 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,101 +113,114 @@ export function BalanceWithCarryover({
   );
   const format = useFormat();
 
-  const differenceToGoal = useCallback(
+  const getDifferenceToGoal = useCallback(
     (balanceValue: number) =>
       longGoalValue === 1
         ? balanceValue - goalValue
         : budgetedValue - goalValue,
     [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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix mobile balance modal not properly coloring balance.