From f8afb396ed9a75c71bb03ec5641e4b5dfb50f736 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sat, 19 Aug 2023 19:42:31 +0100
Subject: [PATCH] :bug: (darkmode) fix colors used for schedules in transaction
table (#1533)
---
.eslintrc.js | 1 +
.../src/components/accounts/Balance.js | 2 +-
.../transactions/TransactionsTable.js | 37 ++++++++++++++++---
.../desktop-client/src/style/themes/light.ts | 2 +-
upcoming-release-notes/1533.md | 6 +++
5 files changed, 40 insertions(+), 8 deletions(-)
create mode 100644 upcoming-release-notes/1533.md
diff --git a/.eslintrc.js b/.eslintrc.js
index 06c284f01..85e9ec47f 100644
--- a/.eslintrc.js
+++ b/.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.*',
diff --git a/packages/desktop-client/src/components/accounts/Balance.js b/packages/desktop-client/src/components/accounts/Balance.js
index 52971b66e..23f99530b 100644
--- a/packages/desktop-client/src/components/accounts/Balance.js
+++ b/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,
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index c068ab9fb..d13bdef7b 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/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,
diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
index 19a866267..af72c18fe 100644
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/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;
diff --git a/upcoming-release-notes/1533.md b/upcoming-release-notes/1533.md
new file mode 100644
index 000000000..67302f9f9
--- /dev/null
+++ b/upcoming-release-notes/1533.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix schedule colors in transaction table
--
GitLab