Fix rollover arrow display for mobile and desktop

dymanoid commented 6 days ago

Fixes: #2879

This PR implements a new look for the mobile carryover indicator (arrow) in the budget view. The arrow looks similar to notification badges on mobile apps. This PR also fixes the issues when showing this arrow display in the desktop view (narrow window widths). Additionally, the arrow display is also improved in the balance modals.

netlify[bot] commented 6 days ago

Deploy Preview for actualbudget ready!

Name	Link
Latest commit	028fc65c98d550a5e26220409a2aeb775899f21f
Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6683cedfd960ed0008648e13
Deploy Preview	https://deploy-preview-2943.demo.actualbudget.org
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions[bot] commented 6 days ago

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
9	4.77 MB → 4.77 MB (+1.42 kB)	+0.03%

Changeset

File | Δ | Size ---- | - | ---- `src/icons/v1/ArrowThickRight.tsx` | 🆕 +345 B | 0 B → 345 B `src/components/budget/BalanceWithCarryover.tsx` | 📈 +154 B (+9.81%) | 1.53 kB → 1.68 kB `src/components/modals/ReportBalanceMenuModal.tsx` | 📈 +167 B (+9.52%) | 1.71 kB → 1.88 kB `src/components/modals/RolloverBalanceMenuModal.tsx` | 📈 +167 B (+9.17%) | 1.78 kB → 1.94 kB `src/components/mobile/budget/BudgetTable.jsx` | 📈 +671 B (+1.34%) | 49.03 kB → 49.69 kB `src/components/budget/rollover/RolloverComponents.tsx` | 📉 -25 B (-0.20%) | 12.47 kB → 12.44 kB `src/components/budget/report/ReportComponents.tsx` | 📉 -25 B (-0.21%) | 11.7 kB → 11.67 kB

View detailed bundle breakdown

**Added** No assets were added **Removed** No assets were removed **Bigger** Asset | File Size | % Changed ----- | --------- | --------- static/js/narrow.js | 75.96 kB → 76.96 kB (+1016 B) | +1.31% static/js/index.js | 3.02 MB → 3.02 MB (+488 B) | +0.02% **Smaller** Asset | File Size | % Changed ----- | --------- | --------- static/js/wide.js | 272.68 kB → 272.63 kB (-50 B) | -0.02% **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/resize-observer.js | 18.37 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.5 kB | 0% static/js/BackgroundImage.js | 122.29 kB | 0% static/js/usePreviewTransactions.js | 790 B | 0% static/js/AppliedFilters.js | 27.22 kB | 0% static/js/ReportRouter.js | 1.23 MB | 0%

github-actions[bot] commented 6 days ago

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	1.13 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

**Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.js | 1.13 MB | 0%