4.0

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
Co-authored-by: Wessel Tip <discord@go2it.eu>
Co-authored-by: Isaac Saunders <contact@eartharoid.me>

src/components/modals/Addons.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { toast } from 'react-toastify';
+import dtf from '@eartharoid/dtf';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+
+export default class Addons extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            installed: [],
+            item_data: {
+                name: 'Name',
+                author: 'Author',
+                description: 'Description',
+                updated: '???',
+                version: '1.0.0',
+                icon: ''
+            }
+        }
+    }
+
+    async toggle(type, type2, data) {
+        if (type === 'item') {
+            let installed = JSON.parse(localStorage.getItem('installed'));
+            let info = installed.find(i => i.name === data).content;
+            this.setState({
+                current_data: { type: type2, name: data, content: info },
+                item_data: {
+                    name: info.data.name,
+                    author: info.data.author,
+                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+                    updated: dtf('n_D MMM YYYY', info.updated, 'en-GB'),
+                    version: info.data.version,
+                    icon: info.data.screenshot_url
+                }
+             });
+            document.getElementById('marketplace').style.display = 'none';
+            document.getElementById('item').style.display = 'block';
+         } else {
+            document.getElementById('marketplace').style.display = 'block';
+            document.getElementById('item').style.display = 'none';
+        }
+    }
+
+    uninstall() {
+        let installed = JSON.parse(localStorage.getItem('installed'));
+
+        const uninstallStuff = () => {
+            for (let i = 0; i < installed.length; i++) {
+                if (installed[i].name === this.state.current_data.name) {
+                    installed.splice(i, 1);
+                    break;
+                }
+            }
+            localStorage.setItem('installed', JSON.stringify(installed));
+            toast(this.props.toastLanguage.removed);
+            this.toggle();
+            this.componentDidMount();
+        }
+
+        switch (this.state.current_data.type) {
+            case 'settings':
+                let oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
+                localStorage.clear();
+                oldSettings.forEach(item => localStorage.setItem(item.name, item.value));
+                uninstallStuff();
+                break;
+            default:
+                try {
+                    localStorage.removeItem(this.state.current_data.type);
+                    uninstallStuff();
+                } catch (e) {
+                    console.log('invalid');
+                }
+        }
+    }
+
+  componentDidMount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+    this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
+  }
+
+  componentWillUnmount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  render() {
+     if (this.state.installed.length === 0) {
+         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>
+         <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">
+                    <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>
+              </div>
+           </div>
+         </div>
+         </div>
+     }
+
+    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>
+        <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">
+              {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">
+                       <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} />
+    </div>;
+    }
+}

src/components/modals/Marketplace.jsx

