summaryrefslogtreecommitdiffhomepage
path: root/gui/src
diff options
context:
space:
mode:
Diffstat (limited to 'gui/src')
-rw-r--r--gui/src/renderer/components/Cell.tsx4
-rw-r--r--gui/src/renderer/components/Settings.tsx61
-rw-r--r--gui/src/renderer/components/SettingsStyles.tsx23
3 files changed, 43 insertions, 45 deletions
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index f9d0f595b1..1693f85c2b 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -381,6 +381,10 @@ export const Icon = function CellIcon(props: ImageView['props']) {
);
};
+export const UntintedIcon = function CellIcon(props: ImageView['props']) {
+ return <ImageView {...props} style={[styles.icon, props.style]} />;
+};
+
export const Footer = function CellFooter({ children }: IContainerProps) {
return (
<View style={styles.footer.container}>
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index ddcc8ed3e6..129550f3a0 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -5,7 +5,6 @@ import { messages } from '../../shared/gettext';
import AccountExpiry from '../lib/account-expiry';
import * as AppButton from './AppButton';
import * as Cell from './Cell';
-import ImageView from './ImageView';
import { Container, Layout } from './Layout';
import {
CloseBarItem,
@@ -41,12 +40,14 @@ export interface IProps {
export default class Settings extends Component<IProps> {
public render() {
+ const showLargeTitle = this.props.loginState !== 'ok';
+
return (
<Layout>
<Container>
<View style={styles.settings}>
<NavigationContainer>
- <NavigationBar>
+ <NavigationBar alwaysDisplayBarTitle={!showLargeTitle}>
<NavigationItems>
<CloseBarItem action={this.props.onClose} />
<TitleBarItem>
@@ -56,19 +57,15 @@ export default class Settings extends Component<IProps> {
</NavigationItems>
</NavigationBar>
- <View style={styles.settings__container}>
- <NavigationScrollbars style={styles.settings__scrollview}>
- <View style={styles.settings__content}>
- <SettingsHeader>
- <HeaderTitle>{messages.pgettext('settings-view', 'Settings')}</HeaderTitle>
- </SettingsHeader>
+ <View style={styles.container}>
+ <NavigationScrollbars style={styles.scrollview}>
+ <View style={styles.content}>
+ {showLargeTitle && (
+ <SettingsHeader>
+ <HeaderTitle>{messages.pgettext('settings-view', 'Settings')}</HeaderTitle>
+ </SettingsHeader>
+ )}
<View>
- <Cell.CellButton onPress={this.props.onViewSelectLanguage}>
- <Cell.Label>{messages.pgettext('settings-view', 'Language')}</Cell.Label>
- <Cell.SubText>{this.props.preferredLocaleDisplayName}</Cell.SubText>
- <Cell.Icon height={12} width={7} source="icon-chevron" />
- </Cell.CellButton>
-
{this.renderTopButtons()}
{this.renderMiddleButtons()}
{this.renderBottomButtons()}
@@ -84,9 +81,12 @@ export default class Settings extends Component<IProps> {
);
}
+ private openDownloadLink = () => this.props.onExternalLink(links.download);
+ private openFaqLink = () => this.props.onExternalLink(links.faq);
+
private renderQuitButton() {
return (
- <View style={styles.settings__footer}>
+ <View style={styles.quitButtonFooter}>
<AppButton.RedButton onPress={this.props.onQuit}>
{messages.pgettext('settings-view', 'Quit app')}
</AppButton.RedButton>
@@ -113,8 +113,7 @@ export default class Settings extends Component<IProps> {
<View>
<Cell.CellButton onPress={this.props.onViewAccount}>
<Cell.Label>{messages.pgettext('settings-view', 'Account')}</Cell.Label>
- <Cell.SubText
- style={isOutOfTime ? styles.settings__account_paid_until_label__error : undefined}>
+ <Cell.SubText style={isOutOfTime ? styles.accountPaidUntilErrorLabel : undefined}>
{isOutOfTime ? outOfTimeMessage : formattedExpiry}
</Cell.SubText>
<Cell.Icon height={12} width={7} source="icon-chevron" />
@@ -130,7 +129,7 @@ export default class Settings extends Component<IProps> {
<Cell.Label>{messages.pgettext('settings-view', 'Advanced')}</Cell.Label>
<Cell.Icon height={12} width={7} source="icon-chevron" />
</Cell.CellButton>
- <View style={styles.settings__cell_spacer} />
+ <View style={styles.cellSpacer} />
</View>
);
}
@@ -153,20 +152,14 @@ export default class Settings extends Component<IProps> {
? inconsistentVersionMessage
: updateAvailableMessage;
- icon = (
- <ImageView
- source="icon-alert"
- tintColor={colors.red}
- style={styles.settings__version_warning}
- />
- );
+ icon = <Cell.UntintedIcon source="icon-alert" tintColor={colors.red} />;
footer = (
- <View style={styles.settings__cell_footer}>
- <Text style={styles.settings__cell_footer_label}>{message}</Text>
+ <View style={styles.cellFooter}>
+ <Text style={styles.cellFooterLabel}>{message}</Text>
</View>
);
} else {
- footer = <View style={styles.settings__cell_spacer} />;
+ footer = <View style={styles.cellSpacer} />;
}
return (
@@ -174,7 +167,7 @@ export default class Settings extends Component<IProps> {
<Cell.CellButton disabled={this.props.isOffline} onPress={this.openDownloadLink}>
{icon}
<Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
- <Cell.SubText style={styles.settings__appversion}>{this.props.appVersion}</Cell.SubText>
+ <Cell.SubText style={styles.appVersionLabel}>{this.props.appVersion}</Cell.SubText>
<Cell.Icon height={16} width={16} source="icon-extLink" />
</Cell.CellButton>
{footer}
@@ -182,9 +175,6 @@ export default class Settings extends Component<IProps> {
);
}
- private openDownloadLink = () => this.props.onExternalLink(links.download);
- private openFaqLink = () => this.props.onExternalLink(links.faq);
-
private renderBottomButtons() {
return (
<View>
@@ -197,6 +187,13 @@ export default class Settings extends Component<IProps> {
<Cell.Label>{messages.pgettext('settings-view', 'FAQs & Guides')}</Cell.Label>
<Cell.Icon height={16} width={16} source="icon-extLink" />
</Cell.CellButton>
+
+ <Cell.CellButton onPress={this.props.onViewSelectLanguage}>
+ <Cell.UntintedIcon width={24} height={24} source="icon-language" />
+ <Cell.Label>{messages.pgettext('settings-view', 'Language')}</Cell.Label>
+ <Cell.SubText>{this.props.preferredLocaleDisplayName}</Cell.SubText>
+ <Cell.Icon height={12} width={7} source="icon-chevron" />
+ </Cell.CellButton>
</View>
);
}
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 5c9a66fd97..51a215d0fc 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -6,43 +6,40 @@ export default {
backgroundColor: colors.darkBlue,
flex: 1,
}),
- settings__container: Styles.createViewStyle({
+ container: Styles.createViewStyle({
flexDirection: 'column',
flex: 1,
}),
- settings__content: Styles.createViewStyle({
+ content: Styles.createViewStyle({
flexDirection: 'column',
flex: 1,
justifyContent: 'space-between',
overflow: 'visible',
}),
// plain CSS style
- settings__scrollview: {
+ scrollview: {
flex: 1,
},
- settings__cell_spacer: Styles.createViewStyle({
+ cellSpacer: Styles.createViewStyle({
height: 24,
flex: 0,
}),
- settings__cell_footer: Styles.createViewStyle({
+ cellFooter: Styles.createViewStyle({
paddingTop: 8,
paddingRight: 24,
paddingBottom: 24,
paddingLeft: 24,
}),
- settings__footer: Styles.createViewStyle({
+ quitButtonFooter: Styles.createViewStyle({
paddingTop: 24,
- paddingBottom: 24,
+ paddingBottom: 19,
paddingLeft: 24,
paddingRight: 24,
}),
- settings__version_warning: Styles.createViewStyle({
- marginLeft: 8,
- }),
- settings__account_paid_until_label__error: Styles.createTextStyle({
+ accountPaidUntilErrorLabel: Styles.createTextStyle({
color: colors.red,
}),
- settings__cell_footer_label: Styles.createTextStyle({
+ cellFooterLabel: Styles.createTextStyle({
fontFamily: 'Open Sans',
fontSize: 13,
fontWeight: '600',
@@ -50,7 +47,7 @@ export default {
letterSpacing: -0.2,
color: colors.white60,
}),
- settings__appversion: Styles.createTextStyle({
+ appVersionLabel: Styles.createTextStyle({
flex: 0,
}),
};
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.