Merge remote-tracking branch 'upstream/master' into colorConsolidation

packages/desktop-client/e2e/page-models/reports-page.js

@@ -8,6 +8,16 @@ export class ReportsPage {
     return this.pageContent.getByRole('link', { name: /^Net/ }).waitFor();
   }
 
+  async goToNetWorthPage() {
+    await this.pageContent.getByRole('link', { name: /^Net/ }).click();
+    return new ReportsPage(this.page);
+  }
+
+  async goToCashFlowPage() {
+    await this.pageContent.getByRole('link', { name: /^Cash/ }).click();
+    return new ReportsPage(this.page);
+  }
+
   async getAvailableReportList() {
     return this.pageContent
       .getByRole('link')

packages/desktop-client/e2e/reports.test.js

@@ -34,4 +34,14 @@ test.describe('Reports', () => {
     expect(reports).toEqual(['Net Worth', 'Cash Flow']);
     await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
+
+  test('loads net worth graph and checks visuals', async () => {
+    await reportsPage.goToNetWorthPage();
+    await expect(page).toHaveScreenshot(screenshotConfig(page));
+  });
+
+  test('loads cash flow graph and checks visuals', async () => {
+    await reportsPage.goToCashFlowPage();
+    await expect(page).toHaveScreenshot(screenshotConfig(page));
+  });
 });

packages/desktop-client/package.json

@@ -74,7 +74,7 @@
     "watch": "cross-env BROWSER=none yarn start",
     "build": "cross-env INLINE_RUNTIME_CHUNK=false craco build",
     "build:browser": "cross-env ./bin/build-browser",
-    "generate:icons": "rm src/icons/*/*.js; cd src/icons && svgr --expand-props start --ext js -d . .",
+    "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --typescript --expand-props start -d . .",
     "test": "craco test",
     "e2e": "npx playwright test --browser=chromium",
     "vrt": "cross-env VRT=true npx playwright test --browser=chromium"

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

@@ -91,7 +91,11 @@ export default function LoggedInUser({
 
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', ...style }}>
-      <Button type="bare" onClick={() => setMenuOpen(true)} style={{ color }}>
+      <Button
+        type="bare"
+        onClick={() => setMenuOpen(true)}
+        style={color && { color }}
+      >
         {serverMessage()}
       </Button>
 

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

@@ -165,7 +165,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
         syncState === 'offline' ||
         syncState === 'local'
       ? theme.altTableText
-      : null;
+      : 'inherit';
 
   const activeStyle = isMobile
     ? {

packages/desktop-client/src/components/autocomplete/Autocomplete.tsx

@@ -504,8 +504,8 @@ function SingleAutocomplete({
                 offset={2}
                 style={{
                   padding: 0,
-                  backgroundColor: theme.menuItemText,
-                  color: theme.tableBackground,
+                  backgroundColor: theme.menuAutoCompleteBackground,
+                  color: theme.menuAutoCompleteText,
                   minWidth: 200,
                   ...tooltipStyle,
                 }}

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

@@ -149,7 +149,7 @@ const BudgetCategories = memo(
       <View
         style={{
           marginBottom: 10,
-          backgroundColor: 'white',
+          backgroundColor: theme.tableBackground,
           overflow: 'hidden',
           boxShadow: styles.cardShadow,
           borderRadius: '0 0 4px 4px',
@@ -235,7 +235,7 @@ const BudgetCategories = memo(
                 <View
                   style={{
                     height: styles.incomeHeaderHeight,
-                    backgroundColor: 'white',
+                    backgroundColor: theme.tableBackground,
                   }}
                 >
                   <IncomeHeader

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

@@ -2,7 +2,7 @@ import React, { createRef, Component } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
-import { styles } from '../../style';
+import { theme, styles } from '../../style';
 import View from '../common/View';
 import { IntersectionBoundary } from '../tooltips';
 
@@ -189,7 +189,7 @@ class BudgetTable extends Component {
               backgroundColor: 'transparent',
             },
             '& ::-webkit-scrollbar-thumb:vertical': {
-              backgroundColor: 'white',
+              backgroundColor: theme.tableHeaderBackground,
             },
           }),
         }}

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

@@ -21,7 +21,7 @@ const BudgetTotals = memo(function BudgetTotals({
     <View
       data-testid="budget-totals"
       style={{
-        backgroundColor: 'white',
+        backgroundColor: theme.tableBackground,
         flexDirection: 'row',
         flexShrink: 0,
         boxShadow: styles.cardShadow,

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { theme } from '../../style';
 import View from '../common/View';
 import { useDraggable, useDroppable, DropHighlight } from '../sort';
 import { Row } from '../table';
@@ -46,7 +47,7 @@ function ExpenseCategory({
       innerRef={dropRef}
       collapsed={true}
       style={{
-        backgroundColor: 'transparent',
+        backgroundColor: theme.tableBackground,
         opacity: cat.hidden ? 0.5 : undefined,
       }}
     >

packages/desktop-client/src/components/common/Modal.tsx

@@ -18,7 +18,7 @@ import Text from './Text';
 import View from './View';
 
 export type ModalProps = {
-  title: string;
+  title?: string;
   isCurrent?: boolean;
   isHidden?: boolean;
   children: ReactNode | (() => ReactNode);

packages/desktop-client/src/components/modals/FixEncryptionKey.js → packages/desktop-client/src/components/modals/FixEncryptionKey.tsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
 
+import { type FinanceModals } from 'loot-core/src/client/state-types/modals';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getTestKeyError } from 'loot-core/src/shared/errors';
 
+import { type BoundActions } from '../../hooks/useActions';
 import { theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import Button, { ButtonWithLoading } from '../common/Button';
 import ExternalLink from '../common/ExternalLink';
 import InitialFocus from '../common/InitialFocus';
@@ -13,11 +16,17 @@ import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';
 import View from '../common/View';
 
+type FixEncryptionKeyProps = {
+  modalProps: CommonModalProps;
+  actions: BoundActions;
+  options: FinanceModals['fix-encryption-key'];
+};
+
 export default function FixEncryptionKey({
   modalProps,
   actions,
   options = {},
-}) {
+}: FixEncryptionKeyProps) {
   let { hasExistingKey, cloudFileId, onSuccess } = options;
 
   let [password, setPassword] = useState('');

packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx

@@ -35,7 +35,10 @@ function CashFlowGraph({ graphData, isConcise }: CashFlowGraphProps) {
             }
           >
             <VictoryGroup>
-              <VictoryBar data={graphData.expenses} />
+              <VictoryBar
+                data={graphData.expenses}
+                style={{ data: { fill: chartTheme.colors.red } }}
+              />
               <VictoryBar data={graphData.income} />
             </VictoryGroup>
             <VictoryLine

packages/desktop-client/src/components/schedules/EditSchedule.js

@@ -261,7 +261,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
         q('transactions')
           .filter({ schedule: state.schedule.id })
           .select('*')
-          .options({ splits: 'none' }),
+          .options({ splits: 'all' }),
         data => dispatch({ type: 'set-transactions', transactions: data }),
       );
       return live.unsubscribe;
@@ -303,7 +303,7 @@ export default function ScheduleDetails({ modalProps, actions, id }) {
             q('transactions')
               .filter({ $and: filters })
               .select('*')
-              .options({ splits: 'none' }),
+              .options({ splits: 'all' }),
             data => dispatch({ type: 'set-transactions', transactions: data }),
           );
           unsubscribe = live.unsubscribe;

packages/desktop-client/src/components/settings/Themes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useActions } from '../../hooks/useActions';
-import { themeNames, useTheme } from '../../style';
+import { themeOptions, useTheme } from '../../style';
 import Button from '../common/Button';
 import Select from '../common/Select';
 import Text from '../common/Text';
@@ -21,7 +21,7 @@ export default function ThemeSettings() {
               saveGlobalPrefs({ theme: value });
             }}
             value={theme}
-            options={themeNames.map(name => [name, name])}
+            options={themeOptions}
           />
         </Button>
       }

packages/desktop-client/src/icons/AnimatedLoading.js → packages/desktop-client/src/icons/AnimatedLoading.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { type SVGProps } from 'react';
 
-import { css } from 'glamor';
+import { css, keyframes } from 'glamor';
 
 import Loading from './Loading';
 
-const rotation = css.keyframes({
+const rotation = keyframes({
   '0%': { transform: 'rotate(-90deg)' },
   '100%': { transform: 'rotate(666deg)' },
 });
 
-function AnimatedLoading(props) {
+function AnimatedLoading(props: SVGProps<SVGSVGElement>) {
   return (
     <span
       className={`${css({

packages/desktop-client/src/icons/Loading.js → packages/desktop-client/src/icons/Loading.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { type SVGProps, useState } from 'react';
 
-const SvgLoading = props => {
+const SvgLoading = (props: SVGProps<SVGSVGElement>) => {
   let { color = 'currentColor' } = props;
   let [gradientId] = useState('gradient-' + Math.random());
 

packages/desktop-client/src/icons/logo/Logo.js → packages/desktop-client/src/icons/logo/Logo.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgLogo = props => (
+import type { SVGProps } from 'react';
+const SvgLogo = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/logo/index.ts

@@ -0,0 +1 @@
+export { default as Logo } from './Logo';

packages/desktop-client/src/icons/v0/Add.js → packages/desktop-client/src/icons/v0/Add.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAdd = props => (
+import type { SVGProps } from 'react';
+const SvgAdd = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/Delete.js → packages/desktop-client/src/icons/v0/Delete.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgDelete = props => (
+import type { SVGProps } from 'react';
+const SvgDelete = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/ExpandArrow.js → packages/desktop-client/src/icons/v0/ExpandArrow.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgExpandArrow = props => (
+import type { SVGProps } from 'react';
+const SvgExpandArrow = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/LeftArrow2.js → packages/desktop-client/src/icons/v0/LeftArrow2.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgLeftArrow2 = props => (
+import type { SVGProps } from 'react';
+const SvgLeftArrow2 = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/Math.js → packages/desktop-client/src/icons/v0/Math.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgMath = props => (
+import type { SVGProps } from 'react';
+const SvgMath = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/Merge.js → packages/desktop-client/src/icons/v0/Merge.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgMerge = props => (
+import type { SVGProps } from 'react';
+const SvgMerge = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/RightArrow2.js → packages/desktop-client/src/icons/v0/RightArrow2.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgRightArrow2 = props => (
+import type { SVGProps } from 'react';
+const SvgRightArrow2 = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/Split.js → packages/desktop-client/src/icons/v0/Split.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgSplit = props => (
+import type { SVGProps } from 'react';
+const SvgSplit = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/Subtract.js → packages/desktop-client/src/icons/v0/Subtract.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgSubtract = props => (
+import type { SVGProps } from 'react';
+const SvgSubtract = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v0/index.ts

@@ -0,0 +1,9 @@
+export { default as Add } from './Add';
+export { default as Delete } from './Delete';
+export { default as ExpandArrow } from './ExpandArrow';
+export { default as LeftArrow2 } from './LeftArrow2';
+export { default as Math } from './Math';
+export { default as Merge } from './Merge';
+export { default as RightArrow2 } from './RightArrow2';
+export { default as Split } from './Split';
+export { default as Subtract } from './Subtract';

packages/desktop-client/src/icons/v1/Add.js → packages/desktop-client/src/icons/v1/Add.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAdd = props => (
+import type { SVGProps } from 'react';
+const SvgAdd = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v1/AddOutline.js → packages/desktop-client/src/icons/v1/AddOutline.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAddOutline = props => (
+import type { SVGProps } from 'react';
+const SvgAddOutline = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v1/AddSolid.js → packages/desktop-client/src/icons/v1/AddSolid.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAddSolid = props => (
+import type { SVGProps } from 'react';
+const SvgAddSolid = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v1/Adjust.js → packages/desktop-client/src/icons/v1/Adjust.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAdjust = props => (
+import type { SVGProps } from 'react';
+const SvgAdjust = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v1/Airplane.js → packages/desktop-client/src/icons/v1/Airplane.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAirplane = props => (
+import type { SVGProps } from 'react';
+const SvgAirplane = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"

packages/desktop-client/src/icons/v1/Album.js → packages/desktop-client/src/icons/v1/Album.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-const SvgAlbum = props => (
+import type { SVGProps } from 'react';
+const SvgAlbum = (props: SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
     xmlns="http://www.w3.org/2000/svg"