fix: welcome svg, privacy welcome tab, marketplace optimisations, various widget fixes etc

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

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

@@ -77,7 +77,7 @@ export default class Marketplace extends React.PureComponent {
   }
 
   async getItems() {
-    const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/all', { signal: this.controller.signal })).json();
+    const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/items/' + this.props.type, { signal: this.controller.signal })).json();
     const featured = await (await fetch(window.constants.MARKETPLACE_URL + '/featured', { signal: this.controller.signal })).json();
 
     if (this.controller.signal.aborted === true) {
@@ -85,8 +85,8 @@ export default class Marketplace extends React.PureComponent {
     }
 
     this.setState({
-      items: data[this.props.type],
-      oldItems: data[this.props.type],
+      items: data,
+      oldItems: data,
       featured: featured.data,
       done: true
     });

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

@@ -358,6 +358,9 @@ li {
 .resetfooter {
   position: absolute;
   bottom: 20px;
+  width: 300px;
+  justify-content: center;
+  display: flex;
 
   button.reset {
     margin-right: 43px;

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

@@ -46,3 +46,14 @@
   display: inline;
   margin-top: 0px;
 }
+
+button.round {
+  margin-left: 5px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 3px;
+  vertical-align: middle;
+  padding: 10px;
+}

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

@@ -24,7 +24,6 @@ select {
   }
 }
 
-
 // safari dropdown
 @supports (-webkit-hyphens: none) {
   select {

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

@@ -1,3 +1,6 @@
+import CloseIcon from '@material-ui/icons/Close';
+import DeleteIcon from '@material-ui/icons/Delete';
+
 import SettingsFunctions from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
@@ -11,12 +14,17 @@ export default function ResetModal(props) {
 
   return (
     <>
-      <h3 style={{ textAlign: 'center' }}>{language.title}</h3>
-      <h4>{language.question}</h4>
-      <p>{language.information}</p>
+      <h1 style={{ textAlign: 'center' }}>{language.title}</h1>
+      <span>{language.question}</span>
+      <br/><br/>
+      <span>{language.information}</span>
       <div className='resetfooter'>
-        <button className='reset' style={{ marginLeft: 0 }} onClick={() => reset()}>{window.language.modals.main.settings.buttons.reset}</button>
-        <button className='import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>{language.cancel}</button>
+        <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
+          <DeleteIcon/>
+        </button>
+        <button className='round import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>
+          <CloseIcon/>
+        </button>
       </div>
     </>
   );

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

@@ -20,7 +20,6 @@ export default class SearchSettings extends React.PureComponent {
       customDisplay: 'none',
       customValue: localStorage.getItem('customSearchEngine') || ''
     };
-    this.language = window.language.modals.main.settings;
   }
 
   resetSearch() {

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

@@ -114,7 +114,7 @@ export default class BackgroundSettings extends React.PureComponent {
     const APISettings = (
       <>
         <br/>
-        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background'/>
+        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
         <br/>
         <Dropdown label={background.category} name='apiCategory'>
           {this.state.backgroundCategories.map((category) => (
@@ -152,7 +152,7 @@ export default class BackgroundSettings extends React.PureComponent {
     return (
       <>
         <h2>{background.title}</h2>
-        <Switch name='background' text={this.language.enabled} category='background' />
+        <Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
         <Checkbox name='ddgProxy' text={background.ddg_image_proxy} />
         <Checkbox name='bgtransition' text={background.transition} />
         <Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />
@@ -174,17 +174,17 @@ export default class BackgroundSettings extends React.PureComponent {
         <Checkbox name='downloadbtn' text={background.buttons.download} element='.other' />
 
         <h3>{background.effects.title}</h3>
-        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' />
+        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
+        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
         <br/><br/>
-        <Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background'>
+        <Dropdown label={background.effects.filters.title} name='backgroundFilter' category='background' element='#backgroundImage'>
           <option value='grayscale'>{background.effects.filters.grayscale}</option>
           <option value='sepia'>{background.effects.filters.sepia}</option>
           <option value='invert'>{background.effects.filters.invert}</option>
           <option value='saturate'>{background.effects.filters.saturate}</option>
           <option value='contrast'>{background.effects.filters.contrast}</option>
         </Dropdown>
-        <Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' />
+        <Slider title={background.effects.filters.amount} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
       </>
     );
   }

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

@@ -64,12 +64,14 @@ function Tab(props) {
     case settings.changelog: icon = <Changelog/>; break;
     case settings.about.title: icon = <About/>; break;
 
-    // Store
+    // Addons
+    case addons.added: icon = <Added/>; break;
+    case addons.sideload: icon = <Sideload/>; break;
+
+    // Marketplace
     case marketplace.photo_packs: icon = <Background/>; break;
     case marketplace.quote_packs: icon = <Quote/>; break;
     case marketplace.preset_settings: icon = <Advanced/>; break;
-    case addons.added: icon = <Added/>; break;
-    case addons.sideload: icon = <Sideload/>; break;
 
     default: break;
   }

src/components/modals/welcome/Welcome.jsx

@@ -51,7 +51,7 @@ export default class WelcomeModal extends React.PureComponent {
     return (
       <div className='welcomeContent'>
         <section>
-          <img alt='celebration' draggable={false} src={this.state.image} />
+          <img className='showcaseimg' alt='celebration' draggable={false} src={this.state.image} />
           <ProgressBar count={this.images} currentTab={this.state.currentTab} switchTab={(tab) => this.switchTab(tab)}/>  
         </section>
         <section>

src/components/modals/welcome/WelcomeSections.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import Radio from '../main/settings/Radio';
-//import Checkbox from '../main/settings/Checkbox';
+import Checkbox from '../main/settings/Checkbox';
 import FileUpload from '../main/settings/FileUpload';
+
 import UploadIcon from '@material-ui/icons/CloudUpload';
 import AutoIcon from '@material-ui/icons/AutoAwesome';
 import LightModeIcon from '@material-ui/icons/LightMode';
@@ -79,9 +80,11 @@ export default class WelcomeSections extends React.Component {
 
   changeWelcomeImg() {
     let welcomeImage = this.state.welcomeImage;
+
     this.setState({
       welcomeImage: ++welcomeImage % this.welcomeImages.length
     });
+
     this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
   }
 
@@ -125,7 +128,7 @@ export default class WelcomeSections extends React.Component {
       </>
     );
   
-    const { appearance } = window.language.modals.main.settings.sections;
+    const { appearance, advanced } = window.language.modals.main.settings.sections;
     const languageSettings = window.language.modals.main.settings.sections.language;
 
     const theme = (
@@ -139,12 +142,12 @@ export default class WelcomeSections extends React.Component {
           </div>
           <div className='options'>
             <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
-                <LightModeIcon/>
-                <span>{appearance.theme.light}</span>
+              <LightModeIcon/>
+              <span>{appearance.theme.light}</span>
             </div>
             <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
-                <DarkModeIcon/>
-                <span>{appearance.theme.dark}</span>
+              <DarkModeIcon/>
+              <span>{appearance.theme.dark}</span>
             </div>
           </div>
           <h3 className='quicktip'>{language.tip}</h3>
@@ -172,6 +175,10 @@ export default class WelcomeSections extends React.Component {
       <>
         <h1>{language.sections.privacy.title}</h1>
         <p>{language.sections.privacy.description}</p>
+        <Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
+        <p>{language.sections.privacy.offline_mode_description}</p>
+        <h3 className='quicktip'>{language.sections.privacy.links.title}</h3>
+        <a className='privacy' href='https://muetab.com/privacy' target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
       </>
     );
 

src/components/modals/welcome/welcome.scss

@@ -24,10 +24,6 @@
     justify-content: center;
     align-items: center;
 
-    img {
-      height: 300px;
-      width: 400px;
-    }
   }
 
   section:nth-child(2) {
@@ -82,20 +78,6 @@
   }
 }
 
-.examples {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  align-items: center;
-
-  img {
-    width: 30rem;
-    height: auto;
-    display: block;
-    margin: 30px;
-    border-radius: 12px;
-  }
-}
 
 .themesToggleArea {
   .active {
@@ -146,3 +128,23 @@ a.privacy {
     color: #5352ed;
   }
 }
+
+.examples {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    width: 30rem !important;
+    height: auto !important;
+    display: block;
+    margin: 30px;
+    border-radius: 12px;
+  }
+}
+
+.showcaseimg {
+  width: 350px;
+  height: auto;
+}

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -100,6 +100,10 @@ export default class QuickLinks extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (localStorage.getItem('offlineMode') === 'true') {
+      return; 
+    }
+
     EventBus.on('refresh', (data) => {
       if (data === 'quicklinks') {
         const element = document.querySelector('.quicklinks-container');
@@ -144,6 +148,10 @@ export default class QuickLinks extends React.PureComponent {
   }
 
   render() {
+    if (localStorage.getItem('offlineMode') === 'true') {
+      return null; 
+    }
+
     let target, rel = null;
     if (localStorage.getItem('quicklinksnewtab') === 'true') {
       target = '_blank';