Use consistent color variables on Budget Page. (#6820)

* Change color of budget table scrollbar. * Update budget sidebar to use budget colors. * Update fontWeight for 'Category' to match rest of table * Update to use budget background * Update ExpenseGroup to use budget color * Update IncomeGroup to use budget color * Update SidebarCategory colors Change drag/drop to buttonPrimaryBackground so it will always be visible in any custom theme. Background to budget color. * Update SidebarGroup background to budget color * Update EnvelopeBudgetComponents Add 'budgetNumberNeutral' to cheveronDown in budgeted field instead of using default bare button text incases where bare button is set to normal button text and normal button is inverted. remove mobile color variable for shadow * Update BudgetTotals.tsx Use tableHeaderText for header. * Update BudgetSummary.tsx Use budget colors * Update MonthPicker.tsx change selected months at top from tableBorderHover color to buttonPrimaryBackground. * [autofix.ci] apply automated fixes * Update EnvelopeBudgetComponents.tsx * Update BudgetTotals.tsx revert * Update SidebarCategory.tsx * Update TrackingBudgetComponents to use budget colors * [autofix.ci] apply automated fixes * Update BudgetSummary to use budget colors * Update BudgetTotal.tsx * Update ExpenseProgress.tsx * Update IncomeProgress.tsx * Update Saved.tsx * Use consistent color variables on budget pages. * Update IncomeProgress.tsx * Update ExpenseProgress.tsx * Update VRT screenshots Auto-generated by VRT workflow PR: #6820 * Update EnvelopeBudgetComponents Budget total header to follow current/other month style. * Update EnvelopeBudgetComponents.tsx * [autofix.ci] apply automated fixes * Update EnvelopeBudgetComponents.tsx * Update EnvelopeBudgetComponents.tsx * [autofix.ci] apply automated fixes * Update EnvelopeBudgetComponents.tsx * Revert EnvelopeBudgetComponents.tsx * [autofix.ci] apply automated fixes * Update EnvelopeBudgetComponents.tsx * Update EnvelopeBudgetComponents.tsx * Update EnvelopeBudgetComponents.tsx * Revert again :) EnvelopeBudgetComponents.tsx --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2026-03-11 20:44:32 -05:00 · 2026-02-04 18:26:18 -05:00
parent 11d0b9d824
commit 554d0b6150
21 changed files with 56 additions and 45 deletions
--- a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png
+++ b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--0ba04-nt-amount-opens-the-budget-summary-menu-modal-1-chromium-linux.png
--- a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png
+++ b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--1ce6d-nt-amount-opens-the-budget-summary-menu-modal-2-chromium-linux.png
--- a/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png
+++ b/packages/desktop-client/e2e/budget.mobile.test.ts-snapshots/Mobile-Budget-Tracking-checks-that-clicking--f224f-nt-amount-opens-the-budget-summary-menu-modal-3-chromium-linux.png
--- a/packages/desktop-client/src/components/budget/BudgetCategories.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetCategories.tsx
@@ -241,7 +241,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
      <View
        style={{
          marginBottom: 10,
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.budgetCurrentMonth, // match budget colors, not generic table colors.
          overflow: 'hidden',
          boxShadow: styles.cardShadow,
          borderRadius: '0 0 4px 4px',
@@ -254,7 +254,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
            case 'new-group':
              content = (
                <Row
-                  style={{ backgroundColor: theme.tableRowHeaderBackground }}
+                  style={{ backgroundColor: theme.budgetHeaderCurrentMonth }}
                >
                  <SidebarGroup
                    group={{ id: 'new', name: '' }}
@@ -331,7 +331,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
                <View
                  style={{
                    height: styles.incomeHeaderHeight,
-                    backgroundColor: theme.tableBackground,
+                    backgroundColor: theme.budgetCurrentMonth,
                  }}
                >
                  <IncomeHeader onShowNewGroup={onShowNewGroup} />
@@ -392,7 +392,7 @@ export const BudgetCategories = memo<BudgetCategoriesProps>(
                  dragState
                    ? {}
                    : {
-                        ':hover': { backgroundColor: theme.tableBackground },
+                        ':hover': { backgroundColor: theme.budgetCurrentMonth },
                      }
                }
              >
--- a/packages/desktop-client/src/components/budget/BudgetTable.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTable.tsx
@@ -229,7 +229,8 @@ export function BudgetTable(props: BudgetTableProps) {
            backgroundColor: 'transparent',
          },
          '& ::-webkit-scrollbar-thumb:vertical': {
-            backgroundColor: theme.tableHeaderBackground,
+            backgroundColor: theme.pageTextSubdued,
+            // changed from tableHeaderBackground. pageTextSubdued is always visible on pageBackground
          },
        }),
      }}
