style(settings): use variables for localization

This commit is contained in:
alexsparkes 2024-02-06 18:44:32 +00:00
parent df0e7bfec5
commit 4f0a8207b1
3 changed files with 25 additions and 26 deletions

View File

@ -24,10 +24,12 @@ export default class GreetingSettings extends PureComponent {
};
render() {
const GREETING_SECTION = 'modals.main.settings.sections.greeting';
return (
<>
<Header
title={variables.getMessage('modals.main.settings.sections.greeting.title')}
title={variables.getMessage(`${GREETING_SECTION}.title`)}
setting="greeting"
category="greeting"
element=".greeting"
@ -36,26 +38,26 @@ export default class GreetingSettings extends PureComponent {
/>
<SettingsItem
title={variables.getMessage('modals.main.settings.additional_settings')}
subtitle={variables.getMessage('modals.main.settings.sections.greeting.additional')}
subtitle={variables.getMessage(`${GREETING_SECTION}.additional`)}
>
<Checkbox
name="events"
text={variables.getMessage('modals.main.settings.sections.greeting.events')}
text={variables.getMessage(`${GREETING_SECTION}.events`)}
category="greeting"
/>
<Checkbox
name="defaultGreetingMessage"
text={variables.getMessage('modals.main.settings.sections.greeting.default')}
text={variables.getMessage(`${GREETING_SECTION}.default`)}
category="greeting"
/>
<Text
title={variables.getMessage('modals.main.settings.sections.greeting.name')}
title={variables.getMessage(`${GREETING_SECTION}.name`)}
name="greetingName"
category="greeting"
/>
</SettingsItem>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.greeting.birthday')}
title={variables.getMessage(`${GREETING_SECTION}.birthday`)}
subtitle={variables.getMessage(
'modals.main.settings.sections.greeting.birthday_subtitle',
)}
@ -68,11 +70,11 @@ export default class GreetingSettings extends PureComponent {
/>
<Checkbox
name="birthdayage"
text={variables.getMessage('modals.main.settings.sections.greeting.birthday_age')}
text={variables.getMessage(`${GREETING_SECTION}.birthday_age`)}
category="greeting"
/>
<p style={{ marginRight: 'auto' }}>
{variables.getMessage('modals.main.settings.sections.greeting.birthday_date')}
{variables.getMessage(`${GREETING_SECTION}.birthday_date`)}
</p>
<input
type="date"

View File

@ -58,22 +58,21 @@ export default class Message extends PureComponent {
}
render() {
const MESSAGE_SECTION = 'modals.main.settings.sections.message';
return (
<>
<Header
title={variables.getMessage('modals.main.settings.sections.message.title')}
title={variables.getMessage(`${MESSAGE_SECTION}.title`)}
setting="message"
category="message"
element=".message"
zoomSetting="zoomMessage"
switch={true}
/>
<SettingsItem
title={variables.getMessage('modals.main.settings.sections.message.messages')}
final={true}
>
<SettingsItem title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} final={true}>
<button onClick={() => this.modifyMessage('add')}>
{variables.getMessage('modals.main.settings.sections.message.add')} <MdAdd />
{variables.getMessage(`${MESSAGE_SECTION}.add`)} <MdAdd />
</button>
</SettingsItem>
<div className="messagesContainer">
@ -85,7 +84,7 @@ export default class Message extends PureComponent {
</div>
<div className="messageText">
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.message.title')}
{variables.getMessage(`${MESSAGE_SECTION}.title`)}
</span>
<TextareaAutosize
value={this.state.messages[index]}
@ -117,13 +116,13 @@ export default class Message extends PureComponent {
<div className="emptyNewMessage">
<MdOutlineTextsms />
<span className="title">
{variables.getMessage('modals.main.settings.sections.message.no_messages')}
{variables.getMessage(`${MESSAGE_SECTION}.no_messages`)}
</span>
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.message.add_some')}
{variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
</span>
<button onClick={() => this.modifyMessage('add')}>
{variables.getMessage('modals.main.settings.sections.message.add')}
{variables.getMessage(`${MESSAGE_SECTION}.add`)}
<MdAdd />
</button>
</div>

View File

@ -107,12 +107,12 @@ export default class Stats extends PureComponent {
</div>
);
const STATS_SECTION = 'modals.main.settings.sections.stats';
return (
<>
<div className="statsTopBar">
<span className="mainTitle">
{variables.getMessage('modals.main.settings.sections.stats.title')}
</span>
<span className="mainTitle">{variables.getMessage(`${STATS_SECTION}.title`)}</span>
<div className="headerActions">
<button onClick={() => this.downloadStats()}>
<MdDownload /> {variables.getMessage('widgets.background.download')}
@ -130,7 +130,7 @@ export default class Stats extends PureComponent {
<div className="statGrid">
<div>
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.stats.sections.tabs_opened')}{' '}
{variables.getMessage(`${STATS_SECTION}.sections.tabs_opened`)}{' '}
</span>
<span>{this.state.stats['tabs-opened'] || 0}</span>
</div>
@ -201,12 +201,10 @@ export default class Stats extends PureComponent {
</div>
</div>
<div className="statSection leftPanel">
<span className="title">
{variables.getMessage('modals.main.settings.sections.stats.achievements')}
</span>
<span className="title">{variables.getMessage(`${STATS_SECTION}.achievements`)}</span>
<br />
<span className="subtitle">
{variables.getMessage('modals.main.settings.sections.stats.unlocked', {
{variables.getMessage(`${STATS_SECTION}.unlocked`, {
count: this.getUnlockedCount() + '/' + this.state.achievements.length,
})}
</span>