chore: release 5.1.1

* 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

@@ -1,59 +0,0 @@
-{
-    "env": {
-      "es6": true,
-      "amd": true,
-      "node": true,
-      "browser": true,
-      "commonjs": true
-    },
-    "parserOptions": {
-      "ecmaVersion": 9,
-      "sourceType": "module",
-      "ecmaFeatures": {
-        "jsx": true,
-        "forOf": true,
-        "spread": true,
-        "modules": true,
-        "classes": true,
-        "generators": true,
-        "restParams": true,
-        "regexUFlag": true,
-        "regexYFlag": true,
-        "globalReturn": true,
-        "destructuring": true,
-        "impliedStrict": true,
-        "blockBindings": true,
-        "defaultParams": true,
-        "octalLiterals": true,
-        "arrowFunctions": true,
-        "binaryLiterals": true,
-        "templateStrings": true,
-        "superInFunctions": true,
-        "unicodeCodePointEscapes": true,
-        "objectLiteralShorthandMethods": true,
-        "objectLiteralComputedProperties": true,
-        "objectLiteralDuplicateProperties": true,
-        "objectLiteralShorthandProperties": true
-      }
-    },
-    "plugins": [],
-    "rules": {
-      "semi": "error",
-      "indent": [ 0, 2 ],
-      "strict": "off",
-      "eqeqeq": "error",
-      "no-var": "warn",
-      "no-undef": "warn",
-      "comma-dangle": "warn",
-      "no-dupe-args": "warn",
-      "no-dupe-keys": "warn",
-      "require-await": "warn",
-      "no-global-assign": "warn",
-      "no-duplicate-imports": "error",
-      "no-dupe-class-members": "error"
-    },
-    "globals": {
-        "_config": false,
-        "console": false
-    }
-}

.eslintrc.js

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

.github/FUNDING.yml

@@ -1,2 +0,0 @@
-patreon: ohlookitsderpy
-ko_fi: ohlookitsderpy

.github/ISSUE_TEMPLATE/bug-report.md

@@ -0,0 +1,34 @@
+---
+name: Bug Report
+about: Report a bug to help improve Mue
+title: "[Bug]"
+labels: bug
+assignees: ''
+
+---
+
+**Description**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behaviour:
+1. Go to '...'
+2. Click on '....'
+3. See error in console (Ctrl + Shift + I)
+
+**Expected behaviour**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Windows, Ubuntu]
+ - OS Version: [e.g 10, 19.10]
+ - Browser: [e.g. Chrome, Firefox]
+ - Browser Version: [e.g. 70]
+ - Mue Version: [e.g. 0.5]
+ - Resolution: [e.g 1920x1080]
+
+**Additional context**
+Add any other context about the problem 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

@@ -1,8 +1,11 @@
 # Directories
-.vscode/
 node_modules/
+.vscode/
+build/
 
 # Files
-yarn.lock
-yarn-error.log
 package-lock.json
+yarn-error.log
+.eslintcache
+stats.json
+yarn.lock

LICENSE

@@ -1,21 +1,29 @@
-MIT License
+BSD 3-Clause License
 
