Darkmode: fix theming on budget table (#1795)

* fix darkmode for budget table * note * lint * fix totals line, fix group colot
actualbudget · Oct 16, 2023 · b45615e · b45615e
1 parent 38609ee
commit b45615e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 7 deletions.
diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.js b/packages/desktop-client/src/components/budget/BudgetCategories.js
@@ -149,7 +149,7 @@ const BudgetCategories = memo(
       <View
         style={{
           marginBottom: 10,
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           overflow: 'hidden',
           boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
@@ -235,7 +235,7 @@ const BudgetCategories = memo(
                 <View
                   style={{
                     height: styles.incomeHeaderHeight,
-                    backgroundColor: 'white',
+                    backgroundColor: theme.tableBackground,
                   }}
                 >
                   <IncomeHeader

diff --git a/packages/desktop-client/src/components/budget/BudgetTable.js b/packages/desktop-client/src/components/budget/BudgetTable.js
@@ -2,7 +2,7 @@ import React, { createRef, Component } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import { styles } from '../../style';
+import { theme, styles } from '../../style';
 import View from '../common/View';
 import { IntersectionBoundary } from '../tooltips';
 
@@ -189,7 +189,7 @@ class BudgetTable extends Component {
               backgroundColor: 'transparent',
             },
             '& ::-webkit-scrollbar-thumb:vertical': {
-              backgroundColor: 'white',
+              backgroundColor: theme.tableHeaderBackground,
             },
           }),
         }}

diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.js b/packages/desktop-client/src/components/budget/BudgetTotals.js
@@ -21,7 +21,7 @@ const BudgetTotals = memo(function BudgetTotals({
     <View
       data-testid="budget-totals"
       style={{
-        backgroundColor: 'white',
+        backgroundColor: theme.tableBackground,
         flexDirection: 'row',
         flexShrink: 0,
         boxShadow: styles.cardShadow,

diff --git a/packages/desktop-client/src/components/budget/ExpenseCategory.js b/packages/desktop-client/src/components/budget/ExpenseCategory.js
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { theme } from '../../style';
 import View from '../common/View';
 import { useDraggable, useDroppable, DropHighlight } from '../sort';
 import { Row } from '../table';
@@ -46,7 +47,7 @@ function ExpenseCategory({
       innerRef={dropRef}
       collapsed={true}
       style={{
-        backgroundColor: 'transparent',
+        backgroundColor: theme.tableBackground,
         opacity: cat.hidden ? 0.5 : undefined,
       }}
     >

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -24,7 +24,7 @@ export const cardBorder = colorPalette.purple400;
 export const cardShadow = colorPalette.navy700;
 
 export const tableBackground = colorPalette.navy800;
-export const altTableBackground = tableBackground;
+export const altTableBackground = colorPalette.navy700;
 export const alt2TableBackground = tableBackground;
 export const tableRowBackgroundHover = colorPalette.navy700;
 export const tableText = colorPalette.navy150;

diff --git a/upcoming-release-notes/1795.md b/upcoming-release-notes/1795.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [youngcw]
+---
+
+Dark Theme: add theming to budget table where it was missing