From 4fbcc19ff8ee231513969c283781aa0e461004f0 Mon Sep 17 00:00:00 2001
From: David Ralph <ohlookitsderpy@protonmail.com>
Date: Mon, 14 Sep 2020 23:06:13 +0100
Subject: [PATCH] fixes

---
 src/components/modals/Addons.jsx            | 36 ++++++++---------
 src/components/modals/Marketplace.jsx       | 44 ++++++++++-----------
 src/components/modals/Settings.jsx          |  3 ++
 src/components/modals/Welcome.jsx           | 20 +++++-----
 src/components/modals/marketplace/Item.jsx  | 20 +++++-----
 src/components/modals/marketplace/Items.jsx |  8 ++--
 src/components/modals/settings/Checkbox.jsx |  2 +-
 src/components/modals/settings/Slider.jsx   |  6 +--
 src/components/widgets/Maximise.jsx         |  2 +-
 src/components/widgets/Search.jsx           |  2 +-
 10 files changed, 73 insertions(+), 70 deletions(-)

diff --git a/src/components/modals/Addons.jsx b/src/components/modals/Addons.jsx
index 13f87956..6a575280 100644
--- a/src/components/modals/Addons.jsx
+++ b/src/components/modals/Addons.jsx
@@ -47,7 +47,7 @@ export default class Addons extends React.PureComponent {
         MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type);
         toast(this.props.toastLanguage.removed);
         this.setState({
-            button: <button className="addToMue" onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
+            button: <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
         });
     }
 
@@ -67,21 +67,21 @@ export default class Addons extends React.PureComponent {
          return <div className='content'>
          <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
          <h1>{this.props.modalLanguage.title}</h1>
-             <div className="tab">
-               <button className="tablinks" onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
-               <button className="tablinks" id="active">{this.props.modalLanguage.addons}</button>
-               <button className="tablinks" onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+             <div className='tab'>
+               <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+               <button className='tablinks' id='active'>{this.props.modalLanguage.addons}</button>
+               <button className='tablinks' onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
             </div>
          <div id='marketplace'>
          { /*<input id='file-input' type='file' name='name' className='hidden' />
         <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button> */}
            <h1>{this.props.language.added}</h1>
-           <div className="items">
-               <div className="emptyMessage">
+           <div className='items'>
+               <div className='emptyMessage'>
                     <LocalMallIcon />
                     <h1>{this.props.language.empty.title}</h1>
-                    <p className="description">{this.props.language.empty.description}</p>
-                    <button className="goToMarket" onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
+                    <p className='description'>{this.props.language.empty.description}</p>
+                    <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
               </div>
            </div>
          </div>
@@ -91,27 +91,27 @@ export default class Addons extends React.PureComponent {
     return <div className='content'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.modalLanguage.title}</h1>
-             <div className="tab">
-               <button className="tablinks" onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
-               <button className="tablinks" id="active">{this.props.modalLanguage.addons}</button>
-               <button className="tablinks" onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+             <div className='tab'>
+               <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+               <button className='tablinks' id='active'>{this.props.modalLanguage.addons}</button>
+               <button className='tablinks' onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
             </div>
         <div id='marketplace'>
        { /*<input id='file-input' type='file' name='name' className='hidden' />
         <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button> */}
         <h1>{this.props.language.added}</h1>
-          <div className="items">
+          <div className='items'>
               {this.state.installed.map((item) =>
-                   <div className="item" onClick={()=> this.toggle('item', item.type, item.name)}>
-                   <img alt="icon" src={item.content.data.icon_url} />
-                   <div className="details">
+                   <div className='item' onClick={()=> this.toggle('item', item.type, item.name)}>
+                   <img alt='icon' src={item.content.data.icon_url} />
+                   <div className='details'>
                        <h4>{item.content.data.name}</h4>
                        <p>{item.content.data.author}</p>
                    </div>
                </div>)}
           </div>
         </div>
-        <Item button={<button className="removeFromMue" onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>} data={this.state.item_data} function={()=> this.toggle()} language={this.props.language.product} />
+        <Item button={<button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>} data={this.state.item_data} function={()=> this.toggle()} language={this.props.language.product} />
     </div>;
     }
 }
