Zero balance contrast on light mode

actualbudget · May 21, 2024 · cca2579 · cca2579
1 parent b1ceab8
commit cca2579
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 17 deletions.
diff --git 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
@@ -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
@@ -176,14 +176,15 @@ 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;
 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
@@ -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
@@ -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;