Error Color Consolidation (#1756)

* Error Color Consolidation * notes * color changes
2026-03-09 11:42:54 -05:00 · 2023-10-21 14:33:30 -07:00
parent 25f4e2a8b5
commit e0b2eab475
13 changed files with 39 additions and 37 deletions
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/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,
                },
              }}
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/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'
--- a/packages/desktop-client/src/components/alerts.tsx
+++ b/packages/desktop-client/src/components/alerts.tsx
@@ -93,8 +93,8 @@ export const Error = ({ style, children }: ScopedAlertProps) => {
  return (
    <Alert
      icon={ExclamationOutline}
-      color={theme.altErrorText}
-      backgroundColor={theme.altErrorBackground}
+      color={theme.errorTextDarker}
+      backgroundColor={theme.errorBackground}
      style={style}
    >
      {children}
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/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,
        }}
      />
--- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
+++ b/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,
            },
          ])}`}
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/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,
                  },
                },
--- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx
+++ b/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,
-        backgroundColor: theme.altErrorBackground,
+        color: theme.errorTextDarker,
+        backgroundColor: theme.errorBackground,
        Icon: EditSkull1,
      };
    case 'due':
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/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;
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/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
--- a/packages/desktop-client/src/style/themes/dark.ts
+++ b/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.red200;
-export const altErrorText = errorText;
-export const alt2ErrorText = errorText;
-export const errorAccent = colorPalette.red500;
+export const errorText = colorPalette.red300;
+export const errorTextDark = colorPalette.red150;
+export const errorTextDarker = errorTextDark;
+export const errorTextMenu = colorPalette.red500;
+export const errorBorder = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple700;
 export const upcomingText = colorPalette.purple100;
 export const altUpcomingText = upcomingText;
--- a/packages/desktop-client/src/style/themes/development.ts
+++ b/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 altErrorBackground = errorBackground;
-export const errorText = colorPalette.red200;
-export const altErrorText = errorText;
-export const alt2ErrorText = errorText;
-export const errorAccent = colorPalette.red500;
+export const errorBackground = colorPalette.red100;
+export const errorText = colorPalette.red500;
+export const errorTextDark = colorPalette.red700;
+export const errorTextDarker = colorPalette.red900;
+export const errorTextMenu = colorPalette.red200;
+export const errorBorder = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;
--- a/packages/desktop-client/src/style/themes/light.ts
+++ b/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 altErrorBackground = colorPalette.red100;
+export const errorBackground = colorPalette.red100;
 export const errorText = colorPalette.red500;
-export const altErrorText = colorPalette.red900;
-export const alt2ErrorText = colorPalette.red600;
-export const alt3ErrorText = colorPalette.red700;
-export const alt4ErrorText = colorPalette.red300;
-export const alt5ErrorText = colorPalette.red400;
-export const errorAccent = colorPalette.red200;
-export const altErrorAccent = colorPalette.red500;
+export const errorTextDark = colorPalette.red700;
+export const errorTextDarker = colorPalette.red900;
+export const errorTextMenu = colorPalette.red200;
+export const errorBorder = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;
--- a/upcoming-release-notes/1756.md
+++ b/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.