From f413f4e31c86585f8ce8679d8185de2c878c140a Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidcralph.co.uk>
Date: Sat, 4 Jun 2022 11:58:01 +0100
Subject: [PATCH] feat(translations): bug fixes, more 7.0 support

---
 .../modals/main/marketplace/Item.jsx          | 26 +++++++++----------
 .../modals/main/marketplace/Items.jsx         | 12 +++++----
 .../main/marketplace/sections/Create.jsx      |  4 +--
 .../main/marketplace/sections/Marketplace.jsx |  6 ++---
 .../main/scss/modules/_tab-content.scss       | 11 +++++---
 .../modals/main/settings/Header.jsx           |  6 ++---
 .../modals/main/settings/sections/Message.jsx | 10 +++----
 .../modals/main/settings/sections/Navbar.jsx  |  2 +-
 .../modals/main/settings/sections/Quote.jsx   |  4 +--
 .../modals/main/settings/sections/Stats.jsx   |  2 +-
 .../modals/main/settings/sections/Time.jsx    |  6 ++---
 .../settings/sections/advanced/Advanced.jsx   | 11 ++++----
 .../settings/sections/background/Custom.jsx   | 17 +++++++++---
 src/translations/de_DE.json                   | 25 ++++++++++++++++--
 src/translations/en_GB.json                   | 25 ++++++++++++++++--
 src/translations/en_US.json                   | 25 ++++++++++++++++--
 src/translations/es.json                      | 25 ++++++++++++++++--
 src/translations/fr.json                      | 25 ++++++++++++++++--
 src/translations/id_ID.json                   | 25 ++++++++++++++++--
 src/translations/nl.json                      | 25 ++++++++++++++++--
 src/translations/no.json                      | 25 ++++++++++++++++--
 src/translations/ru.json                      | 25 ++++++++++++++++--
 src/translations/zh_CN.json                   | 25 ++++++++++++++++--
 23 files changed, 296 insertions(+), 71 deletions(-)

diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx
index ed839f29..4ff8223a 100644
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/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}
diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx
index d082ce98..20b40d6a 100644
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/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}
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index 3c4b206b..a42f29b5 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/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')}>
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index cc61a6a6..d3073953 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/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
diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss
index ab596911..25a142b2 100644
--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/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);
-        }
       }
     }
   }
diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx
index d4ef3a60..fbf16aae 100644
--- a/src/components/modals/main/settings/Header.jsx
+++ b/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={() =>
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index c6f72856..802310c3 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/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"
                 />
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index 8c60104f..576cbcc8 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/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
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index b31804e8..07ed4a21 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/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}
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index de8ae74a..32f9fdac 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/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')}
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index f33c7106..a0dbc0f6 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/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"
diff --git a/src/components/modals/main/settings/sections/advanced/Advanced.jsx b/src/components/modals/main/settings/sections/advanced/Advanced.jsx
index 208ecb7a..c61ff771 100644
--- a/src/components/modals/main/settings/sections/advanced/Advanced.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx
index 202ca35c..ec6d368d 100644
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/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')}{' '}
diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json
index 6941bea6..3b4c762a 100644
--- a/src/translations/de_DE.json
+++ b/src/translations/de_DE.json
@@ -94,8 +94,10 @@
             "title": "Uhrzeit",
             "format": "Format",
             "type": "Typ",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Sekunden",
               "twentyfourhour": "24 Stunden",
               "twelvehour": "12 Stunden",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analog",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Sekundenzeiger",
               "minute_hand": "Minutenzeiger",
               "hour_hand": "Stundenzeiger",
@@ -205,6 +208,9 @@
               "upload": "Hochladen",
               "add_colour": "Farbe hinzufügen",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Deaktiviert",
               "loop_video": "Video schleife",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -367,7 +374,8 @@
               "settings_changed": "Einstellungen geändert",
               "addons_installed": "Installierte Add-ons"
             },
-            "usage": "Nutzungsstatistiken"
+            "usage": "Nutzungsstatistiken",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Tastenbindungen",
@@ -445,16 +453,29 @@
         "quote_packs": "Zitat-Pakete",
         "preset_settings": "Voreingestellte Einstellungen",
         "no_items": "Keine Einträge in dieser Kategorie",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Übersicht",
           "information": "Information",
           "last_updated": "Letzte Aktualisierung",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Version",
           "author": "Autor",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Zu Mue hinzufügen",
             "remove": "Entfernen",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Warnung",
diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json
index 7d47b911..bcfa0795 100644
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -94,8 +94,10 @@
             "title": "Time",
             "format": "Format",
             "type": "Type",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Seconds",
               "twentyfourhour": "24 Hour",
               "twelvehour": "12 hour",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analogue",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Seconds hand",
               "minute_hand": "Minutes hand",
               "hour_hand": "Hours hand",
@@ -205,6 +208,9 @@
               "upload": "Upload",
               "add_colour": "Add colour",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Loop video",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Settings changed",
               "addons_installed": "Add-ons installed"
             },
-            "usage": "Usage Stats"
+            "usage": "Usage Stats",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Quote Packs",
         "preset_settings": "Preset Settings",
         "no_items": "No items in this category",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Overview",
           "information": "Information",
           "last_updated": "Last Updated",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Version",
           "author": "Author",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Add To Mue",
             "remove": "Remove",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Warning",
diff --git a/src/translations/en_US.json b/src/translations/en_US.json
index 042bc90d..c457df2a 100644
--- a/src/translations/en_US.json
+++ b/src/translations/en_US.json
@@ -94,8 +94,10 @@
             "title": "Time",
             "format": "Format",
             "type": "Type",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Seconds",
               "twentyfourhour": "24 Hour",
               "twelvehour": "12 hour",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analog",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Seconds hand",
               "minute_hand": "Minutes hand",
               "hour_hand": "Hours hand",
@@ -205,6 +208,9 @@
               "upload": "Upload",
               "add_colour": "Add color",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Loop video",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Settings changed",
               "addons_installed": "Add-ons installed"
             },
-            "usage": "Usage Stats"
+            "usage": "Usage Stats",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Quote Packs",
         "preset_settings": "Preset Settings",
         "no_items": "No items in this category",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Overview",
           "information": "Information",
           "last_updated": "Last Updated",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Version",
           "author": "Author",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Add To Mue",
             "remove": "Remove",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Warning",
diff --git a/src/translations/es.json b/src/translations/es.json
index 4c6e5621..d062c27a 100644
--- a/src/translations/es.json
+++ b/src/translations/es.json
@@ -94,8 +94,10 @@
             "title": "Tiempo",
             "format": "Formato",
             "type": "Tipo",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Segundos",
               "twentyfourhour": "24 Horas",
               "twelvehour": "12 Horas",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analógico",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Manecilla de los segundos",
               "minute_hand": "Manecilla de los minutos",
               "hour_hand": "Manecilla de las horas",
@@ -205,6 +208,9 @@
               "upload": "Subir",
               "add_colour": "Añadir color",
               "add_background": "Añadir fondo",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Añadir URL",
               "disabled": "Desactivado",
               "loop_video": "Vídeo en bucle",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Mensaje",
             "add": "Añadir mensaje",
+            "messages": "Messages",
             "text": "Texto"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Ajustes cambiados",
               "addons_installed": "Complementos instalados"
             },
-            "usage": "Estadísticas de uso"
+            "usage": "Estadísticas de uso",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Asignación de teclas",
@@ -444,16 +452,29 @@
         "quote_packs": "Paquetes de citas",
         "preset_settings": "Ajustes preestablecidos",
         "no_items": "No hay artículos en esta categoría",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Vista general",
           "information": "Información",
           "last_updated": "Última actualización",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Versión",
           "author": "Autor",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Añadir a Mue",
             "remove": "Desinstalar",
-            "update_addon": "Actualizar complemento"
+            "update_addon": "Actualizar complemento",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Advertencia",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index dcc34653..224f8eca 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -94,8 +94,10 @@
             "title": "Heure",
             "format": "Format",
             "type": "Genre",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Affichage numériquel",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Secondes",
               "twentyfourhour": "24 heures",
               "twelvehour": "12 heures",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analogique",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Aiguille des secondes",
               "minute_hand": "Aiguille des minutes",
               "hour_hand": "Aiguille de heure",
@@ -205,6 +208,9 @@
               "upload": "Ajouter",
               "add_colour": "Ajouter une couleur",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Boucle vidéo",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Settings changed",
               "addons_installed": "Add-ons installed"
             },
