add buttons for combined-account transaction pages on mobile (#3734)

* add buttons for combined-account transaction pages (#2333)

* add release note for #3734

* add accessibility label to mobile combined-account header button

* increase touch targets for combined-account buttons

* remove highlight color and add bounce to header buttons

to match the feel of the other account buttons

* update vrt screenshots for actualbudget#3734

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

@@ -2,6 +2,8 @@ import React, { type CSSProperties, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { css } from '@emotion/css';
+
 import { replaceModal, syncAndDownload } from 'loot-core/src/client/actions';
 import * as queries from 'loot-core/src/client/queries';
 import { type AccountEntity } from 'loot-core/types/models';
@@ -10,7 +12,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';
@@ -24,48 +26,75 @@ import { MOBILE_NAV_HEIGHT } from '../MobileNavTabs';
 import { PullToRefresh } from '../PullToRefresh';
 
 type AccountHeaderProps<SheetFieldName extends SheetFields<'account'>> = {
+  id: string;
   name: string;
   amount: Binding<'account', SheetFieldName>;
   style?: CSSProperties;
 };
 
 function AccountHeader<SheetFieldName extends SheetFields<'account'>>({
+  id,
   name,
   amount,
   style = {},
 }: AccountHeaderProps<SheetFieldName>) {
+  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,
       }}
+      // to match the feel of the other account buttons
+      className={css([
+        {
+          '&[data-pressed], &[data-hovered]': {
+            backgroundColor: 'transparent',
+            transform: 'translateY(1px)',
+          },
+        },
+      ])}
     >
-      <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<'account', SheetFieldName>
             {...props}
-            style={{ ...styles.text, fontSize: 14 }}
+            style={{ ...styles.text }}
           />
         )}
       </CellValue>
-    </View>
+    </Button>
   );
 }
 
@@ -227,7 +256,11 @@ function AccountList({
       <PullToRefresh onRefresh={onSync}>
         <View aria-label="Account list" style={{ margin: 10 }}>
           {onBudgetAccounts.length > 0 && (
-            <AccountHeader name="On budget" amount={getOnBudgetBalance()} />
+            <AccountHeader
+              id="onbudget"
+              name="On budget"
+              amount={getOnBudgetBalance()}
+            />
           )}
           {onBudgetAccounts.map(acct => (
             <AccountCard
@@ -244,6 +277,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.