--- a/packages/desktop-client/src/components/budget/BudgetTotals.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -63,7 +63,7 @@ export const BudgetTotals = memo(function BudgetTotals({
    <View
      data-testid="budget-totals"
      style={{
-        backgroundColor: theme.tableBackground,
+        backgroundColor: theme.budgetCurrentMonth, //use budget colors, not generic table colors
        flexDirection: 'row',
        flexShrink: 0,
        boxShadow: styles.cardShadow,
@@ -83,7 +83,7 @@ export const BudgetTotals = memo(function BudgetTotals({
      <View
        style={{
          width: 200 + 100 * categoryExpandedState,
-          color: theme.pageTextLight,
+          color: theme.tableHeaderText,
          justifyContent: 'center',
          paddingLeft: 5,
          paddingRight: 5,
@@ -141,7 +141,7 @@ export const BudgetTotals = memo(function BudgetTotals({
          <SvgDotsHorizontalTriple
            width={15}
            height={15}
-            style={{ color: theme.pageTextLight }}
+            style={{ color: theme.tableHeaderText }}
          />
        </Button>

--- a/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
+++ b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
@@ -81,7 +81,7 @@ export function ExpenseCategory({
      innerRef={dropRef}
      collapsed
      style={{
-        backgroundColor: theme.tableBackground,
+        backgroundColor: theme.budgetCurrentMonth,
        opacity: cat.hidden || categoryGroup?.hidden ? 0.5 : undefined,
      }}
    >
--- a/packages/desktop-client/src/components/budget/ExpenseGroup.tsx
+++ b/packages/desktop-client/src/components/budget/ExpenseGroup.tsx
@@ -95,7 +95,7 @@ export function ExpenseGroup({
      style={{
        fontWeight: 600,
        opacity: group.hidden ? 0.33 : undefined,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.budgetHeaderCurrentMonth, //use budget colors
      }}
    >
      {dragState && !dragState.preview && dragState.type === 'group' && (
--- a/packages/desktop-client/src/components/budget/IncomeGroup.tsx
+++ b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
@@ -37,7 +37,7 @@ export function IncomeGroup({
      collapsed
      style={{
        fontWeight: 600,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.budgetHeaderCurrentMonth, //use budget color
      }}
    >
      <SidebarGroup
--- a/packages/desktop-client/src/components/budget/MonthPicker.tsx
+++ b/packages/desktop-client/src/components/budget/MonthPicker.tsx
@@ -166,7 +166,7 @@ export const MonthPicker = ({
                }),
                ...styles.smallText,
                ...(selected && {
-                  backgroundColor: theme.tableBorderHover,
+                  backgroundColor: theme.buttonPrimaryBackground,
                  color: theme.buttonPrimaryText,
                }),
                ...((hovered || selected) && {
@@ -195,7 +195,7 @@ export const MonthPicker = ({
                  }),
                ...(hovered &&
                  selected && {
-                    backgroundColor: theme.tableBorderHover,
+                    backgroundColor: theme.buttonPrimaryBackground,
                  }),
                ...((idx === firstSelectedIndex ||
                  (idx === hoverId && !selected)) && {
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -155,11 +155,11 @@ export function SidebarCategory({
              display: 'flex',
            },
          }),
-        ...(dragging && { color: theme.formInputTextPlaceholderSelected }),
+        ...(dragging && { color: theme.pageTextSubdued }), //always visible color
        // The zIndex here forces the the view on top of a row below
        // it that may be "collapsed" and show a border on top
        ...(dragPreview && {
-          backgroundColor: theme.tableBackground,
+          backgroundColor: theme.budgetCurrentMonth,
          zIndex: 10000,
          borderRadius: 6,
          overflow: 'hidden',
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -207,7 +207,7 @@ export function SidebarGroup({
      style={{
        ...style,
        width: 200 + 100 * categoryExpandedState,
-        backgroundColor: theme.tableRowHeaderBackground,
+        backgroundColor: theme.budgetHeaderCurrentMonth,
        overflow: 'hidden',
        '& .hover-visible': {
          display: 'none',
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -95,6 +95,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
        marginRight: styles.monthRightPadding,
        paddingTop: 10,
        paddingBottom: 10,
+        backgroundColor: theme.budgetCurrentMonth,
      }}
    >
      <View style={headerLabelStyle}>
@@ -140,6 +141,7 @@ export function IncomeHeaderMonth() {
        color: theme.tableHeaderText,
        alignItems: 'center',
        paddingRight: 10,
+        backgroundColor: theme.budgetCurrentMonth,
      }}
    >
      <View style={{ flex: 1, textAlign: 'right' }}>
@@ -307,6 +309,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
                setBudgetMenuOpen(true);
              }}
              style={{
+                color: theme.budgetNumberNeutral, //make sure button is visible when hovered
                padding: 3,
              }}
            >
@@ -380,8 +383,8 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
            padding: '0 4px',
            borderRadius: 4,
            ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
-              backgroundColor: theme.tableBackground,
+              boxShadow: 'inset 0 0 0 1px ' + theme.pageTextSubdued, //remove mobile color variable
+              backgroundColor: theme.budgetCurrentMonth,
            },
          }}
          valueProps={{
@@ -396,7 +399,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
              onEdit(null);
            },
            style: {
-              backgroundColor: theme.tableBackground,
+              backgroundColor: theme.budgetCurrentMonth,
            },
          }}
          onSave={(parsedIntegerAmount: number | null) => {
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
@@ -116,7 +116,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
                width={13}
                height={13}
                // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.tableTextLight, margin: 1 }}
+                style={{ color: theme.pageTextLight, margin: 1 }}
              />
            </Button>
          </View>
@@ -151,7 +151,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
                width={15}
                height={15}
                tooltipPosition="bottom right"
-                defaultColor={theme.tableTextLight}
+                defaultColor={theme.pageTextLight}
              />
            </View>
            <View style={{ userSelect: 'none', marginLeft: 2 }}>
@@ -254,7 +254,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
              alignItems: 'center',
              padding: '10px 20px',
              justifyContent: 'space-between',
-              backgroundColor: theme.tableBackground,
+              backgroundColor: theme.budgetCurrentMonth,
              borderTop: '1px solid ' + theme.tableBorder,
            }}
          >
@@ -272,7 +272,7 @@ export const BudgetSummary = memo(({ month }: BudgetSummaryProps) => {
              style={{
                padding: '5px 0',
                marginTop: 17,
-                backgroundColor: theme.tableRowHeaderBackground,
+                backgroundColor: theme.budgetHeaderCurrentMonth,
                borderTopWidth: 1,
                borderBottomWidth: 1,
                borderColor: theme.tableBorder,
--- a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
@@ -74,7 +74,7 @@ const headerLabelStyle: CSSProperties = {
 };

 const cellStyle: CSSProperties = {
-  color: theme.pageTextLight,
+  color: theme.tableHeaderText,
  fontWeight: 600,
 };

@@ -90,7 +90,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
      }}
    >
      <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
          <Trans>Budgeted</Trans>
        </Text>
        <TrackingCellValue
@@ -101,7 +101,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
        </TrackingCellValue>
      </View>
      <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
          <Trans>Spent</Trans>
        </Text>
        <TrackingCellValue binding={trackingBudget.totalSpent} type="financial">
@@ -109,7 +109,7 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
        </TrackingCellValue>
      </View>
      <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
          <Trans>Balance</Trans>
        </Text>
        <TrackingCellValue
@@ -133,12 +133,12 @@ export function IncomeHeaderMonth() {
      }}
    >
      <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
          <Trans>Budgeted</Trans>
        </Text>
      </View>
      <View style={headerLabelStyle}>
-        <Text style={{ color: theme.pageTextLight }}>
+        <Text style={{ color: theme.tableHeaderText }}>
          <Trans>Received</Trans>
        </Text>
      </View>
@@ -287,6 +287,7 @@ export const CategoryMonth = memo(function CategoryMonth({
              variant="bare"
              onPress={() => setMenuOpen(true)}
              style={{
+                color: theme.budgetNumberNeutral, //make sure button is visible when hovered
                padding: 3,
              }}
            >
@@ -354,8 +355,8 @@ export const CategoryMonth = memo(function CategoryMonth({
            padding: '0 4px',
            borderRadius: 4,
            ':hover': {
-              boxShadow: 'inset 0 0 0 1px ' + theme.mobileAccountShadow,
-              backgroundColor: theme.tableBackground,
+              boxShadow: 'inset 0 0 0 1px ' + theme.pageTextSubdued,
+              backgroundColor: theme.budgetCurrentMonth,
            },
          }}
          valueProps={{
@@ -370,7 +371,7 @@ export const CategoryMonth = memo(function CategoryMonth({
              onEdit(null);
            },
            style: {
-              backgroundColor: theme.tableBackground,
+              backgroundColor: theme.budgetCurrentMonth,
            },
          }}
          onSave={(parsedIntegerAmount: number | null) => {
@@ -401,9 +402,9 @@ export const CategoryMonth = memo(function CategoryMonth({
                style={{
                  color:
                    scheduleStatus === 'missed'
-                      ? theme.errorText
+                      ? theme.budgetNumberNegative
                      : scheduleStatus === 'due'
-                        ? theme.warningText
+                        ? theme.templateNumberUnderFunded
                        : theme.upcomingText,
                }}
                onPress={() =>
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
@@ -112,7 +112,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                width={13}
                height={13}
                // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.pageTextSubdued, margin: 1 }}
+                style={{ color: theme.pageTextLight, margin: 1 }}
              />
            </Button>
          </View>
@@ -238,7 +238,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
            style={{
              alignSelf: 'center',
              alignItems: 'flex-start',
-              backgroundColor: theme.tableRowHeaderBackground,
+              backgroundColor: theme.budgetHeaderCurrentMonth,
              borderRadius: 4,
              padding: '10px 15px',
              marginTop: 13,
@@ -255,7 +255,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
              alignItems: 'center',
              padding: '10px 20px',
              justifyContent: 'space-between',
-              backgroundColor: theme.tableRowHeaderBackground,
+              backgroundColor: theme.budgetHeaderCurrentMonth,
              borderTop: '1px solid ' + theme.tableBorder,
            }}
          >
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetTotal.tsx
@@ -58,7 +58,7 @@ export function BudgetTotal<
              allocatedAmount: <CellValue binding={current} type="financial" />,
              italic: (
                <Text
-                  style={{ color: theme.pageTextSubdued, fontStyle: 'italic' }}
+                  style={{ color: theme.pageTextLight, fontStyle: 'italic' }}
                />
              ),
              totalAmount: <CellValue binding={target} type="financial" />,
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseProgress.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseProgress.tsx
@@ -34,8 +34,8 @@ export function ExpenseProgress({ current, target }: ExpenseProgressProps) {
  return (
    <PieProgress
      progress={frac}
-      color={over ? theme.errorText : theme.noticeTextLight}
-      backgroundColor={over ? theme.errorBackground : theme.tableBackground}
+      color={over ? theme.numberNegative : theme.numberPositive}
+      backgroundColor={over ? theme.errorBackground : theme.budgetCurrentMonth}
      style={{ width: 20, height: 20 }}
    />
  );
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeProgress.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeProgress.tsx
@@ -28,8 +28,8 @@ export function IncomeProgress({ current, target }: IncomeProgressProps) {
  return (
    <PieProgress
      progress={frac}
-      color={over ? theme.errorText : theme.noticeTextLight}
-      backgroundColor={over ? theme.errorBackground : theme.tableBackground}
+      color={over ? theme.numberNegative : theme.numberPositive}
+      backgroundColor={over ? theme.errorBackground : theme.budgetCurrentMonth}
      style={{ width: 20, height: 20 }}
    />
  );
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
@@ -73,10 +73,10 @@ export function Saved({ projected, style }: SavedProps) {
          className={css({
            fontSize: 25,
            color: projected
-              ? theme.warningText
+              ? theme.templateNumberUnderFunded
              : isNegative
-                ? theme.errorTextDark
-                : theme.upcomingText,
+                ? theme.budgetNumberNegative
+                : theme.templateNumberFunded,
          })}
        >
          <PrivacyFilter>