@@ -0,0 +1,265 @@
+import React from 'react';
+import WifiOffIcon from '@material-ui/icons/WifiOff';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import { toast } from 'react-toastify';
+import dtf from '@eartharoid/dtf';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+import * as Constants from '../../modules/constants';
+import Items from './marketplace/Items';
+
+export default class Marketplace extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            themes: [],
+            settings: [],
+            photo_packs: [],
+            quote_packs: [],
+            see_more: [],
+            see_more_type: '',
+            current_data: {
+                type: '',
+                name: '',
+                content: {}
+            },
+            button: '',
+            featured: {},
+            done: false,
+            item_data: {
+                name: 'Name',
+                author: 'Author',
+                description: 'Description',
+                updated: '???',
+                version: '1.0.0',
+                icon: ''
+            }
+        }
+
+        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"
+                onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+        </div>
+        <div id='marketplace'>
+            <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>
+            </div>
+        </div>
+        </div>;
+    }
+
+    async toggle(type, type2, data) {
+        if (type === 'seemore') {
+            document.getElementById('marketplace').style.display = 'none';
+            document.getElementById('seemore').style.display = 'block';
+            return this.setState({
+                see_more: this.state[type2],
+                see_more_type: type2
+            });
+        }
+
+        if (type === 'item') {
+            let info;
+            try {
+                info = await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`);
+                info = await info.json();
+            } catch (e) {
+                return toast(this.props.toastLanguage.error);
+            }
+
+            this.setState({
+                current_data: { type: type2, name: data, content: info },
+                item_data: {
+                    name: info.data.name,
+                    author: info.data.author,
+                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+                    updated: dtf('n_D MMM YYYY', info.updated, 'en-GB'),
+                    version: info.data.version,
+                    icon: info.data.screenshot_url
+                }
+            });
+            document.getElementById('marketplace').style.display = 'none';
+            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 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>;
+            this.setState({ button: button });
+        } else {
+            document.getElementById('marketplace').style.display = 'block';
+            document.getElementById('item').style.display = 'none';
+            document.getElementById('seemore').style.display = 'none';
+        }
+   }
+
+    async getItems() {
+        let data = await fetch(Constants.MARKETPLACE_URL + '/all');
+        data = await data.json();
+        let data2 = await fetch(Constants.MARKETPLACE_URL + '/featured');
+        data2 = await data2.json();
+        this.setState({
+            themes: data.data.themes,
+            settings: data.data.settings,
+            photo_packs: data.data.photo_packs,
+            quote_packs: data.data.quote_packs,
+            see_more: data.data.photo_packs,
+            featured: data2.data,
+            done: true
+        });
+    }
+
+    async install() {
+        let installed = JSON.parse(localStorage.getItem('installed'));
+        let button;
+
+        const installStuff = () => {
+           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>;
+           this.setState({ button: button });
+        }
+
+        switch (this.state.current_data.type) {
+            case 'settings':
+                localStorage.removeItem('backup_settings');
+                let oldSettings = [];
+                for (const key of Object.keys(localStorage)) oldSettings.push({name: key, value: localStorage.getItem(key)});
+                localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
+                this.state.current_data.content.data.settings.forEach(element => localStorage.setItem(element.name, element.value));
+                installStuff();
+                break;
+            case 'photo_packs':
+                localStorage.setItem('photo_packs', JSON.stringify(this.state.current_data.content.data.photos));
+                installStuff();
+                break;
+            case 'theme':
+                localStorage.setItem('theme', this.state.current_data.content.data.theme);
+                installStuff();
+                break;
+            case 'quote_packs':
+                localStorage.setItem('quote_packs', JSON.stringify(this.state.current_data.content.data.quotes));
+                installStuff();
+                break;
+            default:
+               console.log('invalid');
+        }
+    }
+
+    uninstall() {
+      let installed = JSON.parse(localStorage.getItem('installed'));
+      let button;
+
+      const uninstallStuff = () => {
+        for (let i = 0; i < installed.length; i++) {
+            if (installed[i].name === this.state.current_data.name) {
+                installed.splice(i, 1);
+                break;
+            }
+        }
+        localStorage.setItem('installed', JSON.stringify(installed));
+        toast(this.props.toastLanguage.removed);
+        button = <button className="addToMue" onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>;
+        this.setState({ button: button });
+      }
+
+      switch (this.state.current_data.type) {
+          case 'settings':
+            let oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
+            localStorage.clear();
+            oldSettings.forEach(item => localStorage.setItem(item.name, item.value));
+            uninstallStuff();
+            break;
+          default:
+            try {
+                localStorage.removeItem(this.state.current_data.type);
+                uninstallStuff();
+            } catch (e) {
+                console.log('invalid');
+            }
+        }
+    }
+
+    componentDidMount() {
+      document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+      document.getElementById('center').classList.toggle('backgroundEffects');
+      if (navigator.onLine === false) return;
+      this.getItems();
+    }
+
+   componentWillUnmount() {
+      document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+      document.getElementById('center').classList.toggle('backgroundEffects');
+   }
+
+  render() {
+    if (navigator.onLine === false || this.state.done === false) {
+        return this.offlineHTML;
+    }
+
+    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"
+                     onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+             </div>
+             <div id='marketplace'>
+                 <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>
+                 </div>
+                 <Items
+                   title={this.props.language.photo_packs}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.photo_packs.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'photo_packs', input)}
+                   seeMore={true}
+                   seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
+                 <Items
+                   title={this.props.language.preset_settings}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.settings.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'settings', input)}
+                   seeMore={true}
+                   seeMoreFunction={() => this.toggle('seemore', 'settings')} />
+                 <Items
+                   title={this.props.language.quote_packs}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.quote_packs.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'quote_packs', input)}
+                   seeMore={true}
+                   seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
+                 <Items
+                   title={this.props.language.themes}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.themes.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'theme', input)}
+                   seeMore={true}
+                   seeMoreFunction={() => this.toggle('seemore', 'themes')} />
+             </div>
+             <Item button={this.state.button} data={this.state.item_data} function={()=> this.toggle()} language={this.props.language.product} />
+             <div id='seemore'>
+                <ArrowBackIcon className='backArrow' onClick={() => this.toggle()} />
+                <Items
+                  title={this.props.language.see_more}
+                  seeMoreTitle={this.props.language.see_more}
+                  toggleFunction={(input) => this.toggle('item', this.state.see_more_type, input)}
+                  items={this.state.see_more}
+                />
+             </div>
+            </div>;
+    }
+}

src/components/modals/Settings.jsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import SettingsFunctions from '../../modules/settingsFunctions';
+import Checkbox from './settings/Checkbox';
+import Slider from './settings/Slider';
+import { toast } from 'react-toastify';
+
+export default class Settings extends React.PureComponent {
+  resetItem(key) {
+    switch (key) {
+      case 'greetingName': document.getElementById('greetingName').value = ''; break;
+      case 'customBackgroundColour':
+        localStorage.setItem('customBackgroundColour', '');
+        document.getElementById('customBackgroundColour').enabled = 'false';
+        break;
+      case 'customBackground': document.getElementById('customBackground').value = ''; break;
+      case 'blur':
+        localStorage.setItem('blur', 0);
+        document.getElementById('blurRange').value = 0;
+        document.getElementById('blurAmount').innerText = '0';
+        break;
+      case 'customSearchEngine': document.getElementById('searchEngine').value = 'DuckDuckGo'; break;
+      default: console.log('[ERROR] resetItem requires a key!');
+    }
+    toast(this.props.toastLanguage.reset);
+  }
+
+  updateCurrent() {
+    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+    document.getElementById('customBackground').value = localStorage.getItem('customBackground');
+    document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
+    document.getElementById('language').value = localStorage.getItem('language');
+    document.getElementById('searchEngine').value = localStorage.getItem('searchEngine');
+    // document.getElementById('backgroundImage').style.backgroundUrl = localStorage.getItem('customBackground');
+
+    for (const key of Object.keys(localStorage)) {
+      let value = localStorage.getItem(key);
+
+      if (key === 'blur') {
+        document.getElementById('blurAmount').innerText = value;
+        document.getElementById('blurRange').value = value;
+      }
+
+      const tag = document.getElementById(`${key}Status`);
+
+      if (tag) {
+        switch (value) {
+          case 'true': value = true; break;
+          case 'false': value = false; break;
+          default: value = true;
+        }
+        tag.checked = value;
+      }
+    }
+
+    if (localStorage.getItem('darkTheme') === 'true') {
+      document.getElementById('blurRange').style.background = '#535c68';
+      document.getElementById('customBackground').style.color = 'white';
+      document.getElementById('backgroundAPI').style.color = 'white';
+      document.getElementById('searchEngine').style.color = 'white';
+      document.getElementById('language').style.color = 'white';
+      /*[1, 2, 3, 4, 5].forEach((index) => {
+        console.log(index)
+        document.getElementsByClassName('choices')[index].style.background = 'black';
+      })*/
+      document.getElementById('greetingName').style.color = 'white';
+    }
+  }
+
+  componentDidMount() {
+    this.updateCurrent();
+
+    document.getElementById('file-input').onchange = (e) => {
+      const file = e.target.files[0];
+      if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
+
+      const reader = new FileReader();
+      reader.readAsText(file, 'UTF-8');
+
+      reader.onload = (readerEvent) => {
+        const content = JSON.parse(readerEvent.target.result);
+        for (const key of Object.keys(content)) localStorage.setItem(key, content[key]);
+        toast('Imported settings!');
+      }
+    }
+
+    document.getElementById('bg-input').onchange = (e) => {
+      const allowed = [ 'image/svg+xml', 'image/jpeg', 'image/png', 'image/webp', 'image/webm', 'image/gif' ];
+      const reader = new FileReader();
+      const file = e.target.files[0];
+
+      if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
+      if (!allowed.includes(file.type)) return console.error(`expected xml, svg, png or jpeg, got ${file.type}`);
+
+      reader.addEventListener('load', (e) => {
+        localStorage.setItem('customBackground', e.target.result);
+        document.getElementById('customBackground').src = e.target.result;
+        document.getElementById('customBackground').value = e.target.result;
+        document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${localStorage.getItem('customBackground')}`);
+        document.getElementById('backgroundImage').style.backgroundImage = `url(${localStorage.getItem('customBackground')})`
+      });
+
+      reader.readAsDataURL(file);
+    };
+    /*const hex = localStorage.getItem('customBackgroundColour');
+    if (!hex === '') {
+      document.getElementById('customBackgroundColour').value = hex;
+      document.getElementById('customBackgroundHex').innerText = hex;
+    }*/
+
+
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  componentWillUnmount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  render() {
+   // let expandClassList = '';
+    //if (localStorage.getItem('animations') === 'true') expandClassList = 'all 0.5 ease 0s';
+
+    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" onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+          <button className="tablinks" id="active">{this.props.modalLanguage.settings}</button>
+        </div>
+        <br />
+      <div className='columns'>
+          <div className='section'>
+            <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])}>{this.props.language.time.title}</h4>
+            <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
+            <Slider name='time' />
+          <li className='extraSettings'>
+            <Checkbox name='seconds' text={this.props.language.time.seconds} />
+            <Checkbox name='24hour' text={this.props.language.time.twentyfourhour} />
+            <Checkbox name='ampm' text={this.props.language.time.ampm} />
+            <Checkbox name='zero' text={this.props.language.time.zero} />
+            <Checkbox name='analog' text={this.props.language.time.analog} />
+          </li>
+        </div>
+        <div className='section'>
+          <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])}>{this.props.language.greeting.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
+          <Slider name='greeting' />
+          <li className='extraSettings'>
+          <Checkbox name='events' text={this.props.language.greeting.events} />
+          <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
+            <ul>
+              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetItem('greetingName')}>Reset</span></p>
+              <input type='text' id='greetingName'></input>
+            </ul>
+          </li>
+        </div>
+        <div className='section'>
+          <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])}>{this.props.language.quote.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
+          <Slider name='quote' />
+          <li className='extraSettings'>
+            <Checkbox name='copyButton' text={this.props.language.quote.copy} />
+          </li>
+        </div>
+        <div className='section'>
+          <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])}>{this.props.language.background.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
+          <Slider name='background' override='customBackground' />
+          <li className='extraSettings'>
+          <ul>
+            <label htmlFor='8'>{this.props.language.background.API} </label>
+            <label className='dropdown'>
+              <select className='select-css' name='8' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
+                <option value='mue'>Mue</option>
+                <option value='unsplash'>Unsplash</option>
+                { /* <option value='custom'>Custom</option> */ }
+              </select>
+            </label>
+            </ul>
+            <ul>
+              <p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>Reset</span></p>
+              <input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
+            </ul>
+            <ul>
+              <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>Reset</span></p>
+              <input type='text' id='customBackground'></input>
+            </ul>
+            <ul>
+              <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>Reset</span></p>
+              <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>Upload</button>
+              <input id='bg-input' type='file' name='name' className='hidden' />
+            </ul>
+           { /* <ul>
+              <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
+              <input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
+              <label htmlFor='colour' id='customBackgroundHex'>#00000</label>
+           </ul> */ }
+          </li>
+        </div>
+        <div className='section'>
+          <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])}>{this.props.language.searchbar.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} />
+          <Slider name='searchBar' />
+          <li className='extraSettings'>
+            <ul>
+            <label htmlFor='4'>{this.props.language.searchbar.searchengine} </label>
+              <select className='select-css' name='4' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
+                <option value='duckduckgo'>DuckDuckGo</option>
+                <option value='google'>Google</option>
+                <option value='bing'>Bing</option>
+                <option value='yahoo'>Yahoo</option>
+                <option value='ecosia'>Ecosia</option>
+                <option value='yandex'>Yandex</option>
+                <option value='qwant'>Qwant</option>
+                <option value='ask'>Ask</option>
+                <option value='startpage'>Startpage</option>
+               {/* <option value='custom'>Custom</option> */}
+              </select>
+            </ul>
+            <ul id='searchEngineInput' style={{ display: 'none' }}>
+              <p style={{"marginTop": "0px"}}>Custom Search URL <span className='modalLink' onClick={() => this.resetItem('customSearchEngine')}>Reset</span></p>
+              <input type='text' id='customSearchEngine'></input>
+            </ul>
+          </li>
+        </div>
+        <div className='section'>
+          <h4>{this.props.language.offline}</h4>
+          <Slider name='offlineMode' />
+        </div>
+        <h3>{this.props.language.experimental.title}</h3>
+        <div className='section'>
+          <h4>{this.props.language.experimental.webp}</h4>
+          <Slider name='webp' />
+        </div>
+        <div className='section'>
+          <h4>{this.props.language.experimental.dark}</h4>
+          <Slider name='darkTheme' />
+        </div>
+        <div className='section'>
+          <h4>{this.props.language.experimental.animations}</h4>
+          <Slider name='animations' />
+        </div>
+        <div className='section'>
+        <h4 htmlFor='9'>{this.props.language.language} </h4>
+          <select className='select-css' name='9' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
+            <option className='choices' value='en'>English</option>
+            <option className='choices' value='nl'>Nederlands</option>
+            <option className='choices' value='fr'>Français</option>
+            <option className='choices' value='no'>Norsk</option>
+            <option className='choices' value='ru'>Russian</option>
+          </select>
+        </div>
+        <button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>
+        <button className='reset' onClick={() => this.props.setDefaultSettings()}>{this.props.language.reset}</button>
+        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
+        <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
+        <input id='file-input' type='file' name='name' className='hidden' />
+      </div>
+    </div>;
+  }
+}

