Consolidate Notice Colors (#1724)

actualbudget · Oct 4, 2023 · 476070b · 476070b
1 parent 510f635
commit 476070b
Show file tree

Hide file tree

Showing 24 changed files with 58 additions and 52 deletions.
diff --git 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
@@ -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
@@ -100,7 +100,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
             {account.bankId && (
               <View
                 style={{
-                  backgroundColor: theme.noticeText,
+                  backgroundColor: theme.noticeBackgroundDark,
                   marginLeft: '-23px',
                   width: 8,
                   height: 8,

diff --git a/packages/desktop-client/src/components/accounts/Reconcile.js b/packages/desktop-client/src/components/accounts/Reconcile.js
@@ -45,7 +45,7 @@ export function ReconcilingMessage({
         {targetDiff === 0 ? (
           <View
             style={{
-              color: theme.noticeText,
+              color: theme.noticeTextLight,
               flex: 1,
               flexDirection: 'row',
               alignItems: 'center',

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -93,7 +93,7 @@ function CategoryList({
                   alignItems: 'center',
                   fontSize: 11,
                   fontWeight: 500,
-                  color: theme.noticeAccent,
+                  color: theme.noticeTextMenu,
                   padding: '6px 8px',
                   ':active': {
                     backgroundColor: 'rgba(100, 100, 100, .25)',

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -99,7 +99,7 @@ function PayeeList({
             <View
               style={{
                 display: 'block',
-                color: theme.noticeAccent,
+                color: theme.noticeTextMenu,
                 borderRadius: 4,
                 fontSize: isNarrowWidth ? 'inherit' : 11,
                 fontWeight: 500,

diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -99,7 +99,7 @@ function IncomeProgress({ current, target }: IncomeProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? theme.errorText : theme.noticeText}
+      color={over ? theme.errorText : theme.noticeTextLight}
       backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
@@ -132,7 +132,7 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) {
   return (
     <PieProgress
       progress={frac}
-      color={over ? theme.errorText : theme.noticeText}
+      color={over ? theme.errorText : theme.noticeTextLight}
       backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />

diff --git 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() {
         <Text
           style={{
             marginTop: 20,
-            color: theme.noticeText,
+            color: theme.noticeTextLight,
             borderRadius: 4,
             fontSize: 15,
           }}

diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.js
@@ -293,8 +293,8 @@ export default function GoCardlessExternalMsg({
                 fontSize: 15,
                 fontWeight: 600,
                 marginTop: 10,
-                backgroundColor: theme.alt3NoticeText,
-                borderColor: theme.alt3NoticeText,
+                backgroundColor: theme.noticeBackgroundDark,
+                borderColor: theme.noticeBackgroundDark,
               }}
               onClick={onContinue}
             >

diff --git 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 }) {
         )}{' '}
         &rarr;{' '}
       </Text>
-      <Text style={{ color: parsed ? theme.alt3NoticeText : theme.errorText }}>
+      <Text style={{ color: parsed ? theme.noticeTextLight : theme.errorText }}>
         {parsed || 'Invalid'}
       </Text>
     </Text>

diff --git 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
@@ -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
@@ -10,7 +10,7 @@ function Change({ amount }) {
     <Block
       style={{
         ...styles.smallText,
-        color: amount < 0 ? theme.errorText : theme.noticeText,
+        color: amount < 0 ? theme.errorText : theme.noticeTextLight,
       }}
     >
       {amount >= 0 ? '+' : ''}

diff --git 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({
       <Text
         style={{
           flex: 1,
-          color: num > 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
@@ -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
@@ -26,7 +26,7 @@ export default function EncryptionSettings() {
       primaryAction={<Button onClick={onChangeKey}>Generate new key</Button>}
     >
       <Text>
-        <Text style={{ color: theme.noticeText, fontWeight: 600 }}>
+        <Text style={{ color: theme.noticeTextLight, fontWeight: 600 }}>
           End-to-end Encryption is turned on.
         </Text>{' '}
         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
@@ -39,7 +39,7 @@ function renderResults(results: Results) {
   return (
     <Paragraph
       style={{
-        color: theme.alt3NoticeText,
+        color: theme.noticeTextLight,
         marginBottom: 0,
         marginLeft: '1em',
         textAlign: 'right',

diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
@@ -67,7 +67,7 @@ function About() {
             New version available: {latestVersion}
           </ExternalLink>
         ) : (
-          <Text style={{ color: theme.alt2NoticeText, fontWeight: 600 }}>
+          <Text style={{ color: theme.noticeText, fontWeight: 600 }}>
             You’re up to date!
           </Text>
         )}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Consolidate notice colors.