diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png
index b7a52bd48bd13e9172a9a25d71eca900791e8fcb..2c4473c03885040edfb94bbc43de8e547511a97f 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-5-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-5-chromium-linux.png
index b77f925c0d4e7ed5bc245a32b8dd32e10378a093..0fdefd84fb5ed156e3ad45e94d56900c114292fb 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-5-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-6-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-6-chromium-linux.png
index 48bea71a1de75051166480da626faed1d63809ec..d485d4b229b7e335bc7fb5a395cc68f108fe9d3b 100644
Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-6-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png
index fafcfd023219b63b7111a2eb33e39df6884156bb..9633f6d2733eb7550d61eb0810a9b2a1ab7b1576 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png
index 1eff8fa6947c053c6f2bdbf1e1de46c114cec15a..bf7528f50cfa6527271052d8b7dedf91956cc2a2 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-3-chromium-linux.png
index a7a68506f8f3959032b19c64db80cde7e339efb0..5528de4d4d6866172c30f1b0fd26067dbb1616b8 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-cash-flow-graph-and-checks-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
index e0bda3ab2dd6536eba548a6148048c3c078cd8e5..0eb6dfa68f5b5391ecc1b79e449ec383688b0e2a 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
index e22af7e9604ccda3c435f2e71d62f9f06ce3b795..863041bfe391a138d91c64f19f3777f3df3414f7 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
index f1532edc15959a7d6e6538dad20b31d9253332e7..26c458b334a67bbbbe9fe01abc0dcfd7548b421b 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png
index c50e5457af86844b5d9b60335e4b54376dd48ab8..f6f08b99604dfd9463c23663905d3cd395ead043 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png
index 0df43e7661dcf9740c92dc3222c970b84510cde9..09ebecb26b282ed961a2055e5f5b4c62fa337d2c 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png
index 12b98df1d84c4e9ba7ac5f6db7cdc36e9ce7577e..f26d07513a43e44f0f0a148e2860ef89e2136d1b 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png
index d9774aed8e4906f5a961e1af39d0912239192274..cca11e62b5ff5135c36519acd19a6dc8c11c60fe 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png
index 97dfea1c8e84c6b0070fbe160065f7c5f2f31520..099838098cd38248680ef95f7ab987881df7bca7 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-3-chromium-linux.png
index 495edb25fbd53f4f2ff56dbff0bb4fbf1f3f3730..26046b81ae68bcf3ad5b3230ce4e512cdc491a39 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png
index 2d5871410e388e40852ab913e296e571a933fcf0..4347c82c0449ae42a0a4b211ca01d1347f282f04 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
index c412eb709172dff932511f0c43d5bf8b11f83d4f..db978e433d783bad96a71dffcd27a6cc905c7087 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
index 0fc80d50b196a53b32a9820993ce413c833f7625..79c6284fad419249d8017af809b5e0d24cd91018 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png
index 3cb6f9c634549ef7b3bdb91030a6eb669d885aef..be2af3a31ee60ed3fe18a39c2429d2426becdb91 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png
index e2988c222b7199a9c462dd7405d531760834030e..4722fad3d167f4015a48706b75a63062ddeb0585 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png
index 717ce7b1abd35c8ecce65631d76106fc959eb0cf..0f2889138a096e405286cd418bc585aceabfa1cb 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-split-transaction-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png
index 344f4a96c3438002ae2cb6c8ee9f1ffcd95b78b0..9922528aeba79e11bae8275a03328f86390a9518 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png
index a8598c7f22901dcc3311ee6d4113852d9c27d240..e8893424717533525c7be1ff785fe1231e8905d7 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png
index b3b74e82e93f07c2ac1e7f019e9e443921f434de..45daf2a6de6c991bb92ae15c9f4996a763fa177b 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png
index 5b4527e3690f785dac7705a90c0e5e60fe5fdd88..aa8a31797a94f0ce056337d41576887fac975465 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png
index f01cbe00df2b928e802a642a8396ab2b5834d427..6aad71bafdd8b15ca391aee74fba1a99a7d8df14 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-10-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png
index 94896bbe5b423a35c4305671c2af420eaeb5c93c..31d153287307bccf7f12fe721b10398a712e362d 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-11-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png
index 2e8fe857b002eadd8dce99ba33a2385a72ed7f8e..01f43edd27651db6d977919fd15dca49093b2812 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-12-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png
index 08fabbc604d8284e1125fd6fa4d06ab8ab5dc521..e63570f378d0d51bb82456ef953f87246fa41bd6 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png
index 0a8e622c18318a5eb8c69419b76c5badaa34595f..cf303b42177d20d88477fe624157b785f2daa821 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png
index 537087ac77bd102ae454790ed6b06c209e22984c..2389348acb871d52aeff7c45c4267a3dd8f103b6 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-4-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png
index 4b5b228db30b2dca7c773ec12603942c71c39c6e..ef35843b909dd6c65b84af8f0661c4e9f1ec6f04 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-5-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png
index 23a9ff34ef2bcc0955cfaa704234680644edab3f..506ff70a510b0f65b185d402de76374267c701f7 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-6-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png
index de12408683ee2ce9c0d37f370d37e361c58f6e88..5d9683e21f8fcbb0fc167be208f48d2924841650 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-7-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png
index c375a5f4a2fe4d71f4cb0f248fc48a740d69659f..f33364446a2cd0cdc8b05c3a1e2705d1c12fc4f2 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-8-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png
index 8811f92ff93cd9301c8d9efa40d670987769390b..8831f517fb0269e10491eda38eab9798649ea248 100644
Binary files a/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png and b/packages/desktop-client/e2e/schedules.test.js-snapshots/Schedules-creates-a-new-schedule-posts-the-transaction-and-later-completes-it-9-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png
index 4cb9865b5c26a148425833c24f87acef744cb6dd..6871a53e27c36d189b24c4fea45d5cecf275e8f8 100644
Binary files a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png
index f418cdd143c9240d0b5cb6c44d98d42942da6442..da60fcc85d0271aa22e4e7310120707c0422138b 100644
Binary files a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-3-chromium-linux.png
index accc0a40e39ee65553dd749bcbd7cfc7f0009f0d..6ce072839b79e240866d8e46660b1b81dbafcaa0 100644
Binary files a/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/settings.test.js-snapshots/Settings-checks-the-page-visuals-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/ManageRulesPage.tsx b/packages/desktop-client/src/components/ManageRulesPage.tsx
index ad57e2bd2d905ebb8e88d4365ce11953b764ccd3..efb68325139602759c6c81bb9409ab2e577425ef 100644
--- a/packages/desktop-client/src/components/ManageRulesPage.tsx
+++ b/packages/desktop-client/src/components/ManageRulesPage.tsx
@@ -5,7 +5,7 @@ import { Page } from './Page';
export function ManageRulesPage() {
return (
- <Page title="Rules">
+ <Page header="Rules">
<ManageRules isModal={false} payeeId={null} />
</Page>
);
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index 3c3f017920482afaee149efb4fc6ef10846a6690..c93c095b60dcbcd7dd1dc80c0c59195e29c9dadc 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -1,4 +1,4 @@
-import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
import { useResponsive } from '../ResponsiveProvider';
import { theme, styles, type CSSProperties } from '../style';
@@ -6,175 +6,143 @@ import { theme, styles, type CSSProperties } from '../style';
import { Text } from './common/Text';
import { View } from './common/View';
+const HEADER_HEIGHT = 50;
+
type PageHeaderProps = {
title: ReactNode;
- titleContainerProps?: ComponentPropsWithoutRef<typeof View>;
style?: CSSProperties;
- leftContentContainerProps?: ComponentPropsWithoutRef<typeof View>;
+};
+
+export function PageHeader({ title, style }: PageHeaderProps) {
+ return (
+ <View
+ style={{
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ marginLeft: 20,
+ ...style,
+ }}
+ >
+ <View
+ style={{
+ flexDirection: 'row',
+ fontSize: 25,
+ fontWeight: 500,
+ }}
+ >
+ {typeof title === 'string' ? <Text>{title}</Text> : title}
+ </View>
+ </View>
+ );
+}
+
+type MobilePageHeaderProps = {
+ title: ReactNode;
+ style?: CSSProperties;
leftContent?: ReactNode;
- rightContentContainerProps?: ComponentPropsWithoutRef<typeof View>;
rightContent?: ReactNode;
};
-const HEADER_HEIGHT = 50;
-
-function PageHeader({
+export function MobilePageHeader({
title,
- titleContainerProps,
style,
- leftContentContainerProps,
leftContent,
- rightContentContainerProps,
rightContent,
-}: PageHeaderProps) {
- const { isNarrowWidth } = useResponsive();
-
- if (isNarrowWidth) {
- return (
+}: MobilePageHeaderProps) {
+ return (
+ <View
+ style={{
+ alignItems: 'center',
+ backgroundColor: theme.mobileHeaderBackground,
+ color: theme.mobileHeaderText,
+ flexDirection: 'row',
+ flexShrink: 0,
+ height: HEADER_HEIGHT,
+ ...style,
+ }}
+ >
+ <View
+ style={{
+ flexBasis: '25%',
+ justifyContent: 'flex-start',
+ flexDirection: 'row',
+ }}
+ >
+ {leftContent}
+ </View>
<View
+ role="heading"
style={{
+ textAlign: 'center',
alignItems: 'center',
- backgroundColor: theme.mobileHeaderBackground,
- color: theme.mobileHeaderText,
+ justifyContent: 'center',
flexDirection: 'row',
- flexShrink: 0,
- height: HEADER_HEIGHT,
- ...style,
+ flexBasis: '50%',
+ fontSize: 17,
+ fontWeight: 500,
+ overflowY: 'auto',
}}
>
- <View
- {...leftContentContainerProps}
- style={{
- flexBasis: '25%',
- justifyContent: 'flex-start',
- flexDirection: 'row',
- ...leftContentContainerProps?.style,
- }}
- >
- {leftContent}
- </View>
- <View
- role="heading"
- {...titleContainerProps}
- style={{
- textAlign: 'center',
- alignItems: 'center',
- justifyContent: 'center',
- flexDirection: 'row',
- flexBasis: '50%',
- fontSize: 17,
- fontWeight: 500,
- overflowY: 'auto',
- ...titleContainerProps?.style,
- }}
- >
- {title}
- </View>
- <View
- {...rightContentContainerProps}
- style={{
- flexBasis: '25%',
- justifyContent: 'flex-end',
- flexDirection: 'row',
- ...rightContentContainerProps?.style,
- }}
- >
- {rightContent}
- </View>
+ {title}
</View>
- );
- }
-
- return (
- <Text
- style={{
- fontSize: 25,
- fontWeight: 500,
- marginBottom: 15,
- ...style,
- }}
- >
- {title}
- </Text>
+ <View
+ style={{
+ flexBasis: '25%',
+ justifyContent: 'flex-end',
+ flexDirection: 'row',
+ }}
+ >
+ {rightContent}
+ </View>
+ </View>
);
}
type PageProps = {
- titleContainerProps?: PageHeaderProps['titleContainerProps'];
- title: PageHeaderProps['title'];
- headerStyle?: CSSProperties;
- headerLeftContentContainerProps?: PageHeaderProps['leftContentContainerProps'];
- headerLeftContent?: PageHeaderProps['leftContent'];
- headerRightContentContainerProps?: PageHeaderProps['rightContentContainerProps'];
- headerRightContent?: PageHeaderProps['rightContent'];
+ header: ReactNode;
style?: CSSProperties;
padding?: number;
- childrenContainerProps?: ComponentPropsWithoutRef<typeof View>;
children: ReactNode;
footer?: ReactNode;
};
-export function Page({
- titleContainerProps,
- title,
- headerStyle,
- headerLeftContentContainerProps,
- headerLeftContent,
- headerRightContentContainerProps,
- headerRightContent,
- style,
- padding,
- childrenContainerProps,
- children,
- footer,
-}: PageProps) {
+export function Page({ header, style, padding, children, footer }: PageProps) {
const { isNarrowWidth } = useResponsive();
- const _padding = padding != null ? padding : isNarrowWidth ? 10 : 20;
+ const childrenPadding = padding != null ? padding : isNarrowWidth ? 10 : 20;
+
+ const headerToRender =
+ typeof header === 'string' ? (
+ isNarrowWidth ? (
+ <MobilePageHeader title={header} />
+ ) : (
+ <PageHeader title={header} />
+ )
+ ) : (
+ header
+ );
return (
<View
style={{
...(!isNarrowWidth && styles.page),
+ flex: 1,
+ backgroundColor: isNarrowWidth
+ ? theme.mobilePageBackground
+ : theme.pageBackground,
...style,
}}
>
- <PageHeader
- title={title}
- titleContainerProps={titleContainerProps}
- leftContentContainerProps={headerLeftContentContainerProps}
- leftContent={headerLeftContent}
- rightContentContainerProps={headerRightContentContainerProps}
- rightContent={headerRightContent}
+ {headerToRender}
+ <View
style={{
- ...(!isNarrowWidth && { paddingInline: _padding }),
- ...headerStyle,
+ flex: 1,
+ overflowY: isNarrowWidth ? 'auto' : undefined,
+ padding: `0 ${childrenPadding}px`,
}}
- />
- {isNarrowWidth ? (
- <View
- {...childrenContainerProps}
- style={{
- flex: 1,
- overflowY: 'auto',
- padding: _padding,
- ...childrenContainerProps?.style,
- }}
- >
- {children}
- </View>
- ) : (
- <View
- {...childrenContainerProps}
- style={{
- flex: 1,
- paddingLeft: _padding,
- paddingRight: _padding,
- ...childrenContainerProps?.style,
- }}
- >
- {children}
- </View>
- )}
+ >
+ {children}
+ </View>
{footer}
</View>
);
diff --git a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
index f563dcab83457070cf84fb33fde1e48c51ff7175..cc4a93113d5c78656cae7a2bdf2e33a99fce3c1c 100644
--- a/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileBackButton.tsx
@@ -7,10 +7,11 @@ import { Button } from '../common/Button';
import { Text } from '../common/Text';
type MobileBackButtonProps = {
+ onClick?: () => void;
style?: CSSProperties;
};
-export function MobileBackButton({ style }: MobileBackButtonProps) {
+export function MobileBackButton({ onClick, style }: MobileBackButtonProps) {
const navigate = useNavigate();
return (
<Button
@@ -28,7 +29,7 @@ export function MobileBackButton({ style }: MobileBackButtonProps) {
color: theme.mobileHeaderText,
background: theme.mobileHeaderTextHover,
}}
- onPointerUp={() => navigate(-1)}
+ onClick={onClick || (() => navigate(-1))}
>
<SvgCheveronLeft
style={{ width: 30, height: 30, margin: -10, marginLeft: -5 }}
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
index 4903e42058f3f6bfa5760ee666924bcb8ea1d88a..36c4e4a023b0cce74206f0569cb6440b3dae7aa4 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.jsx
@@ -33,7 +33,7 @@ import { usePreviewTransactions } from '../../../hooks/usePreviewTransactions';
import { styles, theme } from '../../../style';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
-import { Page } from '../../Page';
+import { MobilePageHeader, Page } from '../../Page';
import { MobileBackButton } from '../MobileBackButton';
import { AddTransactionButton } from '../transactions/AddTransactionButton';
import { TransactionListWithBalances } from '../transactions/TransactionListWithBalances';
@@ -41,16 +41,16 @@ import { TransactionListWithBalances } from '../transactions/TransactionListWith
export function AccountTransactions({ account, pending, failed }) {
return (
<Page
- title={
- <AccountName account={account} pending={pending} failed={failed} />
+ header={
+ <MobilePageHeader
+ title={
+ <AccountName account={account} pending={pending} failed={failed} />
+ }
+ leftContent={<MobileBackButton />}
+ rightContent={<AddTransactionButton accountId={account.id} />}
+ />
}
- headerLeftContent={<MobileBackButton />}
- headerRightContent={<AddTransactionButton accountId={account.id} />}
padding={0}
- style={{
- flex: 1,
- backgroundColor: theme.mobilePageBackground,
- }}
>
<SchedulesProvider transform={getSchedulesTransform(account.id)}>
<TransactionListWithPreviews account={account} />
diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
index 1d73becf7d6c792101860bb5e02595cf533a707a..ed3dbcfc97459c360306a5cfd99c85dde7c1ca19 100644
--- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
@@ -16,7 +16,7 @@ import { Button } from '../../common/Button';
import { Text } from '../../common/Text';
import { TextOneLine } from '../../common/TextOneLine';
import { View } from '../../common/View';
-import { Page } from '../../Page';
+import { MobilePageHeader, Page } from '../../Page';
import { CellValue } from '../../spreadsheet/CellValue';
import { MOBILE_NAV_HEIGHT } from '../MobileNavTabs';
import { PullToRefresh } from '../PullToRefresh';
@@ -177,25 +177,27 @@ function AccountList({
return (
<Page
- title="Accounts"
- headerRightContent={
- <Button
- type="bare"
- style={{
- color: theme.mobileHeaderText,
- margin: 10,
- }}
- activeStyle={noBackgroundColorStyle}
- hoveredStyle={noBackgroundColorStyle}
- onClick={onAddAccount}
- >
- <SvgAdd width={20} height={20} />
- </Button>
+ header={
+ <MobilePageHeader
+ title="Accounts"
+ rightContent={
+ <Button
+ type="bare"
+ style={{
+ color: theme.mobileHeaderText,
+ margin: 10,
+ }}
+ activeStyle={noBackgroundColorStyle}
+ hoveredStyle={noBackgroundColorStyle}
+ onClick={onAddAccount}
+ >
+ <SvgAdd width={20} height={20} />
+ </Button>
+ }
+ />
}
padding={0}
style={{
- flex: 1,
- backgroundColor: theme.mobilePageBackground,
paddingBottom: MOBILE_NAV_HEIGHT,
}}
>
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index d25e3f9c5e5cb8725968a2f85d497a92167a88b4..ed7c7ede8bf8ee317deaec176db0b9d5e8ab0905 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -25,7 +25,7 @@ import { Card } from '../../common/Card';
import { Label } from '../../common/Label';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
-import { Page } from '../../Page';
+import { MobilePageHeader, Page } from '../../Page';
import { CellValue } from '../../spreadsheet/CellValue';
import { useFormat } from '../../spreadsheet/useFormat';
import { useSheetValue } from '../../spreadsheet/useSheetValue';
@@ -1212,30 +1212,33 @@ export function BudgetTable({
return (
<Page
padding={0}
- title={
- <MonthSelector
- month={month}
- monthBounds={monthBounds}
- onOpenMonthMenu={onOpenBudgetMonthMenu}
- onPrevMonth={onPrevMonth}
- onNextMonth={onNextMonth}
+ header={
+ <MobilePageHeader
+ title={
+ <MonthSelector
+ month={month}
+ monthBounds={monthBounds}
+ onOpenMonthMenu={onOpenBudgetMonthMenu}
+ onPrevMonth={onPrevMonth}
+ onNextMonth={onNextMonth}
+ />
+ }
+ leftContent={
+ <Button
+ type="bare"
+ style={{
+ color: theme.mobileHeaderText,
+ margin: 10,
+ }}
+ hoveredStyle={noBackgroundColorStyle}
+ activeStyle={noBackgroundColorStyle}
+ onClick={() => onOpenBudgetPageMenu?.()}
+ >
+ <SvgLogo width="20" height="20" />
+ </Button>
+ }
/>
}
- headerLeftContent={
- <Button
- type="bare"
- style={{
- color: theme.mobileHeaderText,
- margin: 10,
- }}
- hoveredStyle={noBackgroundColorStyle}
- activeStyle={noBackgroundColorStyle}
- onClick={() => onOpenBudgetPageMenu?.()}
- >
- <SvgLogo width="20" height="20" />
- </Button>
- }
- style={{ flex: 1 }}
>
<View
style={{
@@ -1373,6 +1376,7 @@ export function BudgetTable({
<View
data-testid="budget-table"
style={{
+ backgroundColor: theme.pageBackground,
paddingBottom: MOBILE_NAV_HEIGHT,
}}
>
diff --git a/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx b/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx
index 620a886ad8bfc268e4d72c40f0fb05bf44d7bb21..a3113f661d81895a19e2dee7f86a73a6408dc746 100644
--- a/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/CategoryTransactions.jsx
@@ -14,10 +14,9 @@ import { isPreviewId } from 'loot-core/shared/transactions';
import { useDateFormat } from '../../../hooks/useDateFormat';
import { useLocalPref } from '../../../hooks/useLocalPref';
import { useNavigate } from '../../../hooks/useNavigate';
-import { theme } from '../../../style';
import { TextOneLine } from '../../common/TextOneLine';
import { View } from '../../common/View';
-import { Page } from '../../Page';
+import { MobilePageHeader, Page } from '../../Page';
import { MobileBackButton } from '../MobileBackButton';
import { AddTransactionButton } from '../transactions/AddTransactionButton';
import { TransactionListWithBalances } from '../transactions/TransactionListWithBalances';
@@ -120,19 +119,21 @@ export function CategoryTransactions({ category, month }) {
return (
<Page
- title={
- <View>
- <TextOneLine>{category.name}</TextOneLine>
- <TextOneLine>({monthUtils.format(month, 'MMMM ‘yy')})</TextOneLine>
- </View>
+ header={
+ <MobilePageHeader
+ title={
+ <View>
+ <TextOneLine>{category.name}</TextOneLine>
+ <TextOneLine>
+ ({monthUtils.format(month, 'MMMM ‘yy')})
+ </TextOneLine>
+ </View>
+ }
+ leftContent={<MobileBackButton />}
+ rightContent={<AddTransactionButton categoryId={category.id} />}
+ />
}
- headerLeftContent={<MobileBackButton />}
- headerRightContent={<AddTransactionButton categoryId={category.id} />}
padding={0}
- style={{
- flex: 1,
- backgroundColor: theme.mobilePageBackground,
- }}
>
<TransactionListWithBalances
transactions={transactions}
diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
index 53a1a1154a7b67869d436468a7b016f3de76e402..821e54de6d6de2616da4cdd75af75586286aea42 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -56,7 +56,7 @@ import { styles, theme } from '../../../style';
import { Button } from '../../common/Button';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
-import { Page } from '../../Page';
+import { MobilePageHeader, Page } from '../../Page';
import { AmountInput } from '../../util/AmountInput';
import { MobileBackButton } from '../MobileBackButton';
import { FieldLabel, TapField, InputField, BooleanField } from '../MobileForms';
@@ -684,22 +684,22 @@ const TransactionEditInner = memo(function TransactionEditInner({
return (
<Page
- title={
- transaction.payee == null
- ? adding
- ? 'New Transaction'
- : 'Transaction'
- : title
+ header={
+ <MobilePageHeader
+ title={
+ transaction.payee == null
+ ? adding
+ ? 'New Transaction'
+ : 'Transaction'
+ : title
+ }
+ leftContent={<MobileBackButton />}
+ />
}
titleStyle={{
fontSize: 16,
fontWeight: 500,
}}
- style={{
- flex: 1,
- backgroundColor: theme.mobilePageBackground,
- }}
- headerLeftContent={<MobileBackButton />}
footer={
<Footer
transactions={transactions}
diff --git a/packages/desktop-client/src/components/payees/ManagePayeesPage.jsx b/packages/desktop-client/src/components/payees/ManagePayeesPage.jsx
index 5939c95aa29914151d941ce39b67d8e03a1073c1..b27f396cb873f659f38556a1e4211795aa5e641f 100644
--- a/packages/desktop-client/src/components/payees/ManagePayeesPage.jsx
+++ b/packages/desktop-client/src/components/payees/ManagePayeesPage.jsx
@@ -8,7 +8,7 @@ import { ManagePayeesWithData } from './ManagePayeesWithData';
export function ManagePayeesPage() {
const location = useLocation();
return (
- <Page title="Payees">
+ <Page header="Payees">
<ManagePayeesWithData
initialSelectedIds={
location.state && location.state.selectedPayee
diff --git a/packages/desktop-client/src/components/reports/Header.jsx b/packages/desktop-client/src/components/reports/Header.jsx
index f9ad57bb9d084f573687e47de4e33ff6dad9964e..360a754de7a065cb5201f14435ef192807652a93 100644
--- a/packages/desktop-client/src/components/reports/Header.jsx
+++ b/packages/desktop-client/src/components/reports/Header.jsx
@@ -2,11 +2,8 @@ import { useLocation } from 'react-router-dom';
import * as monthUtils from 'loot-core/src/shared/months';
-import { SvgArrowLeft } from '../../icons/v1';
import { useResponsive } from '../../ResponsiveProvider';
-import { styles } from '../../style';
import { Button } from '../common/Button';
-import { Link } from '../common/Link';
import { Select } from '../common/Select';
import { View } from '../common/View';
import { AppliedFilters } from '../filters/AppliedFilters';
@@ -20,7 +17,6 @@ import {
} from './reportRanges';
export function Header({
- title,
start,
end,
show1Month,
@@ -42,26 +38,16 @@ export function Header({
return (
<View
style={{
- padding: 10,
+ padding: 20,
paddingTop: 0,
flexShrink: 0,
}}
>
- <Link
- variant="button"
- type="bare"
- to="/reports"
- style={{ marginBottom: '15', alignSelf: 'flex-start' }}
- >
- <SvgArrowLeft width={10} height={10} style={{ marginRight: 5 }} /> Back
- </Link>
- <View style={styles.veryLargeText}>{title}</View>
-
{!['/reports/custom', '/reports/spending'].includes(path) && (
<View
style={{
flexDirection: isNarrowWidth ? 'column' : 'row',
- alignItems: isNarrowWidth ? 'right' : 'center',
+ alignItems: isNarrowWidth ? 'flex-start' : 'center',
marginTop: 15,
gap: 15,
}}
@@ -113,6 +99,7 @@ export function Header({
flexDirection: 'row',
alignItems: 'center',
gap: 15,
+ flexWrap: 'wrap',
}}
>
{show1Month && (
diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
index 550e039c63f831d714199408876d56325793de46..c8138187a73cc7a39bd5b527b0e7ec9d7b2ec337 100644
--- a/packages/desktop-client/src/components/reports/Overview.tsx
+++ b/packages/desktop-client/src/components/reports/Overview.tsx
@@ -6,11 +6,12 @@ import { useReports } from 'loot-core/src/client/data-hooks/reports';
import { useAccounts } from '../../hooks/useAccounts';
import { useFeatureFlag } from '../../hooks/useFeatureFlag';
import { useResponsive } from '../../ResponsiveProvider';
-import { styles } from '../../style';
import { Button } from '../common/Button';
import { Link } from '../common/Link';
import { Text } from '../common/Text';
import { View } from '../common/View';
+import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
+import { MobilePageHeader, Page, PageHeader } from '../Page';
import { CashFlowCard } from './reports/CashFlowCard';
import { CustomReportListCards } from './reports/CustomReportListCards';
@@ -29,30 +30,32 @@ export function Overview() {
const accounts = useAccounts();
return (
- <View
- style={{
- ...styles.page,
- padding: 15,
- paddingTop: 0,
- minWidth: isNarrowWidth ? undefined : 700,
- }}
+ <Page
+ header={
+ isNarrowWidth ? (
+ <MobilePageHeader title="Reports" />
+ ) : (
+ <View
+ style={{
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginRight: 15,
+ }}
+ >
+ <PageHeader title="Reports" />
+ {customReportsFeatureFlag && !isNarrowWidth && (
+ <Link to="/reports/custom" style={{ textDecoration: 'none' }}>
+ <Button type="primary">
+ <Text>Create new custom report</Text>
+ </Button>
+ </Link>
+ )}
+ </View>
+ )
+ }
+ padding={0}
+ style={{ paddingBottom: MOBILE_NAV_HEIGHT }}
>
- {customReportsFeatureFlag && !isNarrowWidth && (
- <View
- style={{
- flex: '0 0 auto',
- alignItems: 'flex-end',
- marginRight: 15,
- marginTop: 10,
- }}
- >
- <Link to="/reports/custom" style={{ textDecoration: 'none' }}>
- <Button type="primary">
- <Text>Create new custom report</Text>
- </Button>
- </Link>
- </View>
- )}
<View
style={{
flexDirection: isNarrowWidth ? 'column' : 'row',
@@ -66,6 +69,6 @@ export function Overview() {
{customReportsFeatureFlag && (
<CustomReportListCards reports={customReports} />
)}
- </View>
+ </Page>
);
}
diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
index 8334fa9de80b1b4c452bb75cd5f23ff7340a1864..003d5644ca8df4691c5469b5e01c960ffab9ffd9 100644
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -21,9 +21,10 @@ import {
} from 'loot-core/src/shared/util';
import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme } from '../../../style';
+import { type CSSProperties, theme } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { chartTheme } from '../chart-theme';
+import { Container } from '../Container';
const MAX_BAR_SIZE = 50;
const ANIMATION_DURATION = 1000; // in ms
@@ -90,11 +91,13 @@ type CashFlowGraphProps = {
};
isConcise: boolean;
showBalance?: boolean;
+ style?: CSSProperties;
};
export function CashFlowGraph({
graphData,
isConcise,
showBalance = true,
+ style,
}: CashFlowGraphProps) {
const privacyMode = usePrivacyMode();
const [yAxisIsHovered, setYAxisIsHovered] = useState(false);
@@ -108,63 +111,72 @@ export function CashFlowGraph({
}));
return (
- <ResponsiveContainer width="100%" height={300}>
- <ComposedChart stackOffset="sign" data={data}>
- <CartesianGrid strokeDasharray="3 3" vertical={false} />
- <XAxis
- dataKey="date"
- tick={{ fill: theme.reportsLabel }}
- tickFormatter={x => {
- // eslint-disable-next-line rulesdir/typography
- return d.format(x, isConcise ? "MMM ''yy" : 'MMM d');
- }}
- minTickGap={50}
- />
- <YAxis
- tick={{ fill: theme.reportsLabel }}
- tickCount={8}
- tickFormatter={value =>
- privacyMode && !yAxisIsHovered
- ? '...'
- : amountToCurrencyNoDecimal(value)
- }
- onMouseEnter={() => setYAxisIsHovered(true)}
- onMouseLeave={() => setYAxisIsHovered(false)}
- />
- <Tooltip
- labelFormatter={x => {
- // eslint-disable-next-line rulesdir/typography
- return d.format(x, isConcise ? "MMM ''yy" : 'MMM d');
- }}
- content={<CustomTooltip isConcise={isConcise} />}
- isAnimationActive={false}
- />
+ <Container style={style}>
+ {(width, height) => (
+ <ResponsiveContainer>
+ <ComposedChart
+ width={width}
+ height={height}
+ stackOffset="sign"
+ data={data}
+ >
+ <CartesianGrid strokeDasharray="3 3" vertical={false} />
+ <XAxis
+ dataKey="date"
+ tick={{ fill: theme.reportsLabel }}
+ tickFormatter={x => {
+ // eslint-disable-next-line rulesdir/typography
+ return d.format(x, isConcise ? "MMM ''yy" : 'MMM d');
+ }}
+ minTickGap={50}
+ />
+ <YAxis
+ tick={{ fill: theme.reportsLabel }}
+ tickCount={8}
+ tickFormatter={value =>
+ privacyMode && !yAxisIsHovered
+ ? '...'
+ : amountToCurrencyNoDecimal(value)
+ }
+ onMouseEnter={() => setYAxisIsHovered(true)}
+ onMouseLeave={() => setYAxisIsHovered(false)}
+ />
+ <Tooltip
+ labelFormatter={x => {
+ // eslint-disable-next-line rulesdir/typography
+ return d.format(x, isConcise ? "MMM ''yy" : 'MMM d');
+ }}
+ content={<CustomTooltip isConcise={isConcise} />}
+ isAnimationActive={false}
+ />
- <ReferenceLine y={0} stroke="#000" />
- <Bar
- dataKey="income"
- stackId="a"
- fill={chartTheme.colors.blue}
- maxBarSize={MAX_BAR_SIZE}
- animationDuration={ANIMATION_DURATION}
- />
- <Bar
- dataKey="expenses"
- stackId="a"
- fill={chartTheme.colors.red}
- maxBarSize={MAX_BAR_SIZE}
- animationDuration={ANIMATION_DURATION}
- />
- <Line
- type="monotone"
- dataKey="balance"
- dot={false}
- hide={!showBalance}
- stroke={theme.pageTextLight}
- strokeWidth={2}
- animationDuration={ANIMATION_DURATION}
- />
- </ComposedChart>
- </ResponsiveContainer>
+ <ReferenceLine y={0} stroke="#000" />
+ <Bar
+ dataKey="income"
+ stackId="a"
+ fill={chartTheme.colors.blue}
+ maxBarSize={MAX_BAR_SIZE}
+ animationDuration={ANIMATION_DURATION}
+ />
+ <Bar
+ dataKey="expenses"
+ stackId="a"
+ fill={chartTheme.colors.red}
+ maxBarSize={MAX_BAR_SIZE}
+ animationDuration={ANIMATION_DURATION}
+ />
+ <Line
+ type="monotone"
+ dataKey="balance"
+ dot={false}
+ hide={!showBalance}
+ stroke={theme.pageTextLight}
+ strokeWidth={2}
+ animationDuration={ANIMATION_DURATION}
+ />
+ </ComposedChart>
+ </ResponsiveContainer>
+ )}
+ </Container>
);
}
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 7a251f65facefbc5279e15d2e0ba8dd461ca0306..de2aa02949f115c5e3ea22e2f88c976a5d6844f0 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -116,8 +116,7 @@ export function NetWorthGraph({
{(width, height) =>
graphData && (
<ResponsiveContainer>
- <div>
- {!compact && <div style={{ marginTop: '15px' }} />}
+ <div style={{ ...(!compact && { marginTop: '15px' }) }}>
<AreaChart
width={width}
height={height}
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
index 68cbaec92e58eab006849e0a7b2be946e34f50ed..62187004ee24c62f2b56cc0351420ad8c933accd 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx
@@ -8,14 +8,17 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
import { type RuleConditionEntity } from 'loot-core/types/models';
import { useFilters } from '../../../hooks/useFilters';
+import { useNavigate } from '../../../hooks/useNavigate';
import { useResponsive } from '../../../ResponsiveProvider';
-import { theme, styles } from '../../../style';
+import { theme } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { Block } from '../../common/Block';
import { Button } from '../../common/Button';
import { Paragraph } from '../../common/Paragraph';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
+import { MobileBackButton } from '../../mobile/MobileBackButton';
+import { MobilePageHeader, Page, PageHeader } from '../../Page';
import { PrivacyFilter } from '../../PrivacyFilter';
import { Change } from '../Change';
import { CashFlowGraph } from '../graphs/CashFlowGraph';
@@ -24,7 +27,6 @@ import { cashFlowByDate } from '../spreadsheets/cash-flow-spreadsheet';
import { useReport } from '../useReport';
export function CashFlow() {
- const { isNarrowWidth } = useResponsive();
const {
filters,
conditionsOp,
@@ -95,6 +97,9 @@ export function CashFlow() {
setIsConcise(isConcise);
}
+ const navigate = useNavigate();
+ const { isNarrowWidth } = useResponsive();
+
if (!allMonths || !data) {
return null;
}
@@ -102,15 +107,22 @@ export function CashFlow() {
const { graphData, totalExpenses, totalIncome, totalTransfers } = data;
return (
- <View
- style={{
- ...styles.page,
- minWidth: isNarrowWidth ? undefined : 650,
- overflow: 'hidden',
- }}
+ <Page
+ header={
+ isNarrowWidth ? (
+ <MobilePageHeader
+ title="Cash Flow"
+ leftContent={
+ <MobileBackButton onClick={() => navigate('/reports')} />
+ }
+ />
+ ) : (
+ <PageHeader title="Cash Flow" />
+ )
+ }
+ padding={0}
>
<Header
- title="Cash Flow"
allMonths={allMonths}
start={monthUtils.getMonth(start)}
end={monthUtils.getMonth(end)}
@@ -139,16 +151,15 @@ export function CashFlow() {
<View
style={{
backgroundColor: theme.tableBackground,
- padding: 30,
+ padding: 20,
paddingTop: 0,
- overflow: 'auto',
+ flex: '1 0 auto',
+ overflowY: 'auto',
}}
>
<View
style={{
paddingTop: 20,
- paddingRight: 20,
- flexShrink: 0,
alignItems: 'flex-end',
color: theme.pageText,
}}
@@ -199,7 +210,12 @@ export function CashFlow() {
showBalance={showBalance}
/>
- <View style={{ marginTop: 30, userSelect: 'none' }}>
+ <View
+ style={{
+ marginTop: 30,
+ userSelect: 'none',
+ }}
+ >
<Paragraph>
<strong>How is cash flow calculated?</strong>
</Paragraph>
@@ -211,6 +227,6 @@ export function CashFlow() {
</Paragraph>
</View>
</View>
- </View>
+ </Page>
);
}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
index 0f0738b7f00bc39fccdd0599fc13af801e1d27b6..ce952a89c6363f290f4ddabf6830c0e4a5763bb8 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
@@ -17,16 +17,17 @@ import { useAccounts } from '../../../hooks/useAccounts';
import { useCategories } from '../../../hooks/useCategories';
import { useFilters } from '../../../hooks/useFilters';
import { useLocalPref } from '../../../hooks/useLocalPref';
+import { useNavigate } from '../../../hooks/useNavigate';
import { usePayees } from '../../../hooks/usePayees';
-import { SvgArrowLeft } from '../../../icons/v1/ArrowLeft';
import { useResponsive } from '../../../ResponsiveProvider';
import { theme, styles } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { Block } from '../../common/Block';
-import { Link } from '../../common/Link';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
import { AppliedFilters } from '../../filters/AppliedFilters';
+import { MobileBackButton } from '../../mobile/MobileBackButton';
+import { MobilePageHeader, Page, PageHeader } from '../../Page';
import { PrivacyFilter } from '../../PrivacyFilter';
import { ChooseGraph } from '../ChooseGraph';
import {
@@ -344,6 +345,7 @@ export function CustomReport() {
conditionsOp,
};
+ const navigate = useNavigate();
const [, setScrollWidth] = useState(0);
if (!allIntervals || !data) {
@@ -529,58 +531,38 @@ export function CustomReport() {
}
};
+ const onBackClick = () => {
+ navigate('/reports');
+ };
+
return (
- <View
- style={{
- ...styles.page,
- minWidth: isNarrowWidth ? undefined : 650,
- overflow: 'hidden',
- }}
+ <Page
+ header={
+ isNarrowWidth ? (
+ <MobilePageHeader
+ title={`Custom Report: ${report.name || 'Unsaved report'}`}
+ leftContent={<MobileBackButton onClick={onBackClick} />}
+ />
+ ) : (
+ <PageHeader
+ title={
+ <>
+ <Text>Custom Report:</Text>
+ <Text style={{ marginLeft: 5, color: theme.pageTextPositive }}>
+ {report.name || 'Unsaved report'}
+ </Text>
+ </>
+ }
+ />
+ )
+ }
+ padding={0}
>
<View
style={{
- flexDirection: isNarrowWidth ? 'column' : 'row',
- flexShrink: 0,
- }}
- >
- <View
- style={{
- padding: 10,
- paddingTop: 0,
- flexShrink: 0,
- }}
- >
- <Link
- variant="button"
- type="bare"
- to="/reports"
- style={{ marginBottom: '15', alignSelf: 'flex-start' }}
- >
- <SvgArrowLeft width={10} height={10} style={{ marginRight: 5 }} />{' '}
- Back
- </Link>
- <View style={styles.veryLargeText}>Custom Report:</View>
- </View>
- <Text
- style={{
- ...styles.veryLargeText,
- marginTop: isNarrowWidth ? 0 : 40,
- padding: isNarrowWidth ? 10 : 0,
- paddingTop: 0,
- flexShrink: 0,
- color: theme.pageTextPositive,
- }}
- >
- {report.name || 'Unsaved report'}
- </Text>
- </View>
- <View
- style={{
- display: 'flex',
flexDirection: 'row',
- padding: 15,
- paddingTop: 0,
- flexGrow: 1,
+ paddingLeft: !isNarrowWidth ? 20 : undefined,
+ flex: 1,
}}
>
{!isNarrowWidth && (
@@ -612,7 +594,7 @@ export function CustomReport() {
)}
<View
style={{
- flexGrow: 1,
+ flex: 1,
}}
>
{!isNarrowWidth && (
@@ -671,51 +653,44 @@ export function CustomReport() {
<View
style={{
backgroundColor: theme.tableBackground,
- flexGrow: 1,
+ flexDirection: 'row',
+ flex: '1 0 auto',
}}
>
<View
style={{
- flexDirection: 'row',
- flexGrow: 1,
+ flex: 1,
+ padding: 10,
}}
>
- <View
- style={{
- flexDirection: 'column',
- flexGrow: 1,
- padding: 10,
- paddingTop: 10,
- }}
- >
- {graphType !== 'TableGraph' && (
+ {graphType !== 'TableGraph' && (
+ <View
+ style={{
+ alignItems: 'flex-end',
+ paddingTop: 10,
+ }}
+ >
<View
style={{
- alignItems: 'flex-end',
- paddingTop: 10,
+ ...styles.mediumText,
+ fontWeight: 500,
+ marginBottom: 5,
}}
>
- <View
- style={{
- ...styles.mediumText,
- fontWeight: 500,
- marginBottom: 5,
- }}
- >
- <AlignedText
- left={<Block>{balanceType}:</Block>}
- right={
- <Text>
- <PrivacyFilter blurIntensity={5}>
- {amountToCurrency(Math.abs(data[balanceTypeOp]))}
- </PrivacyFilter>
- </Text>
- }
- />
- </View>
+ <AlignedText
+ left={<Block>{balanceType}:</Block>}
+ right={
+ <Text>
+ <PrivacyFilter blurIntensity={5}>
+ {amountToCurrency(Math.abs(data[balanceTypeOp]))}
+ </PrivacyFilter>
+ </Text>
+ }
+ />
</View>
- )}
-
+ </View>
+ )}
+ <View style={{ flex: 1, overflow: 'auto' }}>
{dataCheck ? (
<ChooseGraph
data={data}
@@ -736,40 +711,37 @@ export function CustomReport() {
<LoadingIndicator message="Loading report..." />
)}
</View>
- {(viewLegend || viewSummary) && data && !isNarrowWidth && (
- <View
- style={{
- padding: 10,
- flexDirection: 'column',
- minWidth: 300,
- marginRight: 10,
- textAlign: 'center',
- flexShrink: 0,
- }}
- >
- {viewSummary && (
- <ReportSummary
- startDate={startDate}
- endDate={endDate}
- balanceTypeOp={balanceTypeOp}
- data={data}
- interval={interval}
- intervalsCount={intervals.length}
- />
- )}
- {viewLegend && (
- <ReportLegend
- legend={data.legend}
- groupBy={groupBy}
- interval={interval}
- />
- )}
- </View>
- )}
</View>
+ {(viewLegend || viewSummary) && data && !isNarrowWidth && (
+ <View
+ style={{
+ padding: 10,
+ minWidth: 300,
+ textAlign: 'center',
+ }}
+ >
+ {viewSummary && (
+ <ReportSummary
+ startDate={startDate}
+ endDate={endDate}
+ balanceTypeOp={balanceTypeOp}
+ data={data}
+ interval={interval}
+ intervalsCount={intervals.length}
+ />
+ )}
+ {viewLegend && (
+ <ReportLegend
+ legend={data.legend}
+ groupBy={groupBy}
+ interval={interval}
+ />
+ )}
+ </View>
+ )}
</View>
</View>
</View>
- </View>
+ </Page>
);
}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
index d0423472cef38b8740c3f85f316c5009b2192f6b..4e0a4023aab0ab1b754d00ba209dcb54a2bd64b5 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
@@ -324,11 +324,6 @@ export function CustomReportListCards({
))}
</View>
))}
- <View
- style={{
- paddingBottom: 75,
- }}
- />
</View>
);
}
diff --git a/packages/desktop-client/src/components/reports/reports/NetWorth.jsx b/packages/desktop-client/src/components/reports/reports/NetWorth.jsx
index 2d6bb7b12a61ac2928dab12629115d7b6bd30538..2e17cae066f362d438e6dac2654a93f51149fff8 100644
--- a/packages/desktop-client/src/components/reports/reports/NetWorth.jsx
+++ b/packages/desktop-client/src/components/reports/reports/NetWorth.jsx
@@ -8,10 +8,13 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
import { useAccounts } from '../../../hooks/useAccounts';
import { useFilters } from '../../../hooks/useFilters';
+import { useNavigate } from '../../../hooks/useNavigate';
import { useResponsive } from '../../../ResponsiveProvider';
import { theme, styles } from '../../../style';
import { Paragraph } from '../../common/Paragraph';
import { View } from '../../common/View';
+import { MobileBackButton } from '../../mobile/MobileBackButton';
+import { MobilePageHeader, Page, PageHeader } from '../../Page';
import { PrivacyFilter } from '../../PrivacyFilter';
import { Change } from '../Change';
import { NetWorthGraph } from '../graphs/NetWorthGraph';
@@ -22,7 +25,6 @@ import { fromDateRepr } from '../util';
export function NetWorth() {
const accounts = useAccounts();
- const { isNarrowWidth } = useResponsive();
const {
filters,
saved,
@@ -78,20 +80,30 @@ export function NetWorth() {
setEnd(end);
}
+ const navigate = useNavigate();
+ const { isNarrowWidth } = useResponsive();
+
if (!allMonths || !data) {
return null;
}
return (
- <View
- style={{
- ...styles.page,
- minWidth: isNarrowWidth ? undefined : 650,
- overflow: 'hidden',
- }}
+ <Page
+ header={
+ isNarrowWidth ? (
+ <MobilePageHeader
+ title="Net Worth"
+ leftContent={
+ <MobileBackButton onClick={() => navigate('/reports')} />
+ }
+ />
+ ) : (
+ <PageHeader title="Net Worth" />
+ )
+ }
+ padding={0}
>
<Header
- title="Net Worth"
allMonths={allMonths}
start={start}
end={end}
@@ -108,18 +120,16 @@ export function NetWorth() {
<View
style={{
backgroundColor: theme.tableBackground,
- padding: 30,
+ padding: 20,
paddingTop: 0,
- overflow: 'auto',
- flexGrow: 1,
+ flex: '1 0 auto',
+ overflowY: 'auto',
}}
>
<View
style={{
textAlign: 'right',
paddingTop: 20,
- paddingRight: 20,
- flexShrink: 0,
}}
>
<View
@@ -135,7 +145,6 @@ export function NetWorth() {
</View>
<NetWorthGraph
- style={{ flexGrow: 1 }}
start={start}
end={end}
graphData={data.graphData}
@@ -157,6 +166,6 @@ export function NetWorth() {
</Paragraph>
</View>
</View>
- </View>
+ </Page>
);
}
diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx
index c529213249da2efa753d8cffcb6013f14323e673..c60c2f3b3fc765d3fa55f90843b1897c7c899c19 100644
--- a/packages/desktop-client/src/components/reports/reports/Spending.tsx
+++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx
@@ -6,16 +6,18 @@ import { type RuleConditionEntity } from 'loot-core/types/models/rule';
import { useCategories } from '../../../hooks/useCategories';
import { useFilters } from '../../../hooks/useFilters';
-import { SvgArrowLeft } from '../../../icons/v1/ArrowLeft';
+import { useNavigate } from '../../../hooks/useNavigate';
+import { useResponsive } from '../../../ResponsiveProvider';
import { theme, styles } from '../../../style';
import { AlignedText } from '../../common/AlignedText';
import { Block } from '../../common/Block';
-import { Link } from '../../common/Link';
import { Paragraph } from '../../common/Paragraph';
import { Text } from '../../common/Text';
import { View } from '../../common/View';
import { AppliedFilters } from '../../filters/AppliedFilters';
import { FilterButton } from '../../filters/FiltersMenu';
+import { MobileBackButton } from '../../mobile/MobileBackButton';
+import { MobilePageHeader, Page, PageHeader } from '../../Page';
import { PrivacyFilter } from '../../PrivacyFilter';
import { SpendingGraph } from '../graphs/SpendingGraph';
import { LoadingIndicator } from '../LoadingIndicator';
@@ -49,6 +51,8 @@ export function Spending() {
}, [categories, filters, conditionsOp]);
const data = useReport('default', getGraphData);
+ const navigate = useNavigate();
+ const { isNarrowWidth } = useResponsive();
if (!data) {
return null;
@@ -59,7 +63,21 @@ export function Spending() {
].daily !== 0;
return (
- <View style={{ ...styles.page, minWidth: 650, overflow: 'hidden' }}>
+ <Page
+ header={
+ isNarrowWidth ? (
+ <MobilePageHeader
+ title="Monthly Spending"
+ leftContent={
+ <MobileBackButton onClick={() => navigate('/reports')} />
+ }
+ />
+ ) : (
+ <PageHeader title="Monthly Spending" />
+ )
+ }
+ padding={0}
+ >
<View
style={{
flexDirection: 'row',
@@ -68,24 +86,10 @@ export function Spending() {
>
<View
style={{
- padding: 10,
- paddingTop: 0,
+ padding: 20,
flexShrink: 0,
}}
>
- <Link
- variant="button"
- type="bare"
- to="/reports"
- style={{ marginBottom: '15', alignSelf: 'flex-start' }}
- >
- <SvgArrowLeft width={10} height={10} style={{ marginRight: 5 }} />{' '}
- Back
- </Link>
- <Text style={{ ...styles.veryLargeText, marginBottom: 10 }}>
- Monthly Spending
- </Text>
-
{filters && (
<View style={{ flexDirection: 'row' }}>
<FilterButton
@@ -103,7 +107,6 @@ export function Spending() {
style={{
display: 'flex',
flexDirection: 'row',
- padding: 15,
paddingTop: 0,
flexGrow: 1,
}}
@@ -137,7 +140,10 @@ export function Spending() {
<View
style={{
backgroundColor: theme.tableBackground,
- flexGrow: 1,
+ padding: 20,
+ paddingTop: 0,
+ flex: '1 0 auto',
+ overflowY: 'auto',
}}
>
<View
@@ -281,6 +287,6 @@ export function Spending() {
</View>
</View>
</View>
- </View>
+ </Page>
);
}
diff --git a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
index cd6e5ae2e1666f11cb47b619979c6ab932761555..0eda99dd30de85ba61fc39c91c056f93d6cbe605 100644
--- a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
@@ -72,7 +72,7 @@ export function SpendingCard() {
{data ? (
<SpendingGraph
- style={{ flexGrow: 1 }}
+ style={{ flex: 1 }}
compact={true}
data={data}
mode="average"
diff --git a/packages/desktop-client/src/components/schedules/index.tsx b/packages/desktop-client/src/components/schedules/index.tsx
index d04809cbd048621cc5e9b9872529069f09a97b11..8f20170aa9d78b81353261a36663399f205cd8e5 100644
--- a/packages/desktop-client/src/components/schedules/index.tsx
+++ b/packages/desktop-client/src/components/schedules/index.tsx
@@ -64,7 +64,7 @@ export function Schedules() {
}
return (
- <Page title="Schedules">
+ <Page header="Schedules">
<View
style={{
flexDirection: 'row',
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 1137aa4e5977c3e41e93dd26c4ec89081a1967e1..fe7c797110f97d63137116ebd00e09a5ce34992c 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -19,6 +19,7 @@ import { Link } from '../common/Link';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { FormField, FormLabel } from '../forms';
+import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs';
import { Page } from '../Page';
import { useServerVersion } from '../ServerContext';
@@ -139,13 +140,20 @@ export function Settings() {
useSetThemeColor(theme.mobileViewTheme);
return (
<Page
- title="Settings"
+ header="Settings"
style={{
- backgroundColor: isNarrowWidth ? theme.mobilePageBackground : undefined,
marginInline: floatingSidebar && !isNarrowWidth ? 'auto' : 0,
+ paddingBottom: MOBILE_NAV_HEIGHT,
}}
>
- <View style={{ flexShrink: 0, maxWidth: 530, gap: 30 }}>
+ <View
+ style={{
+ marginTop: 10,
+ flexShrink: 0,
+ maxWidth: 530,
+ gap: 30,
+ }}
+ >
{isNarrowWidth && (
<View
style={{ gap: 10, flexDirection: 'row', alignItems: 'flex-end' }}
diff --git a/upcoming-release-notes/2733.md b/upcoming-release-notes/2733.md
new file mode 100644
index 0000000000000000000000000000000000000000..d5f95a3b9dee6710735df8710d35fbd8d0e6489d
--- /dev/null
+++ b/upcoming-release-notes/2733.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Add page headers to various report pages + refactor Page component