From cca25793094ec5a08a206e0b798717b9a5f888b0 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 21 May 2024 08:00:05 -0700
Subject: [PATCH] Zero balance contrast on light mode

---
 .../components/mobile/budget/BudgetTable.jsx  | 34 ++++++++++---------
 .../desktop-client/src/style/themes/dark.ts   |  1 +
 .../src/style/themes/development.ts           |  3 +-
 .../desktop-client/src/style/themes/light.ts  |  1 +
 .../src/style/themes/midnight.ts              |  1 +
 5 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index 16520adfd30..9dae3a40c59 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -85,7 +85,7 @@ function ToBudget({ month, toBudget, onClick, show3Cols }) {
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -168,7 +168,7 @@ function Saved({ month, projected, onClick, show3Cols }) {
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -479,7 +479,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
                 }}
               >
                 <AutoTextSize
-                  key={month + value}
+                  key={`${month}|${value}`}
                   as={Text}
                   minFontSizePx={6}
                   maxFontSizePx={12}
@@ -519,7 +519,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
                 }}
               >
                 <AutoTextSize
-                  key={month + value}
+                  key={`${month}|${value}`}
                   as={Text}
                   minFontSizePx={6}
                   maxFontSizePx={12}
@@ -559,14 +559,16 @@ const ExpenseCategory = memo(function ExpenseCategory({
                   }}
                 >
                   <AutoTextSize
-                    key={month + value}
+                    key={`${month}|${value}`}
                     as={Text}
                     minFontSizePx={6}
                     maxFontSizePx={12}
                     mode="oneline"
                     style={{
                       maxWidth: columnWidth,
-                      ...makeAmountFullStyle(value),
+                      ...makeAmountFullStyle(value, {
+                        zeroColor: theme.pillTextSubdued,
+                      }),
                       textAlign: 'right',
                       fontSize: 12,
                     }}
@@ -737,7 +739,7 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -768,7 +770,7 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -798,7 +800,7 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -962,7 +964,7 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
               type="financial"
               formatter={value => (
                 <AutoTextSize
-                  key={month + value}
+                  key={`${month}|${value}`}
                   as={Text}
                   minFontSizePx={6}
                   maxFontSizePx={12}
@@ -993,7 +995,7 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -1114,7 +1116,7 @@ const IncomeCategory = memo(function IncomeCategory({
                   style={{ ...PILL_STYLE, maxWidth: columnWidth }}
                 >
                   <AutoTextSize
-                    key={month + value}
+                    key={`${month}|${value}`}
                     as={Text}
                     minFontSizePx={6}
                     maxFontSizePx={12}
@@ -1145,7 +1147,7 @@ const IncomeCategory = memo(function IncomeCategory({
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
@@ -1743,7 +1745,7 @@ function BudgetTableHeader({
                   type="financial"
                   formatter={value => (
                     <AutoTextSize
-                      key={month + value}
+                      key={`${month}|${value}`}
                       as={Text}
                       minFontSizePx={6}
                       maxFontSizePx={12}
@@ -1801,7 +1803,7 @@ function BudgetTableHeader({
                   type="financial"
                   formatter={value => (
                     <AutoTextSize
-                      key={month + value}
+                      key={`${month}|${value}`}
                       as={Text}
                       minFontSizePx={6}
                       maxFontSizePx={12}
@@ -1839,7 +1841,7 @@ function BudgetTableHeader({
             type="financial"
             formatter={value => (
               <AutoTextSize
-                key={month + value}
+                key={`${month}|${value}`}
                 as={Text}
                 minFontSizePx={6}
                 maxFontSizePx={12}
diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
index 24271183578..8932bfbc7c9 100644
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/packages/desktop-client/src/style/themes/dark.ts
@@ -185,6 +185,7 @@ export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;
 export const pillTextSelected = colorPalette.navy150;
 export const pillBorderSelected = colorPalette.purple400;
+export const pillTextSubdued = colorPalette.navy500;
 
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
index c4f71d3df5e..d369f5037a9 100644
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/packages/desktop-client/src/style/themes/development.ts
@@ -176,7 +176,7 @@ export const checkboxBorderSelected = colorPalette.blue500;
 export const checkboxShadowSelected = colorPalette.blue300;
 
 export const pillBackground = colorPalette.navy150;
-export const pillBackgroundLight = pillBackground;
+export const pillBackgroundLight = colorPalette.navy50;
 export const pillText = colorPalette.navy800;
 export const pillTextHighlighted = colorPalette.purple600;
 export const pillBorder = colorPalette.navy150;
@@ -184,6 +184,7 @@ export const pillBorderDark = colorPalette.navy300;
 export const pillBackgroundSelected = colorPalette.blue150;
 export const pillTextSelected = colorPalette.blue900;
 export const pillBorderSelected = colorPalette.purple500;
+export const pillTextSubdued = colorPalette.navy200;
 
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 382ea14fa3b..dd3812f881b 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/packages/desktop-client/src/style/themes/light.ts
@@ -187,6 +187,7 @@ export const pillBorderDark = colorPalette.navy300;
 export const pillBackgroundSelected = colorPalette.blue150;
 export const pillTextSelected = colorPalette.blue900;
 export const pillBorderSelected = colorPalette.purple500;
+export const pillTextSubdued = colorPalette.navy200;
 
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;
diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
index ee1ff3097c0..9116d3a4aa2 100644
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/packages/desktop-client/src/style/themes/midnight.ts
@@ -187,6 +187,7 @@ export const pillBorderDark = pillBorder;
 export const pillBackgroundSelected = colorPalette.purple600;
 export const pillTextSelected = colorPalette.gray150;
 export const pillBorderSelected = colorPalette.purple300;
+export const pillTextSubdued = colorPalette.gray500;
 
 export const reportsRed = colorPalette.red300;
 export const reportsBlue = colorPalette.blue400;