fix: bug fixes, style improvements, background transition toggle and marketplace language support

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

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

@@ -30,8 +30,9 @@ export default class Added extends React.PureComponent {
       button: ''
     };
     this.buttons = {
-      uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>Remove</button>,
+      uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
     }
+    this.language = window.language.modals.main.addons;
   }
 
   toggle(type, type2, data) {
@@ -106,8 +107,8 @@ export default class Added extends React.PureComponent {
         <div className='items'>
           <div className='emptyMessage'>
             <LocalMallIcon/>
-            <h1>Empty</h1>
-            <p className='description'>No addons are installed</p>
+            <h1>{this.language.empty.title}</h1>
+            <p className='description'>{this.language.empty.description}</p>
           </div>
         </div>
       );

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

@@ -47,7 +47,7 @@ export default class Marketplace extends React.PureComponent {
         try {
           info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`)).json();
         } catch (e) {
-          return toast(this.props.toastLanguage.error);
+          return toast(window.language.toasts.error);
         }
 
         // check if already installed
@@ -131,35 +131,25 @@ export default class Marketplace extends React.PureComponent {
       );
     }
 
-    if (navigator.onLine === false) {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(
         <>
           <WifiOffIcon/>
-          <h1>Offline</h1>
-          <p className='description'>Mue down!</p>
-        </>
-      );
-    }
-
-    if (localStorage.getItem('offlineMode') === 'true') {
-      return errorMessage(
-        <>
-          <WifiOffIcon/>
-          <h1>Offline mode is enabled</h1>
-          <p className='description'>Please turn off offline mode to access the marketplace</p>
+          <h1>{this.language.offline.title}</h1>
+          <p className='description'>{this.language.offline.description}</p>
         </>
       );
     }
 
     if (this.state.done === false) {
-      return errorMessage(<h1>Loading</h1>);
+      return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
     }
 
     if (this.state.items.length === 0) {
       return errorMessage(<>
         <LocalMallIcon/>
-        <h1>Empty</h1>
-        <p className='description'>No items in this category</p>
+        <h1>{window.language.modals.main.addons.empty.title}</h1>
+        <p className='description'>{this.language.no_items}</p>
       </>)
     }
 

src/components/modals/main/scss/index.scss

@@ -124,6 +124,7 @@ ul.sidebar {
 
   h1 {
     text-align: center;
+    font-size: 1.8em;
   }
 
   svg {
@@ -358,3 +359,7 @@ li {
   color: var(--modal-text) !important;
   padding-right: 10px;
 }
+
+.MuiIconButton-root {
+  color: var(--modal-text) !important;
+} 

src/components/modals/main/scss/settings/_buttons.scss

@@ -69,10 +69,12 @@
 .import {
   @extend %settingsButton;
   background-color: map-get($button-colours, 'other');
-  color: map-get($theme-colours, 'secondary');
+  color: map-get($theme-colours, 'primary');
+  border: 2px solid map-get($button-colours, 'other');
 
   &:hover {
     color: map-get($button-colours, 'other');
+    border: 2px solid map-get($button-colours, 'other');
   }
 }
 

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

@@ -11,8 +11,8 @@ export default function ResetModal(props) {
       <h4>{language.question}</h4>
       <p>{language.information}</p>
       <div className='resetfooter'>
-        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{window.language.modals.main.settings.buttons.reset}</button>
-        <button className='import' onClick={props.modalClose}>{language.cancel}</button>
+        <button className='reset' style={{ 'margin-left': '0' }} onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{window.language.modals.main.settings.buttons.reset}</button>
+        <button className='import' style={{ 'margin-left': '5px' }} onClick={props.modalClose}>{language.cancel}</button>
       </div>
     </>
   );

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

@@ -119,6 +119,7 @@ export default class BackgroundSettings extends React.PureComponent {
         <h2>{background.title}</h2>
         <Switch name='background' text={this.language.enabled} />
         <Checkbox name='ddgProxy' text={background.ddg_proxy} />
+        <Checkbox name='bgtransition' text={background.transition} />
 
         <h3>{background.source.title}</h3>
         <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>

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

@@ -5,10 +5,12 @@ import Added from '../marketplace/sections/Added';
 import AddonsTabs from './backend/Tabs';
 
 export default function Addons() {
+  const language = window.language.modals.main.addons;
+
   return (
     <AddonsTabs>
-      <div label='Added'><Added/></div>
-      <div label='Sideload'></div>
+      <div label={language.added}><Added/></div>
+      <div label={language.sideload}></div>
     </AddonsTabs>
   );
 }

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

@@ -5,10 +5,12 @@ import MarketplaceTab from '../marketplace/sections/Marketplace';
 import Tabs from './backend/Tabs';
 
 export default function Marketplace() {
+  const language = window.language.modals.main.marketplace;
+
   return (
     <Tabs>
-      <div label='Photo Packs'><MarketplaceTab type='photo_packs'/></div>
-      <div label='Quote Packs'><MarketplaceTab type='quote_packs'/></div>
+      <div label={language.photo_packs}><MarketplaceTab type='photo_packs'/></div>
+      <div label={language.quote_packs}><MarketplaceTab type='quote_packs'/></div>
     </Tabs>
   );
 }

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

@@ -40,6 +40,8 @@ function Tab(props) {
 
   const language = window.language.modals.main.settings.sections;
   const navbarlanguage = window.language.modals.main.navbar;
+  const marketplacelanguage = window.language.modals.main.marketplace;
+  const addonslanguage = window.language.modals.main.addons;
 
   let icon, divider;
   switch (props.label) {
@@ -65,10 +67,10 @@ function Tab(props) {
     case language.about.title: icon = <About/>; break;
 
     // Store
-    case 'Photo Packs': icon = <Background/>; break;
-    case 'Quote Packs': icon = <Quote/>; break;
-    case 'Added': icon = <Added/>; break;
-    case 'Sideload': icon = <Sideload/>; break;
+    case marketplacelanguage.photo_packs: icon = <Background/>; break;
+    case marketplacelanguage.quote_packs: icon = <Quote/>; break;
+    case addonslanguage.added: icon = <Added/>; break;
+    case addonslanguage.sideload: icon = <Sideload/>; break;
 
     default: break;
   }