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 e7a122d6b42..573bc9040b0 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 8bfb8062e2f..248136fea10 100644 --- a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx +++ b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx @@ -168,7 +168,7 @@ export function ScheduleAmountCell({ 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 d0b7ae84cba..8778a8a021b 100644 --- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx +++ b/packages/desktop-client/src/components/schedules/StatusBadge.tsx @@ -38,8 +38,8 @@ export function getStatusProps(status: StatusTypes) { }; case 'paid': return { - color: theme.alt2NoticeText, - backgroundColor: theme.altNoticeBackground, + color: theme.noticeText, + backgroundColor: theme.noticeBackgroundLight, Icon: ValidationCheck, }; case 'completed': @@ -50,8 +50,8 @@ export function getStatusProps(status: StatusTypes) { }; case 'pending': return { - color: theme.alt3NoticeText, - backgroundColor: theme.alt2NoticeBackground, + color: theme.noticeTextLight, + backgroundColor: theme.noticeBackgroundLight, Icon: CalendarIcon, }; case 'scheduled': @@ -62,7 +62,7 @@ export function getStatusProps(status: StatusTypes) { }; case 'cleared': return { - color: theme.noticeText, + color: theme.noticeTextLight, backgroundColor: theme.altTableBackground, Icon: CheckCircle1, }; 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; diff --git a/upcoming-release-notes/1724.md b/upcoming-release-notes/1724.md new file mode 100644 index 00000000000..b4308edd4a0 --- /dev/null +++ b/upcoming-release-notes/1724.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [carkom] +--- + +Consolidate notice colors. \ No newline at end of file