-            "usage": "Usage Stats"
+            "usage": "Usage Stats",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Packs Citations",
         "preset_settings": "Paramètres prédéfinis",
         "no_items": "Aucun article dans cette catégorie",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Aperçu",
           "information": "Information",
           "last_updated": "Dernière mise à jour",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Version",
           "author": "Auteur",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Ajouter à Mue",
             "remove": "Enlever",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Warning",
diff --git a/src/translations/id_ID.json b/src/translations/id_ID.json
index 10cadcf2..8b6e2dc2 100644
--- a/src/translations/id_ID.json
+++ b/src/translations/id_ID.json
@@ -94,8 +94,10 @@
             "title": "Waktu",
             "format": "Format",
             "type": "Tipe",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Detik",
               "twentyfourhour": "24",
               "twelvehour": "12 (AM/PM)",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analog",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Jarum Detik",
               "minute_hand": "Jarum Menit",
               "hour_hand": "Jarum Jam",
@@ -205,6 +208,9 @@
               "upload": "Unggah",
               "add_colour": "Tambah warna",
               "add_background": "Tambah background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Tambah URL",
               "disabled": "Nonaktif",
               "loop_video": "Ulang video",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Pesan",
             "add": "Tambahkan pesan",
+            "messages": "Messages",
             "text": "Teks"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Perubahan pengaturan",
               "addons_installed": "Add-ons ditambahkan"
             },
-            "usage": "Statistik Penggunaan"
+            "usage": "Statistik Penggunaan",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Quote Packs",
         "preset_settings": "Preset Settings",
         "no_items": "Tidak ada item pada kategori ini",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Ikhtisar",
           "information": "Informasi",
           "last_updated": "Pembaruan Terakhir",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Versi",
           "author": "Kreator",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Tambahkan ke Mue",
             "remove": "Hapus",
-            "update_addon": "Perbarui Add-on"
+            "update_addon": "Perbarui Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Peringatan",
diff --git a/src/translations/nl.json b/src/translations/nl.json
index a722e215..c7b71712 100644
--- a/src/translations/nl.json
+++ b/src/translations/nl.json
@@ -94,8 +94,10 @@
             "title": "Tijd",
             "format": "Format",
             "type": "Type",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Seconden tonen",
               "twentyfourhour": "24-uursklok gebruiken",
               "twelvehour": "12-uursklok gebruiken",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analogue",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Seconds hand",
               "minute_hand": "Minutes hand",
               "hour_hand": "Hours hand",
@@ -205,6 +208,9 @@
               "upload": "Uploaden",
               "add_colour": "Kleur toevoegen",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Uitgeschakeld",
               "loop_video": "Loop video",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Settings changed",
               "addons_installed": "Add-ons installed"
             },
-            "usage": "Usage Stats"
+            "usage": "Usage Stats",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Citaatverzamelingen",
         "preset_settings": "Voorinstellingen",
         "no_items": "No items in this category",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Overzicht",
           "information": "Informatie",
           "last_updated": "Laatst geüpdatet",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Versie",
           "author": "Maker",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Toevoegen aan Mue",
             "remove": "Verwijderen",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Waarschuwing",
diff --git a/src/translations/no.json b/src/translations/no.json
index d85b8ae7..2dc758d9 100644
--- a/src/translations/no.json
+++ b/src/translations/no.json
@@ -94,8 +94,10 @@
             "title": "Tid",
             "format": "Format",
             "type": "Type",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Sekunder",
               "twentyfourhour": "24 Timer",
               "twelvehour": "12 hour",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analogue",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Seconds hand",
               "minute_hand": "Minutes hand",
               "hour_hand": "Hours hand",
@@ -205,6 +208,9 @@
               "upload": "Upload",
               "add_colour": "Legg til farge",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Disabled",
               "loop_video": "Loop video",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Settings changed",
               "addons_installed": "Add-ons installed"
             },
-            "usage": "Usage Stats"
+            "usage": "Usage Stats",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Sitat pakker",
         "preset_settings": "Preset instillinger",
         "no_items": "No items in this category",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Oversikt",
           "information": "Informasjon",
           "last_updated": "Sist oppdatert",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Versjon",
           "author": "Forfatter",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Legg Til Mue",
             "remove": "Fjern",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Warning",
