feat(translations): bug fixes, more 7.0 support

src/components/modals/main/marketplace/Item.jsx

@@ -113,7 +113,7 @@ export default class Item extends PureComponent {
               <MdArrowBack className="backArrow" onClick={this.props.toggleFunction} />
             </Tooltip>
           </div>
-          <span className="mainTitle">Marketplace</span>
+          <span className="mainTitle">{getMessage('modals.main.navbar.marketplace')}</span>
         </div>
         <div className="itemPage">
           <div className="itemShowcase">
@@ -127,7 +127,7 @@ export default class Item extends PureComponent {
               src={iconsrc}
               onClick={() => this.setState({ showLightbox: true })}
             />
-            <span className="title">Description</span>
+            <span className="title">{getMessage('modals.main.marketplace.product.description')}</span>
             <span
               className={this.state.showMore ? 'description' : 'description truncate'}
               dangerouslySetInnerHTML={{ __html: this.props.data.description }}
@@ -136,12 +136,12 @@ export default class Item extends PureComponent {
               <div className="showMore" onClick={() => this.toggleShowMore()}>
                 {this.state.showMore === true ? (
                   <>
-                    <span>Show Less</span>
+                    <span>{getMessage('modals.main.marketplace.product.show_less')}</span>
                     <MdKeyboardArrowDown />
                   </>
                 ) : (
                   <>
-                    <span>Show More</span>
+                    <span>{getMessage('modals.main.marketplace.product.show_more')}</span>
                     <MdKeyboardArrowUp />
                   </>
                 )}
@@ -176,7 +176,7 @@ export default class Item extends PureComponent {
                 <div className="infoItem">
                   <MdFormatQuote />
                   <div className="text">
-                    <span className="header">No. Quotes</span>
+                    <span className="header">{getMessage('modals.main.marketplace.product.no_quotes')}</span>
                     <span>{this.props.data.data.quotes.length}</span>
                   </div>
                 </div>
@@ -185,7 +185,7 @@ export default class Item extends PureComponent {
                 <div className="infoItem">
                   <MdImage />
                   <div className="text">
-                    <span className="header">No. Images</span>
+                    <span className="header">{getMessage('modals.main.marketplace.product.no_images')}</span>
                     <span>{this.props.data.data.photos.length}</span>
                   </div>
                 </div>
@@ -194,18 +194,18 @@ export default class Item extends PureComponent {
                 <div className="infoItem">
                   <MdTranslate />
                   <div className="text">
-                    <span className="header">Language</span>
+                    <span className="header">{getMessage('modals.main.settings.sections.language')}</span>
                     <span>{this.props.data.data.language}</span>
                   </div>
                 </div>
               ) : null}
-              <div className="infoItem">
+              {/*<div className="infoItem">
                 <MdIosShare />
                 <div className="text">
-                  <span className="header">Shares</span>
+                  <span className="header">{getMessage('modals.main.marketplace.product.shares')}</span>
                   <span>324</span>
                 </div>
-              </div>
+              </div>*/}
             </div>
           </div>
           <div className="itemInfo">
@@ -237,9 +237,9 @@ export default class Item extends PureComponent {
             </div>
             {this.props.data.data.collection ? (
               <div className="inCollection">
-                <span className="subtitle">Part of</span>
-                <span className="title">Red Dead Collection</span>
-                <button>Explore</button>
+                <span className="subtitle">{getMessage('modals.main.marketplace.product.part_of')}</span>
+                <span className="title">{this.props.data.data.collection}</span>
+                <button>{getMessage('modals.main.marketplace.product.explore')}</button>
               </div>
             ) : null}
             {warningHTML}

src/components/modals/main/marketplace/Items.jsx

@@ -9,6 +9,8 @@ export default function Items({
   collectionFunction,
   onCollection,
 }) {
+  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
   return (
     <>
       {type === 'all' && !onCollection ? (
@@ -19,7 +21,7 @@ export default function Items({
                 <span className="title">{collection.display_name}</span>
                 <span className="subtitle">{collection.description}</span>
                 <button onClick={() => collectionFunction(collection.name)}>
-                  Explore Collection
+                  {getMessage('modals.main.marketplace.explore_collection')}
                 </button>
               </div>
             </div>
@@ -44,13 +46,13 @@ export default function Items({
       {type === 'all' && !onCollection ? (
         <div className="createYourOwn">
           <MdAutoFixHigh />
-          <span className="title">Can't find what you're looking for?</span>
+          <span className="title">{getMessage('modals.main.marketplace.cant_find')}</span>
           <span className="subtitle">
-            Visit the{' '}
+            {getMessage('modals.main.marketplace.knowledgebase_one')}{' '}
             <a className="link" href="https://muetab.com">
-              knowledgebase
+              {getMessage('modals.main.marketplace.knowledgebase_two')}
             </a>{' '}
-            to create your own.
+            {getMessage('modals.main.marketplace.knowledgebase_three')}
           </span>
         </div>
       ) : null}

src/components/modals/main/marketplace/sections/Create.jsx

@@ -147,7 +147,7 @@ export default class Create extends PureComponent {
 
     const chooseType = (
       <>
-        <div className="smallBanner">
+        {/*<div className="smallBanner">
           <div className="content">
             <span className="title">Help Centre</span>
             <span className="subtitle">
@@ -158,7 +158,7 @@ export default class Create extends PureComponent {
             Open Site
             <MdOpenInNew />
           </button>
-        </div>
+    </div>*/}
         <div className="themesToggleArea">
           <div className="options">
             <div className="toggle lightTheme" onClick={() => this.changeTab(2, 'photos')}>

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -244,7 +244,7 @@ export default class Marketplace extends PureComponent {
       return errorMessage(
         <div className="loaderHolder">
           <div id="loader"></div>
-          <span className="subtitle">Loading</span>
+          <span className="subtitle">{this.getMessage('modals.main.loading')}</span>
         </div>,
       );
     }
@@ -304,11 +304,11 @@ export default class Marketplace extends PureComponent {
                   <MdArrowBack className="backArrow" onClick={() => this.returnToMain()} />
                 </Tooltip>
               </div>
-              <span className="mainTitle">Marketplace</span>
+              <span className="mainTitle">{this.getMessage('modals.main.navbar.marketplace')}</span>
             </div>
           </>
         ) : (
-          <span className="mainTitle">Marketplace</span>
+          <span className="mainTitle">{this.getMessage('modals.main.navbar.marketplace')}</span>
         )}
         <div className="filter">
           <Dropdown

src/components/modals/main/scss/modules/_tab-content.scss

@@ -55,11 +55,13 @@
   align-content: space-between !important;
   flex-wrap: wrap !important;
   flex-direction: row !important;
+
   button:not(:first-child) {
     width: 40% !important;
     height: 99px !important;
     flex-flow: column-reverse !important;
   }
+
   button {
     @include modal-button(standard);
   }
@@ -74,21 +76,24 @@ table {
         padding: 1rem;
       }
     }
+
     tr {
       th:last-child {
         display: grid;
         place-items: center;
       }
     }
+
+    ::placeholder {
+      color: t($subColor);
+    }
+
     tr:not(:first-child) {
       background: t($modal-sidebar);
       textarea {
         width: 90%;
         margin: 10px;
         color: t($color);
-        ::placeholder {
-          color: t($color);
-        }
       }
     }
   }

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')}{' '}