diff --git a/src/components/modals/Marketplace.jsx b/src/components/modals/Marketplace.jsx
index 4c071390..48a1e5c0 100644
--- a/src/components/modals/Marketplace.jsx
+++ b/src/components/modals/Marketplace.jsx
@@ -38,17 +38,17 @@ export default class Marketplace extends React.PureComponent {
         this.offlineHTML = <div className='content'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.modalLanguage.title}</h1>
-        <div className="tab">
-            <button className="tablinks" id="active">{this.props.modalLanguage.marketplace}</button>
-            <button className="tablinks" onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-            <button className="tablinks"
+        <div className='tab'>
+            <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
+            <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+            <button className='tablinks'
                 onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
         </div>
         <div id='marketplace'>
-            <div className="emptyMessage" style={{"marginTop": "20px", "transform": "translateY(80%)"}}>
+            <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
                 <WifiOffIcon />
                 <h1>{this.props.language.offline.title}</h1>
-                <p className="description">{this.props.language.offline.description}</p>
+                <p className='description'>{this.props.language.offline.description}</p>
             </div>
         </div>
         </div>;
@@ -67,7 +67,7 @@ export default class Marketplace extends React.PureComponent {
         if (type === 'item') {
             let info;
             try {
-                info = (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
+                info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
             } catch (e) {
                 return toast(this.props.toastLanguage.error);
             }
@@ -87,9 +87,9 @@ export default class Marketplace extends React.PureComponent {
             document.getElementById('seemore').style.display = 'none';
             document.getElementById('item').style.display = 'block';
 
-            let button = <button className="addToMue" onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>;
+            let button = <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>;
             let installed = JSON.parse(localStorage.getItem('installed'));
-            if (installed.some(item => item.name === data)) button = <button className="removeFromMue" onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
+            if (installed.some(item => item.name === data)) button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
             this.setState({ button: button });
         } else {
             document.getElementById('marketplace').style.display = 'block';
@@ -120,7 +120,7 @@ export default class Marketplace extends React.PureComponent {
            installed.push(this.state.current_data);
            localStorage.setItem('installed', JSON.stringify(installed));
            toast(this.props.toastLanguage.installed);
-           button = <button className="removeFromMue" onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
+           button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
            this.setState({ button: button });
         }
 
@@ -154,7 +154,7 @@ export default class Marketplace extends React.PureComponent {
         MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type);
         toast(this.props.toastLanguage.removed);
         this.setState({
-            button: <button className="addToMue" onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
+            button: <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
         });
     }
 
@@ -176,14 +176,14 @@ export default class Marketplace extends React.PureComponent {
         return  <div className='content'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.modalLanguage.title}</h1>
-        <div className="tab">
-            <button className="tablinks" id="active">{this.props.modalLanguage.marketplace}</button>
-            <button className="tablinks" onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-            <button className="tablinks"
+        <div className='tab'>
+            <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
+            <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+            <button className='tablinks'
                 onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
         </div>
         <div id='marketplace'>
-            <div className="emptyMessage" style={{"marginTop": "20px", "transform": "translateY(80%)"}}>
+            <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
                 <h1>Loading...</h1>
             </div>
         </div>
@@ -193,17 +193,17 @@ export default class Marketplace extends React.PureComponent {
     return <div className='content'>
              <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
              <h1>{this.props.modalLanguage.title}</h1>
-             <div className="tab">
-                 <button className="tablinks" id="active">{this.props.modalLanguage.marketplace}</button>
-                 <button className="tablinks" onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
-                 <button className="tablinks"
+             <div className='tab'>
+                 <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
+                 <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+                 <button className='tablinks'
                      onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
              </div>
              <div id='marketplace'>
-                 <div className="featured" style={{backgroundColor: this.state.featured.colour}}>
+                 <div className='featured' style={{backgroundColor: this.state.featured.colour}}>
                      <p>{this.state.featured.title}</p>
                      <h1>{this.state.featured.name}</h1>
-                     <button className="addToMue" onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
+                     <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
                  </div>
                  <Items
                    title={this.props.language.photo_packs}
diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index b81a1fde..a7561214 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -50,6 +50,9 @@ export default class Settings extends React.PureComponent {
         document.getElementById('brightnessAmount').innerText = value;
         document.getElementById('brightnessRange').value = value;
       }
+
+      const tag = document.getElementById(`${key}Status`);
+      if (tag) tag.checked = (value === 'true');
     }
 
     if (localStorage.getItem('darkTheme') === 'true') {
diff --git a/src/components/modals/Welcome.jsx b/src/components/modals/Welcome.jsx
index 396d5015..78ba859d 100644
--- a/src/components/modals/Welcome.jsx
+++ b/src/components/modals/Welcome.jsx
@@ -5,13 +5,13 @@ export default class Welcome extends React.PureComponent {
   render() {
     return <div className='welcomeContent'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-        <div className="welcomeModalText">
-          <h2 className="subtitle">Welcome to</h2>
-          <h1 className="welcometitle">Mue Tab</h1>
-          <img alt="celebration" style={{"height": "200px", "width": "auto"}} src="./././icons/undraw_celebration.svg" />
-          <h2 className="subtitle">Information</h2>
+        <div className='welcomeModalText'>
+          <h2 className='subtitle'>Welcome to</h2>
+          <h1 className='welcometitle'>Mue Tab</h1>
+          <img alt='celebration' style={{'height': '200px', 'width': 'auto'}} src='./././icons/undraw_celebration.svg' />
+          <h2 className='subtitle'>Information</h2>
           <p>Thank you for downloading Mue Tab,<br/> we hope you enjoy your time with our extension.</p>
-          <h2 className="subtitle">Tutorials</h2>
+          <h2 className='subtitle'>Tutorials</h2>
           <a href=''>General Start</a>
           <br/>
           <a href='https://blog.muetab.xyz/welcome-to-marketplace/'>Marketplace</a>
@@ -19,12 +19,12 @@ export default class Welcome extends React.PureComponent {
           <a href=''>Submitting Photos</a>
           <br/>
           <a href=''>Settings</a>
-          <h2 className="subtitle">Support</h2>
-         {/* <img alt="twitter" href="https://twitter.com/getmue" className="icon" src=""/>
-          <img alt="discord" href="https://discord.gg/kJsufA9" className="icon" src=""/> */}
+          <h2 className='subtitle'>Support</h2>
+         {/* <img alt='twitter' href='https://twitter.com/getmue' className='icon' src=''/>
+          <img alt='discord' href='https://discord.gg/kJsufA9' className='icon' src=''/> */}
           <EmailIcon />
           <br/>
-          <button className="close" onClick={this.props.modalClose}>Close</button>
+          <button className='close' onClick={this.props.modalClose}>Close</button>
         </div>
       </div>;
     }
diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx
index ff350788..5499bbfb 100644
--- a/src/components/modals/marketplace/Item.jsx
+++ b/src/components/modals/marketplace/Item.jsx
@@ -3,7 +3,7 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 export default class Item extends React.PureComponent {
   render() {
-    if (!this.props.data.icon) return <div></div>;
+    if (!this.props.data.icon) return null;
     return (
       <div id='item'>
       <br/>
@@ -12,32 +12,32 @@ export default class Item extends React.PureComponent {
       <h1>{this.props.data.name}</h1>
       {this.props.button}
       <br/><br/>
-      <img alt="product" draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
-      <div className="informationContainer">
-      <div className="productInformation">
+      <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
+      <div className='informationContainer'>
+      <div className='productInformation'>
           <h4>{this.props.language.information}</h4>
           <ul>
               <br/>
-              <li className="header">{this.props.language.last_updated}</li>
+              <li className='header'>{this.props.language.last_updated}</li>
               <li>{this.props.data.updated}</li>
               <br/>
-              <li className="header">{this.props.language.version}</li>
+              <li className='header'>{this.props.language.version}</li>
               <li>{this.props.data.version}</li>
               <br/>
-              <li className="header">{this.props.language.author}</li>
+              <li className='header'>{this.props.language.author}</li>
               <li>{this.props.data.author}</li>
           </ul>
       </div>
-      <div className="productInformation">
+      <div className='productInformation'>
           <ul>
-              <li className="header">{this.props.language.notice.title}</li>
+              <li className='header'>{this.props.language.notice.title}</li>
               <li id='updated'>{this.props.language.notice.description}</li>
           </ul>
       </div>
       </div>
       <br/>
       <h1>{this.props.language.overview}</h1>
-      <p className="description" dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
+      <p className='description' dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
     </div>
     );
   }
diff --git a/src/components/modals/marketplace/Items.jsx b/src/components/modals/marketplace/Items.jsx
index e8234853..e030c545 100644
--- a/src/components/modals/marketplace/Items.jsx
+++ b/src/components/modals/marketplace/Items.jsx
@@ -9,11 +9,11 @@ export default class Items extends React.PureComponent {
         <div>
             {seeMoreHTML}
             <h1>{this.props.title}</h1>
-            <div className="items">
+            <div className='items'>
                 {this.props.items.map((item) =>
-                    <div className="item" onClick={() => this.props.toggleFunction(item.name)}>
-                        <img alt="icon" draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
-                        <div className="details">
+                    <div className='item' onClick={() => this.props.toggleFunction(item.name)}>
+                        <img alt='icon' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
+                        <div className='details'>
                             <h4>{item.display_name}</h4>
                             <p>{item.author}</p>
                         </div>
diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx
index 4b61d250..91b0007b 100644
--- a/src/components/modals/settings/Checkbox.jsx
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -24,7 +24,7 @@ export default class Checkbox extends React.PureComponent {
     return (
       <React.Fragment>
         <FormControlLabel
-          control={<CheckboxUI name="checkedB" color="primary" checked={this.state.checked} onChange={this.handleChange} />}
+          control={<CheckboxUI name='checkedB' color='primary' checked={this.state.checked} onChange={this.handleChange} />}
           label={this.props.text}
         />
         <br/>
diff --git a/src/components/modals/settings/Slider.jsx b/src/components/modals/settings/Slider.jsx
index b48cca11..d21e3a7d 100644
--- a/src/components/modals/settings/Slider.jsx
+++ b/src/components/modals/settings/Slider.jsx
@@ -6,9 +6,9 @@ export default class Slider extends React.PureComponent {
     let setText = this.props.name;
     if (this.props.override) setText = this.props.override;
     return (
-        <label className="switch">
-          <input type="checkbox" onClick={() => SettingsFunctions.setItem(setText)} id={this.props.name + 'Status'}  />
-          <span className="slider"></span>
+        <label className='switch'>
+          <input type='checkbox' onClick={() => SettingsFunctions.setItem(setText)} id={this.props.name + 'Status'}  />
+          <span className='slider'></span>
         </label>
     );
   }
diff --git a/src/components/widgets/Maximise.jsx b/src/components/widgets/Maximise.jsx
index f3f9dd11..eb5ae1db 100644
--- a/src/components/widgets/Maximise.jsx
+++ b/src/components/widgets/Maximise.jsx
@@ -33,7 +33,7 @@ export default class View extends React.PureComponent {
   }
 
   render() {
-    if (localStorage.getItem('view') === 'false') return <div></div>;
+    if (localStorage.getItem('view') === 'false') return null;
     return <div className='view'>
         <FullscreenIcon id='viewButton' onClick={() => this.viewStuff()} />
     </div>
diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/Search.jsx
index 2a937246..77b6e890 100644
--- a/src/components/widgets/Search.jsx
+++ b/src/components/widgets/Search.jsx
@@ -3,7 +3,7 @@ import SearchIcon from '@material-ui/icons/Search';
 
 export default class Search extends React.PureComponent {
   render() {
-    if (localStorage.getItem('searchBar') === 'false') return <div></div>;
+    if (localStorage.getItem('searchBar') === 'false') return null;
 
     let url;
     let query = 'q';