Warning Color Consolidations (#1798)

actualbudget · Nov 5, 2023 · a15f80e · a15f80e
1 parent be18891
commit a15f80e
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 54 deletions.
diff --git a/packages/desktop-client/src/components/DevelopmentTopBar.tsx b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
@@ -13,15 +13,15 @@ export default function DevelopmentTopBar() {
         justifyContent: 'space-between',
         color: theme.warningText,
         backgroundColor: theme.warningBackground,
-        borderBottom: `1px solid ${theme.warningAccent}`,
+        borderBottom: `1px solid ${theme.warningBorder}`,
         zIndex: 1,
         flexShrink: 0,
       }}
     >
       <View>This is a demo build of Actual.</View>
       <View>
         <ExternalLink
-          linkColor="blue"
+          linkColor="purple"
           to={`https://github.com/actualbudget/actual/pull/${process.env.REACT_APP_REVIEW_ID}`}
         >
           Open the PR: #{process.env.REACT_APP_REVIEW_ID}

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -58,7 +58,7 @@ function compileMessage(
                 }
 
                 return (
-                  <ExternalLink key={idx} to={match[2]}>
+                  <ExternalLink linkColor="purple" key={idx} to={match[2]}>
                     {match[1]}
                   </ExternalLink>
                 );
@@ -111,7 +111,7 @@ function Notification({
           ? theme.noticeText
           : error
           ? theme.errorTextDark
-          : theme.alt4WarningText,
+          : theme.warningTextDark,
       }}
     >
       <Stack