src/components/modals/Update.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import * as Constants from '../../modules/constants';
+
+export default class Update extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      title: this.props.language.title,
+      date: '21/07/2020',
+      content: this.props.language.title
+    };
+ }
+
+ async getUpdate() {
+  if (localStorage.getItem('offlineMode') === 'true') return this.setState({
+    title: this.props.language.offline.title,
+    content: this.props.language.offline.description
+  });
+
+  try { // Get update log from the API
+    let data = await fetch(Constants.API_URL + '/getUpdate');
+    data = await data.json();
+    this.setState({
+      title: data.title,
+      content: data.content
+    });
+  } catch (e) { // If it fails, we send an error
+    this.setState({
+      title: this.props.language.error.title,
+      content: this.props.language.error.description
+    });
+  }
+ }
+
+ componentDidMount() {
+   localStorage.setItem('viewedUpdate', true);
+   this.getUpdate();
+ }
+
+  render() {
+    return <div className='updateContent'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1 style={{ 'marginBottom':'-10px' }} dangerouslySetInnerHTML={{__html: this.state.title}}></h1>
+        <h5 style={{ 'lineHeight':'0px' }}> By Mue • <span dangerouslySetInnerHTML={{__html: this.state.date}}></span></h5>
+        <img alt='update picture' src='https://i.redd.it/dtm7e7ggxxh51.png' />
+        <figcaption>Image of JIF.</figcaption>
+        <p dangerouslySetInnerHTML={{__html: this.state.content}}></p>
+      </div>;
+    }
+}

