feat(translations): placeholder support, fix weather text

src/components/modals/main/settings/sections/Changelog.jsx

@@ -36,7 +36,9 @@ export default class Changelog extends PureComponent {
       title: data.title,
       date,
       image: data.featured_image || null,
-      author: 'By ' + data.authors.join(', '),
+      author: variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.changelog.by', {
+        author: data.authors.join(', ')
+      }),
       html: data.html
     });
 

src/components/modals/main/settings/sections/Date.jsx

@@ -20,25 +20,25 @@ export default class DateSettings extends PureComponent {
     
     const longSettings = (
       <>
-        <Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.time.date.day_of_week')} category='date' />
-        <Checkbox name='datenth' text={getMessage('modals.main.settings.sections.time.date.datenth')} category='date' />
+        <Checkbox name='dayofweek' text={getMessage('modals.main.settings.sections.date.day_of_week')} category='date' />
+        <Checkbox name='datenth' text={getMessage('modals.main.settings.sections.date.datenth')} category='date' />
       </>
     );
 
     const shortSettings = (
       <>
         <br/>
-        <Dropdown label={getMessage('modals.main.settings.sections.time.date.short_format')} name='dateFormat' category='date'>
+        <Dropdown label={getMessage('modals.main.settings.sections.date.short_format')} name='dateFormat' category='date'>
           <option value='DMY'>DMY</option>
           <option value='MDY'>MDY</option>
           <option value='YMD'>YMD</option>
         </Dropdown>
         <br/><br/>
-        <Dropdown label={getMessage('modals.main.settings.sections.time.date.short_separator.title')} name='shortFormat' category='date'>
-          <option value='dash'>{getMessage('modals.main.settings.sections.time.date.short_separator.dash')}</option>
-          <option value='dots'>{getMessage('modals.main.settings.sections.time.date.short_separator.dots')}</option>
-          <option value='gaps'>{getMessage('modals.main.settings.sections.time.date.short_separator.gaps')}</option>
-          <option value='slashes'>{getMessage('modals.main.settings.sections.time.date.short_separator.slashes')}</option>
+        <Dropdown label={getMessage('modals.main.settings.sections.date.short_separator.title')} name='shortFormat' category='date'>
+          <option value='dash'>{getMessage('modals.main.settings.sections.date.short_separator.dash')}</option>
+          <option value='dots'>{getMessage('modals.main.settings.sections.date.short_separator.dots')}</option>
+          <option value='gaps'>{getMessage('modals.main.settings.sections.date.short_separator.gaps')}</option>
+          <option value='slashes'>{getMessage('modals.main.settings.sections.date.short_separator.slashes')}</option>
        </Dropdown>
       </>
     );
@@ -51,14 +51,14 @@ export default class DateSettings extends PureComponent {
 
     return (
       <>
-        <Header title={getMessage('modals.main.settings.sections.time.date.title')} category='date' element='.date' zoomSetting='zoomDate' category='date'/>
+        <Header title={getMessage('modals.main.settings.sections.date.title')} category='date' element='.date' zoomSetting='zoomDate' category='date'/>
         <Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
-          <option value='long'>{getMessage('modals.main.settings.sections.time.date.type.long')}</option>
-          <option value='short'>{getMessage('modals.main.settings.sections.time.date.type.short')}</option>
+          <option value='long'>{getMessage('modals.main.settings.sections.date.type.long')}</option>
+          <option value='short'>{getMessage('modals.main.settings.sections.date.type.short')}</option>
         </Dropdown>
         <br/>
         <Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
-        <Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.time.date.week_number')} category='date'/>
+        <Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.date.week_number')} category='date'/>
         {dateSettings}
       </>
     );

src/components/modals/main/tabs/Settings.jsx

@@ -32,7 +32,7 @@ export default function Settings() {
         <div label={getMessage('modals.main.settings.sections.time.title')} name='time'><Time/></div>
         <div label={getMessage('modals.main.settings.sections.quicklinks.title')} name='quicklinks'><QuickLinks/></div>
         <div label={getMessage('modals.main.settings.sections.quote.title')} name='quote'><Quote/></div>
-        <div label={getMessage('modals.main.settings.sections.time.date.title')} name='date'><Date/></div>
+        <div label={getMessage('modals.main.settings.sections.date.title')} name='date'><Date/></div>
         <div label={getMessage('modals.main.settings.sections.message.title')} name='message'><Message/></div>
         <div label={getMessage('modals.main.settings.sections.background.title')} name='background'><Background/></div>
         <div label={getMessage('modals.main.settings.sections.search.title')} name='search'><Search/></div>
@@ -44,7 +44,7 @@ export default function Settings() {
         <div label={getMessage('modals.main.settings.sections.keybinds.title')} name='keybinds'><Keybinds/></div>
         <div label={getMessage('modals.main.settings.sections.stats.title')} name='stats'><Stats/></div>
         <div label={getMessage('modals.main.settings.sections.experimental.title')} name='experimental'><Experimental/></div>
-        <div label={getMessage('modals.main.settings.sections.changelog')} name='changelog'><Changelog/></div>
+        <div label={getMessage('modals.main.settings.sections.changelog.title')} name='changelog'><Changelog/></div>
         <div label={getMessage('modals.main.settings.sections.about.title')} name='about'><About/></div>
       </Tabs>
     </>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -51,7 +51,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
 
     case getMessage('modals.main.settings.sections.appearance.navbar.title'): icon = <Navbar/>; break;
     case getMessage('modals.main.settings.sections.time.title'): icon = <Time/>; break;
-    case getMessage('modals.main.settings.sections.time.date.title'): icon = <Date/>; break;
+    case getMessage('modals.main.settings.sections.date.title'): icon = <Date/>; break;
     case getMessage('modals.main.settings.sections.greeting.title'): icon = <Greeting/>; break;
     case getMessage('modals.main.settings.sections.quote.title'): icon = <Quote/>; break;
     case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
@@ -66,7 +66,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case getMessage('modals.main.settings.sections.keybinds.title'): icon = <Keybinds/>; break;
     case getMessage('modals.main.settings.sections.stats.title'): icon = <Stats/>; break;
     case getMessage('modals.main.settings.sections.experimental.title'): icon = <Experimental/>; divider = true; break;
-    case getMessage('modals.main.settings.sections.changelog'): icon = <Changelog/>; break;
+    case getMessage('modals.main.settings.sections.changelog.title'): icon = <Changelog/>; break;
     case getMessage('modals.main.settings.sections.about.title'): icon = <About/>; break;
 
     case getMessage('modals.main.addons.added'): icon = <Added/>; break;

src/components/modals/welcome/WelcomeSections.jsx

@@ -193,7 +193,7 @@ export default class WelcomeSections extends PureComponent {
         <div className='themesToggleArea'>
           <div className='toggle' onClick={() => this.props.switchTab(1)}><span>{this.getMessage('modals.main.settings.sections.language.title')}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</span></div>
           <div className='toggle' onClick={() => this.props.switchTab(3)}><span>{this.getMessage('modals.main.settings.sections.appearance.theme.title')}: {this.getSetting('theme')}</span></div>
-          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{this.getMessage('modals.main.settings.sections.final.imported')} {this.state.importedSettings.length} {this.getMessage('modals.welcome.sections.final.settings')}</div> : null}
+          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{this.getMessage('modals.main.settings.sections.final.imported', { amount: this.state.importedSettings.length })} {this.state.importedSettings.length}</div> : null}
         </div>
       </>
     );

src/components/widgets/weather/Weather.jsx

@@ -164,7 +164,7 @@ export default class Weather extends PureComponent {
         {enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
         {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}
         {enabled('cloudiness') ? <span className='loc'><br/><WiCloud/>{this.state.weather.cloudiness}%</span> : null}
-        {enabled('visibility') ? <span className='loc'><br/>{this.state.weather.visibility} {variables.language.getMessage(variables.languagecode, 'widgets.weather.meters')}</span> : null}
+        {enabled('visibility') ? <span className='loc visibility'><br/>{variables.language.getMessage(variables.languagecode, 'widgets.weather.meters', { amount: this.state.weather.visibility })}</span> : null}
         {enabled('atmosphericpressure') ? <span className='loc'><br/><WiBarometer/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
         <br/>
         {enabled('showlocation') ? <span className='loc'>{this.state.location}</span> : null}

src/components/widgets/weather/weather.scss

@@ -29,6 +29,10 @@
   .minmax {
     font-size: 0.5em;
   }
+
+  .visibility { 
+    text-transform: none !important;
+  }
 }
 
 .dark .weather {