chore: release 5.1.0

* Update zh_CN.json

* Update zh_CN.json

Co-authored-by: David Ralph <ohlookitsderpy@protonmail.com>

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+    extends: 'react-app',
+    parser: '@babel/eslint-parser'
+};

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-github: ohlookitsderpy
-patreon: ohlookitsderpy
-ko_fi: ohlookitsderpy

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
-about: Report a bug to help improve this project
-title: "[BUG]"
+about: Report a bug to help improve Mue
+title: "[Bug]"
 labels: bug
 assignees: ''
 
@@ -14,7 +14,7 @@ A clear and concise description of what the bug is.
 Steps to reproduce the behaviour:
 1. Go to '...'
 2. Click on '....'
-4. See error in console (Ctrl + Shift + I)
+3. See error in console (Ctrl + Shift + I)
 
 **Expected behaviour**
 A clear and concise description of what you expected to happen.

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,14 +0,0 @@
----
-name: Feature Request
-about: Suggest an idea for this project
-title: "[Feature Request]"
-labels: enhancement
-assignees: ''
-
----
-
-**Description**
-A clear and concise description of what you want in this new feature.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,17 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: fontsource-lexend-deca
+    versions:
+    - ">= 4.a, < 5"
+  - dependency-name: fontsource-roboto
+    versions:
+    - ">= 4.a, < 5"
+  - dependency-name: react-modal
+    versions:
+    - 3.13.1

.gitignore

@@ -6,4 +6,6 @@ build/
 # Files
 package-lock.json
 yarn-error.log
+.eslintcache
+stats.json
 yarn.lock

CODE_OF_CONDUCT.md

@@ -1,76 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at github@muetab.xyz. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq

LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2018-2019 Mue Tab
+Copyright (c) 2018-2021 The Mue Authors
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

README.md