src/components/modals/Welcome.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import EmailIcon from '@material-ui/icons/Email';
+
+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>
+          <p>Thank you for downloading Mue Tab,<br/> we hope you enjoy your time with our extension.</p>
+          <h2 className="subtitle">Tutorials</h2>
+          <a href=''>General Start</a>
+          <br/>
+          <a href='https://blog.muetab.xyz/welcome-to-marketplace/'>Marketplace</a>
+          <br/>
+          <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="./././icons/iconmonstr-twitter.svg"/>
+          <img alt="discord" href="https://discord.gg/kJsufA9" className="icon" src="https://cdn.discordapp.com/attachments/252071498397777921/747860127171739758/Discord-Logo-Black.svg"/>
+          <EmailIcon />
+          <br/>
+          <button className="close" onClick={this.props.modalClose}>Close</button>
+        </div>
+      </div>;
+    }
+}

src/components/modals/marketplace/Item.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+export default class Item extends React.PureComponent {
+  render() {
+    return (
+      <div id='item'>
+      <br/>
+      <ArrowBackIcon className='backArrow' onClick={this.props.function} />
+      <br/>
+      <h1>{this.props.data.name}</h1>
+      {this.props.button}
+      <br/><br/>
+      <img alt="product" 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>{this.props.data.updated}</li>
+              <br/>
+              <li className="header">{this.props.language.version}</li>
+              <li>{this.props.data.version}</li>
+              <br/>
+              <li className="header">{this.props.language.author}</li>
+              <li>{this.props.data.author}</li>
+          </ul>
+      </div>
+      <div className="productInformation">
+          <ul>
+              <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>
+    </div>
+    );
+  }
+}

