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

gabeklavans · Oct 27, 2024 · bdebee7 · bdebee7
1 parent f265dd9
commit bdebee7
Showing 1 changed file with 27 additions and 10 deletions.
diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
@@ -20,24 +20,25 @@ 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
+      onPress={() => navigate(`/accounts/${id}`)}
       style={{
         flex: 1,
         flexDirection: 'row',
         marginTop: 10,
-        marginRight: 10,
         color: theme.pageTextLight,
         width: '100%',
         ...style,
       }}
     >
-      <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, alignItems: 'start' }}>
         <Text
           style={{
-            ...styles.text,
-            fontSize: 14,
+            ...styles.mobileMenuItem,
           }}
           data-testid="name"
         >
@@ -46,10 +47,10 @@ function AccountHeader({ name, amount, style = {} }) {
       </View>
       <CellValue binding={amount} type="financial">
         {props => (
-          <CellValueText {...props} style={{ ...styles.text, fontSize: 14 }} />
+          <CellValueText {...props} style={{ ...styles.mobileMenuItem }} />
         )}
       </CellValue>
-    </View>
+    </Button>
   );
 }
 
@@ -186,7 +187,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
@@ -201,11 +206,23 @@ function AccountList({
             />
           ))}
 
+          <div
+            style={{
+              width: '100%',
+              height: 2,
+              background: theme.pageText,
+              paddingLeft: 10,
+              paddingRight: 10,
+              marginTop: 20,
+            }}
+          />
+
           {offbudgetAccounts.length > 0 && (
             <AccountHeader
+              id="offbudget"
               name="Off Budget"
               amount={getOffBudgetBalance()}
-              style={{ marginTop: 30 }}
+              style={{ marginTop: 20 }}
             />
           )}
           {offbudgetAccounts.map(acct => (