Merge branch 'master' into matiss/darkmode-vrt

actualbudget · Nov 10, 2023 · 5cd2c1d · 5cd2c1d
2 parents 2b5268f + 184b302
commit 5cd2c1d
Show file tree

Hide file tree

Showing 54 changed files with 526 additions and 358 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/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -171,7 +171,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? theme.altTableText
+      ? theme.tableTextLight
       : 'inherit';
 
   const activeStyle = isMobile

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
@@ -71,7 +71,7 @@ function EmptyMessage({ onAdd }) {
         </Button>
 
         <View
-          style={{ marginTop: 20, fontSize: 13, color: theme.alttableText }}
+          style={{ marginTop: 20, fontSize: 13, color: theme.tableTextLight }}
         >
           In the future, you can add accounts from the sidebar.
         </View>
@@ -1201,6 +1201,7 @@ class AccountInternal extends PureComponent {
             items={allTransactions}
             fetchAllIds={this.fetchAllIds}
             registerDispatch={dispatch => (this.dispatchSelected = dispatch)}
+            selectAllFilter={item => !item._unmatched && !item.is_parent}
           >
             <View style={styles.page}>
               <AccountHeader

diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
@@ -48,7 +48,7 @@ function AccountList({
               <div
                 key={group}
                 style={{
-                  color: theme.alt2MenuItemTextHeader,
+                  color: theme.menuAutoCompleteTextHeader,
                   padding: '4px 9px',
                   ...groupHeaderStyle,
                 }}
@@ -87,7 +87,7 @@ function AccountList({
                 {
                   backgroundColor:
                     highlightedIndex === idx
-                      ? theme.alt2MenuItemBackgroundHover
+                      ? theme.menuAutoCompleteBackgroundHover
                       : 'transparent',
                   padding: 4,
                   paddingLeft: 20,

diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -122,7 +122,7 @@ function defaultRenderItems(items, getItemProps, highlightedIndex) {
               cursor: 'default',
               backgroundColor:
                 highlightedIndex === index
-                  ? theme.alt2MenuItemBackgroundHover
+                  ? theme.menuAutoCompleteBackgroundHover
                   : null,
             })}`}
           >

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -77,7 +77,7 @@ function CategoryList({
                 style={{
                   backgroundColor:
                     highlightedIndex === idx
-                      ? theme.alt2MenuItemBackgroundHover
+                      ? theme.menuAutoCompleteBackgroundHover
                       : 'transparent',
                   borderRadius: embedded ? 4 : 0,
                   flexShrink: 0,
@@ -108,7 +108,7 @@ function CategoryList({
               {showGroup && (
                 <div
                   style={{
-                    color: theme.alt2MenuItemTextHeader,
+                    color: theme.menuAutoCompleteTextHeader,
                     padding: '4px 9px',
                     ...groupHeaderStyle,
                   }}
@@ -125,7 +125,7 @@ function CategoryList({
                   {
                     backgroundColor:
                       highlightedIndex === idx
-                        ? theme.alt2MenuItemBackgroundHover
+                        ? theme.menuAutoCompleteBackgroundHover
                         : 'transparent',
                     padding: 4,
                     paddingLeft: 20,

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -88,7 +88,7 @@ function PayeeList({
               padding: '6px 9px',
               backgroundColor:
                 highlightedIndex === 0
-                  ? theme.alt2MenuItemBackgroundHover
+                  ? theme.menuAutoCompleteBackgroundHover
                   : 'transparent',
               borderRadius: embedded ? 4 : 0,
               ':active': {
@@ -132,7 +132,7 @@ function PayeeList({
                 <div
                   key={'title-' + idx}
                   style={{
-                    color: theme.alt2MenuItemTextHeader,
+                    color: theme.menuAutoCompleteTextHeader,
                     padding: '4px 9px',
                     ...groupHeaderStyle,
                   }}
@@ -170,7 +170,7 @@ function PayeeList({
                   {
                     backgroundColor:
                       highlightedIndex === idx + offset
-                        ? theme.alt2MenuItemBackgroundHover
+                        ? theme.menuAutoCompleteBackgroundHover
                         : 'transparent',
                     borderRadius: embedded ? 4 : 0,
                     padding: 4,

diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
@@ -25,7 +25,7 @@ function FilterList({ items, getItemProps, highlightedIndex, embedded }) {
               style={{
                 backgroundColor:
                   highlightedIndex === idx
-                    ? theme.alt2MenuItemBackgroundHover
+                    ? theme.menuAutoCompleteBackgroundHover
                     : 'transparent',
                 padding: 4,
                 paddingLeft: 20,

diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -1,5 +1,6 @@
 import React, { type ComponentProps } from 'react';
 
+import useFeatureFlag from '../../hooks/useFeatureFlag';
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
 import { type CSSProperties } from '../../style';
 import View from '../common/View';
@@ -11,6 +12,8 @@ import { makeAmountStyle } from './util';
 type BalanceWithCarryoverProps = {
   carryover: ComponentProps<typeof CellValue>['binding'];
   balance: ComponentProps<typeof CellValue>['binding'];
+  goal?: ComponentProps<typeof CellValue>['binding'];
+  budgeted?: ComponentProps<typeof CellValue>['binding'];
   disabled?: boolean;
   style?: CSSProperties;
   balanceStyle?: CSSProperties;
@@ -19,20 +22,30 @@ type BalanceWithCarryoverProps = {
 export default function BalanceWithCarryover({
   carryover,
   balance,
+  goal,
+  budgeted,
   disabled,
   style,
   balanceStyle,
   carryoverStyle,
 }: BalanceWithCarryoverProps) {
   let carryoverValue = useSheetValue(carryover);
   let balanceValue = useSheetValue(balance);
-
+  let goalValue = useSheetValue(goal);
+  let budgetedValue = useSheetValue(budgeted);
+  let isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
   return (
     <View style={style}>
       <CellValue
         binding={balance}
         type="financial"
-        getStyle={makeAmountStyle}
+        getStyle={value =>
+          makeAmountStyle(
+            value,
+            isGoalTemplatesEnabled ? goalValue : null,
+            budgetedValue,
+          )
+        }
         style={{
           textAlign: 'right',
           ...(!disabled && {
@@ -58,7 +71,7 @@ export default function BalanceWithCarryover({
           <ArrowThinRight
             width={7}
             height={7}
-            style={makeAmountStyle(balanceValue)}
+            style={makeAmountStyle(balanceValue, goalValue, budgetedValue)}
           />
         </View>
       )}

diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.js b/packages/desktop-client/src/components/budget/BudgetCategories.js
@@ -161,7 +161,9 @@ const BudgetCategories = memo(
           switch (item.type) {
             case 'new-group':
               content = (
-                <Row style={{ backgroundColor: theme.altTableBackground }}>
+                <Row
+                  style={{ backgroundColor: theme.tableRowHeaderBackground }}
+                >
                   <SidebarGroup
                     group={{ id: 'new', name: '' }}
                     editing={true}
@@ -298,7 +300,7 @@ const BudgetCategories = memo(
               <View
                 style={
                   !dragState && {
-                    ':hover': { backgroundColor: '#fcfcfc' },
+                    ':hover': { backgroundColor: theme.tableBackground },
                   }
                 }
               >

diff --git a/packages/desktop-client/src/components/budget/ExpenseGroup.js b/packages/desktop-client/src/components/budget/ExpenseGroup.js
@@ -56,7 +56,7 @@ function ExpenseGroup({
       style={{
         fontWeight: 600,
         opacity: group.hidden ? 0.33 : undefined,
-        backgroundColor: theme.altTableBackground,
+        backgroundColor: theme.tableRowHeaderBackground,
       }}
     >
       {dragState && !dragState.preview && dragState.type === 'group' && (

diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.tsx b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
@@ -38,7 +38,10 @@ function IncomeGroup({
   return (
     <Row
       collapsed={true}
-      style={{ fontWeight: 600, backgroundColor: theme.altTableBackground }}
+      style={{
+        fontWeight: 600,
+        backgroundColor: theme.tableRowHeaderBackground,
+      }}
     >
       <SidebarGroup
         group={group}

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,
@@ -299,7 +299,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
     <ListItem
       style={{
         backgroundColor: isEditingBudget
-          ? theme.altTableTextEditing
+          ? theme.tableTextEditing
           : 'transparent',
         borderBottomWidth: 0,
         borderTopWidth: index > 0 ? 1 : 0,
@@ -446,6 +446,8 @@ const ExpenseCategory = memo(function ExpenseCategory({
             <BalanceWithCarryover
               carryover={rolloverBudget.catCarryover(category.id)}
               balance={rolloverBudget.catBalance(category.id)}
+              goal={reportBudget.catGoal(category.id)}
+              budgeted={reportBudget.catBudgeted(category.id)}
               balanceStyle={{
                 ...styles.smallText,
                 ...styles.underlinedText,
@@ -1357,7 +1359,7 @@ function IncomeGroup({
               : rolloverBudget.groupSumAmount(group.id)
           }
           style={{
-            backgroundColor: theme.altTableBackground,
+            backgroundColor: theme.tableRowHeaderBackground,
           }}
           onAddCategory={onAddCategory}
           onSave={onSave}

diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.js b/packages/desktop-client/src/components/budget/SidebarCategory.js
@@ -116,7 +116,7 @@ function SidebarCategory({
         // The zIndex here forces the the view on top of a row below
         // it that may be "collapsed" and show a border on top
         ...(dragPreview && {
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           zIndex: 10000,
           borderRadius: 6,
           overflow: 'hidden',

diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -148,7 +148,7 @@ function SidebarGroup({
       style={{
         ...style,
         width: 200,
-        backgroundColor: theme.altTableBackground,
+        backgroundColor: theme.tableRowHeaderBackground,
         '& button': { display: 'none' },
         '&:hover button': { display: 'flex', color: theme.tableTextHover },
         ...(dragPreview && {

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/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -327,7 +327,7 @@ export const CategoryMonth = memo(function CategoryMonth({
               onEdit(null);
             },
             style: {
-              backgroundColor: 'white',
+              backgroundColor: theme.tableBackground,
             },
           }}
           onSave={amount => {
@@ -369,6 +369,8 @@ export const CategoryMonth = memo(function CategoryMonth({
               disabled={category.is_income}
               carryover={reportBudget.catCarryover(category.id)}
               balance={reportBudget.catBalance(category.id)}
+              goal={reportBudget.catGoal(category.id)}
+              budgeted={reportBudget.catBudgeted(category.id)}
             />
           </span>
           {balanceTooltip.isOpen && (

diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -332,7 +332,7 @@ export function BudgetSummary({
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.altTableText, margin: 1 }}
+                style={{ color: theme.tableTextLight, margin: 1 }}
               />
             </Button>
           </View>
@@ -367,7 +367,7 @@ export function BudgetSummary({
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={theme.altTableText}
+                defaultColor={theme.tableTextLight}
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>