Skip to content

Style pull to refresh #5917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+19 −14
Open

Style pull to refresh #5917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f84491
fix background color of pull to refresh
Hackmodford Oct 13, 2025
6cff09c
add release note
Hackmodford Oct 13, 2025
a6f9dd5
[autofix.ci] apply automated fixes
autofix-ci[bot] Oct 13, 2025
30f89d6
Update VRT
github-actions[bot] Oct 14, 2025
3875f55
fix by changing the budget table
Hackmodford Oct 14, 2025
af6ffb9
fix pull to refresh visual glitch on the transaction list
Hackmodford Oct 14, 2025
21d767e
tweak budget colors
Hackmodford Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...dividual-account-page-and-checks-that-filtering-is-working-5-chromium-linux.png
View file
Open in desktop
Copy link
Member

@matt-fidd matt-fidd Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Hackmodford, this doesn't look quite right. Could you take a look at the visual changes here please?

Copy link
Author

@Hackmodford Hackmodford Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After investigating, I think the real issue I have is with the budget colors.

What do you think of removing the current/other budget style and leaving it consistent? The header of the page changes color when on another month.

I believe the different background color is a holdover from the way the budget view in the desktop client has a different color. I don't think it makes sense in the mobile context.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...e-Accounts-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...cking--ff568-l-redirects-to-the-category-transactions-page-2-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...cking--57d88-l-redirects-to-the-category-transactions-page-2-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...categorized-transaction-from-categories-uncategorized-page-2-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...categorized-transaction-from-categories-uncategorized-page-2-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion packages/desktop-client/src/components/mobile/PullToRefresh.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;

