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 b818ec3f62d9869c0452b55beefbc38b25f52e5a..86e5a73abf870dac7c047883716cd2f24a17291a 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 4ebc64bbc4930f876ae050542c623f9b2822fb43..282d42a1ae8008b5a8e096146a92bcbfac652890 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 e1ed15d720db70723d09bf378709c32a6c0559ee..343c6cedfb66da0ce8a28f49a2b50bbea2399539 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 866d234e40ee46bb86bdb7bf2f37d07f5fec9b77..dd9aab12b5f932ae5f6e467aca50e551088c1a3f 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 7b6b536c978d93cf6de0047446cb8844245c5a4e..cc93f024d10671b19836b4ab997a90c5bea4dc7f 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 91b155b89d6b7a6a5f097fb6183facde4dfbc5b8..08fb74db9c3380e1b2da6ac2a9a70f97293ac738 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 0563e1383d4ea3e3be0c2b3c861cfad7c5a5005a..c4ff2951204af54bcc02b55ed5f821428dd79fda 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 9a03bb71c0c7877194fc89ad306cc4f073f16b48..0aaf75da6f5b1410a770e80c3f21e9501a15eba4 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 2a78185d607ed3aea656f1aa89f8c724c7233cc5..725ad3e65a1911db318db80e3a121ae096f2cd81 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' }),
}}
>
- <View
- style={{
- flexDirection: 'row',
- flexWrap: 'wrap',
- height: totalHeight,
- width: '100%',
- }}
- >
- {[navTabs, bufferTabs]}
+ <View>
+ <div
+ style={{
+ background: theme.pillBorder,
+ borderRadius: 10,
+ width: 30,
+ marginTop: 5,
+ marginBottom: 5,
+ padding: 2,
+ alignSelf: 'center',
+ }}
+ />
+ <View
+ style={{
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ height: totalHeight,
+ width: '100%',
+ }}
+ >
+ {[navTabs, bufferTabs]}
+ </View>
</View>
</animated.div>
);
diff --git a/upcoming-release-notes/2419.md b/upcoming-release-notes/2419.md
new file mode 100644
index 0000000000000000000000000000000000000000..cc6015a5a7b81c6433cb797cfc4a334a3c76a0d5
--- /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