(mobile) settings page header (#887)

packages/desktop-client/src/components/Page.js

 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { styles } from '../style';
+import { colors, styles } from '../style';
+import { isMobile } from '../util';
 
 import { Modal, View, Text } from './common';
 
 let PageTypeContext = React.createContext({ type: 'page' });
 
+const HORIZONTAL_PADDING = isMobile() ? 10 : 20;
+
 export function PageTypeProvider({ type, current, children }) {
   return (
     <PageTypeContext.Provider value={{ type, current }}>
@@ -19,15 +22,50 @@ export function usePageType() {
   return React.useContext(PageTypeContext);
 }
 
-function PageTitle({ name }) {
+function PageTitle({ name, style }) {
+  if (isMobile()) {
+    return (
+      <View
+        style={[
+          {
+            alignItems: 'center',
+            backgroundColor: colors.b2,
+            color: 'white',
+            flexDirection: 'row',
+            flex: '1 0 auto',
+            fontSize: 18,
+            fontWeight: 500,
+            height: 50,
+            justifyContent: 'center',
+            overflowY: 'auto',
+          },
+          style,
+        ]}
+      >
+        {name}
+      </View>
+    );
+  }
+
   return (
-    <Text style={{ fontSize: 25, fontWeight: 500, marginBottom: 15 }}>
+    <Text
+      style={[
+        {
+          fontSize: 25,
+          fontWeight: 500,
+          paddingLeft: HORIZONTAL_PADDING,
+          paddingRight: HORIZONTAL_PADDING,
+          marginBottom: 15,
+        },
+        style,
+      ]}
+    >
       {name}
     </Text>
   );
 }
 
-export function Page({ title, modalSize, children }) {
+export function Page({ title, modalSize, children, titleStyle }) {
   let { type, current } = usePageType();
   let history = useHistory();
 
@@ -51,9 +89,21 @@ export function Page({ title, modalSize, children }) {
   }
 
   return (
-    <View style={[styles.page, { paddingLeft: 20, paddingRight: 20, flex: 1 }]}>
-      <PageTitle name={title} />
-      {children}
+    <View style={isMobile() ? undefined : styles.page}>
+      <PageTitle name={title} style={titleStyle} />
+      <View
+        style={
+          isMobile()
+            ? { overflowY: 'auto', padding: HORIZONTAL_PADDING }
+            : {
+                paddingLeft: HORIZONTAL_PADDING,
+                paddingRight: HORIZONTAL_PADDING,
+                flex: 1,
+              }
+        }
+      >
+        {children}
+      </View>
     </View>
   );
 }

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -10,6 +10,7 @@ import Wallet from '../../icons/v1/Wallet';
 import { colors, styles } from '../../style';
 import { withThemeColor } from '../../util/withThemeColor';
 import { Button, Text, TextOneLine, View } from '../common';
+import { Page } from '../Page';
 import CellValue from '../spreadsheet/CellValue';
 
 export function AccountHeader({ name, amount }) {
@@ -195,53 +196,30 @@ export class AccountList extends React.Component {
     }
 
     const accountContent = (
-      <View style={{ overflowY: 'auto' }}>
-        <View
-          style={{
-            alignItems: 'center',
-            backgroundColor: colors.b2,
-            color: 'white',
-            flexDirection: 'row',
-            flex: '1 0 auto',
-            fontSize: 18,
-            fontWeight: 500,
-            height: 50,
-            justifyContent: 'center',
-            overflowY: 'auto',
-          }}
-        >
-          Accounts
-        </View>
-        <View
-          style={{
-            backgroundColor: colors.n10,
-            overflowY: 'auto',
-            padding: 10,
-          }}
-        >
-          <AccountHeader name="Budgeted" amount={getOnBudgetBalance()} />
-          {budgetedAccounts.map((acct, idx) => (
-            <AccountCard
-              account={acct}
-              key={acct.id}
-              updated={updatedAccounts.includes(acct.id)}
-              getBalanceQuery={getBalanceQuery}
-              onSelect={onSelectAccount}
-            />
-          ))}
+      <Page title="Accounts">
+        <AccountHeader name="Budgeted" amount={getOnBudgetBalance()} />
+        {budgetedAccounts.map((acct, idx) => (
+          <AccountCard
+            account={acct}
+            key={acct.id}
+            updated={updatedAccounts.includes(acct.id)}
+            getBalanceQuery={getBalanceQuery}
+            onSelect={onSelectAccount}
+          />
+        ))}
 
-          <AccountHeader name="Off budget" amount={getOffBudgetBalance()} />
-          {offbudgetAccounts.map((acct, idx) => (
-            <AccountCard
-              account={acct}
-              key={acct.id}
-              updated={updatedAccounts.includes(acct.id)}
-              getBalanceQuery={getBalanceQuery}
-              onSelect={onSelectAccount}
-            />
-          ))}
+        <AccountHeader name="Off budget" amount={getOffBudgetBalance()} />
+        {offbudgetAccounts.map((acct, idx) => (
+          <AccountCard
+            account={acct}
+            key={acct.id}
+            updated={updatedAccounts.includes(acct.id)}
+            getBalanceQuery={getBalanceQuery}
+            onSelect={onSelectAccount}
+          />
+        ))}
 
-          {/*<Label
+        {/*<Label
           title="RECENT TRANSACTIONS"
           style={{
             textAlign: 'center',
@@ -250,8 +228,7 @@ export class AccountList extends React.Component {
             marginLeft: 10
           }}
           />*/}
-        </View>
-      </View>
+      </Page>
     );
 
     return (

packages/desktop-client/src/components/settings/index.js

@@ -128,7 +128,17 @@ function Settings({
         marginInline: globalPrefs.floatingSidebar && !isMobile() ? 'auto' : 0,
       }}
     >
-      <Page title="Settings">
+      <Page
+        title="Settings"
+        titleStyle={
+          isMobile()
+            ? {
+                backgroundColor: colors.n11,
+                color: colors.n1,
+              }
+            : undefined
+        }
+      >
         <View style={{ flexShrink: 0, gap: 30 }}>
           {isMobile() && (
             <View
@@ -173,7 +183,7 @@ function Settings({
   );
 }
 
-export default withThemeColor(colors.n10)(
+export default withThemeColor(colors.n11)(
   connect(
     state => ({
       prefs: state.prefs.local,

upcoming-release-notes/887.md

+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Mobile: unify "settings" page header with the style of "accounts" page