feat(translations): bug fixes, more 7.0 support

src/components/modals/main/settings/Header.jsx

@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 
 import { PureComponent } from 'react';
-import { MdHelpOutline, MdFlag, MdArrowBack } from 'react-icons/md';
+import { /*MdHelpOutline,*/ MdFlag, MdArrowBack } from 'react-icons/md';
 
 import Slider from './Slider';
 import Switch from './Switch';
@@ -27,7 +27,7 @@ export default class Header extends PureComponent {
           <span className="mainTitle">{this.props.title}</span>
         </div>
         <div className="headerExtras">
-          <span
+          {/*<span
             className="link"
             onClick={() =>
               window.open(
@@ -39,7 +39,7 @@ export default class Header extends PureComponent {
             }
           >
             <MdHelpOutline /> {getMessage('modals.main.settings.sections.header.more_info')}
-          </span>
+          </span>*/}
           <span
             className="link"
             onClick={() =>

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

@@ -31,7 +31,7 @@ export default class Message extends PureComponent {
   modifyMessage(type, index) {
     const messages = this.state.messages;
     if (type === 'add') {
-      messages.push(' ');
+      messages.push('');
     } else {
       messages.splice(index, 1);
     }
@@ -81,15 +81,15 @@ export default class Message extends PureComponent {
         </SettingsItem>
         <table style={{ width: '100%' }}>
           <tr>
-            <th>Messages</th>
-            <th>Buttons</th>
+            <th>{this.getMessage('modals.main.settings.sections.message.messages')}</th>
+            <th>{this.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
           </tr>
           {this.state.messages.map((_url, index) => (
-            <tr>
+            <tr key={index}>
               <th>
                 <TextareaAutosize
                   value={this.state.messages[index]}
-                  placeholder="Message"
+                  placeholder={this.getMessage('modals.main.settings.sections.message.title')}
                   onChange={(e) => this.message(e, true, index)}
                   varient="outlined"
                 />

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

@@ -49,7 +49,7 @@ export default function Navbar() {
           category="navbar"
           onChange={setShowRefreshOptions}
         />
-        <Checkbox name="todo" text={getMessage('widgets.navbar.todo')} category="navbar" />
+        <Checkbox name="todo" text={getMessage('widgets.navbar.todo.title')} category="navbar" />
       </SettingsItem>
       {showRefreshOptions ? (
         <SettingsItem

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

@@ -109,10 +109,10 @@ export default class QuoteSettings extends PureComponent {
             <tr>
               <th>{this.getMessage('modals.main.settings.sections.quote.title')}</th>
               <th>{this.getMessage('modals.main.settings.sections.quote.author')}</th>
-              <th>{this.getMessage('modals.main.settings.sections.custom_buttons')}</th>
+              <th>{this.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
             </tr>
             {this.state.customQuote.map((_url, index) => (
-              <tr>
+              <tr key={index}>
                 <th>
                   <TextareaAutosize
                     value={this.state.customQuote[index].quote}

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

@@ -83,7 +83,7 @@ export default class Stats extends PureComponent {
         </SettingsItem>
         <div className="statsGrid">
           <div className="statSection leftPanel">
-            <span className="title">Achievements</span>
+            <span className="title">{getMessage('modals.main.settings.sections.stats.achievements')}</span>
             <div className="achievements">
               {this.state.stats['tabs-opened'] >= 10 && achievement('10/10 IGN', 'Opened 10 tabs')}
               {this.state.stats['tabs-opened'] >= 39 && achievement('Thank you', 'Opened 39 tabs')}

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

@@ -28,7 +28,7 @@ export default class TimeSettings extends PureComponent {
     const digitalSettings = (
       <SettingsItem
         title={getMessage('modals.main.settings.sections.time.digital.title')}
-        subtitle="Change how the digital clock looks"
+        subtitle={getMessage('modals.main.settings.sections.time.digital.subtitle')}
       >
         <Radio
           name="timeformat"
@@ -61,7 +61,7 @@ export default class TimeSettings extends PureComponent {
     const analogSettings = (
       <SettingsItem
         title={getMessage('modals.main.settings.sections.time.analogue.title')}
-        subtitle="Change how the analogue clock looks"
+        subtitle={getMessage('modals.main.settings.sections.time.analogue.subtitle')}
       >
         <Checkbox
           name="secondHand"
@@ -109,7 +109,7 @@ export default class TimeSettings extends PureComponent {
         />
         <SettingsItem
           title={getMessage('modals.main.settings.sections.time.type')}
-          subtitle="Choose whether to display the time in digital or analogue format, or a percentage completion of the day"
+          subtitle={getMessage('modals.main.settings.sections.time.type_subtitle')}
         >
           <Dropdown
             name="timeType"

src/components/modals/main/settings/sections/advanced/Advanced.jsx

@@ -65,7 +65,7 @@ export default class AdvancedSettings extends PureComponent {
         ) : null} */}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.offline_mode')}
-          subtitle="When enabled, all requests to online services will be disabled."
+          subtitle={getMessage('modals.main.settings.sections.advanced.offline_subtitle')}
         >
           <Switch name="offlineMode" element=".other" />
         </SettingsItem>
@@ -76,8 +76,7 @@ export default class AdvancedSettings extends PureComponent {
                 {getMessage('modals.main.settings.sections.advanced.data')}
               </span>
               <span className="subtitle">
-                Choose whether to export your Mue settings to your computer, import an existing
-                settings file, or reset your settings to their default values.
+                {getMessage('modals.main.settings.sections.advanced.data_subtitle')}
               </span>
             </div>
             <div className="action activityButtons">
@@ -98,7 +97,7 @@ export default class AdvancedSettings extends PureComponent {
         ) : null}
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
-          subtitle="Choose a timezone from a list instead of the automatic default from your computer."
+          subtitle={getMessage('modals.main.settings.sections.advanced.timezone.subtitle')}
         >
           <Dropdown name="timezone" category="timezone" manual={true}>
             <MenuItem value="auto">
@@ -113,7 +112,7 @@ export default class AdvancedSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.tab_name')}
-          subtitle="Change the name of the tab that appears in your browser."
+          subtitle={getMessage('modals.main.settings.sections.advanced.tab_name_subtitle')}
         >
           <Text name="tabName" default={getMessage('tabname')} category="other" />
         </SettingsItem>
@@ -125,7 +124,7 @@ export default class AdvancedSettings extends PureComponent {
         />
         <SettingsItem
           title={getMessage('modals.main.settings.sections.advanced.custom_css')}
-          subtitle="Make Mue's styling customised to you with Cascading Style Sheets (CSS)."
+          subtitle={getMessage('modals.main.settings.sections.advanced.custom_css_subtitle')}
         >
           <Text name="customcss" textarea={true} category="other" />
         </SettingsItem>

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -190,11 +190,20 @@ export default class CustomSettings extends PureComponent {
           <div className="action">
             <div className="dropzone" ref={this.customDnd}>
               <MdAddPhotoAlternate />
-              <span className="title">Drop to upload</span>
-              <span className="subtitle">
-                Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
+              <span className="title">
+                {this.getMessage('modals.main.settings.sections.background.source.drop_to_upload')}
               </span>
-              <button onClick={() => this.uploadCustomBackground()}>Or Select</button>
+              <span className="subtitle">
+                {this.getMessage(
+                  'modals.main.settings.sections.background.source.available_formats',
+                  {
+                    formats: 'jpeg, png, webp, webm, gif, mp4, webm, ogg',
+                  },
+                )}
+              </span>
+              <button onClick={() => this.uploadCustomBackground()}>
+                {this.getMessage('modals.main.settings.sections.background.source.select')}
+              </button>
             </div>
             <button onClick={() => this.setState({ customURLModal: true })}>
               {this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}