feat: hot reload for background and quote language, css fixes etc

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

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

@@ -124,8 +124,10 @@ export default class Marketplace extends React.PureComponent {
     const errorMessage = (msg) => {
       return (
         <div id='marketplace'>
-          <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
-            {msg}
+          <div className='emptyitems'>
+            <div class='emptyMessage'>
+              {msg}
+            </div>
           </div>
         </div>
       );

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

@@ -118,7 +118,7 @@ ul.sidebar {
   border-radius: 12px 0 0 12px;
   text-align: left;
   font-size: 24px;
-  height: 100vh;
+  min-height: 100vh;
 
   h1 {
     text-align: center;
@@ -155,10 +155,20 @@ li {
   right: 0;
   bottom: 0;
   left: 0;
-  width: 60%;
   height: 80%;
 }
 
+@media only screen and (max-width: 1300px) {
+  #modal {
+    width: 90% !important;
+  }
+}
+@media only screen and (min-width: 1310px) {
+  #modal {
+    width: 60%;
+  }
+}
+
 .tab-list-active {
   background: var(--tab-active);
 }

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

@@ -186,3 +186,7 @@ legend {
 li.stortableitem {
   width: 200px;
 }
+
+.MuiTouchRipple-root {
+  background: transparent;
+}

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

@@ -13,7 +13,7 @@ export default function LanguageSettings() {
       <h2>{language.title}</h2>
       <Radio name='language' options={languages} />
       <h3>{language.quote}</h3>
-      <Radio name='quotelanguage' options={quote_languages} />
+      <Radio name='quotelanguage' options={quote_languages} category='quote' />
     </>
   );
 }

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

@@ -8,7 +8,12 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
 const enabled = (setting) => {
-  return (localStorage.getItem(setting) === 'true');
+  switch (setting) {
+    case 'quicklinks':
+      return (localStorage.getItem('quicklinksenabled') === 'true');
+    default:
+      return (localStorage.getItem(setting) === 'true');
+  }
 };
 
 const settings = window.language.modals.main.settings.sections;

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

@@ -95,7 +95,7 @@ export default class BackgroundSettings extends React.PureComponent {
     const APISettings = (
       <>
         <br/>
-        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI'/>
+        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background'/>
         <br/>
         <Dropdown label={background.category} name='apiCategory'>
           {this.state.backgroundCategories.map((category) => (
@@ -127,12 +127,12 @@ export default class BackgroundSettings extends React.PureComponent {
     return (
       <>
         <h2>{background.title}</h2>
-        <Switch name='background' text={this.language.enabled} />
+        <Switch name='background' text={this.language.enabled} category='background' />
         <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 })}>
+        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
           {this.marketplaceType()}
           <option value='api'>{background.type.api}</option>
           <option value='custom'>{background.type.custom_image}</option>
@@ -148,8 +148,8 @@ export default class BackgroundSettings extends React.PureComponent {
         <Checkbox name='downloadbtn' text={background.buttons.download}/>
 
         <h3>{background.effects.title}</h3>
-        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
+        <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='100' display='%' category='background' />
         <br/><br/>
       </>
     );