Merge branch 'master' into matiss/electron-reconnect

actualbudget · Oct 4, 2023 · 9f96b6c · 9f96b6c
2 parents 402526a + 476070b
commit 9f96b6c
Show file tree

Hide file tree

Showing 109 changed files with 179 additions and 506 deletions.
diff --git a/packages/desktop-client/e2e/schedules.test.js b/packages/desktop-client/e2e/schedules.test.js
@@ -78,5 +78,15 @@ test.describe('Schedules', () => {
       'Show completed schedules',
     );
     await expect(page).toHaveScreenshot(screenshotConfig(page));
+
+    // Schedules search shouldn't shrink with many schedules
+    for (let i = 0; i < 15; i++) {
+      await schedulesPage.addNewSchedule({
+        payee: 'Home Depot',
+        account: 'HSBC',
+        amount: 0,
+      });
+    }
+    await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
 });
diff --git a/...edules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png b/...edules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png
diff --git a/...-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png b/...-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png
diff --git a/...js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png b/...js-snapshots/Transactions-creates-a-split-test-transaction-1-chromium-linux.png
diff --git a/...est.js-snapshots/Transactions-filters-transactions-by-date-1-chromium-linux.png b/...est.js-snapshots/Transactions-filters-transactions-by-date-1-chromium-linux.png
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/web",
-  "version": "23.9.0",
+  "version": "23.10.0",
   "license": "MIT",
   "files": [
     "build"

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 }}
     />
@@ -379,7 +379,6 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 fontWeight: 500,
                 textDecorationSkip: 'ink',
               },
-              currentMonth === month && { textDecoration: 'underline' },
             ])}`}
           >
             {monthUtils.format(month, 'MMMM')}
@@ -473,7 +472,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
               padding: '10px 20px',
               justifyContent: 'space-between',
               backgroundColor: theme.tableRowHeaderBackground,
-              borderTop: '1px solid ' + theme.tableRowHeaderText,
+              borderTop: '1px solid ' + theme.tableBorder,
             }}
           >
             <Saved projected={month >= currentMonth} />

diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
@@ -22,7 +22,7 @@ type ButtonProps = HTMLProps<HTMLButtonElement> & {
   as?: ElementType;
 };
 
-type ButtonType = 'normal' | 'primary' | 'bare';
+type ButtonType = 'normal' | 'primary' | 'bare' | 'link';
 
 const backgroundColor = {
   normal: theme.buttonNormalBackground,
@@ -33,6 +33,7 @@ const backgroundColor = {
   bareDisabled: theme.buttonBareDisabledBackground,
   menu: theme.buttonMenuBackground,
   menuSelected: theme.buttonMenuSelectedBackground,
+  link: theme.buttonBareBackground,
 };
 
 const backgroundColorHover = {
@@ -41,6 +42,7 @@ const backgroundColorHover = {
   bare: theme.buttonBareBackgroundHover,
   menu: theme.buttonMenuBackgroundHover,
   menuSelected: theme.buttonMenuSelectedBackgroundHover,
+  link: theme.buttonBareBackground,
 };
 
 const borderColor = {
@@ -50,6 +52,7 @@ const borderColor = {
   primaryDisabled: theme.buttonPrimaryDisabledBorder,
   menu: theme.buttonMenuBorder,
   menuSelected: theme.buttonMenuSelectedBorder,
+  link: theme.buttonBareBackground,
 };
 
 const textColor = {
@@ -61,6 +64,7 @@ const textColor = {
   bareDisabled: theme.buttonBareDisabledText,
   menu: theme.buttonMenuText,
   menuSelected: theme.buttonMenuSelectedText,
+  link: theme.pageTextLink,
 };
 
 const textColorHover = {
@@ -71,6 +75,55 @@ const textColorHover = {
   menuSelected: theme.buttonMenuSelectedTextHover,
 };
 
+const linkButtonHoverStyles = {
+  textDecoration: 'underline',
+  boxShadow: 'none',
+};
+
+const _getBorder = (type, typeWithDisabled) => {
+  switch (type) {
+    case 'bare':
+    case 'link':
+      return 'none';
+
+    default:
+      return '1px solid ' + borderColor[typeWithDisabled];
+  }
+};
+
+const _getPadding = type => {
+  switch (type) {
+    case 'bare':
+      return '5px';
+    case 'link':
+      return '0';
+    default:
+      return '5px 10px';
+  }
+};
+
+const _getActiveStyles = (type, bounce) => {
+  switch (type) {
+    case 'bare':
+      return { backgroundColor: theme.buttonBareBackgroundActive };
+    case 'link':
+      return {
+        transform: 'none',
+        boxShadow: 'none',
+      };
+    default:
+      return {
+        transform: bounce && 'translateY(1px)',
+        boxShadow: `0 1px 4px 0 ${
+          type === 'primary'
+            ? theme.buttonPrimaryShadow
+            : theme.buttonNormalShadow
+        }`,
+        transition: 'none',
+      };
+  }
+};
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -94,22 +147,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     hoveredStyle = {
       ...(type !== 'bare' && styles.shadow),
+      ...(type === 'link' && linkButtonHoverStyles),
       backgroundColor: backgroundColorHover[type],
       color: color || textColorHover[type],
       ...hoveredStyle,
     };
     activeStyle = {
-      ...(type === 'bare'
-        ? { backgroundColor: theme.buttonBareBackgroundActive }
-        : {
-            transform: bounce && 'translateY(1px)',
-            boxShadow:
-              '0 1px 4px 0 ' +
-              (type === 'primary'
-                ? theme.buttonPrimaryShadow
-                : theme.buttonNormalShadow),
-            transition: 'none',
-          }),
+      ..._getActiveStyles(type, bounce),
       ...activeStyle,
     };
 
@@ -118,14 +162,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       alignItems: 'center',
       justifyContent: 'center',
       flexShrink: 0,
-      padding: type === 'bare' ? '5px' : '5px 10px',
+      padding: _getPadding(type),
       margin: 0,
       overflow: 'hidden',
-      display: 'flex',
+      display: type === 'link' ? 'inline' : 'flex',
       borderRadius: 4,
       backgroundColor: backgroundColor[typeWithDisabled],
-      border:
-        type === 'bare' ? 'none' : '1px solid ' + borderColor[typeWithDisabled],
+      border: _getBorder(type, typeWithDisabled),
       color: color || textColor[typeWithDisabled],
       transition: 'box-shadow .25s',
       WebkitAppRegion: 'no-drag',

diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -184,6 +184,7 @@ function ConfigureField({
           <Stack direction="row" align="flex-start">
             {field === 'amount' || field === 'date' ? (
               <Select
+                bare
                 options={
                   field === 'amount'
                     ? [

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,
       };