@@ -1,139 +1,96 @@
-![Logo](https://github.com/muetab/branding/raw/master/logo/logo_horizontal.png)
+<img src="https://raw.githubusercontent.com/mue/branding/main/logo/logo_round.png" align="left" width="180px" height="180px"/>
+<img align="left" width="0" height="192px" hspace="10"/>
 
-# Mue
-[![Discord Badge](https://discordapp.com/api/guilds/336039472250748928/widget.png)](https://discord.gg/HJmmmTB)
+> <a href="https://muetab.com/">Mue</a>
 
-Fast, open and free-to-use new tab page for most modern browsers.
+[![License](https://img.shields.io/badge/license-BSD%203-blue?style=flat-square)](/LICENSE) [![Discord](https://img.shields.io/discord/659129207208804381?label=discord&color=7289DA&style=flat-square)](https://discord.gg/zv8C9F8) [![Code Size](https://img.shields.io/github/languages/code-size/mue/mue?color=green&label=size&style=flat-square)]()
+<br>
+[![Microsoft Edge](https://img.shields.io/badge/dynamic/json?style=flat-square&label=microsoft%20edge&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Faepnglgjfokepefimhbnibfjekidhmja)](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja) [![Firefox](https://img.shields.io/amo/v/mue?label=firefox&style=flat-square)](https://addons.mozilla.org/firefox/addon/mue) [![Chrome](https://img.shields.io/chrome-web-store/v/bngmbednanpcfochchhgbkookpiaiaid?label=chrome&style=flat-square)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+
+Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customisable tab page to modern browsers
+
+<br>
+
+## Table of contents
+* [Screenshot](#screenshot)
+* [Features](#features)
+	* [Planned Features](#planned-features)
+* [Installation](#installation)
+	* [Chrome](#chrome)
+	* [Firefox](#firefox)
+	* [Edge Chromium](#edge-chromium)
+	* [Naver](#naver)
+	* [Other](#other)
+* [Contributing](#development)
+	* [Translations](#translations)
+* [Credits](#credits)
+	* [Developers](#developers)
+	* [Translators](#translators)
+  * [Contributors](#contributors)
+  * [Resources](#resources)
+## Screenshots
+![Screenshot](assets/screenshot.webp)
+![Settings Modal](assets/screenshot2.webp)
 
 ## Features
 * Fast and free
 * Supports multiple browsers
-* Actively developed and opensource
-* Automatically updating API (with no tracking!) with new photos, quotes and offline mode
-* ~~Multiple language support~~
-* ~~Settings feature - enable/disable features!~~
-* Search bar, ~~update modal, copy button and more!~~
+* Actively developed and open source
+* Automatically updating API (no tracking) with new photos, quotes and offline mode
+* Widgets such as searchbar, weather, quick links, clock, date, quote, greeting
+* Settings - enable/disable various features and customise parts of Mue
+* Navbar with copy button, favourite background, notes feature etc
+* Marketplace - download custom photo packs made by the community
 
-*Mue has been recently rewritten with React and is missing the features that are crossed out*
+### Planned Features
+Please see our [roadmap](https://github.com/mue/mue/projects)
 
 ## Installation
+*A demo of the tab can be found [here](https://demo.muetab.com)*
 ### Chrome
 [![Chrome Web Store Logo](assets/chrome.png)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+<br>
+[Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 
-Link: [Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
-
-Development: Read the [Development](#development) section.
 ### Firefox
 [![Firefox Add-ons Logo](assets/firefox.png)](https://addons.mozilla.org/firefox/addon/mue)
+<br>
+[Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
 
-Link: [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
+### Edge (Chromium)
+[Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)
 
-Development: Read the [Development](#development) section.
-### Opera/Other
-Link: [GitHub Releases](https://github.com/ohlookitsderpy/Mue/releases)
-
-Development/Other: Read the [Development](#development) section.
-### Development
-##### Requirements
-<ol>
-  <li><a href='https://git-scm.com'>Git</a> (optional)</li>
-  <li><a href='https://nodejs.org'>Node.js</a></li>
-  <li>A suitable browser</li>
-</ol>
-<h5>Starting</h5>
-<ol>
-  <li> <code>git clone https://github.com/muetab/mue</code> (If you don't have Git just go to <b>Clone or
-      download</b> and click <b>Download ZIP</b>)
-  <li> Open a terminal and run these commands: (in the Mue directory)
-  <li> <code>yarn</code> (or <code>npm i</code>)
-  <li> <code>yarn run all</code> (or <code>npm run all</code>)
-  <li> Start developing! (See the sections below for how to set up a developer copy of the extension.)
-</ol>
-<h2>Building</h5>
-<i>This section is a work in progress, and doesn't include the manual edits you are required to do to get it working without errors. 
-Once I find a method to do it automatically, I will update this section accordingly.</i>
-<details>
-  <summary><b>Chrome</b> (Click to expand)</summary>
-  <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
-    <li> Rename <code>manifest-chrome.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
-    <li> Visit <code>chrome://extensions</code> in Chrome
-    <li> Click <b>Load unpacked</b> (Make sure <b>Developer Mode</b> is on)
-    <li> Go to the directory containing the built copy of Mue and click <b>ok</b>
-    <li> Enjoy your new tab!
-</details>
-<details>
-  <summary><b>Opera</b> (Click to expand)</summary>
-  <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
-    <li> Rename <code>manifest-opera.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
-    <li> Visit <code>about://extensions</code> in Opera
-    <li> Click <b>Load unpacked extension...</b> (Make sure <b>Developer Mode</b> is on)
-    <li> Go to the directory containing Mue and click <b>ok</b>
-    <li> Enjoy your new tab!
-</details>
-<details>
-  <summary><b>Firefox</b> (Click to expand)</summary>
-  <i>Note: I'm currently trying to find a better method to do this, but this works for now.</i>
-  <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
-    <li> Rename <code>manifest-firefox.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React) 
-    <li> Move <code>manifest/background-opera.js</code> to <code>build/background-opera.js</code>   
-    <li> Visit <code>about:debugging#addons</code> in Firefox
-    <li> Click <b>Load Temporary Add-on</b>
-    <li> Go to the directory containing Mue and click on the <b>manifest.json</b>
-    <li> Enjoy your new tab!
-  </ol>
-</details>
-<details>
-  <summary><b>Other</b> (Click to expand)</summary>
-  <i>Note: To get the full new tab experience, set your browser to open the <code>index.html</code> on startup and tab open!</i>
-    <ol>
-      <li> Open the <code>index.html</code> in your browser
-      <li> Enjoy your new tab!
-    </ol>
-</details>
-
-## Screenshot
-*Will be updated if needed*
-
-![Screenshot](assets/screenshot.jpg)
-
-## Credits
-### Maintainers
-[ohlookitsderpy](https://github.com/ohlookitsderpy) (lead dev)
-
-[TurboMarshmello](https://github.com/TurboMarshmello) (name idea, code contributions)
+### Naver
+[Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
 
 ### Other
-[Pexels](https://pexels.com) - Stock photos used for offline mode
+Please note that we have dropped support for Opera as of Mue 5.0
 
-[Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support
+[GitHub Releases](https://github.com/mue/mue/releases)
 
-[Google Fonts](https://fonts.google.com/specimen/Lexend+Deca) - Lexend Deca font
+## Development
+This section has moved to the [documentation](https://docs.muetab.com/development#mue-tab).
 
 ### Translations
-[ohlookitsderpy](https://github.com/ohlookitsderpy) - English (Quotes and Messages)
+Please see the [documentation](https://docs.muetab.com/translations).
 
-[Yanderella](https://github.com/gbacretin) - Italian (Quotes and Messages)
+## Credits
+### Developers
+[David Ralph](https://github.com/davidjcralph) - Lead development, photographer <br/>
+[Alex Sparkes](https://github.com/alexsparkes) - Name, lead design, photographer <br/>
+[Isaac Saunders](https://github.com/eartharoid) - QA, development, photographer <br/>
+[Wessel Tip](https://github.com/Wessel) - Development <br/>
+### Translators
+[Wessel Tip](https://github.com/Wessel), [Heimen Stoffels](https://github.com/Vistaus) - Dutch<br/>
+[Alex Sparkes](https://github.com/alexsparkes), [Maxime](https://github.com/exiam) - French<br/>
+[Anders](https://github.com/FuryingFox) - Norwegian<br/>
+[Pronin Egor](https://github.com/MrZillaGold) - Russian<br/>
+[Vicente](https://github.com/Vicente015) - Spanish<br/>
+[Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified)<br/>
+[FreeFun](https://github.com/xXFreeFunXx) - German<br/>
+### Contributors
+Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs.
 
-Pepehound - Spanish (Quotes and Messages)
-
-Candystick - Portuguese (Some Quotes)
-
-[PassTheWessel](https://github.com/PassTheWessel) - Dutch (Messages)
-
-[Yanderella](https://github.com/gbacretin) and [ohlookitsderpy](https://github.com/ohlookitsderpy) - French (Messages)
-
-[untocodes](https://github.com/untocodes) - Finnish and German (Messages)
-
-[dondish](https://github.com/dondish) - Hebrew and Russian (Messages)
-
-[Roee Lupo (MrSheldon)](https://github.com/MrSheldon) - Arabic and Swedish (Messages)
-
-*Feel free to pull request with other translations!*
-
-and all the contributors <3
-
-# License
-Code - [BSD-3-Clause](LICENSE)
+And finally, a big thank you to all the other [contributors](https://github.com/mue/mue/graphs/contributors)!
+### Resources
+[Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: ['@babel/preset-env', ['@babel/preset-react', {
+    'runtime': 'automatic'
+  }]],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
+};

manifest/background-opera.js

@@ -1,14 +0,0 @@
-/* eslint-disable no-undef */
-// Original code sourced from https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14
-
-chrome.tabs.onCreated.addListener((tab) => {
-    if (tab.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tab.id, {
-        url: chrome.extension.getURL('index.html')
-    });
-});
-
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-    if (changeInfo.status === 'complete' && tab.url === 'chrome://startpage/') chrome.tabs.update(tabId, {
-        url: chrome.extension.getURL('index.html')
-    });
-});

manifest/chrome.json

@@ -1,13 +1,20 @@
 {
-    "manifest_version": 2,
-    "offline_enabled": true,
-    "name": "Mue",
-    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7",
-    "browser_action": {
-        "default_icon": "./extension-icon.png"
-    },
-    "chrome_url_overrides": {
-        "newtab": "index.html"
-    }
-}
+  "manifest_version": 2,
+  "offline_enabled": true,
+  "name": "Mue",
+  "description": "Fast, open and free-to-use new tab page for modern browsers.",
+  "version": "5.1.0",
+  "homepage_url": "https://muetab.com",
+  "browser_action": {
+    "default_icon": "icons/128x128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "index.html"
+  },
+  "icons": {
+    "16": "icons/16x16.png",
+    "48": "icons/48x48.png",
+    "128": "icons/128x128.png"
+  },
+  "content_security_policy": "script-src 'self' https://api.bing.com https://www.google.com; object-src 'self'"
+}

manifest/firefox.json

@@ -1,15 +1,22 @@
 {
-    "manifest_version": 2,
-    "name": "Mue",
-    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7",
-    "browser_action": {
-        "default_icon": "./extension-icon.png"
-    },
-    "chrome_url_overrides": {
-        "newtab": "index.html"
-    },
-    "chrome_settings_overrides": {
-        "homepage": "index.html"
-    }
-}
+  "manifest_version": 2,
+  "name": "Mue",
+  "description": "Fast, open and free-to-use new tab page for modern browsers.",
+  "version": "5.1.0",
+  "homepage_url": "https://muetab.com",
+  "browser_action": {
+    "default_icon": "icons/128x128.png"
+  },
+  "chrome_url_overrides": {
+    "newtab": "index.html"
+  },
+  "icons": {
+    "16": "icons/16x16.png",
+    "48": "icons/48x48.png",
+    "128": "icons/128x128.png"
+  },
+  "chrome_settings_overrides": {
+    "homepage": "index.html"
+  },
+  "content_security_policy": "script-src 'self' https://api.bing.com https://www.google.com; object-src 'self'"
+}

manifest/opera.json

@@ -1,17 +0,0 @@
-{
-    "manifest_version": 2,
-    "name": "Mue",
-    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7",
-    "browser_action": {
-        "default_icon": "./extension-icon.png"
-    },
-    "background": {
-        "scripts": [
-            "./background-opera.js"
-        ]
-    },
-    "permissions": [
-        "tabs"
-    ]
-}

package.json

@@ -1,47 +1,70 @@
-{
-  "name": "mue",
-  "private": true,
-  "author": "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.xyz> (https://derpyenterprises.org)",
-  "maintainers": [
-    "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.xyz> (https://derpyenterprises.org)",
-    "Alex \"TurboMarshmello\" Sparkes <a.sparkes@muetab.xyz> (https://github.com/TurboMarshmello)"
-  ],
-  "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-  "repository": {
-    "url": "github:muetab/mue"
-  },
-  "homepage": "https://muetab.xyz",
-  "bugs": "https://github.com/muetab/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
-  "license": "BSD-3-Clause",
-  "version": "0.7.0",
-  "dependencies": {
-    "@material-ui/core": "4.7.0",
-    "@material-ui/icons": "^4.5.1",
-    "@muetab/quotes": "^1.0.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
-  },
-  "devDependencies": {
-    "eslint": "^6.7.2",
-    "node-sass": "^4.13.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version"
-    ]
-  }
-}
+{
+  "name": "mue",
+  "private": true,
+  "author": "The Mue Authors (https://github.com/mue/mue/graphs/contributors)",
+  "description": "Fast, open and free-to-use new tab page for modern browsers.",
+  "repository": {
+    "url": "github:mue/mue"
+  },
+  "homepage": "https://muetab.com",
+  "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
+  "license": "BSD-3-Clause",
+  "version": "5.1.0",
+  "dependencies": {
+    "@fontsource/lexend-deca": "^4.4.5",
+    "@fontsource/montserrat": "^4.4.5",
+    "@material-ui/core": "4.11.4",
+    "@material-ui/icons": "4.11.2",
+    "fetch-jsonp": "^1.1.3",
+    "react": "17.0.2",
+    "react-clock": "3.0.0",
+    "react-color-gradient-picker": "0.1.2",
+    "react-day-picker": "7.4.10",
+    "react-device-detect": "1.17.0",
+    "react-dom": "17.0.2",
+    "react-modal": "3.14.3",
+    "react-sortable-hoc": "2.0.0",
+    "react-toastify": "7.0.4",
+    "weather-icons-react": "1.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.5",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-react-constant-elements": "^7.13.15",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-react-class-to-function": "^1.2.2",
+    "copy-webpack-plugin": "^9.0.0",
+    "css-loader": "^5.2.6",
+    "eslint": "^7.28.0",
+    "eslint-config-react-app": "^6.0.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.6.0",
+    "sass": "^1.35.1",
+    "sass-loader": "^7.3.1",
+    "source-map-loader": "^3.0.0",
+    "webpack": "^5.39.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack --mode=production",
+    "chrome": "cp manifest/chrome.json build/manifest.json",
+    "firefox": "cp manifest/firefox.json build/manifest.json"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version"
+    ]
+  }
+}

public/index.html

@@ -1,17 +1,38 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <link rel='icon' type='image/png' sizes='32x32' href='./icons/32x32.png'>
+    <link rel='icon' type='image/png' sizes='16x16' href='./icons/16x16.png'>
+    <title>New Tab</title>
+  </head>
 
-<head>
-  <meta charset='utf-8' />
-  <meta name='viewport' content='width=device-width, initial-scale=1' />
-  <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
-  <link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
-  <title>New Tab</title>
-</head>
+  <body>
+    <noscript>
+      <style>
+        @font-face {
+          font-family: 'Lexend Deca';
+          src: url('./static/media/lexend-deca-latin-400-normal.35a9aeba.woff2');
+        }
 
-<body>
-  <noscript>You need to enable JavaScript to use Mue.</noscript>
-  <div id='root'></div>
-</body>
+        *, a {
+          font-family: 'Lexend Deca', sans-serif;
+          text-align: center;
+          color: black;
+        }
 
-</html>
+        @media (prefers-color-scheme: dark) {
+          *, a {
+            color: white;
+            background: #2f3640;
+          }
+        }
+      </style>
+      <h1>Error</h1>
+      <h2>You need to enable JavaScript to use Mue</h2>
+      <p>Having trouble? Contact us: <a href='https://muetab.com/contact'>https://muetab.com/contact</a></p>
+    </noscript>
+    <div id='root'></div>
+  </body>
+</html>

src/App.jsx

@@ -1,29 +1,47 @@
-//* Imports
 import React from 'react';
-import Background from './components/Background';
-import Clock from './components/Clock';
-import Greeting from './components/Greeting';
-import Quote from './components/Quote';
-import Search from './components/Search';
-import Credit from './components/Credit';
-//import Navbar from './components/Navbar';
-import './scss/index.scss'; 
 
-//* App
-export default class App extends React.Component {
-  // Render all the components
+import Background from './components/widgets/background/Background';
+import Widgets from './components/widgets/Widgets';
+import Modals from './components/modals/Modals';
+
+import EventBus from './modules/helpers/eventbus';
+import SettingsFunctions from './modules/helpers/settings';
+
+import { ToastContainer } from 'react-toastify';
+
+export default class App extends React.PureComponent {
+  componentDidMount() {
+    if (!localStorage.getItem('firstRun')) {
+      SettingsFunctions.setDefaultSettings();
+      window.location.reload();
+    }
+
+    // 4.0 -> 5.0 (the key below is only on 5.0)
+    // now featuring 5.0 -> 5.1
+    if (!localStorage.getItem('order') || !localStorage.getItem('autocompleteProvider')) {
+      SettingsFunctions.moveSettings();
+      window.location.reload();
+    }    
+
+    SettingsFunctions.loadSettings();
+
+    EventBus.on('refresh', (data) => {
+      if (data === 'other') {
+        SettingsFunctions.loadSettings(true);
+      }
+    });
+  }
+
   render() {
     return (
-      <React.Fragment>
-        <Background/>
-        <Search/>
-          <div id='center'>
-              <Greeting/>
-              <Clock/> 
-              <Quote/>
-              <Credit/>
-          </div>
-      </React.Fragment>
+      <>
+        {(localStorage.getItem('background') === 'true') ? <Background/> : null}
+        <ToastContainer position='bottom-right' autoClose={localStorage.getItem('toastDisplayTime') || 2500} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
+        <div id='center'>
+          <Widgets/>
+          <Modals/>
+        </div>
+      </>
     );
   }
 }

src/components/Background.jsx

@@ -1,83 +0,0 @@
-//* Imports
-import React from 'react';
-
-export default class Background extends React.Component {
-  async setBackground() {    
-    try { // First we try and get an image from the API...
-      let data = await fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-      data = await data.json(); 
-
-      document.getElementById('root').style.backgroundImage = `url(${data.file})`; // Set the background
-      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`; // Set the credit
-      document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
-    } catch (e) { // ..and if that fails we load one locally
-      const photo = Math.floor(Math.random() * (20 - 1 + 1)) + 1; // There are 20 images in the offline-images folder
-      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
-      let photographer; // Photographer credit
-      switch (photo) { // Select photographer based on image file number
-        default: {
-          photographer = 'Unknown';
-          break;
-        }
-        case 1: {
-          photographer = 'Tirachard Kumtanom';
-          break;
-        }
-        case 2: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 3: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 4: {
-          photographer = 'Sohail Na';
-          break;
-        }
-        case 7: {
-          photographer = 'Miriam Espacio';
-          break;
-        }
-        case 9: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 10: {
-          photographer = 'NO NAME';
-          break;
-        }
-        case 11: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 13: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 14: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 15: {
-          photographer = 'Pixabay';
-          break;
-        }
-        case 20: {
-          photographer = 'Fabian Wiktor';
-          break;
-        }
-      }
-      document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
-      document.getElementById('root').style.backgroundImage = `url(../offline-images/${photo}.jpeg)`; // Set the background
-    }
-  }
-
-  componentDidMount() {
-    this.setBackground();
-  }
-
-  render() {
-    return null; // React gets annoyed if I don't put anything here or use "return;"
-  }
-}

src/components/Clock.jsx

@@ -1,39 +0,0 @@
-//* Imports
-import React from 'react';
-
-export default class Clock extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      date: '',
-      ampm: '',
-    };
-  }
-
-  startTime() {
-    const t = new Date(); // Get the current date 
-    let h = t.getHours(); // Get hours
-    // const s = today.getSeconds();
-
-    if (h > 12) h = h - 12; // 12 hour support
-
-    this.setState({ 
-      date: `${('0' + h).slice(-2)}:${('0' + t.getMinutes()).slice(-2)}`, ampm: h >= 12 ? 'AM' : 'PM' 
-    }); // Set time
-
-    this.timeout = setTimeout(() => this.startTime(), 750); // Update the clock every 750 milliseconds
-  }
-
-  componentDidMount() {
-    this.startTime();
-  }
-
-  render() {
-    return <h1 className='clock'>
-      {this.state.date}
-      <span className='ampm'>
-        {this.state.ampm}  
-      </span>
-    </h1>;
-  }
-}

src/components/Credit.jsx

@@ -1,19 +0,0 @@
-/* eslint-disable */
-//* Imports
-import RoomIcon from '@material-ui/icons/Room';
-import React from 'react';
-
-export default class Credit extends React.Component {
-  render() {
-    return (
-      <div className='credits'>
-          {/*<h1 id='location'></h1>*/}
-          <h1 id='photographer'/>
-          <div id='backgroundCredits' className='tooltip'>
-            <RoomIcon className='locationicon'/>
-            <span className='tooltiptext' id='location'/>
-          </div>
-     </div>
-    );
-  }
-}

src/components/Greeting.jsx

@@ -1,44 +0,0 @@
-//* Imports
-import React from 'react';
-
-export default class Greeting extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        greeting: ''
-    };
- }
-
-  getGreeting() {
-    const t = new Date(); // Current date object
-    
-    // Normal
-    const h = t.getHours(); // Current hour
-
-    let g = 'Good evening'; // Set the default greeting string to "Good evening"	
-    if (h < 12) g = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
-    else if (h < 18) g = 'Good afternoon'; // If it's before 6pm, set the greeting string to "Good afternoon"
-
-    // Events
-    const m = t.getMonth(); // Current month
-    const d = t.getDate(); // Current Date
-
-    if (m === 0 && d === 1) g = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
-    else if (m === 11 && d === 25) g = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
-    else if (m === 9 && d === 31) g = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
-
-    this.setState({ 
-      greeting: g 
-    }); // Set the state to the greeting string
-  }
-
-  componentDidMount() {
-    this.getGreeting();
-  }
-  
-  render() {
-    return <h1 className='greeting'>
-      {this.state.greeting}
-    </h1>;
-  }
-}

src/components/Navbar.jsx

@@ -1,19 +0,0 @@
-//* Imports
-import RefreshIcon from '@material-ui/icons/Refresh';
-import LocalPizzaIcon from '@material-ui/icons/LocalPizza';
-import React from 'react';
-
-export default class Navbar extends React.Component {
-  render() {
-    return (
-      <div className='navbar-container'>
-        <div className='navbar1'>
-              <RefreshIcon className='locationicon'/>
-        </div>
-        <div className='navbar2'>
-            <LocalPizzaIcon className='pizzaicon'/>
-        </div>
-      </div>
-    );
-  }
-}

src/components/Quote.jsx

@@ -1,42 +0,0 @@
-//* Imports
-import React from 'react';
-import Quotes from '@muetab/quotes';
-
-export default class Quote extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        quote: '',
-        author: ''
-    };
-  }
-
-  async getQuote() {
-    try { // First we try and get a quote from the API...
-      let data = await fetch('https://api.muetab.xyz/getQuote');
-      data = await data.json();
-      this.setState({ 
-        quote: data.quote, 
-        author: data.author 
-      });
-    } catch (e) { // ..and if that fails we load one locally
-      const quote = Quotes.random(); // Get a random quote from our local package
-      this.setState({ 
-        quote: quote.quote, 
-        author: quote.author 
-      }); // Set the quote
-    }
-  }
-
-  componentDidMount() {
-    this.getQuote();
-  }
-
-  render() {
-    return [
-      <h1 className='quote'>{`"${this.state.quote}"`}</h1>,
-      // <i class="material-icons">perm_identity</i>,
-      <h1 className='quoteauthor'>{`${this.state.author}`}</h1>,
-    ];
-  }
-}

src/components/Search.jsx

@@ -1,16 +0,0 @@
-//* Imports
-import React from 'react';
-
-// TODO: Add option to change search engine
-export default class Search extends React.Component {
-  render() {
-    return (
-      <div id='searchBar' className='searchbar'>
-        <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}> 
-            <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
-            <div className='blursearcbBG'/>
-          </form>
-      </div>
-    );
-  }
-}

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import './autocomplete.scss';
+
+export default class Autocomplete extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filtered: [],
+      showList: false,
+      input: ''
+    };
+    this.enabled = (localStorage.getItem('autocomplete') === 'true');
+  }
+
+  onChange = (e) => {
+    if (this.enabled === false) {
+      return this.setState({
+        input: e.target.value
+      });
+    }
+
+    this.setState({
+      filtered: this.props.suggestions.filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1),
+      showList: true,
+      input: e.target.value
+    });
+
+    this.props.onChange(e.target.value);
+  };
+
+  onClick = (e) => {
+    this.setState({
+      filtered: [],
+      showList: false,
+      input: e.target.innerText
+    });
+
+    this.props.onClick(e);
+  };
+
+  render() {
+    let autocomplete = null;
+
+    if (this.state.showList && this.state.input) {
+      if (this.state.filtered.length && localStorage.getItem('autocomplete') === 'true') {
+        autocomplete = (
+          <ul className='suggestions'>
+            {this.state.filtered.map((suggestion) => {
+              return (
+                <li key={suggestion} onClick={this.onClick}>
+                  {suggestion}
+                </li>
+              );
+            })}
+          </ul>
+        );
+      }
+    }
+
+    return (
+      <>
+        <input
+          type='text'
+          onChange={this.onChange}
+          value={this.state.input}
+          name={this.props.name || 'name'}
+          placeholder={this.props.placeholder || ''}
+          autoComplete='off'
+          id={this.props.id || ''} />
+        {autocomplete}
+      </>
+    );
+  }
+}

src/components/helpers/autocomplete/autocomplete.scss

@@ -0,0 +1,50 @@
+.suggestions {
+  text-align: left;
+  font-size: calc(5px + 1.2vmin);
+  background-color: rgba(255, 255, 255, 0.8);
+  color: black;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 40px;
+  max-height: 143px;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  margin-left: 40px;
+  border-radius: 24px;
+  width: 430px;
+  opacity: 0;
+
+  li {
+    padding: 0.5rem;
+    padding-left: 20px;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.8);
+      cursor: pointer;
+    }
+  }
+}
+
+.searchBar {
+  input[type=text]:focus+.suggestions {
+    opacity: 1;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .suggestions {
+    margin-top: 50px;
+  }
+}
+
+.dark .suggestions {
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+
+  li {
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}

src/components/helpers/tooltip/Tooltip.jsx

@@ -0,0 +1,10 @@
+import './tooltip.scss';
+
+export default function Tooltip(props) {
+  return (
+    <div className='tooltip'>
+      {props.children}
+      <span className='tooltipTitle'>{props.title}</span>
+    </div>
+  );
+}

src/components/helpers/tooltip/tooltip.scss

@@ -0,0 +1,37 @@
+// todo: possibly add tooltip placement option
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  .tooltipTitle {
+    width: 60px;
+    background-color: rgba(255, 255, 255, 0.89);
+    color: #000000;
+    text-align: center;
+    font-size: 0.6rem;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 50%;
+    margin-left: -30px;
+    visibility: hidden;
+    cursor: initial;
+    user-select: none;
+    opacity: 0;
+    transition: opacity 0.8s;
+  }
+
+  &:hover {
+    .tooltipTitle {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
+.dark .tooltipTitle {
+  background-color: rgba(0, 0, 0, 0.79);
+  color: #ffffff;
+}

src/components/modals/ErrorBoundary.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+export default class ErrorBoundary extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false
+    };
+    this.language = window.language.modals.main.error_boundary;
+  }
+
+  static getDerivedStateFromError(error) {
+    console.log(error);
+    return { 
+      error: true 
+    };
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className='emptyitems'>
+          <div className='emptyMessage'>
+            <ErrorOutlineIcon/>
+            <h1>{this.language.title}</h1>
+            <p>{this.language.message}</p>
+            <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/modals/Modals.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import Main from './main/Main';
+import Navbar from '../widgets/navbar/Navbar';
+
+import Modal from 'react-modal';
+
+// These modals are lazy loaded as the user won't use them every time they open a tab
+// We used to lazy load the main modal, but doing so broke the main modal open animation on first click
+const Welcome = React.lazy(() => import('./welcome/Welcome'));
+const Feedback = React.lazy(() => import('./feedback/Feedback'));
+const renderLoader = () => <></>;
+
+export default class Modals extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      mainModal: false,
+      updateModal: false,
+      welcomeModal: false,
+      feedbackModal: false
+    };
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('showWelcome') === 'true' && window.location.search !== '?nointro=true') {
+      this.setState({
+        welcomeModal: true
+      });
+    }
+
+    // hide refresh reminder once the user has refreshed the page
+    localStorage.setItem('showReminder', false);
+  }
+
+  closeWelcome() {
+    localStorage.setItem('showWelcome', false);
+    this.setState({
+      welcomeModal: false
+    });
+  }
+
+  render() {
+    return (
+      <>
+        <Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
+        <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Main modalClose={() => this.setState({ mainModal: false })}/>
+        </Modal>
+        <React.Suspense fallback={renderLoader()}>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
+            <Welcome modalClose={() => this.closeWelcome()}/>
+          </Modal>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
+            <Feedback modalClose={() => this.setState({ feedbackModal: false })}/>
+          </Modal>
+        </React.Suspense>
+      </>
+    );
+  }
+}

src/components/modals/feedback/Feedback.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import './feedback.scss';
+
+export default class FeedbackModal extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      questionone: 5,
+      questionthree: 5,
+      questiontwoerror: '',
+      questionfourerror: '',
+      formsubmit: ''
+    };
+    this.language = window.language.modals.feedback;
+  }
+
+  async submitForm () {
+    let questiontwoerror, questionfourerror;
+
+    if (document.getElementById('questiontwo').value.length <= 0) {
+      questiontwoerror = this.language.not_filled;
+    }
+
+    if (document.getElementById('questionfour').value.length <= 0) {
+      questionfourerror = this.language.not_filled;
+    }
+
+    if (questiontwoerror || questionfourerror) {
+      this.setState({
+        questiontwoerror: questiontwoerror,
+        questionfourerror: questionfourerror
+      });
+    } else {
+      this.setState({
+        questiontwoerror: '',
+        questionfourerror: ''
+      });
+
+      await fetch(window.constants.FEEDBACK_FORM, {
+        'method': 'POST'
+      });
+
+      this.setState({
+        formsubmit: this.language.success
+      });
+
+      setTimeout(() => {
+        this.props.modalClose();
+      }, 3000);
+    }
+  }
+
+  render() {
+    return (
+      <div className='feedback'>
+        <h1>{this.language.title}</h1>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <>
+          <input type='hidden' name='version' value={window.constants.VERSION} />
+          <>
+            <label>{this.language.question_one}</label>
+            <br/><br/>
+            <label className='values'>0</label>
+            <input className='range' type='range' min='0' max='10' name='question1' value={this.state.questionone} onChange={(e) => this.setState({ questionone: e.target.value })}/>
+            <label className='values'>10 ({this.state.questionone})</label>
+          </>
+          <br/><br/>
+          <>
+            <label>{this.language.question_two}</label>
+            <textarea name='question2' id='questiontwo'/>
+            <p className='feedbackerror'>{this.state.questiontwoerror}</p>
+          </>
+          <>
+            <label>{this.language.question_three}</label>
+            <br/><br/>
+            <label className='values'>0</label>
+            <input className='range' type='range' min='0' max='10' name='question3' value={this.state.questionthree} onChange={(e) => this.setState({ questionthree: e.target.value })}/>
+            <label className='values'>10 ({this.state.questionthree})</label>
+          </>
+          <br/><br/>
+          <>
+            <label>{this.language.question_four}</label>
+            <textarea name='question4' id='questionfour'/>
+            <p className='feedbackerror'>{this.state.questionfourerror}</p>
+          </>
+          {this.state.formsubmit}
+          <button onClick={() => this.submitForm()}>{this.language.submit}</button>
+        </>
+      </div>
+    );
+  }
+}

src/components/modals/feedback/feedback.scss

@@ -0,0 +1,63 @@
+@import '../main/scss/index.scss';
+
+#feedbackmodal {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 400px;
+  height: 100px;
+}
+
+.feedback {
+  width: 400px;
+  padding: 5px;
+
+  h1,
+  .closeModal {
+    font-size: 2.5em;
+  }
+
+  span {
+    font-size: 6em;
+  }
+
+  button {
+    width: 50%;
+    border-radius: 48px;
+    outline: none;
+    border: none;
+    padding: 15px 20px;
+    font-size: 1.5em;
+    background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+    color: #fff;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  input[type=text] {
+    width: 100%;
+    font-size: 1em;
+  }
+
+  input[type=range] {
+    margin-left: 20px;
+    margin-right: 20px;
+    vertical-align: middle;
+  }
+
+  label.values {
+    font-weight: 700;
+  }
+
+  textarea {
+    width: 80%;
+    background-color: var(--sidebar);
+  }
+
+  .feedbackerror {
+    color: red;
+  }
+}

src/components/modals/main/Main.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import Tabs from './tabs/backend/Tabs';
+
+import './scss/index.scss';
+
+// Lazy load all the tabs instead of the modal itself
+const Settings = React.lazy(() => import('./tabs/Settings'));
+const Addons = React.lazy(() => import('./tabs/Addons'));
+const Marketplace = React.lazy(() => import('./tabs/Marketplace'));
+
+const renderLoader = () => (
+  <Tabs>
+    <div label={window.language.modals.main.loading}>
+      <div className='emptyitems'>
+        <div className='emptyMessage'>
+          <h1>{window.language.modals.main.loading}</h1>
+        </div>
+      </div>
+    </div>
+    <div label='' style={{ 'display': 'none' }}></div>
+  </Tabs>
+);
+
+export default function MainModal(props) {
+  const language = window.language.modals.main.navbar;
+
+  return (
+    <>
+      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <Tabs navbar={true}>
+        <div label={language.settings}>
+          <React.Suspense fallback={renderLoader()}>
+            <Settings/>
+          </React.Suspense>
+        </div>
+        <div label={language.addons}>
+          <React.Suspense fallback={renderLoader()}>
+            <Addons/>
+          </React.Suspense>
+        </div>
+        <div label={language.marketplace}>
+          <React.Suspense fallback={renderLoader()}>
+            <Marketplace/>
+          </React.Suspense>
+        </div>
+      </Tabs>
+    </>
+  );
+}

src/components/modals/main/marketplace/Item.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import Modal from 'react-modal';
+
+import Lightbox from './Lightbox';
+
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+export default class Item extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      showLightbox: false
+    };
+  }
+
+  render() {
+    const language = window.language.modals.main.marketplace.product;
+
+    if (!this.props.data.display_name) {
+      return null;
+    }
+
+    let warningHTML;
+    if (this.props.data.quote_api) {
+      warningHTML = (
+        <div className='productInformation'>
+          <ul>
+            <li className='header'>{language.quote_warning.title}</li>
+            <li id='updated'>{language.quote_warning.description}</li>
+          </ul>
+        </div>
+      );
+    }
+  
+    // prevent console error
+    let iconsrc = window.constants.DDG_PROXY + this.props.data.icon;
+    if (!this.props.data.icon) {
+      iconsrc = null;
+    }
+  
+    return (
+      <div id='item'>
+        <br/>
+        <ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/>
+        <br/>
+        <h1>{this.props.data.display_name}</h1>
+        <br/>
+        {this.props.button}
+        <br/>
+        {iconsrc ? <img alt='product' draggable='false' src={iconsrc} onClick={() => this.setState({ showLightbox: true })}/> : null}
+        <div className='informationContainer'>
+          <h1 className='overview'>{language.overview}</h1>
+          <p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>
+            <div className='productInformation'>
+              <ul>
+                {/* <li className='header'>{language.last_updated}</li>
+                <li>{this.props.data.updated}</li>
+                <br/>*/}
+                <li className='header'>{language.version}</li>
+                <li>{this.props.data.version}</li>
+                <br/>
+                <li className='header'>{language.author}</li>
+               <li>{this.props.data.author}</li>
+             </ul>
+            </div>
+            <br/>
+            {warningHTML} 
+        </div>
+        <Modal closeTimeoutMS={100} onRequestClose={() => this.setState({ showLightbox: false })} isOpen={this.state.showLightbox} className='Modal lightboxmodal' overlayClassName='Overlay resetoverlay' ariaHideApp={false}>
+          <Lightbox modalClose={() => this.setState({ showLightbox: false })} img={iconsrc}/>
+        </Modal>
+      </div>
+    );
+  }
+}

src/components/modals/main/marketplace/Items.jsx

@@ -0,0 +1,15 @@
+export default function Items(props) {
+  return (
+    <div className='items'>
+      {props.items.map((item) => (
+        <div className='item' onClick={() => props.toggleFunction(item.name)} key={item.name}>
+          <img alt='icon' draggable='false' src={window.constants.DDG_PROXY + item.icon_url} />
+          <div className='details'>
+            <h4>{item.display_name || item.name}</h4>
+            <p>{item.author}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/modals/main/marketplace/Lightbox.jsx

@@ -0,0 +1,8 @@
+export default function Lightbox(props) {
+  return (
+    <>
+      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <img src={props.img} className='lightboximg' draggable={false} alt='Item screenshot'/>
+    </>
+  );
+}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+import Item from '../Item';
+import Items from '../Items';
+import Dropdown from '../../settings/Dropdown';
+
+import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+
+import { toast } from 'react-toastify';
+
+export default class Added extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      installed: JSON.parse(localStorage.getItem('installed')),
+      item: {},
+      button: ''
+    };
+    this.buttons = {
+      uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
+    };
+    this.language = window.language.modals.main.addons;
+  }
+
+  toggle(type, data) {
+    if (type === 'item') {
+      const installed = JSON.parse(localStorage.getItem('installed'));
+      const info = installed.find((i) => i.name === data);
+
+      this.setState({
+        item: {
+          type: info.type,
+          name: data,
+          display_name: info.name,
+          author: info.author,
+          description: MarketplaceFunctions.urlParser(info.description.replace(/\n/g, '<br>')),
+          //updated: info.updated,
+          version: info.version,
+          icon: info.screenshot_url,
+          quote_api: info.quote_api || null
+        },
+        button: this.buttons.uninstall
+      });
+    } else {
+      this.setState({
+        item: {}
+      });
+    }
+  }
+
+  uninstall() {
+    MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
+    
+    toast(window.language.toasts.uninstalled);
+
+    this.setState({
+      button: '',
+      installed: JSON.parse(localStorage.getItem('installed'))
+    });
+  }
+
+  sortAddons(value) {
+    let installed = JSON.parse(localStorage.getItem('installed'));
+    switch (value) {
+      case 'newest':
+        installed.reverse();
+        break;
+      case 'oldest':
+        break;
+      case 'a-z':
+        installed.sort();
+        break;
+      case 'z-a':
+        installed.sort();
+        installed.reverse();
+        break;
+      default:
+        break;
+    }
+
+    this.setState({
+      installed: installed
+    });
+  }
+
+  componentDidMount() {
+    this.sortAddons(localStorage.getItem('sortAddons'));
+  }
+
+  render() {
+    if (this.state.installed.length === 0) {
+      return (
+        <div className='emptyitems'>
+          <div className='emptyMessage'>
+            <LocalMallIcon/>
+            <h1>{this.language.empty.title}</h1>
+            <p className='description'>{this.language.empty.description}</p>
+          </div>
+        </div>
+      );
+    }
+
+    if (this.state.item.display_name) {
+      return <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} />;
+    }
+
+    return (
+      <>
+        <Dropdown label={this.language.sort.title} name='sortAddons' onChange={(value) => this.sortAddons(value)}>
+          <option value='newest'>{this.language.sort.newest}</option>
+          <option value='oldest'>{this.language.sort.oldest}</option>
+          <option value='a-z'>{this.language.sort.a_z}</option>
+          <option value='z-a'>{this.language.sort.z_a}</option>
+        </Dropdown>
+        <br/>
+        <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', input)} />        
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,208 @@
+import React from 'react';
+
+import WifiOffIcon from '@material-ui/icons/WifiOff';
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+
+import Item from '../Item';
+import Items from '../Items';
+import Dropdown from '../../settings/Dropdown';
+
+import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+
+import { toast } from 'react-toastify';
+
+export default class Marketplace extends React.PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      items: [],
+      button: '',
+      featured: {},
+      done: false,
+      item: {}
+    };
+    this.buttons = {
+      uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{window.language.modals.main.marketplace.product.buttons.remove}</button>,
+      install: <button className='addToMue' onClick={() => this.manage('install')}>{window.language.modals.main.marketplace.product.buttons.addtomue}</button>
+    };
+    this.language = window.language.modals.main.marketplace;
+    this.controller = new AbortController();
+  }
+
+  async toggle(type, data) {
+    if (type === 'item') {
+      let info;
+      // get item info
+      try {
+        info = await (await fetch(`${window.constants.MARKETPLACE_URL}/item/${this.props.type}/${data}`, { signal: this.controller.signal })).json();
+      } catch (e) {
+        if (this.controller.signal.aborted === false) {
+          return toast(window.language.toasts.error);
+        }
+      }
+
+      if (this.controller.signal.aborted === true) {
+        return;
+      }
+
+      // check if already installed
+      let button = this.buttons.install;
+
+      const installed = JSON.parse(localStorage.getItem('installed'));
+
+      if (installed.some((item) => item.name === info.data.name)) {
+        button = this.buttons.uninstall;
+      }
+
+      this.setState({
+        item: {
+          type: info.data.type,
+          display_name: info.data.name,
+          author: info.data.author,
+          description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+          //updated: info.updated,
+          version: info.data.version,
+          icon: info.data.screenshot_url,
+          data: info.data
+        },
+        button: button
+      });
+    } else {
+      this.setState({
+        item: {}
+      });
+    }
+  }
+
+  async getItems() {
+    const { data } = await (await fetch(window.constants.MARKETPLACE_URL + '/all', { 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) {
+      return;
+    }
+
+    this.setState({
+      items: data[this.props.type],
+      oldItems: data[this.props.type],
+      featured: featured.data,
+      done: true
+    });
+
+    this.sortMarketplace(localStorage.getItem('sortMarketplace'));
+  }
+
+  manage(type) {
+    if (type === 'install') {
+      MarketplaceFunctions.install(this.state.item.type, this.state.item.data);
+    } else {
+      MarketplaceFunctions.uninstall(this.state.item.type, this.state.item.display_name);
+    }
+
+    toast(window.language.toasts[type + 'ed']);
+    this.setState({
+      button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
+    });
+  }
+
+  sortMarketplace(value) {
+    let items = this.state.oldItems;
+    switch (value) {
+      case 'a-z':
+        items.sort();
+        // fix sort not working sometimes
+        if (this.state.sortType === 'z-a') {
+          items.reverse();
+        }
+        break;
+      case 'z-a':
+        items.sort();
+        items.reverse();
+        break;
+      default:
+        break;
+    }
+
+    this.setState({
+      items: items,
+      sortType: value
+    });
+  }
+
+  componentDidMount() {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+      return;
+    }
+
+    this.getItems();
+  }
+
+  componentWillUnmount() {
+    // stop making requests
+    this.controller.abort();
+  }
+
+  render() {
+    const errorMessage = (msg) => {
+      return (
+        <div className='emptyitems'>
+          <div className='emptyMessage'>
+            {msg}
+          </div>
+        </div>
+      );
+    };
+
+    const featured = () => {
+      return (
+        <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.open(this.state.featured.buttonLink)}>{this.state.featured.buttonText}</button>
+        </div>
+      );
+    }
+
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
+      return errorMessage(<>
+        <WifiOffIcon/>
+        <h1>{this.language.offline.title}</h1>
+        <p className='description'>{this.language.offline.description}</p>
+      </>);
+    }
+
+    if (this.state.done === false) {
+      return errorMessage(<h1>{window.language.modals.main.loading}</h1>);
+    }
+
+    if (this.state.items.length === 0) {
+      return (
+        <>
+          {featured()}
+          {errorMessage(<>
+            <LocalMallIcon/>
+            <h1>{window.language.modals.main.addons.empty.title}</h1>
+            <p className='description'>{this.language.no_items}</p>
+          </>)}
+        </>
+      )
+    }
+
+    if (this.state.item.display_name) {
+      return <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()}/>;
+    }
+
+    return (
+      <>
+        {featured()}
+        <br/>
+        <Dropdown label={window.language.modals.main.addons.sort.title} name='sortMarketplace' onChange={(value) => this.sortMarketplace(value)}>
+          <option value='a-z'>{window.language.modals.main.addons.sort.a_z}</option>
+          <option value='z-a'>{window.language.modals.main.addons.sort.z_a}</option>
+        </Dropdown>
+        <br/>
+        <Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,25 @@
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+
+import FileUpload from '../../settings/FileUpload';
+
+import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
+
+import { toast } from 'react-toastify';
+
+export default function Sideload() {
+  const install = (input) => {
+    MarketplaceFunctions.install(input.type, input);
+    toast(window.language.toasts.installed);
+  };
+
+  return (
+    <div className='emptyitems'>
+      <div className='emptyMessage'>
+        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => install(JSON.parse(e.target.result))} />
+        <LocalMallIcon/>
+        <h1>{window.language.modals.main.addons.sideload}</h1>
+        <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,412 @@
+@import '../../../../scss/variables';
+
+@import 'settings/main';
+@import 'settings/buttons';
+@import 'settings/dropdown';
+@import 'settings/daypicker';
+
+@import 'marketplace/main';
+@import 'marketplace/buttons';
+
+.Modal {
+  color: var(--modal-text);
+  background-color: var(--background);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  border: none;
+  opacity: 1;
+  z-index: -2;
+  transition-timing-function: ease-in;
+  border-radius: map-get($modal, 'border-radius');
+  user-select: none;
+  scrollbar-width: thin;
+  scrollbar-color: #34495e #bdc3c7;
+  position: relative;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.mainModal {
+  padding: 25px;
+}
+
+.resetLink {
+  color: var(--modal-link);
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  span {
+    font-size: 1.2rem;
+    color: var(--modal-link);
+    vertical-align: text-bottom;
+    margin-left: 5px;
+  }
+}
+
+.modalLink {
+  color: var(--modal-link);
+  cursor: pointer;
+  margin-left: 5px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.closeModal {
+  position: absolute;
+  top: 1rem;
+  right: 2rem;
+  font-size: 4em;
+  cursor: pointer;
+
+  &:hover {
+    color: grey;
+  }
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+.Overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.ReactModal__Content {
+  //min-height: calc(100vh - 30vh);
+  //max-height: calc(100vh - 10vh);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+  overflow-y: auto;
+  position: relative;
+
+  // animation
+  opacity: 0;
+  transform: scale(0);
+  transition: all 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
+}
+
+.ReactModal__Content--after-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+  opacity: 0;
+  transform: scale(0);
+}
+
+@media only screen and (max-height: 700px) {
+  .ReactModal__Content {
+    min-height: 500px;
+    max-height: calc(100vh - 30vh);
+  }
+}
+
+ul.sidebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding-left: 0;
+  background: var(--sidebar);
+  border-radius: 12px 0 0 12px;
+  text-align: left;
+  font-size: 24px;
+  min-height: 100vh;
+
+  h1 {
+    text-align: center;
+    font-size: 1.8em;
+  }
+
+  svg {
+    vertical-align: middle;
+    padding: 5px;
+  }
+
+  hr {
+    height: 3px;
+    background: rgba(196, 196, 196, 0.74);
+    width: 75%;
+    outline: none;
+    border: none;
+  }
+}
+
+li {
+  list-style: none;
+  font-size: 24px;
+  padding: 5px 30px 5px 30px;
+  cursor: pointer;
+  margin-top: 2px;
+}
+
+#modal {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  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);
+}
+
+@media only screen and (max-width: 1200px) {
+  li.tab-list-item {
+    span {
+      display: none;
+    }
+  }
+
+  ul.sidebar {
+    h1 {
+      display: none;
+    }
+  }
+}
+
+.tab-list-item {
+  &:hover {
+    background: var(--tab-active);
+  }
+}
+
+.tab-content {
+  position: absolute;
+
+  h3 {
+    text-transform: uppercase;
+  }
+}
+
+@media only screen and (min-width: 2300px) {
+  .tab-content {
+    left: 350px;
+    top: 7%;
+  }
+}
+
+@media only screen and (max-width: 1920px) {
+  .tab-content {
+    left: 120px;
+    top: 50px;
+  }
+}
+
+@media only screen and (min-width: 1920px) {
+  .tab-content {
+    left: 350px;
+    top: 7%;
+  }
+}
+
+@media only screen and (max-width: 1400px), (min-width: 1400px) {
+  .tab-content {
+    left: 350px;
+    top: 75px;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .tab-content {
+    left: 125px;
+    top: 75px;
+  }
+}
+
+.navbar-item {
+  font-size: 22px;
+  font-weight: 500;
+  display: inline-flex;
+
+  &:hover {
+    color: rgb(165, 165, 165);
+    background: none;
+  }
+
+  span,
+  svg {
+    font-size: 1.1em !important;
+  }
+
+  svg {
+    font-size: 1.2em !important;
+  }
+}
+
+@supports (-webkit-hyphens: none) {
+  .navbar-item {
+    display: inline-block !important;
+  }
+}
+
+.modalNavbar {
+  position: absolute;
+  left: 20rem;
+  top: 1rem;
+  justify-content: center;
+
+  svg {
+    margin-right: 0.5rem;
+    padding: 3px;
+    vertical-align: middle;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .modalNavbar {
+    left: 6rem;
+  }
+}
+
+@media only screen and (max-width: 1650px) {
+  li.navbar-item {
+    span {
+      display: none;
+    }
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  ul.sidebar {
+    width: 310px;
+    align-items: center;
+  }
+}
+
+.navbar-item-active {
+  background: map-get($theme-colours, 'gradient');
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+
+  svg {
+    color: orange;
+  }
+
+  &:hover {
+    background: map-get($theme-colours, 'gradient');
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
+}
+
+::-webkit-scrollbar-thumb {
+  background: #636e72;
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
+}
+
+.abouticon {
+  width: 96px;
+  height: auto;
+  border-radius: 50%;
+  padding-right: 5px;
+}
+
+.resetmodal {
+  min-height: 300px !important;
+  max-width: 300px !important;
+  margin: auto;
+
+  h4 {
+    cursor: initial;
+    font-size: 1.1rem;
+  }
+}
+
+.resetfooter {
+  position: absolute;
+  bottom: 20px;
+
+  button.reset {
+    margin-right: 43px;
+  }
+}
+
+.resetoverlay {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.aboutIcon {
+  color: var(--modal-text) !important;
+  padding-right: 10px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.aboutLink {
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.aboutLogo {
+  height: 100px;
+  width: auto;
+  margin-left: -15px;
+}
+
+.MuiFormControl-root {
+  margin-top: 10px !important;
+}
+
+label,
+p,
+span.modalLink {
+  font-size: 1rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.17rem;
+}
+
+h5 {
+  font-size: 0.8rem;
+}

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

@@ -0,0 +1,48 @@
+%storebutton {
+  cursor: pointer;
+  font-size: 18px;
+  display: block;
+  padding: 5px 30px;
+  background: none;
+  border-radius: 24px;
+  transition: ease 0.33s;
+  border: 2px solid black;
+
+  &:hover {
+    background: #2d3436;
+    color: map-get($theme-colours, 'main');
+  }
+}
+
+.dark %storebutton {
+  border: 2px solid map-get($theme-colours, 'main');
+  color: map-get($theme-colours, 'main');
+
+  &:hover {
+    background: map-get($theme-colours, 'main');
+    color: #2d3436;
+  }
+}
+
+.removeFromMue {
+  @extend %storebutton;
+
+  border: 2px solid #ff4757;
+  color: #ff4757;
+  margin-top: 5px;
+
+  &:hover {
+    background: #ff4757;
+    color: map-get($theme-colours, 'main');
+  }
+}
+
+.addToMue {
+  @extend %storebutton;
+  margin-top: 12px;
+}
+
+.sideload {
+  display: inline;
+  margin-top: 0px;
+}

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

@@ -0,0 +1,217 @@
+#item a {
+  color: var(--modal-link);
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.emptyitems {
+  width: 25vw;
+  display: flex;
+  justify-content: center;
+  margin-top: 90px;
+}
+
+.items {
+  display: inline-grid;
+  grid-template-columns: repeat(6, 1fr);
+  margin-top: 15px;
+
+  .item {
+    position: relative;
+    border-radius: 12px;
+    height: 80px;
+    width: 260px;
+    background: var(--sidebar);
+    transition: 0.5s;
+    cursor: pointer;
+    margin-right: 20px;
+    margin-top: 20px;
+    box-shadow: 0 0 6px rgb(0 0 0 / 30%);
+
+    img {
+      height: 80px;
+      width: 80px;
+      border-radius: 12px 0 0 12px;
+      background: white;
+    }
+
+    h4 {
+      font-size: 20px;
+      line-height: 20px;
+      font-weight: 600;
+    }
+
+    img,
+    .details {
+      display: inline;
+    }
+
+    .details {
+      position: absolute;
+      left: 85px;
+      top: -15px;
+
+      img {
+        margin-left: 10px;
+        height: 15px;
+      }
+    }
+
+    p {
+      margin-top: 5px;
+      line-height: 20px;
+    }
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+@media only screen and (max-width: 2100px) {
+  .items {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media only screen and (max-width: 1870px) {
+  .items {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media only screen and (min-width: 1079px), (max-width: 1869px) {
+  .items {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+p.author {
+  margin-top: -5px;
+}
+
+#item {
+  h1 {
+    font-size: 40px;
+    line-height: 20px;
+  }
+}
+
+#item>h1,
+#item>.MuiSvgIcon-root {
+  display: inline;
+}
+
+p.description {
+  margin-top: 0px;
+  max-width: 400px;
+}
+
+.emptyMessage {
+  text-align: center;
+  background: var(--sidebar);
+  padding: 25px;
+  border-radius: 30px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  position: absolute;
+  width: 300px;
+
+  svg {
+    font-size: 50px;
+    margin-bottom: -20px;
+  }
+}
+
+.backArrow {
+  cursor: pointer;
+  width: 2rem !important;
+  height: 2rem !important;
+
+  &:hover {
+    color: grey;
+  }
+}
+
+.informationContainer {
+  margin-top: 20px;
+}
+
+.productInformation {
+  padding: 10px;
+  background: var(--sidebar);
+  width: 350px;
+  border-radius: 12px;
+
+  h4 {
+    cursor: initial !important;
+  }
+
+  li {
+    margin-left: -4px;
+    list-style: none;
+    font-size: 16px;
+    cursor: initial !important;
+
+    &.header {
+      text-transform: uppercase;
+      color: #787878;
+      margin-left: -5px;
+    }
+  }
+}
+
+#item>img, .updateimage, .updatechangelog>p>img {
+  border-radius: 12px;
+  height: 200px;
+  width: auto;
+  cursor: pointer;
+}
+
+.featured {
+  margin-top: 40px;
+  border-radius: 15px;
+  padding: 50px;
+  color: #fff;
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  width: 85%;
+
+  button {
+    float: left;
+    margin-top: -7px;
+    border: 2px solid map-get($theme-colours, 'main');
+    color: map-get($theme-colours, 'main');
+
+    &:hover {
+      background: map-get($theme-colours, 'main');
+      color: #2d3436;
+    }
+  }
+
+  h1 {
+    margin-top: -20px;
+  }
+}
+
+.lightboxmodal {
+  margin: auto;
+  max-width: 60%;
+  background: none !important;
+  box-shadow: none !important;
+
+  img {
+    height: auto;
+    width: 100%;
+  }
+
+  .closeModal {
+    color: #fff;
+    text-shadow: 0 0 20px rgb(0 0 0 / 30%);
+  }
+}
+
+.overview {
+  font-size: 30px !important;
+}

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

@@ -0,0 +1,101 @@
+@import '../../../../../scss/modules/buttons';
+
+.refresh {
+  @extend %settingsButton;
+
+  background-color: map-get($button-colours, 'confirm');
+  border: 2px solid map-get($button-colours, 'confirm');
+
+  &:hover {
+    border: 2px solid map-get($button-colours, 'confirm');
+    color: map-get($button-colours, 'confirm');
+  }
+}
+
+.reset {
+  @extend %settingsButton;
+
+  margin-left: 5px;
+  background-color: map-get($button-colours, 'reset');
+  border: 2px solid map-get($button-colours, 'reset');
+
+  &:hover {
+    border: 2px solid map-get($button-colours, 'reset');
+    color: map-get($button-colours, 'reset');
+  }
+}
+
+.add {
+  @extend %settingsButton;
+
+  background-color: map-get($button-colours, 'other');
+  border: 2px solid map-get($button-colours, 'other');
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+    border: 2px solid map-get($button-colours, 'other');
+  }
+}
+
+.close {
+  @extend %settingsButton;
+
+  padding: 10px 50px 10px 50px;
+  background-color: map-get($button-colours, 'other');
+  border: 2px solid map-get($button-colours, 'other');
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+    border: 2px solid map-get($button-colours, 'other');
+  }
+}
+
+.export,
+.uploadbg,
+.import {
+  @extend %settingsButton;
+
+  background-color: map-get($button-colours, 'other');
+  color: map-get($theme-colours, 'primary');
+  border: 2px solid map-get($button-colours, 'other');
+
+  &:hover {
+    color: map-get($button-colours, 'other');
+    border: 2px solid map-get($button-colours, 'other');
+  }
+}
+
+.export,
+.import {
+  margin-left: 20px;
+}
+
+.MuiIconButton-label > svg.MuiSvgIcon-root {
+  color: var(--modal-text) !important;
+}
+
+.sortableitem {
+  background: var(--sidebar) !important;
+  padding: 10px 80px;
+  padding-left: 10px;
+  border-radius: 15px;
+  margin-bottom: 10px;
+  font-size: 1.325rem;
+  color: var(--modal-text) !important;
+  cursor: move;
+  width: 150px;
+  z-index: 999 !important;
+
+  svg {
+    font-size: 1.3rem;
+  }
+
+  &:hover {
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15);
+    transition: 0.3s;
+  }
+}
+
+.MuiTouchRipple-root {
+  background: transparent;
+}

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

@@ -0,0 +1,26 @@
+.DayPickerInput,
+.input-container {
+  input {
+    width: 200px;
+    color: var(--modal-text) !important;
+    background: var(--sidebar);
+    border: none;
+    padding: 10px 10px;
+    border-radius: 5px;
+  }
+}
+
+.DayPicker-Day--selected {
+  background-color: #ff4757 !important;
+  color: white;
+}
+
+.DayPicker-Months,
+.DayPickerInput-Overlay {
+  background-color: var(--background) !important;
+  color: var(--modal-text) !important;
+}
+
+.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
+  color: black !important;
+}

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

@@ -0,0 +1,38 @@
+select {
+  margin-left: 10px;
+  width: 120px;
+  color: var(--modal-text);
+  background: var(--sidebar);
+  border: none;
+  padding: 10px 10px;
+  border-radius: 5px;
+}
+
+// firefox dropdown
+@supports (-moz-appearance: none) {
+  select {
+    -moz-appearance: none !important;
+    background: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right center no-repeat, var(--sidebar) !important;
+  }
+
+  .dark select {
+    background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right center no-repeat, var(--sidebar) !important;
+  }
+
+  option {
+    font: -moz-pull-down-menu !important;
+  }
+}
+
+
+// safari dropdown
+@supports (-webkit-hyphens: none) {
+  select {
+    -webkit-appearance: none !important;
+    background: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right center no-repeat, var(--sidebar) !important;
+  }
+
+  .dark select {
+    background: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") right center no-repeat, var(--sidebar) !important;
+  }
+}

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

@@ -0,0 +1,222 @@
+input {
+  &[type=text] {
+    width: 200px;
+    color: var(--modal-text);
+    background: var(--sidebar);
+    border: none;
+    padding: 10px 10px;
+    border-radius: 5px;
+  }
+
+  &[type=color] {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+    vertical-align: middle;
+    background: none;
+  
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+  
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  &[type=color]::-moz-color-swatch {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    -moz-appearance: none;
+    vertical-align: middle;
+    background: none;
+  
+    &::-moz-color-swatch-wrapper {
+      padding: 0;
+    }
+  
+    &::-moz-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+}
+
+h4 {
+  cursor: pointer;
+}
+
+ul {
+  padding-left: 0px;
+  margin: 0;
+
+  >label {
+    vertical-align: middle;
+  }
+}
+
+.range {
+  -webkit-appearance: none;
+  width: 200px;
+  height: 12px;
+  border-radius: 12px;
+  outline: none;
+  background: var(--sidebar);
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 12px;
+    background: var(--modal-text);
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 12px;
+    border: 0;
+    background: var(--modal-text);
+    cursor: pointer;
+  }
+}
+
+.newFeature {
+  color: #ff4757;
+  font-size: 12px;
+}
+
+.settingsTextarea {
+  font-family: Consolas !important;
+  padding: 15px;
+  border-radius: 15px;
+  background-color: var(--sidebar) !important;
+  border: none;
+  margin-left: 0;
+  width: 400px;
+  height: 200px;
+  max-width: 60%;
+}
+
+.MuiCheckbox-colorPrimary.Mui-checked,
+.MuiSwitch-colorPrimary.Mui-checked,
+.MuIconButton-colorPrimary.Mui-checked,
+.MuiSwitch-thumb,
+.MuiRadio-colorSecondary.Mui-checked,
+.PrivateSwitchBase-input-4,
+.MuiRadio-root,
+.aboutLink,
+legend {
+  color: var(--modal-text) !important;
+}
+
+.MuiFormControlLabel-labelPlacementStart {
+  margin-left: 0px !important;
+}
+
+.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
+  background: darkgray !important;
+}
+
+.reminder-info {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  padding: 15px;
+  color: var(--modal-text);
+  background: var(--sidebar);
+  max-width: 300px;
+  border-radius: 0.7em;
+
+  h1 {
+    font-size: 1em;
+  }
+}
+
+.radio-title {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1.17rem;
+}
+
+.radio-title-small {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.sortableitem {
+  color: var(--modal-text) !important;
+  cursor: move;
+}
+
+.updatechangelog {
+  max-width: 75%;
+
+  li {
+    cursor: initial;
+    font-size: 1rem;
+    list-style-type:disc;
+    padding: 0;
+    margin-left: 20px;
+  }
+
+  a {
+    color: var(--modal-link);
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.changelogtab {
+  h1 {
+    max-width: 85%;
+  }
+
+  img {
+    max-width: 95%;
+  }
+}
+
+.sliderText {
+  color: var(--modal-text);
+  background: none;
+  border: none;
+  border-radius: 0;
+  font-size: 1rem;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.resetArea {
+  h2 {
+    font-size: 2rem !important;
+  }
+  h2, span, svg {
+    display: inline;
+  }
+  svg {
+    vertical-align: sub;
+    font-size: 1.4rem;
+  }
+}

src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss

@@ -0,0 +1,33 @@
+// The following CSS is to work around some assumptions made by the react-color-gradient-picker
+* {
+  // workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
+  box-sizing: inherit;
+}
+
+div.picker-area > div.preview > div.color-hue-alpha > div.alpha,
+div.color-preview-area > div > div:nth-child(5) {
+  display: none;
+}
+
+.ui-color-picker {
+  margin: 8px -12px;
+  background-color: var(--background) !important;
+}
+
+.input-field .label {
+  color: inherit;
+  color: var(--modal-text) !important;
+}
+
+// other styling for themes support etc
+.gradient-degrees {
+  border: 3px solid var(--modal-text) !important;
+}
+
+.gradient-degree-pointer {
+  background-color: var(--modal-text) !important;
+}
+
+.gradient-type-item.active::after {
+  border: 2px solid var(--modal-text) !important;
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import EventBus from '../../../../modules/helpers/eventbus';
+import SettingsFunctions from '../../../../modules/helpers/settings';
+
+import CheckboxUI from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export default class Checkbox extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: (localStorage.getItem(this.props.name) === 'true')
+    };
+  }
+
+  handleChange = () => {
+    SettingsFunctions.setItem(this.props.name);
+
+    this.setState({
+      checked: (this.state.checked === true) ? false : true
+    });
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.dispatch('refresh', this.props.category);
+  }
+
+  render() {
+    let text = this.props.text;
+
+    if (this.props.newFeature) {
+      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
+    } else if (this.props.betaFeature) {
+      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
+    }
+
+    return (
+      <>
+        <FormControlLabel
+          control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
+          label={text}
+        />
+        <br/>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import EventBus from '../../../../modules/helpers/eventbus';
+
+export default class Dropdown extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || '',
+      title: ''
+    };
+  }
+
+  getLabel() {
+    return this.props.label ? <label>{this.props.label}</label> : null;
+  }
+
+  onChange = (e) => {
+    const { value } = e.target;
+
+    if (value === window.language.modals.main.loading) {
+      return;
+    }
+
+    this.setState({
+      value: value,
+      title: e.target[e.target.selectedIndex].text
+    });
+  
+    localStorage.setItem(this.props.name, value);
+  
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.dispatch('refresh', this.props.category);
+  }
+
+  // todo: find a better way to do this
+  componentDidMount() {
+    const element = document.getElementById(this.props.name);
+    this.setState({
+      title: element[element.selectedIndex].text
+    });
+  }
+
+  render() {
+    return (
+      <>
+        {this.getLabel()}
+        <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{width: `${(8*this.state.title.length) + 50}px`}}>
+          {this.props.children}
+        </select>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { toast } from 'react-toastify';
+
+export default class FileUpload extends React.PureComponent {
+  componentDidMount() {
+    document.getElementById(this.props.id).onchange = (e) => {
+      const reader = new FileReader();
+      const file = e.target.files[0];
+
+      if (this.props.type === 'settings') {
+        reader.readAsText(file, 'UTF-8');
+      } else {
+        // background upload
+        if (file.size > 2000000) {
+          return toast(window.language.modals.main.file_upload_error);
+        }
+
+        reader.readAsDataURL(file);
+      }
+
+      reader.addEventListener('load', (e) => {
+        this.props.loadFunction(e);
+      });
+    };
+  }
+
+  render() {
+    return <input id={this.props.id} type='file' style={{ display: 'none' }} accept={this.props.accept} />;
+  }
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import EventBus from '../../../../modules/helpers/eventbus';
+
+import RadioUI from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+export default class Radio extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: localStorage.getItem(this.props.name)
+    };
+  }
+  
+  handleChange = (e) => {
+    const { value } = e.target;
+
+    if (value === 'loading') {
+      return;
+    }
+
+    localStorage.setItem(this.props.name, value);
+  
+    this.setState({
+      value: value
+    });
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.dispatch('refresh', this.props.category);
+  }
+  
+  render() {
+    return (
+      <FormControl component='fieldset'>
+        <FormLabel className={this.props.smallTitle ? 'radio-title-small' : 'radio-title'} component='legend'>{this.props.title}</FormLabel>
+        <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
+          {this.props.options.map((option) => (
+            <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
+          ))}
+        </RadioGroup>
+      </FormControl>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+import SettingsFunctions from '../../../../modules/helpers/settings';
+
+export default function ResetModal(props) {
+  const language = window.language.modals.main.settings.sections.advanced.reset_modal;
+
+  const reset = () => {
+    SettingsFunctions.setDefaultSettings('reset');
+    window.location.reload();
+  }
+
+  return (
+    <>
+      <h3 style={{ 'textAlign': 'center' }}>{language.title}</h3>
+      <h4>{language.question}</h4>
+      <p>{language.information}</p>
+      <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>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,73 @@
+// todo: find a better method to do width of number input
+import React from 'react';
+
+import EventBus from '../../../../modules/helpers/eventbus';
+
+import { toast } from 'react-toastify';
+
+export default class Slider extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || this.props.default,
+      numberWidth: localStorage.getItem(this.props.name) ? ((localStorage.getItem(this.props.name).length + 1) * ((this.props.toast === true) ? 7.75 : 7)) : 32
+    };
+    this.language = window.language.modals.main.settings;
+    this.widthCalculation = (this.props.toast === true) ? 7.75 : 7;
+  }
+
+  handleChange = (e, text) => {
+    let { value } = e.target;
+
+    if (text) {
+      if (value === '') {
+        return this.setState({
+          value: 0
+        });
+      }
+
+      if (Number(value) > this.props.max) {
+        value = this.props.max;
+      }
+  
+      if (Number(value) < this.props.min) {
+        value = this.props.min;
+      }
+    }
+  
+    localStorage.setItem(this.props.name, value);
+    this.setState({
+      value: value,
+      numberWidth: ((value.length + 1) * this.widthCalculation)
+    });
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.dispatch('refresh', this.props.category);
+  }
+
+  resetItem = () => {
+    this.handleChange({
+      target: {
+        value: this.props.default || ''
+      }
+    });
+    toast(window.language.toasts.reset);
+  }
+
+  render() {
+    const text = <input className='sliderText' type='number' min={this.props.min} max={this.props.max} onChange={(e) => this.handleChange(e, 'text')} value={this.state.value} style={{ width: this.state.numberWidth }}/>;
+
+    return (
+      <>
+        <p>{this.props.title} ({text}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        <input className='range' type='range' min={this.props.min} max={this.props.max} step={this.props.step || 1} value={this.state.value} onChange={this.handleChange} />
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import EventBus from '../../../../modules/helpers/eventbus';
+import SettingsFunctions from '../../../../modules/helpers/settings';
+
+import SwitchUI from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export default class Switch extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: (localStorage.getItem(this.props.name) === 'true')
+    };
+  }
+
+  handleChange = () => {
+    SettingsFunctions.setItem(this.props.name);
+
+    this.setState({
+      checked: (this.state.checked === true) ? false : true
+    });
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.dispatch('refresh', this.props.category);
+  }
+
+  render() {
+    let text = this.props.text;
+
+    if (this.props.newFeature) {
+      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
+    } else if (this.props.betaFeature) {
+      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
+    }
+
+    return (
+      <>
+        <FormControlLabel
+          control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
+          label={text}
+          labelPlacement='start'
+        />
+        <br/>
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import EventBus from '../../../../modules/helpers/eventbus';
+
+import { toast } from 'react-toastify';
+
+export default class Text extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: localStorage.getItem(this.props.name) || ''
+    };
+    this.language = window.language.modals.main.settings;
+  }
+
+  handleChange = (e) => {
+    let { value } = e.target;
+  
+    // Alex wanted font to work with montserrat and Montserrat, so I made it work
+    if (this.props.upperCaseFirst === true) {
+      value = value.charAt(0).toUpperCase() + value.slice(1);
+    }
+
+    localStorage.setItem(this.props.name, value);
+    this.setState({
+      value: value
+    });
+
+    if (this.props.element) {
+      if (!document.querySelector(this.props.element)) {
+        document.querySelector('.reminder-info').style.display = 'block';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.dispatch('refresh', this.props.category);
+  }
+
+  resetItem = () => {
+    this.handleChange({
+      target: {
+        value: this.props.default || ''
+      }
+    });
+    toast(window.language.toasts.reset);
+  }
+
+  render() {
+    return (
+      <>
+        <p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        {(this.props.textarea === true) ? 
+          <textarea className='settingsTextarea' spellCheck={false} value={this.state.value} onChange={this.handleChange}/>
+          : <input type='text' value={this.state.value} onChange={this.handleChange}/>
+        }
+      </>
+    );
+  }
+}