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;
   }