From 4f0a8207b10353f3214b9bc60feb463f35e58ae2 Mon Sep 17 00:00:00 2001
From: alexsparkes <turbomarshmello@gmail.com>
Date: Tue, 6 Feb 2024 18:44:32 +0000
Subject: [PATCH] style(settings): use variables for localization

---
 .../main/settings/sections/Greeting.jsx       | 18 ++++++++++--------
 .../modals/main/settings/sections/Message.jsx | 19 +++++++++----------
 .../modals/main/settings/sections/Stats.jsx   | 14 ++++++--------
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 82f2d2ea..9da277e3 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/src/components/modals/main/settings/sections/Greeting.jsx
@@ -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"
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index 5b4042a1..6a7ca086 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -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>
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index e22cb6e1..8fcb01d3 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/src/components/modals/main/settings/sections/Stats.jsx
@@ -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>