diff --git a/src/translations/ru.json b/src/translations/ru.json
index 6629577b..45d330a4 100644
--- a/src/translations/ru.json
+++ b/src/translations/ru.json
@@ -94,8 +94,10 @@
             "title": "Время",
             "format": "Format",
             "type": "Type",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "Digital",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "Секунды",
               "twentyfourhour": "24 Часа",
               "twelvehour": "12 часов",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "Analogue",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "Seconds hand",
               "minute_hand": "Minutes hand",
               "hour_hand": "Hours hand",
@@ -205,6 +208,9 @@
               "upload": "Загрузить",
               "add_colour": "Добавить цвет",
               "add_background": "Add background",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "Выключен",
               "loop_video": "Loop video",
@@ -273,6 +279,7 @@
           "message": {
             "title": "Message",
             "add": "Add message",
+            "messages": "Messages",
             "text": "Text"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "Settings changed",
               "addons_installed": "Add-ons installed"
             },
-            "usage": "Usage Stats"
+            "usage": "Usage Stats",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "Keybinds",
@@ -444,16 +452,29 @@
         "quote_packs": "Наборы цитат",
         "preset_settings": "Пресеты настроек",
         "no_items": "No items in this category",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "Обзор",
           "information": "Информация",
           "last_updated": "Последнее обновление",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "Версия",
           "author": "Автор",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "Добавить в Mue",
             "remove": "Удалить",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "Предупреждение",
diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json
index e24ee4b6..a0c44707 100644
--- a/src/translations/zh_CN.json
+++ b/src/translations/zh_CN.json
@@ -94,8 +94,10 @@
             "title": "时间",
             "format": "格式",
             "type": "类型",
+            "type_subtitle": "Choose whether to display the time in digital or analogue format, or a percentage completion of the day",
             "digital": {
               "title": "数字时钟",
+              "subtitle": "Change how the digital clock looks",
               "seconds": "显示秒",
               "twentyfourhour": "使用 24 小时制",
               "twelvehour": "使用 12 小时制",
@@ -103,6 +105,7 @@
             },
             "analogue": {
               "title": "模拟时钟",
+              "subtitle": "Change how the analogue clock looks",
               "second_hand": "秒针",
               "minute_hand": "分针",
               "hour_hand": "时针",
@@ -205,6 +208,9 @@
               "upload": "选择",
               "add_colour": "添加颜色",
               "add_background": "继续添加背景",
+              "drop_to_upload": "Drop to upload",
+              "formats": "Available formats: {list}",
+              "select": "Or Select",
               "add_url": "Add URL",
               "disabled": "已禁用",
               "loop_video": "循环播放",
@@ -273,6 +279,7 @@
           "message": {
             "title": "消息",
             "add": "继续添加消息",
+            "messages": "Messages",
             "text": "文本"
           },
           "appearance": {
@@ -366,7 +373,8 @@
               "settings_changed": "更改的设置",
               "addons_installed": "添加的插件"
             },
-            "usage": "启用统计"
+            "usage": "启用统计",
+            "achievements": "Achievements"
           },
           "keybinds": {
             "title": "快捷键",
@@ -444,16 +452,29 @@
         "quote_packs": "名言包",
         "preset_settings": "预设设定",
         "no_items": "本类别为空",
+        "explore_collection": "Explore Collection",
+        "cant_find": "Can't find what you're looking for?",
+        "knowledgebase_one": "Visit the",
+        "knowledgebase_two": "knowledgebase",
+        "knowledgebase_three": "to create your own.",
         "product": {
           "overview": "总览",
           "information": "信息",
           "last_updated": "更新日期",
+          "description": "Description",
+          "show_more": "Show More",
+          "show_less": "Show Less",
+          "no_images": "No. Images",
+          "no_quotes": "No. Quotes",
           "version": "版本",
           "author": "作者",
+          "part_of": "Part of",
+          "explore": "Explore",
           "buttons": {
             "addtomue": "添加至 Mue",
             "remove": "卸载",
-            "update_addon": "Update Add-on"
+            "update_addon": "Update Add-on",
+            "back": "Back"
           },
           "quote_warning": {
             "title": "注意",