diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png index b818ec3f62d..86e5a73abf8 100644 Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png index 4ebc64bbc49..282d42a1ae8 100644 Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png index e1ed15d720d..343c6cedfb6 100644 Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png index 866d234e40e..dd9aab12b5f 100644 Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-loads-the-budget-page-with-budgeted-amounts-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png index 7b6b536c978..cc93f024d10 100644 Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png index 91b155b89d6..08fb74db9c3 100644 Binary files a/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png and b/packages/desktop-client/e2e/mobile.test.js-snapshots/Mobile-opens-the-accounts-page-and-asserts-on-balances-2-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.jsx b/packages/desktop-client/src/components/accounts/MobileAccounts.jsx index 0563e1383d4..c4ff2951204 100644 --- a/packages/desktop-client/src/components/accounts/MobileAccounts.jsx +++ b/packages/desktop-client/src/components/accounts/MobileAccounts.jsx @@ -15,7 +15,7 @@ import { Button } from '../common/Button'; import { Text } from '../common/Text'; import { TextOneLine } from '../common/TextOneLine'; import { View } from '../common/View'; -import { ROW_HEIGHT as MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs'; +import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs'; import { Page } from '../Page'; import { PullToRefresh } from '../responsive/PullToRefresh'; import { CellValue } from '../spreadsheet/CellValue'; diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx index 9a03bb71c0c..0aaf75da6f5 100644 --- a/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx +++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.jsx @@ -24,7 +24,7 @@ import { Label } from '../common/Label'; import { Menu } from '../common/Menu'; import { Text } from '../common/Text'; import { View } from '../common/View'; -import { ROW_HEIGHT as MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs'; +import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs'; import { Page } from '../Page'; import { PullToRefresh } from '../responsive/PullToRefresh'; import { CellValue } from '../spreadsheet/CellValue'; diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx index 2a78185d607..725ad3e65a1 100644 --- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx +++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx @@ -20,8 +20,10 @@ import { theme, styles, type CSSProperties } from '../../style'; import { View } from '../common/View'; import { useScroll } from '../ScrollProvider'; -export const ROW_HEIGHT = 70; const COLUMN_COUNT = 3; +const PILL_HEIGHT = 15; +const ROW_HEIGHT = 70; +export const MOBILE_NAV_HEIGHT = ROW_HEIGHT + PILL_HEIGHT; export function MobileNavTabs() { const { isNarrowWidth } = useResponsive(); @@ -179,7 +181,7 @@ export function MobileNavTabs() { backgroundColor: theme.mobileNavBackground, borderTop: `1px solid ${theme.menuBorder}`, ...styles.shadow, - height: totalHeight, + height: totalHeight + PILL_HEIGHT, width: '100%', position: 'fixed', zIndex: 100, @@ -187,15 +189,28 @@ export function MobileNavTabs() { ...(!isNarrowWidth && { display: 'none' }), }} > - - {[navTabs, bufferTabs]} + +
+ + {[navTabs, bufferTabs]} + ); diff --git a/upcoming-release-notes/2419.md b/upcoming-release-notes/2419.md new file mode 100644 index 00000000000..cc6015a5a7b --- /dev/null +++ b/upcoming-release-notes/2419.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [CampaniaGuy] +--- + +Implemented a "pill gesture" icon on navigation bar for better mobile UX