🐛 (darkmode) fix colors used for schedules in transaction table (#1533)

.eslintrc.js

@@ -299,6 +299,7 @@ module.exports = {
         './packages/desktop-client/src/components/settings/index.*',
         './packages/desktop-client/src/components/sidebar.*',
         './packages/desktop-client/src/components/transactions/MobileTransaction.*',
+        './packages/desktop-client/src/components/transactions/TransactionsTable.*',
         './packages/desktop-client/src/components/util/AmountInput.*',
         './packages/desktop-client/src/components/util/DisplayId.*',
         './packages/desktop-client/src/components/util/LoadComponent.*',

packages/desktop-client/src/components/accounts/Balance.js

@@ -159,7 +159,7 @@ export function Balances({
                 ? theme.errorText
                 : value > 0
                 ? theme.noticeText
-                : theme.tableTextInactive,
+                : theme.pageTextSubdued,
           })}
           privacyFilter={{
             blurIntensity: 5,

packages/desktop-client/src/components/transactions/TransactionsTable.js

@@ -53,7 +53,7 @@ import CheveronDown from '../../icons/v1/CheveronDown';
 import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
 import CalendarIcon from '../../icons/v2/Calendar';
 import Hyperlink2 from '../../icons/v2/Hyperlink2';
-import { styles, theme } from '../../style';
+import { colors, styles, theme } from '../../style';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategorySelect';
 import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
@@ -414,6 +414,17 @@ function StatusCell({
   let isClearedField = status === 'cleared' || status == null;
   let statusProps = getStatusProps(status);
 
+  let statusColor =
+    status === 'cleared'
+      ? colors.g5
+      : status === 'missed'
+      ? colors.r6
+      : status === 'due'
+      ? colors.y5
+      : selected
+      ? colors.b7
+      : colors.n7;
+
   function onSelect() {
     if (isClearedField) {
       onUpdate('cleared', !(status === 'cleared'));
@@ -451,7 +462,7 @@ function StatusCell({
           style: {
             width: 13,
             height: 13,
-            color: statusProps.color,
+            color: statusColor,
             marginTop: status === 'due' ? -1 : 0,
           },
         })}
@@ -806,7 +817,6 @@ const Transaction = memo(function Transaction(props) {
   let backgroundFocus = focusedField === 'select';
   let amountStyle = hideFraction ? { letterSpacing: -0.5 } : null;
 
-  let statusProps = getStatusProps(notes);
   let runningBalance = !isTemporaryId(id)
     ? balance
     : balance + (_inverse ? -1 : 1) * amount;
@@ -822,7 +832,7 @@ const Transaction = memo(function Transaction(props) {
             : theme.tableBackground,
         },
         {
-          ':hover': {
+          ':hover': !(backgroundFocus || selected) && {
             backgroundColor: theme.tableRowBackgroundHover,
           },
         },
@@ -832,6 +842,7 @@ const Transaction = memo(function Transaction(props) {
         style,
         isPreview && {
           color: theme.tableTextInactive,
+          backgroundColor: '#fcfcfc',
           fontStyle: 'italic',
         },
         _unmatched && { opacity: 0.5 },
@@ -1026,8 +1037,22 @@ const Transaction = memo(function Transaction(props) {
           {() => (
             <View
               style={{
-                color: statusProps.color,
-                backgroundColor: statusProps.backgroundColor,
+                color:
+                  notes === 'missed'
+                    ? colors.r6
+                    : notes === 'due'
+                    ? colors.y4
+                    : selected
+                    ? colors.b5
+                    : colors.n6,
+                backgroundColor:
+                  notes === 'missed'
+                    ? colors.r10
+                    : notes === 'due'
+                    ? colors.y9
+                    : selected
+                    ? colors.b8
+                    : colors.n10,
                 margin: '0 5px',
                 padding: '3px 7px',
                 borderRadius: 4,

packages/desktop-client/src/style/themes/light.ts

@@ -29,7 +29,7 @@ export const tableTextSelected = colorPalette.navy700;
 export const tableTextHover = colorPalette.navy900;
 export const tableTextEditing = colorPalette.navy50;
 export const tableTextEditingBackground = colorPalette.blue500;
-export const tableTextInactive = colorPalette.navy200;
+export const tableTextInactive = colorPalette.navy500;
 export const tableHeaderText = colorPalette.navy600;
 export const tableHeaderBackground = colorPalette.white;
 export const tableBorder = colorPalette.navy100;

upcoming-release-notes/1533.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix schedule colors in transaction table