summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--gui/assets/images/icon-language.svg1
-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
4 files changed, 44 insertions, 45 deletions
diff --git a/gui/assets/images/icon-language.svg b/gui/assets/images/icon-language.svg
new file mode 100644
index 0000000000..8d3c8ab1a1
--- /dev/null
+++ b/gui/assets/images/icon-language.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m11.988281 3.085938-9.28125-2.828126v17.4375l9.28125-2.59375z" fill="#040606"/><path d="m11.765625 3.078125 9.640625-2.828125v17.4375l-9.640625-2.59375z" fill="#fff"/><path d="m.300781 20.75 11.464844-3.300781v-14.375l-11.464844 3.300781z" fill="#fff"/><g fill="#040606"><path d="m16.992188 20.964844 1.625 2.308594.855468-2.144532z"/><path d="m4.199219 8.03125c-.0625-.054688.078125.421875.273437.589844.347656.300781.617188.339844.761719.34375.316406.011718.710937-.066406.945313-.152344.222656-.082031.621093-.257812.769531-.511719.03125-.054687.117187-.144531.0625-.371093-.039063-.171876-.167969-.234376-.324219-.222657-.15625.007813-.628906.117188-.855469.175781-.230469.0625-.699219.183594-.90625.222657-.203125.039062-.65625-.015625-.726562-.074219"/><path d="m9.984375 13.6875c-.089844-.027344-1.960937-.695312-2.226563-.804688-.214843-.089843-.746093-.285156-.996093-.371093.703125-.9375 1.148437-1.644531 1.207031-1.753907.109375-.199218.855469-1.457031.875-1.535156.015625-.078125.035156-.367187.019531-.4375-.015625-.070312-.289062.066406-.660156.171875-.371094.109375-1.078125.507813-1.351563.554688-.273437.050781-1.148437.335937-1.597656.464843-.449218.128907-1.296875.351563-1.644531.433594-.347656.082032-.652344.085938-.847656.136719 0 0 .023437.238281.078125.308594.050781.070312.234375.246093.449218.292969.214844.046874.570313.027343.730469-.003907.164063-.03125.445313-.148437.480469-.199219.039062-.054687-.019531-.214843.046875-.265624.0625-.046876.917969-.21875 1.238281-.304688.320313-.085938 1.554688-.453125 1.722656-.433594-.054687.152344-1.046874 1.847656-1.363281 2.355469-.320312.503906-2.175781 2.730469-2.574219 3.121094-.296874.300781-1.023437 1.0625-1.277343 1.234375.0625.015625.515625-.019532.597656-.0625.507813-.269532 1.359375-1.183594 1.636719-1.464844.8125-.824219 1.527344-1.691406 2.097656-2.433594.109375.039063 1.003906.667969 1.238281.808594.230469.140625 1.152344.582031 1.351563.65625.199218.074219.964844.378906 1 .277344.03125-.105469-.140625-.714844-.230469-.746094"/><path d="m5.664062 22.09375c.179688.09375.347657.171875.539063.25.375.160156.804687.332031 1.210937.460938.558594.183593 1.117188.328124 1.671876.4375.308593.0625.648437.113281.976562.15625.03125 0 .917969.09375 1.09375.09375h.898438c.347656-.023438.675781-.042969 1.023437-.085938.28125-.035156.585937-.078125.886719-.136719.21875-.042969.449218-.085937.667968-.144531.207032-.050781.445313-.121094.675782-.191406.148437-.042969.308594-.101563.46875-.152344.128906-.050781.289062-.113281.4375-.164062.179687-.070313.386718-.164063.585937-.25.160157-.066407.339844-.152344.507813-.238282.128906-.0625.429687-.257812.585937-.257812.179688 0 .300781.136718.300781.257812 0 .246094-.390624.324219-.566406.4375-.191406.109375-.417968.195313-.617187.292969-.398438.179687-.808594.332031-1.195313.460937-.507812.164063-1.066406.320313-1.5625.421876-.191406.035156-.378906.078124-.566406.101562-.101562.019531-1.136719.15625-1.425781.15625h-1.3125c-.347657-.027344-.71875-.058594-1.066407-.101562-.308593-.042969-.636718-.097657-.945312-.15625-.238281-.042969-.496094-.101563-.726562-.164063-.398438-.09375-.785157-.214844-1.164063-.34375-.6875-.222656-1.402344-.515625-2.078125-.902344-.121094-.066406-.128906-.136719-.128906-.214843 0-.128907.109375-.246094.285156-.246094.160156 0 .480469.195312.539062.222656" fill-rule="evenodd"/><path d="m12.0625 3.039062v14.433594c-.007812.042969-.027344.085938-.070312.128906-.019532.023438-.058594.058594-.085938.066407-.25.085937-11.457031 3.335937-11.605469 3.335937-.121093 0-.2304685-.070312-.2890622-.183594 0-.007812-.0117188-.015624-.0117188-.03125v-14.441406c.0195312-.042968.03125-.101562.0703125-.136718.0820315-.09375.2187495-.113282.3085935-.136719.167969-.050781 11.207032-3.25 11.367188-3.25.097656 0 .316406.0625.316406.214843zm-.605469 14.21875-10.847656 3.117188v-13.8125l10.847656-3.117188z" fill-rule="evenodd"/><path d="m21.707031.273438v17.378906c-.007812.199218-.167969.285156-.316406.285156-.132813 0-1.066406-.277344-1.226563-.320312-1.253906-.335938-2.515624-.667969-3.761718-1.003907-.277344-.078125-.566406-.15625-.835938-.234375-.238281-.058594-.496094-.125-.734375-.195312-1.066406-.285156-2.152343-.566406-3.214843-.875-.042969-.011719-.140626-.128906-.140626-.15625v-12.136719c.019532-.042969.039063-.09375.089844-.128906.078125-.078125 3.492188-1.058594 4.835938-1.445313.359375-.109375 4.847656-1.441406 4.988281-1.441406.175781 0 .316406.113281.316406.273438zm-.605469 17.050781-9.027343-2.421875v-11.636719l9.027343-2.648437z" fill-rule="evenodd"/><path d="m24 20.964844-12.0625-3.316406.050781-14.441407 12.011719 3.296875z"/></g><path d="m17.207031 7.328125 1.554688.40625 2.832031 8.804687-1.597656-.417968-.570313-1.808594-3.300781-.859375-.707031 1.472656-1.597657-.417969zm.710938 2.332031-1.183594 2.46875 2.175781.570313z" fill="#fff" fill-rule="evenodd"/></svg>
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.