@@ -124,13 +124,13 @@ function Notification({
             ? theme.noticeBackgroundLight
             : error
             ? theme.errorBackground
-            : theme.alt2WarningBackground,
+            : theme.warningBackground,
           borderTop: `3px solid ${
             positive
               ? theme.noticeBorder
               : error
               ? theme.errorBorder
-              : theme.altWarningAccent
+              : theme.warningBorder
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -176,7 +176,7 @@ function Notification({
                     ? theme.noticeBorder
                     : error
                     ? theme.errorBorder
-                    : theme.altWarningAccent
+                    : theme.warningBorder
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
@@ -186,7 +186,7 @@ function Notification({
                     ? theme.noticeBackground
                     : error
                     ? theme.errorBackground
-                    : theme.altWarningBackground,
+                    : theme.warningBackground,
                 },
               }}
             >

diff --git 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 }) {
           ...styles.smallText,
           fontWeight: '500',
           color: projected
-            ? theme.alt2WarningText
+            ? theme.warningText
             : isNegative
             ? theme.errorTextDark
             : theme.formInputText,

diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -280,10 +280,10 @@ function Saved({ projected, style }: SavedProps) {
             {
               fontSize: 25,
               color: projected
-                ? theme.alt2WarningText
+                ? theme.warningText
                 : isNegative
                 ? theme.errorTextDark
-                : theme.altUpcomingText,
+                : theme.upcomingText,
             },
           ])}`}
         >

diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.tsx b/packages/desktop-client/src/components/schedules/StatusBadge.tsx
@@ -26,8 +26,8 @@ export function getStatusProps(status: StatusTypes) {
       };
     case 'due':
       return {
-        color: theme.altWarningText,
-        backgroundColor: theme.altWarningBackground,
+        color: theme.warningTextDark,
+        backgroundColor: theme.warningBackground,
         Icon: AlertTriangle,
       };
     case 'upcoming':

diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -160,7 +160,7 @@ function Status({ status }) {
       color = theme.errorText;
       break;
     case 'due':
-      color = theme.alt2WarningText;
+      color = theme.warningText;
       break;
     case 'upcoming':
       color = theme.alt2TableText;

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -420,7 +420,7 @@ function StatusCell({
       : status === 'missed'
       ? theme.errorText
       : status === 'due'
-      ? theme.alt3WarningText
+      ? theme.warningText
       : selected
       ? theme.pageTextLinkLight
       : theme.pageTextSubdued;
@@ -1045,15 +1045,15 @@ const Transaction = memo(function Transaction(props) {
                   notes === 'missed'
                     ? theme.errorText
                     : notes === 'due'
-                    ? theme.alt5WarningText
+                    ? theme.warningText
                     : selected
                     ? theme.formLabelText
                     : theme.altTableText,
                 backgroundColor:
                   notes === 'missed'
                     ? theme.errorBackground
                     : notes === 'due'
-                    ? theme.altWarningBackground
+                    ? theme.warningBackground
                     : selected
                     ? theme.formLabelBackground
                     : theme.alt2TableBackground,

diff --git a/packages/desktop-client/src/icons/v2/Eye.tsx b/packages/desktop-client/src/icons/v2/Eye.tsx
@@ -17,12 +17,11 @@ const SvgEye = (props: SVGProps<SVGSVGElement>) => (
         strokeWidth: 1.5,
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
-        stroke: '#000',
+        stroke: 'currentColor',
         strokeOpacity: 1,
         strokeMiterlimit: 4,
       }}
       transform="matrix(.96 0 0 .96 1 .48)"
-      fill="currentColor"
     />
     <path
       d="M13.249 12.712a1.749 1.749 0 0 1-1.054 1.644 1.757 1.757 0 0 1-1.92-.354 1.752 1.752 0 0 1 1.225-3.003c.459-.004.902.175 1.232.496.325.322.513.761.517 1.217Zm0 0"
@@ -31,19 +30,17 @@ const SvgEye = (props: SVGProps<SVGSVGElement>) => (
         strokeWidth: 1.5,
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
-        stroke: '#000',
+        stroke: 'currentColor',
         strokeOpacity: 1,
         strokeMiterlimit: 4,
       }}
       transform="matrix(.96 0 0 .96 1 .48)"
-      fill="currentColor"
     />
     <path
       d="M10.32 8.57a.72.72 0 1 0 1.442 0Zm1.442-3.289a.72.72 0 1 0-1.441 0Zm5.8 1.973a.72.72 0 0 0-.316-.969.718.718 0 0 0-.969.313Zm-2.664 2.05a.722.722 0 0 0 .317.97c.351.18.785.039.969-.317ZM5.801 6.599a.715.715 0 0 0-.969-.313.722.722 0 0 0-.312.969Zm.097 3.359a.72.72 0 0 0 .97.316.718.718 0 0 0 .312-.968Zm5.864-1.387V5.281H10.32v3.29Zm4.515-1.972-1.379 2.707 1.286.652 1.378-2.703ZM4.52 7.254l1.378 2.703 1.282-.652L5.8 6.598Zm0 0"
       style={{
         stroke: 'none',
         fillRule: 'nonzero',
-        fill: '#000',
         fillOpacity: 1,
       }}
       transform="translate(1)"

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -104,8 +104,8 @@ export const mobileSettingsViewTheme = colorPalette.navy50;
 export const mobileTransactionViewTheme = colorPalette.purple500;
 
 // Button
-export const buttonMenuText = colorPalette.navy100;
-export const buttonMenuTextHover = colorPalette.navy50;
+export const buttonMenuText = colorPalette.navy900;
+export const buttonMenuTextHover = buttonMenuText;
 export const buttonMenuBackground = 'transparent';
 export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
 export const buttonMenuBorder = colorPalette.navy500;
@@ -156,15 +156,13 @@ export const noticeBackgroundDark = colorPalette.green500;
 export const noticeText = colorPalette.green300;
 export const noticeTextLight = colorPalette.green500;
 export const noticeTextDark = colorPalette.green150;
-export const noticeTextMenu = colorPalette.green500;
+export const noticeTextMenu = colorPalette.green800;
 export const noticeBorder = colorPalette.green800;
 export const warningBackground = colorPalette.orange800;
-export const altWarningBackground = warningBackground;
-export const warningText = colorPalette.orange200;
-export const altWarningText = warningText;
-export const alt2WarningText = warningText;
-export const alt3WarningText = warningText;
-export const warningAccent = colorPalette.orange500;
+export const warningText = colorPalette.orange300;
+export const warningTextLight = colorPalette.orange500;
+export const warningTextDark = colorPalette.orange100;
+export const warningBorder = colorPalette.orange500;
 export const errorBackground = colorPalette.red800;
 export const errorText = colorPalette.red300;
 export const errorTextDark = colorPalette.red150;
@@ -173,8 +171,7 @@ export const errorTextMenu = colorPalette.red500;
 export const errorBorder = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple700;
 export const upcomingText = colorPalette.purple100;
-export const altUpcomingText = upcomingText;
-export const upcomingAccent = tableBorder;
+export const upcomingBorder = tableBorder;
 
 export const formLabelText = colorPalette.purple150;
 export const altFormLabelText = formLabelText;

diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts
@@ -147,22 +147,19 @@ 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;
-export const altWarningText = warningText;
-export const alt2WarningText = warningText;
-export const alt3WarningText = warningText;
-export const warningAccent = colorPalette.orange500;
+export const warningTextLight = warningText;
+export const warningTextDark = warningText;
+export const warningBorder = colorPalette.orange500;
 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;
-export const upcomingAccent = colorPalette.purple100;
+export const upcomingText = colorPalette.purple700;
+export const upcomingBorder = colorPalette.purple500;
 
 export const formLabelText = colorPalette.purple200;
 export const altFormLabelText = formLabelText;

diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
@@ -162,26 +162,19 @@ 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;
-export const warningText = colorPalette.orange800;
-export const altWarningText = colorPalette.orange900;
-export const alt2WarningText = colorPalette.orange700;
-export const alt3WarningText = colorPalette.orange500;
-export const alt4WarningText = colorPalette.orange800;
-export const alt5WarningText = colorPalette.orange600;
-export const warningAccent = colorPalette.orange400;
-export const altWarningAccent = colorPalette.orange600;
+export const warningText = colorPalette.orange700;
+export const warningTextLight = colorPalette.orange500;
+export const warningTextDark = colorPalette.orange900;
+export const warningBorder = colorPalette.orange500;
 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;
-export const upcomingAccent = colorPalette.purple100;
+export const upcomingText = colorPalette.purple700;
+export const upcomingBorder = colorPalette.purple500;
 
 export const formLabelText = colorPalette.blue500;
 export const altFormLabelText = colorPalette.blue700;

diff --git a/upcoming-release-notes/1798.md b/upcoming-release-notes/1798.md
@@ -0,0 +1,5 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+Consolidating and making more consistent the warning and upcoming colors. Also includes some dark mode fixes.