[WIP] Implement "pill gesture" icon in navigation bar on Mobile view for better UX (#2419)

* Fix mobile UX, issue #2079

* upcoming-release-notes

* Fix navigation bar buttons not fully displayed

* pill size changed, exported nav bar height

* Edit navigation bar const
Edit nav bar pill color

* Removed export

* Fixes release notes

* Fixed formatting

* Fix mobile UX, issue #2079

* upcoming-release-notes

* Fix navigation bar buttons not fully displayed

* pill size changed, exported nav bar height

* Edit navigation bar const
Edit nav bar pill color

* Removed export

* Fixes release notes

* Fixed formatting

* Test schedules and mobile images created

* Reverted schedules checks test images

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';

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';

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>
   );

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