export function PullToRefresh(props: PullToRefreshProps) {
return (
<div style={{ overflow: 'auto', flex: 1 }}>
<div
style={{
overflow: 'auto',
flex: 1,
}}
>
<BasePullToRefresh
pullDownThreshold={80}
resistance={2}
Expand Down
2 changes: 1 addition & 1 deletion packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ export function BudgetTable({
<View
data-testid="budget-table"
style={{
backgroundColor: theme.pageBackground,
backgroundColor: theme.mobilePageBackground,
paddingBottom: MOBILE_NAV_HEIGHT,
}}
>
Expand Down
4 changes: 1 addition & 3 deletions packages/desktop-client/src/components/mobile/budget/ExpenseCategoryListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import { View } from '@actual-app/components/view';

import { type BudgetType } from 'loot-core/server/prefs';
import * as monthUtils from 'loot-core/shared/months';

Check warning on line 13 in packages/desktop-client/src/components/mobile/budget/ExpenseCategoryListItem.tsx

View workflow job for this annotation

GitHub Actions / autofix 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u

Check warning on line 13 in packages/desktop-client/src/components/mobile/budget/ExpenseCategoryListItem.tsx

View workflow job for this annotation

GitHub Actions / lint 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u
import { groupById, integerToCurrency } from 'loot-core/shared/util';
import { type CategoryEntity } from 'loot-core/types/models';

Expand Down Expand Up @@ -415,9 +415,7 @@
paddingRight: 5,
borderBottomWidth: 1,
opacity: isHidden ? 0.5 : undefined,
backgroundColor: monthUtils.isCurrentMonth(month)
? theme.budgetCurrentMonth
: theme.budgetOtherMonth,
backgroundColor: theme.budgetOtherMonth,
}}
>
<ExpenseCategoryName
Expand Down
4 changes: 1 addition & 3 deletions packages/desktop-client/src/components/mobile/budget/ExpenseGroupListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
import { css } from '@emotion/css';
import { AutoTextSize } from 'auto-text-size';

import * as monthUtils from 'loot-core/shared/months';

Check warning on line 15 in packages/desktop-client/src/components/mobile/budget/ExpenseGroupListItem.tsx

View workflow job for this annotation

GitHub Actions / autofix 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u

Check warning on line 15 in packages/desktop-client/src/components/mobile/budget/ExpenseGroupListItem.tsx

View workflow job for this annotation

GitHub Actions / lint 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u
import {
type CategoryEntity,
type CategoryGroupEntity,
Expand Down Expand Up @@ -128,7 +128,7 @@

export function ExpenseGroupHeader({
categoryGroup,
month,

Check warning on line 131 in packages/desktop-client/src/components/mobile/budget/ExpenseGroupListItem.tsx

View workflow job for this annotation

GitHub Actions / autofix 

'month' is defined but never used. Allowed unused args must match /^(_|React)/u

Check warning on line 131 in packages/desktop-client/src/components/mobile/budget/ExpenseGroupListItem.tsx

View workflow job for this annotation

GitHub Actions / lint 

'month' is defined but never used. Allowed unused args must match /^(_|React)/u
onEditCategoryGroup,
show3Columns,
showBudgetedColumn,
Expand All @@ -148,9 +148,7 @@
paddingLeft: 5,
paddingRight: 5,
opacity: isHidden ? 0.5 : undefined,
backgroundColor: monthUtils.isCurrentMonth(month)
? theme.budgetHeaderCurrentMonth
: theme.budgetHeaderOtherMonth,
backgroundColor: theme.budgetCurrentMonth,
}}
data-testid="category-group-row"
>
Expand Down
4 changes: 1 addition & 3 deletions packages/desktop-client/src/components/mobile/budget/IncomeCategoryListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
import { theme } from '@actual-app/components/theme';
import { View } from '@actual-app/components/view';

import * as monthUtils from 'loot-core/shared/months';

Check warning on line 12 in packages/desktop-client/src/components/mobile/budget/IncomeCategoryListItem.tsx

View workflow job for this annotation

GitHub Actions / autofix 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u

Check warning on line 12 in packages/desktop-client/src/components/mobile/budget/IncomeCategoryListItem.tsx

View workflow job for this annotation

GitHub Actions / lint 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u
import { type CategoryEntity } from 'loot-core/types/models';

import { BalanceCell } from './BalanceCell';
Expand Down Expand Up @@ -259,9 +259,7 @@
paddingRight: 5,
borderBottomWidth: 1,
opacity: !!category.hidden ? 0.5 : undefined,
backgroundColor: monthUtils.isCurrentMonth(month)
? theme.budgetCurrentMonth
: theme.budgetOtherMonth,
backgroundColor: theme.budgetOtherMonth,
}}
>
<IncomeCategoryName category={category} onEdit={onEdit} />
Expand Down
4 changes: 1 addition & 3 deletions packages/desktop-client/src/components/mobile/budget/IncomeGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
import { css } from '@emotion/css';
import { AutoTextSize } from 'auto-text-size';

import * as monthUtils from 'loot-core/shared/months';

Check warning on line 16 in packages/desktop-client/src/components/mobile/budget/IncomeGroup.tsx

View workflow job for this annotation

GitHub Actions / autofix 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u

Check warning on line 16 in packages/desktop-client/src/components/mobile/budget/IncomeGroup.tsx

View workflow job for this annotation

GitHub Actions / lint 

'monthUtils' is defined but never used. Allowed unused vars must match /^(_|React)/u
import { type CategoryGroupEntity } from 'loot-core/types/models';

import { getColumnWidth, ROW_HEIGHT } from './BudgetTable';
Expand Down Expand Up @@ -116,7 +116,7 @@

function IncomeGroupHeader({
group,
month,

Check warning on line 119 in packages/desktop-client/src/components/mobile/budget/IncomeGroup.tsx

View workflow job for this annotation

GitHub Actions / autofix 

'month' is defined but never used. Allowed unused args must match /^(_|React)/u

Check warning on line 119 in packages/desktop-client/src/components/mobile/budget/IncomeGroup.tsx

View workflow job for this annotation

GitHub Actions / lint 

'month' is defined but never used. Allowed unused args must match /^(_|React)/u
onEdit,
isCollapsed,
onToggleCollapse,
Expand All @@ -134,9 +134,7 @@
paddingLeft: 5,
paddingRight: 5,
opacity: !!group.hidden ? 0.5 : undefined,
backgroundColor: monthUtils.isCurrentMonth(month)
? theme.budgetHeaderCurrentMonth
: theme.budgetHeaderOtherMonth,
backgroundColor: theme.budgetCurrentMonth,
...style,
}}
data-testid="category-group-row"
Expand Down
2 changes: 2 additions & 0 deletions packages/desktop-client/src/components/mobile/transactions/TransactionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,8 @@ export function TransactionList({
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.mobilePageBackground,
height: '100%',
minHeight: '50vh',
}}
>
<Text style={{ fontSize: 15 }}>
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/5917.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [Hackmodford]
---

Improve the background color of the pull to refresh component
Loading