add buttons for combined-account transaction pages on mobile

packages/desktop-client/src/components/mobile/accounts/Accounts.jsx

@@ -8,7 +8,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useFailedAccounts } from '../../../hooks/useFailedAccounts';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { useSyncedPref } from '../../../hooks/useSyncedPref';
-import { SvgAdd } from '../../../icons/v1';
+import { SvgAdd, SvgCheveronRight } from '../../../icons/v1';
 import { theme, styles } from '../../../style';
 import { makeAmountFullStyle } from '../../budget/util';
 import { Button } from '../../common/Button2';
@@ -20,36 +20,50 @@ import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
 import { MOBILE_NAV_HEIGHT } from '../MobileNavTabs';
 import { PullToRefresh } from '../PullToRefresh';
 
-function AccountHeader({ name, amount, style = {} }) {
+function AccountHeader({ id, name, amount, style = {} }) {
+  const navigate = useNavigate();
+
   return (
-    <View
+    <Button
+      variant="bare"
+      aria-label={`View ${name} transactions`}
+      onPress={() => navigate(`/accounts/${id}`)}
       style={{
         flex: 1,
         flexDirection: 'row',
-        marginTop: 10,
-        marginRight: 10,
+        paddingTop: 15,
+        paddingBottom: 15,
+        paddingLeft: 0,
+        paddingRight: 0,
         color: theme.pageTextLight,
         width: '100%',
         ...style,
       }}
     >
-      <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, alignItems: 'center', flexDirection: 'row' }}>
         <Text
           style={{
             ...styles.text,
-            fontSize: 14,
+            fontSize: 17,
           }}
           data-testid="name"
         >
           {name}
         </Text>
+        <SvgCheveronRight
+          style={{
+            flexShrink: 0,
+            color: theme.mobileHeaderTextSubdued,
+            marginLeft: 5,
+          }}
+          width={styles.text.fontSize}
+          height={styles.text.fontSize}
+        />
       </View>
       <CellValue binding={amount} type="financial">
-        {props => (
-          <CellValueText {...props} style={{ ...styles.text, fontSize: 14 }} />
-        )}
+        {props => <CellValueText {...props} style={{ ...styles.text }} />}
       </CellValue>
-    </View>
+    </Button>
   );
 }
 
@@ -186,7 +200,11 @@ function AccountList({
       <PullToRefresh onRefresh={onSync}>
         <View style={{ margin: 10 }}>
           {budgetedAccounts.length > 0 && (
-            <AccountHeader name="For Budget" amount={getOnBudgetBalance()} />
+            <AccountHeader
+              id="budgeted"
+              name="For Budget"
+              amount={getOnBudgetBalance()}
+            />
           )}
           {budgetedAccounts.map(acct => (
             <AccountCard
@@ -203,6 +221,7 @@ function AccountList({
 
           {offbudgetAccounts.length > 0 && (
             <AccountHeader
+              id="offbudget"
               name="Off Budget"
               amount={getOffBudgetBalance()}
               style={{ marginTop: 30 }}

upcoming-release-notes/3734.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [GabeKlavans]
+---
+
+Add navigation to combined-accounts transactions lists from the accounts page on mobile.