From ec3efc71913b8ef174e275f282bc8eceeecd1c4c Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Thu, 13 Apr 2023 20:00:02 +0100
Subject: [PATCH] :art: (mobile) settings page header (#887)
---
.../desktop-client/src/components/Page.js | 64 +++++++++++++++--
.../src/components/accounts/MobileAccounts.js | 71 +++++++------------
.../src/components/settings/index.js | 14 +++-
upcoming-release-notes/887.md | 6 ++
4 files changed, 99 insertions(+), 56 deletions(-)
create mode 100644 upcoming-release-notes/887.md
diff --git a/packages/desktop-client/src/components/Page.js b/packages/desktop-client/src/components/Page.js
index acdc74ce5..5152c91a6 100644
--- a/packages/desktop-client/src/components/Page.js
+++ b/packages/desktop-client/src/components/Page.js
@@ -1,12 +1,15 @@
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>
);
}
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index d0576d6cc..475f18589 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/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 (
diff --git a/packages/desktop-client/src/components/settings/index.js b/packages/desktop-client/src/components/settings/index.js
index b8f353c58..2c1d0502f 100644
--- a/packages/desktop-client/src/components/settings/index.js
+++ b/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,
diff --git a/upcoming-release-notes/887.md b/upcoming-release-notes/887.md
new file mode 100644
index 000000000..c19bf5a95
--- /dev/null
+++ b/upcoming-release-notes/887.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [MatissJanis]
+---
+
+Mobile: unify "settings" page header with the style of "accounts" page
--
GitLab