refactor(translations): mostly finish upgrading to i18n v2

src/features/misc/sections/About.jsx

@@ -15,7 +15,7 @@ class About extends PureComponent {
       sponsors: [],
       photographers: [],
       curators: [],
-      update: variables.getMessage('modals.main.settings.sections.about.version.checking_update'),
+      update: variables.getMessage('settings:sections.about.version.checking_update'),
       loading: variables.getMessage('modals.main.loading'),
     };
     this.controller = new AbortController();
@@ -72,9 +72,9 @@ class About extends PureComponent {
       }
 
       return this.setState({
-        update: variables.getMessage('modals.main.settings.sections.about.version.error.title'),
+        update: variables.getMessage('settings:sections.about.version.error.title'),
         loading: variables.getMessage(
-          'modals.main.settings.sections.about.version.error.description',
+          'settings:sections.about.version.error.description',
         ),
       });
     }
@@ -89,13 +89,13 @@ class About extends PureComponent {
 
     const newVersion = versionData[0].tag_name;
 
-    let update = variables.getMessage('modals.main.settings.sections.about.version.no_update');
+    let update = variables.getMessage('settings:sections.about.version.no_update');
     if (
       Number(variables.constants.VERSION.replaceAll('.', '')) <
       Number(newVersion.replaceAll('.', ''))
     ) {
       update = `${variables.getMessage(
-        'modals.main.settings.sections.about.version.update_available',
+        'settings:sections.about.version.update_available',
       )}: ${newVersion}`;
     }
 
@@ -113,8 +113,8 @@ class About extends PureComponent {
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       this.setState({
-        update: variables.getMessage('modals.main.marketplace.offline.description'),
-        loading: variables.getMessage('modals.main.marketplace.offline.description'),
+        update: variables.getMessage('marketplace:offline.description'),
+        loading: variables.getMessage('marketplace:offline.description'),
       });
       return;
     }
@@ -141,7 +141,7 @@ class About extends PureComponent {
             <div className="aboutText">
               <span className="title">Mue, by Kaiso</span>
               <span className="subtitle">
-                {variables.getMessage('modals.main.settings.sections.about.version.title')}{' '}
+                {variables.getMessage('settings:sections.about.version.title')}{' '}
                 {variables.constants.VERSION}
               </span>
               <span className="subtitle">({this.state.update})</span>
@@ -187,7 +187,7 @@ class About extends PureComponent {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
+                {variables.getMessage('welcome:sections.privacy.links.privacy_policy')}
               </a>
             </span>
           </div>
@@ -195,14 +195,14 @@ class About extends PureComponent {
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.contact_us')}
+            {variables.getMessage('settings:sections.about.contact_us')}
           </span>
           <div className="aboutContact">
             <Button
               type="linkButton"
               href="https://muetab.com/contact"
               icon={<MdContactPage />}
-              label={variables.getMessage('modals.main.settings.sections.about.form_button')}
+              label={variables.getMessage('settings:sections.about.form_button')}
             />
             <Button
               type="linkIconButton"
@@ -227,15 +227,15 @@ class About extends PureComponent {
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.support_mue')}
+            {variables.getMessage('settings:sections.about.support_mue')}
           </span>
-          <p>{variables.getMessage('modals.main.settings.sections.about.support_subtitle')}</p>
+          <p>{variables.getMessage('settings:sections.about.support_subtitle')}</p>
           <div className="aboutContact">
             <Button
               type="linkButton"
               href={'https://opencollective.com/' + variables.constants.OPENCOLLECTIVE_USERNAME}
               icon={<BiDonateHeart />}
-              label={variables.getMessage('modals.main.settings.sections.about.support_donate')}
+              label={variables.getMessage('settings:sections.about.support_donate')}
             />
             <Button
               type="linkIconButton"
@@ -257,7 +257,7 @@ class About extends PureComponent {
           style={{ flexFlow: 'column', alignItems: 'flex-start', minHeight: '70px' }}
         >
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.resources_used.title')}
+            {variables.getMessage('settings:sections.about.resources_used.title')}
           </span>
           <span className="subtitle">
             <a
@@ -277,13 +277,13 @@ class About extends PureComponent {
             >
               Unsplash
             </a>{' '}
-            ({variables.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
+            ({variables.getMessage('settings:sections.about.resources_used.bg_images')})
           </span>
         </div>
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.contributors')}
+            {variables.getMessage('settings:sections.about.contributors')}
           </span>
           <p>{this.state.loading}</p>
           <div className="contributorImages">
@@ -303,14 +303,14 @@ class About extends PureComponent {
 
         <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.supporters')}
+            {variables.getMessage('settings:sections.about.supporters')}
           </span>
           <p>{this.state.loading}</p>
           <div className="contributorImages">
             {this.state.sponsors.map(({ handle, avatar }) => {
               if (handle === 'empty') {
                 return (
-                  <p>{variables.getMessage('modals.main.settings.sections.about.no_supporters')}</p>
+                  <p>{variables.getMessage('settings:sections.about.no_supporters')}</p>
                 );
               }
 
@@ -337,7 +337,7 @@ class About extends PureComponent {
           }}
         >
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.photographers')}
+            {variables.getMessage('settings:sections.about.photographers')}
           </span>
           {!!this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>
@@ -359,7 +359,7 @@ class About extends PureComponent {
           }}
         >
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.about.curators')}
+            {variables.getMessage('settings:sections.about.curators')}
           </span>
           {!!this.state.loading ? <p>{this.state.loading}</p> : <></>}
           <ul>

src/features/misc/sections/Advanced.jsx

@@ -22,31 +22,31 @@ import time_zones from 'features/time/timezones.json';
 function AdvancedOptions() {
   const [resetModal, setResetModal] = useState(false);
   const [data, setData] = useState(false);
-  const ADVANCED_SECTION = 'modals.main.settings.sections.advanced';
+  const ADVANCED_SECTION = 'settings:sections.advanced';
   const { subSection } = useTab();
 
   const Data = () => {
     return localStorage.getItem('welcomePreview') !== 'true' ? (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.advanced.data')}
-          subtitle={variables.getMessage('modals.main.settings.sections.advanced.data_description')}
+          title={variables.getMessage('settings:sections.advanced.data')}
+          subtitle={variables.getMessage('settings:sections.advanced.data_description')}
         />
         <div className="resetDataButtonsLayout">
           <Button
             onClick={() => setResetModal(true)}
             icon={<ResetIcon />}
-            label={variables.getMessage('modals.main.settings.buttons.reset')}
+            label={variables.getMessage('settings:buttons.reset')}
           />
           <Button
             onClick={() => exportSettings()}
             icon={<ExportIcon />}
-            label={variables.getMessage('modals.main.settings.buttons.export')}
+            label={variables.getMessage('settings:buttons.export')}
           />
           <Button
             onClick={() => document.getElementById('file-input').click()}
             icon={<ImportIcon />}
-            label={variables.getMessage('modals.main.settings.buttons.import')}
+            label={variables.getMessage('settings:buttons.import')}
           />
         </div>
         <FileUpload
@@ -64,12 +64,12 @@ function AdvancedOptions() {
 
             <span className="title">
               {variables.getMessage(
-                'modals.main.settings.sections.advanced.preview_data_disabled.title',
+                'settings:sections.advanced.preview_data_disabled.title',
               )}
             </span>
             <span className="subtitle">
               {variables.getMessage(
-                'modals.main.settings.sections.advanced.preview_data_disabled.description',
+                'settings:sections.advanced.preview_data_disabled.description',
               )}
             </span>
           </div>
@@ -120,9 +120,9 @@ function AdvancedOptions() {
           />
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.offline_mode')}
+              title={variables.getMessage('settings:sections.advanced.offline_mode')}
               subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.offline_subtitle',
+                'settings:sections.advanced.offline_subtitle',
               )}
             />
             <Action>
@@ -132,9 +132,9 @@ function AdvancedOptions() {
 
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.timezone.title')}
+              title={variables.getMessage('settings:sections.advanced.timezone.title')}
               subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.timezone.subtitle',
+                'settings:sections.advanced.timezone.subtitle',
               )}
             />
             <Action>
@@ -145,7 +145,7 @@ function AdvancedOptions() {
                   {
                     value: 'auto',
                     text: variables.getMessage(
-                      'modals.main.settings.sections.advanced.timezone.automatic',
+                      'settings:sections.advanced.timezone.automatic',
                     ),
                   },
                   ...time_zones.map((timezone) => ({ value: timezone, text: timezone })),
@@ -155,9 +155,9 @@ function AdvancedOptions() {
           </Row>
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.tab_name')}
+              title={variables.getMessage('settings:sections.advanced.tab_name')}
               subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.tab_name_subtitle',
+                'settings:sections.advanced.tab_name_subtitle',
               )}
             />
             <Action>
@@ -166,9 +166,9 @@ function AdvancedOptions() {
           </Row>
           <Row>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.advanced.custom_css')}
+              title={variables.getMessage('settings:sections.advanced.custom_css')}
               subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.custom_css_subtitle',
+                'settings:sections.advanced.custom_css_subtitle',
               )}
             />
             <Action>
@@ -177,15 +177,15 @@ function AdvancedOptions() {
           </Row>
           <Row final={true}>
             <Content
-              title={variables.getMessage('modals.main.settings.sections.experimental.title')}
+              title={variables.getMessage('settings:sections.experimental.title')}
               subtitle={variables.getMessage(
-                'modals.main.settings.sections.advanced.experimental_warning',
+                'settings:sections.advanced.experimental_warning',
               )}
             />
             <Action>
               <Switch
                 name="experimental"
-                text={variables.getMessage('modals.main.settings.enabled')}
+                text={variables.getMessage('settings:enabled')}
                 element=".other"
               />
             </Action>

src/features/misc/sections/Appearance.jsx

@@ -18,9 +18,9 @@ function AppearanceOptions() {
     return (
       <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.appearance.theme.title')}
+          title={variables.getMessage('settings:sections.appearance.theme.title')}
           subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.theme.description',
+            'settings:sections.appearance.theme.description',
           )}
         />
         <Action>
@@ -28,15 +28,15 @@ function AppearanceOptions() {
             name="theme"
             options={[
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.auto'),
+                name: variables.getMessage('settings:sections.appearance.theme.auto'),
                 value: 'auto',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.light'),
+                name: variables.getMessage('settings:sections.appearance.theme.light'),
                 value: 'light',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.theme.dark'),
+                name: variables.getMessage('settings:sections.appearance.theme.dark'),
                 value: 'dark',
               },
             ]}
@@ -48,23 +48,23 @@ function AppearanceOptions() {
   };
 
   const FontOptions = () => {
-    const fontWeight = 'modals.main.settings.sections.appearance.font.weight';
+    const fontWeight = 'settings:sections.appearance.font.weight';
     return (
       <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.appearance.font.title')}
+          title={variables.getMessage('settings:sections.appearance.font.title')}
           subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.font.description',
+            'settings:sections.appearance.font.description',
           )}
         />
         <Action>
           <Checkbox
             name="fontGoogle"
-            text={variables.getMessage('modals.main.settings.sections.appearance.font.google')}
+            text={variables.getMessage('settings:sections.appearance.font.google')}
             category="other"
           />
           <Text
-            title={variables.getMessage('modals.main.settings.sections.appearance.font.custom')}
+            title={variables.getMessage('settings:sections.appearance.font.custom')}
             name="font"
             upperCaseFirst={true}
             category="other"
@@ -72,7 +72,7 @@ function AppearanceOptions() {
           {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
           <Dropdown
             label={variables.getMessage(
-              'modals.main.settings.sections.appearance.font.weight.title',
+              'settings:sections.appearance.font.weight.title',
             )}
             name="fontweight"
             category="other"
@@ -113,7 +113,7 @@ function AppearanceOptions() {
           />
           <Dropdown
             label={variables.getMessage(
-              'modals.main.settings.sections.appearance.font.style.title',
+              'settings:sections.appearance.font.style.title',
             )}
             name="fontstyle"
             category="other"
@@ -121,19 +121,19 @@ function AppearanceOptions() {
               {
                 value: 'normal',
                 text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.font.style.normal',
+                  'settings:sections.appearance.font.style.normal',
                 ),
               },
               {
                 value: 'italic',
                 text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.font.style.italic',
+                  'settings:sections.appearance.font.style.italic',
                 ),
               },
               {
                 value: 'oblique',
                 text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.font.style.oblique',
+                  'settings:sections.appearance.font.style.oblique',
                 ),
               },
             ]}
@@ -147,9 +147,9 @@ function AppearanceOptions() {
     return (
       <Row final={true}>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.appearance.style.title')}
+          title={variables.getMessage('settings:sections.appearance.style.title')}
           subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.style.description',
+            'settings:sections.appearance.style.description',
           )}
         />
         <Action>
@@ -158,11 +158,11 @@ function AppearanceOptions() {
             element=".other"
             options={[
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.style.legacy'),
+                name: variables.getMessage('settings:sections.appearance.style.legacy'),
                 value: 'legacy',
               },
               {
-                name: variables.getMessage('modals.main.settings.sections.appearance.style.new'),
+                name: variables.getMessage('settings:sections.appearance.style.new'),
                 value: 'new',
               },
             ]}
@@ -178,16 +178,16 @@ function AppearanceOptions() {
       <Row final={true}>
         <Content
           title={variables.getMessage(
-            'modals.main.settings.sections.appearance.accessibility.title',
+            'settings:sections.appearance.accessibility.title',
           )}
           subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.accessibility.description',
+            'settings:sections.appearance.accessibility.description',
           )}
         />
         <Action>
           <Dropdown
             label={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.text_shadow.title',
+              'settings:sections.appearance.accessibility.text_shadow.title',
             )}
             name="textBorder"
             category="other"
@@ -195,33 +195,33 @@ function AppearanceOptions() {
               {
                 value: 'new',
                 text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.accessibility.text_shadow.new',
+                  'settings:sections.appearance.accessibility.text_shadow.new',
                 ),
               },
               {
                 value: 'true',
                 text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.accessibility.text_shadow.old',
+                  'settings:sections.appearance.accessibility.text_shadow.old',
                 ),
               },
               {
                 value: 'none',
                 text: variables.getMessage(
-                  'modals.main.settings.sections.appearance.accessibility.text_shadow.none',
+                  'settings:sections.appearance.accessibility.text_shadow.none',
                 ),
               },
             ]}
           />
           <Checkbox
             text={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.animations',
+              'settings:sections.appearance.accessibility.animations',
             )}
             name="animations"
             category="other"
           />
           <Slider
             title={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.toast_duration',
+              'settings:sections.appearance.accessibility.toast_duration',
             )}
             name="toastDisplayTime"
             default="2500"
@@ -232,7 +232,7 @@ function AppearanceOptions() {
             display={
               ' ' +
               variables.getMessage(
-                'modals.main.settings.sections.appearance.accessibility.milliseconds',
+                'settings:sections.appearance.accessibility.milliseconds',
               )
             }
           />
@@ -245,9 +245,9 @@ function AppearanceOptions() {
   if (accessibility) {
     header = (
       <Header
-        title={variables.getMessage('modals.main.settings.sections.appearance.title')}
+        title={variables.getMessage('settings:sections.appearance.title')}
         secondaryTitle={variables.getMessage(
-          'modals.main.settings.sections.appearance.accessibility.title',
+          'settings:sections.appearance.accessibility.title',
         )}
         goBack={() => setAccessibility(false)}
         report={false}
@@ -256,7 +256,7 @@ function AppearanceOptions() {
   } else {
     header = (
       <Header
-        title={variables.getMessage('modals.main.settings.sections.appearance.title')}
+        title={variables.getMessage('settings:sections.appearance.title')}
         report={false}
       />
     );
@@ -271,10 +271,10 @@ function AppearanceOptions() {
           <Section
             id="accessibility"
             title={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.title',
+              'settings:sections.appearance.accessibility.title',
             )}
             subtitle={variables.getMessage(
-              'modals.main.settings.sections.appearance.accessibility.description',
+              'settings:sections.appearance.accessibility.description',
             )}
             icon={<MdAccessibility />}
             onClick={() => setAccessibility(true)}

src/features/misc/sections/Changelog.jsx

@@ -76,9 +76,9 @@ function Changelog() {
     return errorMessage(
       <>
         <MdOutlineWifiOff />
-        <h1>{variables.getMessage('modals.main.marketplace.offline.title')}</h1>
+        <h1>{variables.getMessage('marketplace:offline.title')}</h1>
         <p className="description">
-          {variables.getMessage('modals.main.marketplace.offline.description')}
+          {variables.getMessage('marketplace:offline.description')}
         </p>
       </>,
     );

src/features/misc/sections/Experimental.jsx

@@ -17,14 +17,14 @@ function ExperimentalOptions() {
   return (
     <>
       <span className="mainTitle">
-        {variables.getMessage('modals.main.settings.sections.experimental.title')}
+        {variables.getMessage('settings:sections.experimental.title')}
       </span>
       <span className="subtitle">
-        {variables.getMessage('modals.main.settings.sections.experimental.warning')}
+        {variables.getMessage('settings:sections.experimental.warning')}
       </span>
       <Row>
         <Content
-          title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
+          title={variables.getMessage('settings:sections.experimental.developer')}
         />
         <Action>
           <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />

src/features/misc/sections/Language.jsx

@@ -37,7 +37,7 @@ function LanguageOptions() {
     <>
       <div className="modalHeader">
         <span className="mainTitle">
-          {variables.getMessage('modals.main.settings.sections.language.title')}
+          {variables.getMessage('settings:sections.language.title')}
         </span>
         <div className="headerActions">
           <a
@@ -55,7 +55,7 @@ function LanguageOptions() {
         <Radio name="language" options={languages} element=".other" />
       </div>
       <span className="mainTitle">
-        {variables.getMessage('modals.main.settings.sections.language.quote')}
+        {variables.getMessage('settings:sections.language.quote')}
       </span>
       <div className="languageSettings">
         <Radio

src/features/misc/sections/Overview.jsx

@@ -16,12 +16,12 @@ import EventBus from 'utils/eventbus';
 import defaults from 'config/default';
 
 const widget_name = {
-  greeting: variables.getMessage('modals.main.settings.sections.greeting.title'),
-  time: variables.getMessage('modals.main.settings.sections.time.title'),
-  quicklinks: variables.getMessage('modals.main.settings.sections.quicklinks.title'),
-  quote: variables.getMessage('modals.main.settings.sections.quote.title'),
-  date: variables.getMessage('modals.main.settings.sections.date.title'),
-  message: variables.getMessage('modals.main.settings.sections.message.title'),
+  greeting: variables.getMessage('settings:sections.greeting.title'),
+  time: variables.getMessage('settings:sections.time.title'),
+  quicklinks: variables.getMessage('settings:sections.quicklinks.title'),
+  quote: variables.getMessage('settings:sections.quote.title'),
+  date: variables.getMessage('settings:sections.date.title'),
+  message: variables.getMessage('settings:sections.message.title'),
 };
 
 const SortableItem = sortableElement(({ value }) => (
@@ -96,11 +96,11 @@ const Overview = () => {
   return (
     <>
       <span className="mainTitle">
-        {variables.getMessage('modals.main.marketplace.product.overview')}
+        {variables.getMessage('marketplace:product.overview')}
       </span>
       <div className="overviewGrid">
         <div>
-          <span className="title">{variables.getMessage('modals.welcome.buttons.preview')}</span>
+          <span className="title">{variables.getMessage('welcome:buttons.preview')}</span>
           <div className="tabPreview">
             <div className="previewItem" style={{ maxWidth: '50%' }}>
               {items.map((value, index) => {
@@ -118,7 +118,7 @@ const Overview = () => {
         </div>
         <div>
           <span className="title">
-            {variables.getMessage('modals.main.settings.sections.order.title')}
+            {variables.getMessage('settings:sections.order.title')}
           </span>
           <SortableContainer
             onSortEnd={onSortEnd}