src/components/modals/marketplace/Items.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class Items extends React.PureComponent {
+  render() {
+    let seeMoreHTML;
+    if (this.props.seeMore === true) seeMoreHTML = <button className='addToMue seemore' onClick={this.props.seeMoreFunction}>{this.props.seeMoreTitle}</button>;
+
+    return (
+        <div>
+            {seeMoreHTML}
+            <h1>{this.props.title}</h1>
+            <div className="items">
+                {this.props.items.map((item) =>
+                    <div className="item" onClick={() => this.props.toggleFunction(item.name)}>
+                        <img alt="icon" src={'https://external-content.duckduckgo.com/iu/?u=' + item.icon_url} />
+                        <div className="details">
+                            <h4>{item.display_name}</h4>
+                            <p>{item.author}</p>
+                        </div>
+                    </div>)}
+                </div>
+          </div>
+    );
+  }
+}

src/components/modals/settings/Checkbox.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+import CheckboxUI from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export default class Checkbox extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        checked: true
+    }
+  }
+
+  render() {
+    const handleChange = () => {
+      SettingsFunctions.setItem(this.props.name);
+      let checked;
+      if (this.state.checked === true) checked = false;
+      else checked = true;
+      this.setState({ checked: checked });
+    }
+
+    let value = localStorage.getItem(this.props.name);
+
+    switch (value) {
+      case 'true': value = true; break;
+      case 'false': value = false; break;
+      default: value = false;
+    }
+
+    this.setState({ checked: value });
+
+    return (
+      <React.Fragment>
+        <FormControlLabel
+          control={<CheckboxUI name="checkedB" color="primary" checked={this.state.checked} onChange={handleChange} />}
+          label={this.props.text}
+        />
+        <br/>
+      </React.Fragment>
+    );
+  }
+}

src/components/modals/settings/Slider.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+
+export default class Slider extends React.PureComponent {
+  render() {
+    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>
+    );
+  }
+}