-Copyright (c) 2018-2019 David Ralph (ohlookitsderpy)
+Copyright (c) 2018-2021 The Mue Authors
+All rights reserved.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -1,126 +1,96 @@
-<img src='assets/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
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/fba7ad7fc6e14fe0bc2a8d53dbf0bb41)](https://www.codacy.com/app/ohlookitsderpy/Mue?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=ohlookitsderpy/Mue&amp;utm_campaign=Badge_Grade)
-[![Discord Badge](https://discordapp.com/api/guilds/336039472250748928/widget.png)](https://discord.gg/HJmmmTB)
+> <a href="https://muetab.com/">Mue</a>
 
-<a href='https://ko-fi.com/ohlookitsderpy' target='_blank'><img height='36' src='assets/kofi.png' alt='Buy me a Coffee at ko-fi.com' /></a>
-<a href='https://patreon.com/ohlookitsderpy' target='_blank'><img height='36' src='assets/patreon.png' alt='Become a patron on patreon.com' /></a>
+[![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)
 
-Fast, open and free-to-use new tab page for most modern browsers
+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
-* Multiple language support
+* 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
+
+### 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
-<a href='https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid'><img src='assets/chrome.png' target='_blank'></a> 
+[![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
-<a href='https://addons.mozilla.org/firefox/addon/mue'><img src='assets/firefox.png' target='_blank'></a> 
+[![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
-Development: Read the [Development](#development) section
+### Naver
+[Whale Store](https://store.whale.naver.com/detail/ecllekeilcmicbfkkiknfdddbogibbnc)
 
-### Development
-<h5>Requirements</h5>
-<ol>
-  <li>Git (optional)</li>
-  <li>Node.js</li>
-  <li>A suitable browser</li>
-</ol>
-<h5>Starting</h5>
-<ol>
-  <li> <code>git clone https://github.com/ohlookitsderpy/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 install</code>)
-  <li> <code>yarn run sass-watch</code> (or <code>npm run sass-watch</code>)
-  <li>Open another terminal and run this command: (in the Mue directory)
-  <li> <code>yarn run js-watch</code> (or <code>npm run js-watch</code>)
-  <li>Start developing! (See the sections below for how to set it up with your browser)
-</ol>
-<details>
-  <summary><b>Chrome</b> (Click to expand)</summary>
-  <ol>
-    <li> Rename <code>manifest-chrome.json</code> to <code>manifest.json</code>
-    <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 Mue and click <b>ok</b>
-    <li> Enjoy your new tab!
-</details>
-<details>
-  <summary><b>Opera</b> (Click to expand)</summary>
-  <ol>
-    <li> Rename <code>manifest-opera.json</code> to <code>manifest.json</code>
-    <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> Rename <code>manifest-firefox.json</code> to <code>manifest.json</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>
+### Other
+Please note that we have dropped support for Opera as of Mue 5.0
 
-## Screenshot
-*Will be updated if needed*
+[GitHub Releases](https://github.com/mue/mue/releases)
 
-<img src='assets/screenshot.jpg'>
-
-## Credits
-
-[Turbomarshmello](https://github.com/TurboMarshmello) - Portions of original code, name idea
-
-[Pexels](https://pexels.com) - Stock photos used
-
-[Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support
-
-[Animate.css](https://daneden.github.io/animate.css) - Portions of code used to add animations
+## 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/Chivi19) - 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/Chivi19) 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)
-
-[MrSheldon](https://github.com/MrSheldon) - Arabic and Swedish (Messages)
-
-*Feel free to pull request with other translations!*
-
-and all the contributors <3
+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/chrome.json

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 2,
+  "offline_enabled": true,
+  "name": "Mue",
+  "description": "Fast, open and free-to-use new tab page for modern browsers.",
+  "version": "5.1.1",
+  "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

@@ -0,0 +1,22 @@
+{
+  "manifest_version": 2,
+  "name": "Mue",
+  "description": "Fast, open and free-to-use new tab page for modern browsers.",
+  "version": "5.1.1",
+  "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'"
+}

package.json

@@ -1,17 +1,70 @@
 {
-    "name": "mue",
-    "description": "Fast, open and free-to-use new tab page for most modern browsers",
-    "author": "ohlookitsderpy",
-    "license": "MIT",
-    "repository": "https://github.com/ohlookitsderpy/Mue",
-    "scripts": {
-        "sass-watch": "sass --watch src/assets/scss:src/assets/css --style compressed",
-        "js-watch": "webpack --progress --watch"
-    },
-    "devDependencies": {
-        "eslint": "6.0.0",
-        "sass": "1.20.3",
-        "webpack": "4.32.2",
-        "webpack-cli": "3.3.4"
-    }
+  "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.1",
+  "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

@@ -0,0 +1,38 @@
+<!DOCTYPE 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>
+
+  <body>
+    <noscript>
+      <style>
+        @font-face {
+          font-family: 'Lexend Deca';
+          src: url('./static/media/lexend-deca-latin-400-normal.35a9aeba.woff2');
+        }
+
+        *, a {
+          font-family: 'Lexend Deca', sans-serif;
+          text-align: center;
+          color: black;
+        }
+
+        @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>

renovate.json

@@ -1,5 +0,0 @@
-{
-  "extends": [
-    "config:base"
-  ]
-}

src/App.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+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('backgroundFilterAmount')) {
+      SettingsFunctions.moveSettings();
+      window.location.reload();
+    }    
+
+    SettingsFunctions.loadSettings();
+
+    EventBus.on('refresh', (data) => {
+      if (data === 'other') {
+        SettingsFunctions.loadSettings(true);
+      }
+    });
+
+    window.analytics.tabLoad();
+  }
+
+  render() {
+    return (
+      <>
+        {(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/assets/css/animate.css

@@ -1,9 +0,0 @@
-/*!
-   * animate.css -http://daneden.me/animate
-   * Version - 3.7.0
-   * Licensed under the MIT license - http://opensource.org/licenses/MIT
-   *
-   * Copyright (c) 2018 Daniel Eden
-   * Modified by ohlookitsderpy
-*/
-@-webkit-keyframes animate{from{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes animate{from{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.animate{-webkit-animation-name:amimated;animation-name:animate;-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

src/assets/css/base.css

@@ -1 +0,0 @@
-.mountain{background-image:url("../img/1.jpeg")}.sunrise{background-image:url("../img/2.jpeg")}.butterfly{background-image:url("../img/3.jpeg")}.leaves{background-image:url("../img/4.jpeg")}.river{background-image:url("../img/5.jpeg")}.sea{background-image:url("../img/6.jpeg")}.space{background-image:url("../img/7.jpeg")}.ice{background-image:url("../img/8.jpeg")}.waterfall{background-image:url("../img/9.jpeg")}.lake{background-image:url("../img/10.jpeg")}.sunset{background-image:url("../img/11.jpeg")}.desert{background-image:url("../img/12.jpeg")}.canyon{background-image:url("../img/13.jpeg")}.rose{background-image:url("../img/14.jpeg")}.forest{background-image:url("../img/15.jpeg")}.cherry{background-image:url("../img/16.jpeg")}.clouds{background-image:url("../img/17.jpeg")}.winter{background-image:url("../img/18.jpeg")}.autumn{background-image:url("../img/19.jpeg")}.flowers{background-image:url("../img/20.jpeg")}.sunrise{background-image:url("../img/21.jpeg")}.rocks{background-image:url("../img/22.jpeg")}.trees{background-image:url("../img/23.jpeg")}.mountains{background-image:url("../img/24.jpeg")}.beach{background-image:url("../img/25.jpeg")}html,body{height:100%}body{display:flex;flex-direction:column;justify-content:space-around;align-items:center;margin:0;background-size:cover;background-position:50%;background-color:#000;font-family:"Roboto";color:#fff;overflow:hidden;-moz-user-select:none;user-select:none}@font-face{font-family:"Roboto";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url("../font/roboto-v18-latin-regular.woff2") format("woff2")}:root{--shadow-color: #111111CC}.greeting,time,.quote{filter:drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color))}.quote{--shadow-shift: 0.125rem;width:37.5%;max-width:37.5rem;font-size:1.5rem;text-align:center}.quote blockquote{margin:0 0 .25rem 0;line-height:1.125}.quote blockquote ::before{content:"“";margin-right:.25ch}.quote blockquote ::after{content:"”";margin-left:.25ch}.quote cite{font-size:83.33%}.greeting{--shadow-shift: 0.2rem;font-size:3.25rem}time{--shadow-shift: 0.4rem;font-size:12rem}/*# sourceMappingURL=base.css.map */

src/assets/css/base.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_bg.scss","../scss/modules/_misc.scss","../scss/modules/_quote.scss","../scss/modules/_time-greeting.scss"],"names":[],"mappings":"CAkBA,gDACA,+CACA,iDACA,8CACA,6CACA,2CACA,6CACA,2CACA,iDACA,6CACA,+CACA,+CACA,+CACA,6CACA,+CACA,+CACA,+CACA,+CACA,+CACA,gDACA,gDACA,8CACA,8CACA,kDACA,8CCzCA,sBACA,KAEC,aACA,sBACA,6BACA,mBAEA,SAEA,sBACA,wBACA,sBAEA,qBACA,WAEA,gBAEG,sBACH,iBAID,WACC,qBACA,kBACA,gBACA,0GAKD,MACC,0BAGD,sBAGC,kFCvBD,OACI,yBAEA,YACA,kBAEA,iBACA,kBAEA,kBACI,oBACA,kBAEA,2BACI,YACA,mBAGJ,0BACI,YACA,kBAIR,YACI,iBCvBR,UACC,uBACA,kBAKD,KACC,uBACA","file":"base.css"}

src/assets/js/bg-opera.js

@@ -1,9 +0,0 @@
-// 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') });
-});

src/assets/js/index.js

@@ -1,36 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-const func = require('./modules/func.js');
-
-const init = () => {
-	// init() gets executed only when the page is fully loaded
-	func.setDaytimeMsg();
-	func.setRandBg();
-	func.setRandQuote();
-	func.setTime();
-	// set interval to update time every second
-	setInterval(func.setTime, 1000);
-};
-
-// initialize on page load through a listener
-document.addEventListener('DOMContentLoaded', init);
-
-// Disable right click
-const rightClick = () => { return false; };
-document.oncontextmenu=rightClick;

src/assets/js/modules/bg.js

@@ -1,45 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-module.exports = [
-    'mountain',
-    'sunrise',
-    'butterfly',
-    'leaves',
-    'river',
-    'sea',
-    'space',
-    'ice',
-    'waterfall',
-    'lake',
-    'sunset',
-    'desert',
-    'canyon',
-    'rose',
-    'forest',
-    'cherry',
-    'clouds',
-    'autumn',
-    'winter',
-    'flowers',
-    'sunrise',
-    'rocks',
-    'trees',
-    'mountains',
-    'beach'
-];

src/assets/js/modules/code.js

@@ -1,31 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-module.exports = {
-    itcodes: ['it', 'it-IT', 'it-CH'],
-    nlcodes: ['nl', 'nl-BE'],
-    frcodes: ['fr', 'fr-BE', 'fr-CA', 'fr-FR', 'fr-LU', 'fr-MC', 'fr-CH'],
-    ptcodes: ['pt', 'pt-BR'],
-    spcodes: ['es', 'es-AR', 'es-BO', 'es-CL', 'es-CO', 'es-CR', 'es-DO', 'es-EC', 'es-ES', 'es-GT', 'es-HN', 'es-MX', 'es-NI', 'es-PA', 'es-PE', 'es-PR', 'es-PY', 'es-SV', 'es-UY', 'es-VE'],
-    ficodes: ['fi'],
-    decodes: ['de', 'de-AT', 'de-DE', 'de-LI', 'de-LU', 'de-CH'],
-    hecodes: ['he'],
-    rucodes: ['ru', 'ru-MO'],
-    arcodes: ['ar', 'ar-DZ', 'ar-BH', 'ar-EG', 'ar-IQ', 'ar-JO', 'ar-KW', 'ar-LB', 'ar-LY', 'ar-QA', 'ar-SA', 'ar-SY', 'ar-TN', 'ar-AE', 'ar-YE'],
-    svcodes: ['sv', 'sv-FI', 'sv-SV']
-};

src/assets/js/modules/func.js

@@ -1,67 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-const bg     = require('./bg.js');
-const msg    = require('./msg.js');
-const util   = require('./util.js');
-const codes  = require('./code.js');
-const quotes = require('./quote.js');
-
-const nal = navigator.language;
-
-module.exports = class Func {
-    static setDaytimeMsg() {
-        if (util.contains.call(codes.itcodes, nal)) msg.itMsgSet(); // Italian
-        if (util.contains.call(codes.nlcodes, nal)) msg.nlMsgSet(); // Dutch
-        if (util.contains.call(codes.frcodes, nal)) msg.frMsgSet(); // French
-        //else if (util.contains.call(codes.ptcodes, nal)) msg.ptMsgSet(); // Portuguese
-        if (util.contains.call(codes.spcodes, nal)) msg.spMsgSet(); // Spanish
-        if (util.contains.call(codes.ficodes, nal)) msg.fiMsgSet(); // Finnish
-        if (util.contains.call(codes.decodes, nal)) msg.spMsgSet(); // German
-        if (util.contains.call(codes.hecodes, nal)) msg.heMsgSet(); // Hebrew
-        if (util.contains.call(codes.rucodes, nal)) msg.ruMsgSet(); // Russian
-        if (util.contains.call(codes.arcodes, nal)) msg.arMsgSet(); // Arabic
-        if (util.contains.call(codes.svcodes, nal)) msg.svMsgSet(); // Swedish
-        else msg.engMsgSet(); // English
-    }
-
-    static setRandBg() {
-        document.body.classList.add(util.pickFromArray(bg));
-    }
-
-    static setRandQuote() {
-        const id = util.getRandIndex(quotes.authors);
-        if (util.contains.call(codes.itcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.it[id]}"`; // Italian
-        if (util.contains.call(codes.ptcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.pt[id]}"` || `"${quotes.eng[id]}"`; // Portuguese
-        if (util.contains.call(codes.spcodes, nal)) document.querySelector('blockquote').innerHTML = `"${quotes.sp[id]}"`; // Spanish
-        else document.querySelector('blockquote').innerHTML = `"${quotes.eng[id]}"`; // English
-        document.querySelector('cite').innerHTML = quotes.authors[id];
-    }
-
-    static setTime() {
-        const date = new Date(),
-            time = [
-                util.formatTimeUnit(date.getHours()),
-                util.formatTimeUnit(date.getMinutes()),
-                util.formatTimeUnit(date.getSeconds())
-            ];
-        // Joins all of the array elements into a string using the ':' separator
-        // Example: [16, 32, 03] -> "16:32:03"
-        document.querySelector('time').innerHTML = time.join(':');
-    }
-};

src/assets/js/modules/msg.js

@@ -1,107 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-const hour = new Date().getHours(); // Get the current hour
-
-module.exports = class Msg {
-    // English
-    static engMsgSet() {
-        let time = 'Good evening'; // Set the default time string to "Good evening"	
-        if (hour < 12) time = 'Good morning'; //If it's before 12am, set the time string to "Good morning"
-        else if (hour < 18) time = 'Good afternoon'; //If it's before 6pm, set the time string to "Good afternoon"
-        document.querySelector('.greeting').innerHTML = time; // Write the string contents to the HTML
-    }
-
-    // Italian
-    static itMsgSet() {
-        let time = 'Buongiorno'; // Set the default time string
-        if (hour > 18) time = 'Buonasera'; // In Italian there is just Buongiorno or Buonasera, if it's before 6pm then set the time string to Buonasera
-        document.querySelector('.greeting').innerHTML = time; // Write the string contents to the HTML
-    }
-
-    // Dutch
-    static nlMsgSet() { // Everything below is the same as English, check the comments there for information
-        let time = 'Goedemiddag'; 
-        if (hour < 12) time = 'Goedemorgen'; 
-        else if (hour > 18) time = 'Goedenavond'; 
-        document.querySelector('.greeting').innerHTML = time; 
-    }
-
-    // French
-    static frMsgSet() {
-        let time = 'Bonsoir'; 
-        if (hour < 12) time = 'Bonjour'; 
-        else if (hour > 18) time = 'Bonne après-midi';
-        document.querySelector('.greeting').innerHTML = time; 
-    }
-
-    // Spanish
-    static spMsgSet() {
-        let time = 'Buenas Tardes'; // Set the default time string to "Good evening"
-        if (hour < 12) time = 'Buenos Días'; // If it's before 12am, set the time string to "Good morning"
-        else if (hour > 18) time = 'Buenas Noches'; // If it's before 6pm, set the time string to "Good afternoon"
-        document.querySelector('.greeting').innerHTML = time; // Write the string contents to the HTML
-    }
-
-    // Finnish
-    static fiMsgSet() {
-        let time = 'Hyvää iltaa'; // Set the default time string to "Good evening"
-        if (hour < 12) time = 'Hyvää huomenta'; // If it's before 12am, set the time string to "Good morning"
-        else if (hour > 18) time = 'Hyvää iltapäivää'; // If it's before 6pm, set the time string to "Good afternoon"
-        document.querySelector('.greeting').innerHTML = time; // Write the string contents to the HTML
-    }
-
-    // German
-    static deMsgSet() {
-        let time = 'Guten Abend'; 
-        if (hour < 12) time = 'Guten Morgen'; 
-        else if (hour > 18) time = 'Guten Nachmittag';
-        document.querySelector('.greeting').innerHTML = time;
-    }
-
-    // Hebrew
-    static heMsgSet() {
-        let time = 'ערב טוב'; 
-        if (hour < 12) time = 'בוקר טוב';
-        else if (hour > 18) time = 'אחר הצהריים טובים';
-        document.querySelector('.greeting').innerHTML = time; 
-    }
-
-    // Russian
-    static ruMsgSet() {
-        let time = 'Добрый Вечер'; 
-        if (hour < 12) time = 'добрый утро'; 
-        else if (hour > 18) time = 'добрый день'; 
-        document.querySelector('.greeting').innerHTML = time; 
-    }
-
-    // Arabic
-    static arMsgSet() {
-        let time = 'مساء الخير';
-        if (hour < 12) time = 'صباح الخير'; 
-        else if (hour > 18) time = 'مساء الخير'; 
-        document.querySelector('.greeting').innerHTML = time; 
-    }
-
-    // Swedish
-    static svMsgSet() {
-        let time = 'God kväll'; 
-        if (hour < 12) time = 'God morgon';
-        document.querySelector('.greeting').innerHTML = time;
-    }
-};

src/assets/js/modules/quote.js

@@ -1,115 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-module.exports = {
-    eng: [
-        'Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait.',
-        'All our dreams can come true, if we have the courage to pursue them.',
-        'It does not matter how slowly you go as long as you do not stop.',
-        'Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine.',
-        'If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles',
-        'Everything you’ve ever wanted is on the other side of fear.',
-        'Success is not final, failure is not fatal: it is the courage to continue that counts.',
-        'There is only one thing that makes a dream impossible to achieve: the fear of failure.',
-        'Your true success in life begins only when you make the commitment to become excellent at what you do.',
-        'Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going.',
-        'Too many of us are not living our dreams because we are living our fears.',
-        'Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed.',
-        'If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily.',
-        'Whatever the mind can conceive and believe, it can achieve.',
-        'Don’t wish it were easier. Wish you were better.',
-        'A champion is defined not by their wins but by how they can recover when they fall.',
-        'Motivation comes from working on things we care about.',
-        'With the right kind of coaching and determination you can accomplish anything.',
-        'Some people look for a beautiful place. Others make a place beautiful.',
-        'Life is like riding a bicycle. To keep your balance, you must keep moving.'
-
-    ],
-    ita: [
-        'Il tempo passa. Quindi qualunque cosa che farai, falla. Falla ora. Non aspettare',
-        'Tutti i nostri sogni possono diventare reali, se abbiamo il coraggio di seguirli.',
-        'Non importa quanto lentamente vai fino a quando non ti fermi',
-        'Credi in te stesso. Sei più coraggioso di quanto pensi, più talentuoso di quanto credi, e capace più di quanto puoi immaginare.',
-        'Se ci credi funzionerà, vedrai delle opportunità. Se non ci credi, vedrai solamente ostacoli',
-        'Tutti i tuoi desideri sono opposti alla paura',
-        'Il successo non è la fine, il fallimento non è fatale: è il coraggio per continuare quello che conta.',
-        "C'è solo una cosa che fa i sogni impossibili: la paura di fallire",
-        'Il vero successo nella tua vita inizia solo quando fai il sacrificio per diventare eccellente a quello che ami.',
-        "Credi in te stesso, sfida i tuoi problemi, scava nel profondo del tuo io per sconfiggere le tue paure. Mai arrendersi per qualcun'altro. Tu devi continuare.",
-        "Troppe persone non vivono i loro sogni per vivere nelle loro paure",
-        "Tempi difficili non fanno eroi. È durante i tempi duri che \"l'eroe\" in noi viene rivelato.",
-        "Se puoi sintonizzare sul tuo senso e allinearti a quest'ultimo, impostando i tuoi obiettivi in modo che la tua visione sia un'espressione di quel senso, La tua vita scorre molto più facilmente",
-        "Qualunque cosa la mente può immaginare e crederese, si può realizzare",
-        "Non desiderare che fosse stato più facile. Desidera che tu fossi stato migliore.",
-        "Un campione si definisce non dalle sue vittorie ma da come recupera quando cade",
-        "La motivazione viene dal lavorare so cose che amiamo",
-        "Con il giusto tipo di allenamento e determinazione puoi fare tutto",
-        "Alcune persone cercano un posto indimenticabile. Altre lo transformano in un posto mozzafiato.",
-        "La vita è come andare in bicicletta. Per tenerti in equilibrio, devi continuare a muoverti"
-    ],
-    spa: [
-        'El tiempo continúa. Así que lo que sea que vayas a hacer, hazlo. Hazlo ahora. No esperes',
-        'Todos nuestros sueños pueden hacerse realidad, si tenemos el coraje de perseguirlos.',
-        'No importa qué tan lento vayas, siempre y cuando no te detengas.',
-        'Cree en ti mismo. Eres más valiente de lo que crees, más talentoso de lo que sabes y capaz de más de lo que imaginas.',
-        'Si crees que funcionará, verás oportunidades. Si crees que no, verás obstáculos ',
-        'Todo lo que siempre has querido está al otro lado del miedo',
-        'El éxito no es definitivo, el fracaso no es fatal: el coraje para continuar es lo que cuenta',
-        'Solo hay una cosa que hace que un sueño sea imposible de lograr: el miedo al fracaso',
-        'Tu verdadero éxito en la vida comienza solo cuando te comprometes a ser excelente en lo que haces',
-        'Cree en ti mismo, asume tus desafíos, excava profundo dentro de ti mismo para vencer tus miedos. Nunca dejes que nadie te derribe. Tienes que seguir adelante.',
-        'Muchos de nosotros no estamos viviendo nuestros sueños porque estamos viviendo nuestros miedos',
-        'Los tiempos difíciles no crean héroes. Es durante los momentos difíciles en que se revela el héroe dentro de nosotros.',
-        'Si  puedes sincornizarte con tu propósito, y realmente alinearte con él, estableciendo metas para que tu visión sea una expresión de ese propósito, entonces la vida fluye mucho más fácilmente',
-        'Lo que la mente pueda concebir y creer, lo puede lograr',
-        'No desees que sea fácil. Desea ser mejor.',
-        'Un campeón se define no por sus victorias, sino por cómo pueden recuperarse cuando caen',
-        'La motivación viene de trabajar en cosas que nos importan',
-        'Con el entrenamiento y la determinación adecuados, puedes lograr cualquier cosa',
-        'Algunas personas buscan un lugar hermoso. Otras, hacen un lugar hermoso.'
-    ],
-    pt: [
-        'O tempo continua. Então o que quer que você vai fazer,faça. Faça agora. Não espere.',
-        'Todos os sonhos podem virar verdade,se tivermos a coragem de persegui-los.',
-        'Não importa o quão devagar você for,desde que você não pare.',
-        'Acredite em si mesmo. Você é mais corajoso que pensa,mais talentoso que sabe,e capaz de mais que imagina.',
-        'Se você acredita que vai dar certo,você verá oportunidades. Se você acredita que não vai,você vera obstáculos.'
-    ],
-    authors: [
-        'Robert De Niro',
-        'Walt Disney',
-        'Confucius',
-        'Roy T. Bennett',
-        'Wayne Dyer',
-        'George Addair',
-        'Winston Churchill',
-        'Paulo Coelho',
-        'Brian Tracy',
-        'Chantal Sutherland',
-        'Les Brown',
-        'Bob Riley',
-        'Jack Canfield',
-        'Napoleon Hill',
-        'Jim Rohn',
-        'Serena Williams',
-        'Sheryl Sandberg',
-        'Reese Witherspoon',
-        'Hazrat Inayat Khan',
-        'Albert Einstein'
-    ]
-};

src/assets/js/modules/util.js

@@ -1,55 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-module.exports = class Util {
-    // Format time
-    static formatTimeUnit(unit) {
-        return unit < 10 ? '0' + unit : unit;
-    }
-
-    // Get random item 
-    static getRandIndex(array) {
-        return Math.floor(Math.random() * (array.length - 1));
-    }
-
-    // Pick random from array
-    static pickFromArray(array) {
-        return array[Math.floor(Math.random() * (array.length - 1))];
-    }
-
-    static contains(needle) {
-        const findNaN = needle !== needle;
-        let indexOf;
-        if (!findNaN && typeof Array.prototype.indexOf === 'function') indexOf = Array.prototype.indexOf;
-        else {
-            indexOf = (needle) => {
-                let i = -1,
-                    index = -1;
-                for (i = 0; i < this.length; i++) {
-                    const item = this[i];
-                    if ((findNaN && item !== item) || item === needle) {
-                        index = i;
-                        break;
-                    }
-                }
-                return index;
-            };
-        }
-        return indexOf.call(this, needle) > -1;
-    }
-};

src/assets/scss/base.scss

@@ -1,22 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-@import 'modules/bg';
-@import 'modules/misc';
-@import 'modules/quote';
-@import 'modules/time-greeting'; 

src/assets/scss/modules/_bg.scss

@@ -1,43 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-.mountain {  background-image: url('../img/1.jpeg'); }
-.sunrise {   background-image: url('../img/2.jpeg'); }
-.butterfly { background-image: url('../img/3.jpeg'); }
-.leaves {    background-image: url('../img/4.jpeg'); }
-.river {     background-image: url('../img/5.jpeg'); }
-.sea {       background-image: url('../img/6.jpeg'); }
-.space {     background-image: url('../img/7.jpeg'); }
-.ice {       background-image: url('../img/8.jpeg'); }
-.waterfall { background-image: url('../img/9.jpeg'); }
-.lake {      background-image: url('../img/10.jpeg'); }
-.sunset {    background-image: url('../img/11.jpeg'); }
-.desert {    background-image: url('../img/12.jpeg'); }
-.canyon {    background-image: url('../img/13.jpeg'); }
-.rose {      background-image: url('../img/14.jpeg'); }
-.forest {    background-image: url('../img/15.jpeg'); }
-.cherry {    background-image: url('../img/16.jpeg'); }
-.clouds {    background-image: url('../img/17.jpeg'); }
-.winter {    background-image: url('../img/18.jpeg'); }
-.autumn {    background-image: url('../img/19.jpeg'); }
-.flowers {   background-image: url('../img/20.jpeg'); }
-.sunrise {   background-image: url('../img/21.jpeg'); }
-.rocks {     background-image: url('../img/22.jpeg'); }
-.trees {     background-image: url('../img/23.jpeg'); }
-.mountains { background-image: url('../img/24.jpeg'); }
-.beach {     background-image: url('../img/25.jpeg'); }

src/assets/scss/modules/_misc.scss

@@ -1,43 +0,0 @@
-/* Body */
-html, body { height: 100%; }
-body {
-
-	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	align-items: center;
-
-	margin: 0;
-
-	background-size: cover;
-	background-position: 50%;
-	background-color: black; /* Prevent white flash on page load */
-
-	font-family: 'Roboto';
-	color: white;
-
-	overflow: hidden;
-	
-    -moz-user-select: none; /* Firefox */
-	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-}
-
-/* Font */
-@font-face {
-	font-family: 'Roboto';
-	font-style: normal;
-	font-weight: 400;
-	src: local('Roboto'), local('Roboto-Regular'),
-		 url('../font/roboto-v18-latin-regular.woff2') format('woff2'); 
-}
-
-/* Shadow */
-:root {
-	--shadow-color: #111111CC;
-}
-
-.greeting,
-time,
-.quote {
-	filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color));
-}

src/assets/scss/modules/_quote.scss

@@ -1,46 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-.quote {
-    --shadow-shift: 0.125rem;
-
-    width: 37.5%;
-    max-width: 37.5rem; /* 600px on desktop */
-
-    font-size: 1.5rem;
-    text-align: center;
-
-    blockquote {
-        margin: 0 0 0.25rem 0;
-        line-height: 1.125;
-        
-        ::before {
-            content: '“';
-            margin-right: 0.25ch;
-        }
-
-        ::after {
-            content: '”';
-            margin-left: 0.25ch;
-        }
-    }
-
-    cite {
-        font-size: 83.33%;
-    }
-}

src/assets/scss/modules/_time-greeting.scss

@@ -1,31 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
-*/
-
-/* Greeting */
-
-.greeting {
-	--shadow-shift: 0.2rem;
-	font-size: 3.25rem;
-}
-
-/* Time */
-
-time {
-	--shadow-shift: 0.4rem;
-	font-size: 12rem;
-}

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,38 @@
+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);
+    window.analytics.postEvent('modal', 'Error occurred');
+    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,72 @@
+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
+      });
+      window.analytics.postEvent('modal', 'Opened welcome');
+    }
+
+    // hide refresh reminder once the user has refreshed the page
+    localStorage.setItem('showReminder', false);
+  }
+
+  closeWelcome() {
+    localStorage.setItem('showWelcome', false);
+    this.setState({
+      welcomeModal: false
+    });
+  }
+
+  toggleModal(type, action) {
+    this.setState({
+      [type]: action
+    });
+
+    if (action !== false) {
+      window.analytics.postEvent('modal', `Opened ${type.replace('Modal', '')}`);
+    }
+  }
+
+  render() {
+    return (
+      <>
+        <Navbar openModal={(modal) => this.toggleModal(modal, true)}/>
+        <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Main modalClose={() => this.toggleModal('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.toggleModal('feedbackModal', false)} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
+            <Feedback modalClose={() => this.toggleModal('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,10 @@
+export default function Lightbox(props) {
+  window.analytics.postEvent('modal', 'Opened lightbox');
+
+  return (
+    <>
+      <span className='closeModal' onClick={props.modalClose}>&times;</span>
+      <img src={props.img} className='lightboximg' draggable={false} alt='Item screenshot'/>
+    </>
+  );
+}