Error Color Consolidation (#1756)

* Error Color Consolidation

* notes

* color changes

packages/desktop-client/src/components/Notifications.tsx

@@ -110,7 +110,7 @@ function Notification({
         color: positive
           ? theme.noticeText
           : error
-          ? theme.alt3ErrorText
+          ? theme.errorTextDark
           : theme.alt4WarningText,
       }}
     >
@@ -129,7 +129,7 @@ function Notification({
             positive
               ? theme.noticeBorder
               : error
-              ? theme.altErrorAccent
+              ? theme.errorBorder
               : theme.altWarningAccent
           }`,
           ...styles.shadowLarge,
@@ -175,7 +175,7 @@ function Notification({
                   positive
                     ? theme.noticeBorder
                     : error
-                    ? theme.altErrorAccent
+                    ? theme.errorBorder
                     : theme.altWarningAccent
                 }`,
                 color: 'currentColor',
@@ -185,7 +185,7 @@ function Notification({
                   backgroundColor: positive
                     ? theme.noticeBackground
                     : error
-                    ? theme.altErrorBackground
+                    ? theme.errorBackground
                     : theme.altWarningBackground,
                 },
               }}

packages/desktop-client/src/components/Titlebar.tsx

@@ -152,7 +152,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
   const mobileColor =
     syncState === 'error'
-      ? theme.alt4ErrorText
+      ? theme.errorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
@@ -160,7 +160,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       : style.color;
   const desktopColor =
     syncState === 'error'
-      ? theme.alt2ErrorText
+      ? theme.errorTextDark
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'

packages/desktop-client/src/components/alerts.tsx

@@ -93,8 +93,8 @@ export const Error = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={theme.altErrorText}
+      color={theme.errorTextDarker}
-      backgroundColor={theme.altErrorBackground}
+      backgroundColor={theme.errorBackground}
       style={style}
     >
       {children}

packages/desktop-client/src/components/budget/MobileBudgetTable.js

@@ -102,7 +102,7 @@ function Saved({ projected }) {
           color: projected
             ? theme.alt2WarningText
             : isNegative
-            ? theme.alt2ErrorText
+            ? theme.errorTextDark
             : theme.formInputText,
         }}
       />

packages/desktop-client/src/components/budget/report/BudgetSummary.tsx

@@ -282,7 +282,7 @@ function Saved({ projected, style }: SavedProps) {
               color: projected
                 ? theme.alt2WarningText
                 : isNegative
-                ? theme.alt2ErrorText
+                ? theme.errorTextDark
                 : theme.altUpcomingText,
             },
           ])}`}

packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx

@@ -190,7 +190,7 @@ function ToBudget({
                   borderBottom: '1px solid transparent',
                   ':hover': {
                     borderColor: isNegative
-                      ? theme.errorText
+                      ? theme.errorBorder
                       : theme.pageTextPositive,
                   },
                 },

packages/desktop-client/src/components/schedules/StatusBadge.tsx

@@ -20,8 +20,8 @@ export function getStatusProps(status: StatusTypes) {
   switch (status) {
     case 'missed':
       return {
-        color: theme.altErrorText,
+        color: theme.errorTextDarker,
-        backgroundColor: theme.altErrorBackground,
+        backgroundColor: theme.errorBackground,
         Icon: EditSkull1,
       };
     case 'due':

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

@@ -156,7 +156,7 @@ function Status({ status }) {
 
   switch (status) {
     case 'missed':
-      color = theme.alt3ErrorText;
+      color = theme.errorText;
       break;
     case 'due':
       color = theme.alt2WarningText;

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

@@ -418,7 +418,7 @@ function StatusCell({
     status === 'cleared'
       ? theme.noticeTextLight
       : status === 'missed'
-      ? theme.alt5ErrorText
+      ? theme.errorText
       : status === 'due'
       ? theme.alt3WarningText
       : selected
@@ -1043,7 +1043,7 @@ const Transaction = memo(function Transaction(props) {
               style={{
                 color:
                   notes === 'missed'
-                    ? theme.alt5ErrorText
+                    ? theme.errorText
                     : notes === 'due'
                     ? theme.alt5WarningText
                     : selected
@@ -1051,7 +1051,7 @@ const Transaction = memo(function Transaction(props) {
                     : theme.altTableText,
                 backgroundColor:
                   notes === 'missed'
-                    ? theme.altErrorBackground
+                    ? theme.errorBackground
                     : notes === 'due'
                     ? theme.altWarningBackground
                     : selected

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

@@ -166,11 +166,11 @@ export const alt2WarningText = warningText;
 export const alt3WarningText = warningText;
 export const warningAccent = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
-export const altErrorBackground = errorBackground;
+export const errorText = colorPalette.red300;
-export const errorText = colorPalette.red200;
+export const errorTextDark = colorPalette.red150;
-export const altErrorText = errorText;
+export const errorTextDarker = errorTextDark;
-export const alt2ErrorText = errorText;
+export const errorTextMenu = colorPalette.red500;
-export const errorAccent = colorPalette.red500;
+export const errorBorder = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple700;
 export const upcomingText = colorPalette.purple100;
 export const altUpcomingText = upcomingText;

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

@@ -153,12 +153,12 @@ export const altWarningText = warningText;
 export const alt2WarningText = warningText;
 export const alt3WarningText = warningText;
 export const warningAccent = colorPalette.orange500;
-export const errorBackground = colorPalette.red800;
+export const errorBackground = colorPalette.red100;
-export const altErrorBackground = errorBackground;
+export const errorText = colorPalette.red500;
-export const errorText = colorPalette.red200;
+export const errorTextDark = colorPalette.red700;
-export const altErrorText = errorText;
+export const errorTextDarker = colorPalette.red900;
-export const alt2ErrorText = errorText;
+export const errorTextMenu = colorPalette.red200;
-export const errorAccent = colorPalette.red500;
+export const errorBorder = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;

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

@@ -172,16 +172,12 @@ export const alt4WarningText = colorPalette.orange800;
 export const alt5WarningText = colorPalette.orange600;
 export const warningAccent = colorPalette.orange400;
 export const altWarningAccent = colorPalette.orange600;
-export const errorBackground = colorPalette.red50;
+export const errorBackground = colorPalette.red100;
-export const altErrorBackground = colorPalette.red100;
 export const errorText = colorPalette.red500;
-export const altErrorText = colorPalette.red900;
+export const errorTextDark = colorPalette.red700;
-export const alt2ErrorText = colorPalette.red600;
+export const errorTextDarker = colorPalette.red900;
-export const alt3ErrorText = colorPalette.red700;
+export const errorTextMenu = colorPalette.red200;
-export const alt4ErrorText = colorPalette.red300;
+export const errorBorder = colorPalette.red500;
-export const alt5ErrorText = colorPalette.red400;
-export const errorAccent = colorPalette.red200;
-export const altErrorAccent = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;

upcoming-release-notes/1756.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Conslidating and making consistent error colors across all pages in the app.