From 300e11b8f20fb7182d04e9b8278a9e6b1bfaa3a5 Mon Sep 17 00:00:00 2001 From: carkom Date: Fri, 22 Sep 2023 14:11:39 +0100 Subject: [PATCH] Consolidate Notice Colors --- .../src/components/Notifications.tsx | 8 ++++---- .../src/components/accounts/Balance.js | 2 +- .../src/components/accounts/MobileAccounts.js | 2 +- .../src/components/accounts/Reconcile.js | 2 +- .../autocomplete/CategoryAutocomplete.tsx | 2 +- .../components/autocomplete/PayeeAutocomplete.js | 2 +- .../components/budget/report/BudgetSummary.tsx | 4 ++-- .../manager/subscribe/ChangePassword.tsx | 2 +- .../components/modals/GoCardlessExternalMsg.js | 4 ++-- .../src/components/modals/ImportTransactions.js | 2 +- .../src/components/modals/PlaidExternalMsg.js | 4 ++-- .../src/components/payees/index.js | 2 +- .../src/components/reports/Change.js | 2 +- .../src/components/schedules/SchedulesTable.tsx | 2 +- .../src/components/schedules/StatusBadge.tsx | 10 +++++----- .../src/components/settings/Encryption.tsx | 2 +- .../src/components/settings/FixSplits.tsx | 2 +- .../src/components/settings/index.tsx | 2 +- .../components/transactions/MobileTransaction.js | 4 +++- .../components/transactions/TransactionsTable.js | 4 ++-- packages/desktop-client/src/style/themes/dark.ts | 12 ++++++------ .../src/style/themes/development.ts | 12 ++++++------ .../desktop-client/src/style/themes/light.ts | 16 +++++++--------- 23 files changed, 52 insertions(+), 52 deletions(-) diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx index f61552521e2..0b65614ab43 100644 --- a/packages/desktop-client/src/components/Notifications.tsx +++ b/packages/desktop-client/src/components/Notifications.tsx @@ -108,7 +108,7 @@ function Notification({ style={{ marginTop: 10, color: positive - ? theme.alt4NoticeText + ? theme.noticeText : error ? theme.alt3ErrorText : theme.alt4WarningText, @@ -121,13 +121,13 @@ function Notification({ padding: '14px 14px', fontSize: 14, backgroundColor: positive - ? theme.alt2NoticeBackground + ? theme.noticeBackgroundLight : error ? theme.errorBackground : theme.alt2WarningBackground, borderTop: `3px solid ${ positive - ? theme.altNoticeAccent + ? theme.noticeBorder : error ? theme.altErrorAccent : theme.altWarningAccent @@ -173,7 +173,7 @@ function Notification({ backgroundColor: 'transparent', border: `1px solid ${ positive - ? theme.altNoticeAccent + ? theme.noticeBorder : error ? theme.altErrorAccent : theme.altWarningAccent diff --git a/packages/desktop-client/src/components/accounts/Balance.js b/packages/desktop-client/src/components/accounts/Balance.js index abc52b1a862..84b4c9a9ce6 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({ value < 0 ? theme.errorText : value > 0 - ? theme.noticeText + ? theme.noticeTextLight : theme.pageTextSubdued, })} privacyFilter={{ diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js index 457c645a463..af0de725171 100644 --- a/packages/desktop-client/src/components/accounts/MobileAccounts.js +++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js @@ -100,7 +100,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) { {account.bankId && ( @@ -132,7 +132,7 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) { return ( diff --git a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx index 895c8b2ac1e..5ee9f149963 100644 --- a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx @@ -73,7 +73,7 @@ export default function ChangePassword() { diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js index 87b51d7744c..309916656a1 100644 --- a/packages/desktop-client/src/components/modals/ImportTransactions.js +++ b/packages/desktop-client/src/components/modals/ImportTransactions.js @@ -138,7 +138,7 @@ function ParsedDate({ parseDateFormat, showParsed, dateFormat, date }) { )}{' '} →{' '} - + {parsed || 'Invalid'} diff --git a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js b/packages/desktop-client/src/components/modals/PlaidExternalMsg.js index b6d8867b3ee..a07ebc1abd7 100644 --- a/packages/desktop-client/src/components/modals/PlaidExternalMsg.js +++ b/packages/desktop-client/src/components/modals/PlaidExternalMsg.js @@ -95,8 +95,8 @@ export default function PlaidExternalMsg({ fontSize: 15, fontWeight: 600, marginTop: 10, - backgroundColor: theme.alt3NoticeText, - borderColor: theme.alt3NoticeText, + backgroundColor: theme.noticeBackgroundDark, + borderColor: theme.noticeBorder, }} onClick={onContinue} > diff --git a/packages/desktop-client/src/components/payees/index.js b/packages/desktop-client/src/components/payees/index.js index a7ad234e5d4..b679ea8797b 100644 --- a/packages/desktop-client/src/components/payees/index.js +++ b/packages/desktop-client/src/components/payees/index.js @@ -63,7 +63,7 @@ function RuleButton({ ruleCount, focused, onEdit, onClick }) { padding: '3px 6px', backgroundColor: theme.noticeBackground, border: '1px solid ' + theme.noticeBackground, - color: theme.altNoticeText, + color: theme.noticeTextDark, fontSize: 12, }} onEdit={onEdit} diff --git a/packages/desktop-client/src/components/reports/Change.js b/packages/desktop-client/src/components/reports/Change.js index e4067cbf3ea..a135f0aeb8f 100644 --- a/packages/desktop-client/src/components/reports/Change.js +++ b/packages/desktop-client/src/components/reports/Change.js @@ -10,7 +10,7 @@ function Change({ amount }) { {amount >= 0 ? '+' : ''} diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx index e95348718ef..cc7d4b68125 100644 --- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx +++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx @@ -106,7 +106,7 @@ export function ScheduleAmountCell({ amount, op }) { 0 ? theme.noticeText : theme.tableText, + color: num > 0 ? theme.noticeTextLight : theme.tableText, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.tsx b/packages/desktop-client/src/components/schedules/StatusBadge.tsx index ce52ff4a112..2fd89044887 100644 --- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx +++ b/packages/desktop-client/src/components/schedules/StatusBadge.tsx @@ -33,8 +33,8 @@ export function getStatusProps(status: Status) { Icon = CalendarIcon; break; case 'paid': - color = theme.alt2NoticeText; - backgroundColor = theme.altNoticeBackground; + color = theme.noticeText; + backgroundColor = theme.noticeBackgroundLight; Icon = ValidationCheck; break; case 'completed': @@ -43,8 +43,8 @@ export function getStatusProps(status: Status) { Icon = FavoriteStar; break; case 'pending': - color = theme.alt3NoticeText; - backgroundColor = theme.alt2NoticeBackground; + color = theme.noticeTextLight; + backgroundColor = theme.noticeBackgroundLight; Icon = CalendarIcon; break; case 'scheduled': @@ -53,7 +53,7 @@ export function getStatusProps(status: Status) { Icon = CalendarIcon; break; case 'cleared': - color = theme.noticeText; + color = theme.noticeTextLight; backgroundColor = theme.altTableBackground; Icon = CheckCircle1; break; diff --git a/packages/desktop-client/src/components/settings/Encryption.tsx b/packages/desktop-client/src/components/settings/Encryption.tsx index f67beb47032..23d6d7517db 100644 --- a/packages/desktop-client/src/components/settings/Encryption.tsx +++ b/packages/desktop-client/src/components/settings/Encryption.tsx @@ -26,7 +26,7 @@ export default function EncryptionSettings() { primaryAction={} > - + End-to-end Encryption is turned on. {' '} Your data is encrypted with a key that only you have before sending it diff --git a/packages/desktop-client/src/components/settings/FixSplits.tsx b/packages/desktop-client/src/components/settings/FixSplits.tsx index 7b3ca97e280..bafdf9adc24 100644 --- a/packages/desktop-client/src/components/settings/FixSplits.tsx +++ b/packages/desktop-client/src/components/settings/FixSplits.tsx @@ -39,7 +39,7 @@ function renderResults(results: Results) { return ( ) : ( - + You’re up to date! )} diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js index 893cbf6cdbe..52db1dbb342 100644 --- a/packages/desktop-client/src/components/transactions/MobileTransaction.js +++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js @@ -1001,7 +1001,9 @@ class Transaction extends PureComponent { style={{ width: 11, height: 11, - color: cleared ? theme.noticeText : theme.altButtonBareText, + color: cleared + ? theme.noticeTextLight + : theme.altButtonBareText, marginRight: 5, }} /> diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js index 22c6918a5dd..5de8d012ca7 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.js +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js @@ -416,7 +416,7 @@ function StatusCell({ let statusColor = status === 'cleared' - ? theme.noticeText + ? theme.noticeTextLight : status === 'missed' ? theme.alt5ErrorText : status === 'due' @@ -1268,7 +1268,7 @@ const Transaction = memo(function Transaction(props) { : integerToCurrency(runningBalance) } valueStyle={{ - color: runningBalance < 0 ? theme.errorText : theme.noticeText, + color: runningBalance < 0 ? theme.errorText : theme.noticeTextLight, }} style={{ ...styles.tnum, ...amountStyle }} width={88} diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 24fb0464cd3..3591bc97cc7 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -154,13 +154,13 @@ export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; export const noticeBackground = colorPalette.green800; -export const altNoticeBackground = noticeBackground; -export const alt2NoticeBackground = noticeBackground; +export const noticeBackgroundLight = noticeBackground; +export const noticeBackgroundDark = noticeBackground; export const noticeText = colorPalette.green300; -export const altNoticeText = noticeText; -export const alt2NoticeText = noticeText; -export const alt3NoticeText = noticeText; -export const noticeAccent = colorPalette.green500; +export const noticeTextLight = noticeText; +export const noticeTextDark = noticeText; +export const noticeTextMenu = colorPalette.green500; +export const noticeBorder = colorPalette.green800; export const warningBackground = colorPalette.orange800; export const altWarningBackground = warningBackground; export const warningText = colorPalette.orange200; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index 8d8cca113c3..b29e5275759 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/packages/desktop-client/src/style/themes/development.ts @@ -142,13 +142,13 @@ export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; export const noticeBackground = colorPalette.green800; -export const altNoticeBackground = noticeBackground; -export const alt2NoticeBackground = noticeBackground; +export const noticeBackgroundLight = noticeBackground; +export const noticeBackgroundDark = noticeBackground; export const noticeText = colorPalette.green300; -export const altNoticeText = noticeText; -export const alt2NoticeText = noticeText; -export const alt3NoticeText = noticeText; -export const noticeAccent = colorPalette.green500; +export const noticeTextLight = noticeText; +export const noticeTextDark = noticeText; +export const noticeTextMenu = colorPalette.green500; +export const noticeBorder = colorPalette.green500; export const warningBackground = colorPalette.orange800; export const altWarningBackground = warningBackground; export const warningText = colorPalette.orange200; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index 5d2ec7fcf11..d8c88811b55 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -158,15 +158,13 @@ export const buttonBareDisabledText = buttonNormalDisabledText; export const buttonBareDisabledBackground = buttonBareBackground; export const noticeBackground = colorPalette.green150; -export const altNoticeBackground = colorPalette.green100; -export const alt2NoticeBackground = colorPalette.green50; -export const noticeText = colorPalette.green500; -export const altNoticeText = colorPalette.green900; -export const alt2NoticeText = colorPalette.green800; -export const alt3NoticeText = colorPalette.green600; -export const alt4NoticeText = colorPalette.green700; -export const noticeAccent = colorPalette.green200; -export const altNoticeAccent = colorPalette.green500; +export const noticeBackgroundLight = colorPalette.green100; +export const noticeBackgroundDark = colorPalette.green500; +export const noticeText = colorPalette.green700; +export const noticeTextLight = colorPalette.green500; +export const noticeTextDark = colorPalette.green900; +export const noticeTextMenu = colorPalette.green200; +export const noticeBorder = colorPalette.green500; export const warningBackground = colorPalette.orange200; export const altWarningBackground = colorPalette.orange150; export const alt2WarningBackground = colorPalette.orange100;