Merge pull request #107 from AugustArchive/boots-with-the-fur

Optimisation and fix

.env

@@ -0,0 +1,2 @@
+GENERATE_SOURCEMAP=false
+INLINE_RUNTIME_CHUNK=false

.github/FUNDING.yml

@@ -1,2 +1,3 @@
+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,8 +14,7 @@ A clear and concise description of what the bug is.
 Steps to reproduce the behaviour:
 1. Go to '...'
 2. Click on '....'
-3. Scroll down to '....'
-4. See error
+3. See error in console (Ctrl + Shift + I)
 
 **Expected behaviour**
 A clear and concise description of what you expected to happen.
@@ -24,10 +23,12 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. Windows]
- - Browser [e.g. Chrome, Firefox]
- - Version [e.g. 70]
- - Resolution [e.g 1920x1080]
+ - 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/ISSUE_TEMPLATE/feature-request.md

@@ -1,6 +1,6 @@
 ---
 name: Feature Request
-about: Suggest an idea for this project
+about: Suggest an idea for Mue
 title: "[Feature Request]"
 labels: enhancement
 assignees: ''

.gitignore

@@ -0,0 +1,9 @@
+# Directories
+node_modules/
+.vscode/
+build/
+
+# Files
+package-lock.json
+yarn-error.log
+yarn.lock

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# 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,21 +1,29 @@
-MIT License
+BSD 3-Clause License
 
-Copyright (c) 2018-2019 David Ralph (ohlookitsderpy)
+Copyright (c) 2018-2020 Mue Tab
+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,73 +1,99 @@
-<img src='assets/logo/logo_horizontal.png'>
+<img src="https://raw.githubusercontent.com/mue/branding/master/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.xyz/">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 customizable tab page to most modern browsers
 
-*This is the code for the extension. If you are looking for the website code, please go [here](https://github.com/TurboMarshmello/muetab.xyz).*
+<br>
+
+## Table of contents
+* [Screenshot](#screenshot)
+* [Features](#features)
+* [Planned Features](#planned-features)
+* [Installation](#installation)
+	* [Chrome](#chrome)
+	* [Firefox](#firefox)
+	* [Chromium](#edge-chromium)
+	* [Opera/Other](#operaother)
+* [Contributing](#development)
+	* [Requirements](#requirements)
+	* [Starting](#starting)
+	* [Building](#building)
+* [Credits](#credits)
+	* [Maintainers](#maintainers)
+	* [Contributors](#contributors)
+  * [Translators](#translators)
+	* [Other](#other)
+
+## Screenshot
+![Screenshot](assets/screenshot.jpg)
 
 ## Features
 * Fast and free
 * Supports multiple browsers
-* Actively developed and opensource
-* Automatically updating API (with no tracking!) with new photos 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
+* Search bar
+* Settings - enable/disable various features and customise parts of Mue
+* Update modal, copy button and more!
+* Marketplace - download custom photo packs, quote packs, preset settings and themes 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/2)
 
 ## Installation
+*A demo of the tab can be found [here](https://demo.muetab.xyz)*
 ### 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
-Link: [GitHub Releases](https://github.com/ohlookitsderpy/Mue/releases)
+[GitHub Releases](https://github.com/mue/mue/releases)
 
-Development/Other: Read the [Development](#development) section.
 ### Development
-<h5>Requirements</h5>
+#### 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 href='https://git-scm.com'>Git</a></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/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 start</code> (or <code>npm start</code>)
-  <li> Start developing! (See the sections below for how to set up a developer copy of the extension.)
+  <li> Clone the repository using <code>git clone https://github.com/mue/mue.git</code>
+  <li> Run <code>yarn</code> or <code>npm i</code> to install all needed dependencies
+  <li> Run <code>yarn start</code> or <code>npm start</code> to start testing
+  <li> Code your heart out! (See the sections below for how to build the extension)
 </ol>
+<h2>Building</h2>
 <details>
-  <summary><b>Chrome</b> (Click to expand)</summary>
+  <summary><b>Chrome/Edge (Chromium)</b> (Click to expand)</summary>
   <ol>
-    <li> Rename <code>manifest-chrome.json</code> to <code>manifest.json</code>
+    <li> <code>yarn run build</code> or <code>npm run build</code>
+    <li> <code>yarn run chrome</code> or <code>npm run chrome</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> 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> Rename <code>manifest-opera.json</code> to <code>manifest.json</code>
+    <li> <code>yarn run build</code> or <code>npm run build</code>
+    <li> <code>yarn run opera</code> or <code>npm run opera</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>
@@ -75,9 +101,9 @@ Development/Other: Read the [Development](#development) section.
 </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> <code>yarn run build</code> or <code>npm run build</code>
+    <li> <code>yarn run firefox</code> or <code>npm run firefox</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>
@@ -88,48 +114,37 @@ Development/Other: Read the [Development](#development) section.
   <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> <code>yarn run build</code> or <code>npm run build</code>
       <li> Open the <code>index.html</code> in your browser
       <li> Enjoy your new tab!
     </ol>
 </details>
 
-## Screenshot
-*Will be updated if needed*
-
-<img src='assets/screenshot.jpg'>
-
 ## Credits
 ### Maintainers
-[ohlookitsderpy](https://github.com/ohlookitsderpy)
+[David Ralph (ohlookitsderpy)](https://github.com/ohlookitsderpy) - Founder, Lead development, Photographer <br>
+[Alex Sparkes](https://github.com/alexsparkes) - Name, Lead design, Photographer <br>
 
-[TurboMarshmello](https://github.com/TurboMarshmello)
+### Contributors
+[Wessel Tip](https://github.com/Wessel) - Development <br>
+[Isaac (Eartharoid)](https://github.com/eartharoid) - QA, Development, Photographer <br>
+
+### Translators
+English - [David Ralph (ohlookitsderpy)](https://github.com/ohlookitsderpy) & [Alex Sparkes](https://github.com/alexsparkes)
+
+Dutch - [Wessel Tip](https://github.com/Wessel)
+
+French - [Alex Sparkes](https://github.com/alexsparkes)
+
+Norwegian - [Anders](https://github.com/FuryingFox)
+
+Russian - [MrZillaGold](https://github.com/MrZillaGold)
 
 ### Other
-[TurboMarshmello](https://github.com/TurboMarshmello) - Portions of original code, name idea
-
 [Pexels](https://pexels.com) - Stock photos used for offline mode
 
 [Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support
 
-### Translations
-[ohlookitsderpy](https://github.com/ohlookitsderpy) - English (Quotes and Messages)
+[Google Fonts](https://fonts.google.com) - Lexend Deca and Roboto fonts
 
-[Yanderella](https://github.com/tomiedev) - Italian (Quotes and Messages)
-
-Pepehound - Spanish (Quotes and Messages)
-
-Candystick - Portuguese (Some Quotes)
-
-[PassTheWessel](https://github.com/PassTheWessel) - Dutch (Messages)
-
-[Yanderella](https://github.com/tomiedev) 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 many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#), [Roee Lupo](https://github.com/RoeeLupo), [Jeroen](#), [Glasvegas](https://twitter.com/_glasvegas), [Anders](https://github.com/FuryingFox), [Oded Shapira](https://twitter.com/dondishdev), Jacob Tyrrell and [Nikka Lai](#) for letting us use their wonderful photographs

manifest/background-opera.js

@@ -0,0 +1,14 @@
+/* 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

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

manifest/firefox.json

@@ -0,0 +1,15 @@
+{
+    "manifest_version": 2,
+    "name": "Mue",
+    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
+    "version": "4.1.0",
+    "browser_action": {
+        "default_icon": "icons/128x128.png"
+    },
+    "chrome_url_overrides": {
+        "newtab": "index.html"
+    },
+    "chrome_settings_overrides": {
+        "homepage": "index.html"
+    }
+}

manifest/opera.json

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

package.json

@@ -1,29 +1,41 @@
 {
   "name": "mue",
-  "author": "ohlookitsderpy",
+  "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/alexsparkes)"
+  ],
   "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-  "license": "MIT",
-  "version": "2.0.0",
+  "repository": {
+    "url": "github:mue/mue"
+  },
+  "homepage": "https://muetab.xyz",
+  "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
+  "license": "BSD-3-Clause",
+  "version": "4.1.0",
   "dependencies": {
-    "@material-ui/core": "^4.4.3",
-    "@material-ui/icons": "^4.4.3",
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
-    "react-scripts": "3.1.2",
-    "unfetch": "^4.1.0"
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@muetab/quotes": "^1.0.0",
+    "detect-browser-language": "0.0.2",
+    "react": "^16.13.1",
+    "react-clock": "^2.4.0",
+    "react-dom": "^16.13.1",
+    "react-modal": "^3.11.2",
+    "react-toastify": "^6.0.8",
+    "supports-webp": "^2.0.1"
   },
   "devDependencies": {
-    "eslint": "^6.5.0",
-    "npm-run-all": "^4.1.5",
-    "sass": "^1.22.12"
+    "react-scripts": "3.4.3",
+    "node-sass": "^4.14.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "sass": "sass --watch src/scss:src/css --style compressed",
-    "start-all": "npm-run-all -p start sass"
+    "chrome": "cp manifest/chrome.json build/manifest.json",
+    "firefox": "cp manifest/firefox.json build/manifest.json",
+    "opera": "cp manifest/opera.json build/manifest.json && cp manifest/background-opera.js build/"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -36,8 +48,7 @@
     ],
     "development": [
       "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 firefox version"
     ]
   }
 }

public/icons/mue_verified.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="200" cy="200" r="200" fill="url(#paint0_linear)"/>
+<path d="M167 265.062L294.125 137.938L311 154.812L167 298.812L100.062 231.875L116.938 215L167 265.062Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="200" y1="0" x2="200" y2="400" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5C25"/>
+<stop offset="1" stop-color="#FF456E"/>
+</linearGradient>
+</defs>
+</svg>

public/index.html

@@ -1,15 +1,16 @@
 <!DOCTYPE html>
-<html>
+<html lang='en'>
   <head>
     <meta charset='utf-8' />
     <meta name='viewport' content='width=device-width, initial-scale=1' />
-    <link rel='apple-touch-icon' sizes='180x180' href='apple-touch-icon.png'>
-    <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
-    <link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
+    <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>You need to enable JavaScript to use Mue.</noscript>
     <div id='root'></div>
   </body>
-</html>
+
+</html>

public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "Mue New Tab",
-  "name": "Fast, open and free-to-use new tab page for most modern browsers.",
-  "icons": [
-    {
-      "src": "favicon-32x32.png",
-      "sizes": "96x96 64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

src/App.jsx

@@ -1,66 +1,126 @@
-//* Imports
 import React from 'react';
-import Fetch from 'unfetch';
-import Clock from './modules/Clock';
-import Greeting from './modules/Greeting';
-import Quote from './modules/Quote';
-import Search from './modules/Search';
-import Credit from './modules/Credit';
-import './css/index.css';
 
-//* Functions
-const getCookie = (cookiename) =>  {
-  const cookiestring = RegExp('' + cookiename + '[^;]+').exec(document.cookie);
-  return unescape(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,'') : '');
-};
+import Background from './components/widgets/Background';
+import Clock from './components/widgets/Clock';
+import Greeting from './components/widgets/Greeting';
+import Quote from './components/widgets/Quote';
+import Search from './components/widgets/Search';
+import Maximise from './components/widgets/Maximise';
+import Favourite from './components/widgets/Favourite';
 
-const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
+import Navbar from './components/Navbar';
 
-//* App
-export default class App extends React.Component {
-  // Render all the modules
+import SettingsFunctions from './modules/settingsFunctions';
+import { ToastContainer } from 'react-toastify';
+import Modal from 'react-modal';
+import { merge } from './modules/merge';
+import RoomIcon from '@material-ui/icons/Room';
+
+// Modals are lazy loaded as a user won't use them every time they open a tab
+const Settings = React.lazy(() => import('./components/modals/Settings'));
+const Update = React.lazy(() => import('./components/modals/Update'));
+const Marketplace = React.lazy(() => import('./components/modals/Marketplace'));
+const Addons = React.lazy(() => import('./components/modals/Addons'));
+//const Welcome = React.lazy(() => import('./components/modals/Welcome'));
+const renderLoader = () => <div></div>;
+
+export default class App extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      settingsModal: false,
+      updateModal: false,
+      marketplaceModal: false,
+      addonsModal: false,
+      quickAccessmodal: false,
+      welcomeModal: false
+    };
+  }
+
+  // Render all the components
   render() {
+    if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
+
+    let modalClassList = 'Modal';
+    if (localStorage.getItem('darkTheme') === 'true') modalClassList = 'Modal dark';
+
+    let overlayClassList = 'Overlay';
+    if (localStorage.getItem('animations') === 'true') overlayClassList = 'Overlay modal-animation';
+
+    let language = require(`./translations/${localStorage.getItem('language') || 'en'}.json`);
+    const en = require('./translations/en.json');
+    language = merge(en, language);
+
+    const theme = localStorage.getItem('theme');
+    if (theme) {
+      const style = document.createElement('link');
+      style.href = theme;
+      style.rel = 'stylesheet';
+      document.head.appendChild(style);
+    }
+
     return (
       <React.Fragment>
-        <Search/>
-          <div id='center'>
-              <Greeting/>
-              <Clock/> 
-              <Quote/>
-              <Credit/>
+        <Background/>
+        <ToastContainer className='toast' position='bottom-right' autoClose={2500} hideProgressBar={false} newestOnTop={true} closeOnClick rtl={false} pauseOnFocusLoss />
+        <div id='center'>
+          <Search language={language.search} />
+          <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
+          <Greeting language={language.greeting} />
+          <Clock/>
+          <Quote language={language.toasts}/>
+          <div className='credits' id='credits'>
+            <h1 id='photographer'>{language.credit}</h1>
+            <span id='credit' style={{'display': 'none'}}></span>
+            <div id='backgroundCredits' className='tooltip'>
+              <RoomIcon className='locationicon'/>
+              <span className='tooltiptext' id='location'/>
+            </div>
           </div>
+          <Maximise/>
+          <Favourite/>
+          <React.Suspense fallback={renderLoader()}>
+            <Modal id={'modal'} onRequestClose={() => this.setState({ settingsModal: false })} isOpen={this.state.settingsModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+              <Settings
+                language={language.settings}
+                modalLanguage={language.modals}
+                modalClose={() => this.setState({ settingsModal: false })}
+                setDefaultSettings={() => SettingsFunctions.setDefaultSettings()}
+                openMarketplace={() => this.setState({ marketplaceModal: true, settingsModal: false })}
+                openAddons={() => this.setState({ settingsModal: false, addonsModal: true })}
+                toastLanguage={language.toasts} />
+            </Modal>
+            <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+              <Update
+                language={language.update}
+                modalClose={() => this.setState({ updateModal: false })} />
+            </Modal>
+            <Modal onRequestClose={() => this.setState({ marketplaceModal: false })} isOpen={this.state.marketplaceModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
+              <Marketplace
+                language={language.marketplace}
+                modalLanguage={language.modals}
+                modalClose={() => this.setState({ marketplaceModal: false })}
+                openSettings={() => this.setState({ marketplaceModal: false, settingsModal: true })}
+                openAddons={() => this.setState({ marketplaceModal: false, addonsModal: true })}
+                toastLanguage={language.toasts} />
+            </Modal>
+            <Modal onRequestClose={() => this.setState({ addonsModal: false })} isOpen={this.state.addonsModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
+              <Addons
+                language={language.addons}
+                marketplaceLanguage={language.marketplace}
+                modalLanguage={language.modals}
+                modalClose={() => this.setState({ addonsModal: false })}
+                openSettings={() => this.setState({ addonsModal: false, settingsModal: true })}
+                openMarketplace={() => this.setState({ addonsModal: false, marketplaceModal: true })}
+                toastLanguage={language.toasts} />
+            </Modal>
+            {/* <Modal onRequestClose={() => this.setState({ welcomeModal: false })} isOpen={this.state.welcomeModal} className={modalClassList} overlayClassName='Overlay' ariaHideApp={false}>
+              <Welcome modalClose={() => this.setState({ welcomeModal: false })} />
+             </Modal> */ }
+          </React.Suspense>
+        </div>
       </React.Fragment>
     );
   }
-
-  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
-  async getAndSetBackground() {
-    const root = document.getElementById('root');
-    
-    try {
-      let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-      data     = await data.json(); 
-
-      const checkRepeat = getCookie('backgroundimageurl');
-      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
-      document.getElementById('location').innerText     = `${data.location}`;
-
-      if (checkRepeat !== root.style.backgroundImage) root.style.backgroundImage = `url(${data.file})`;
-      else {
-        /*let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-        data = await data.json();*/ 
-        document.cookie            = 'backgroundimageurl; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        root.style.backgroundImage = `url(${data.file})`;
-        document.cookie            = `backgroundimageurl=${data.file}`;
-      }
-    } catch (e) {
-      document.getElementById('backgroundCredits').style.display = 'none';
-      document.getElementById('photographer').innerText          = 'Photo from Pexels';
-      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
-    }
-  }
-
-  componentDidMount() {
-    this.getAndSetBackground();
-  }
 }

src/components/Navbar.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import Gear from '@material-ui/icons/Settings';
+import NewReleases from '@material-ui/icons/NewReleases';
+
+export default class Navbar extends React.PureComponent {
+  render() {
+    let refreshHTML = <div className='navbar2'><RefreshIcon className='refreshicon' onClick={() => window.location.reload()} /></div>;
+    const refresh = localStorage.getItem('refresh');
+    if (refresh === 'false') refreshHTML = '';
+
+    return (
+      <div className='navbar-container'>
+        <div className='navbar1'>
+          <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
+        </div>
+        {refreshHTML}
+        <div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
+        <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
+        </div>
+      </div>
+    );
+  }
+}

src/components/modals/Addons.jsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { toast } from 'react-toastify';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+
+export default class Addons extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            installed: [],
+            current_data: {
+                type: '',
+                name: '',
+                content: {}
+            },
+            item_data: {
+                name: 'Name',
+                author: 'Author',
+                description: 'Description',
+                updated: '???',
+                version: '1.0.0',
+                icon: ''
+            },
+            button: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>
+        }
+    }
+
+    toggle(type, type2, data) {
+        if (type === 'item') {
+            let installed = JSON.parse(localStorage.getItem('installed'));
+            let info = installed.find(i => i.name === data).content;
+            this.setState({
+                current_data: { type: type2, name: data, content: info },
+                item_data: {
+                    name: info.data.name,
+                    author: info.data.author,
+                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+                    updated: info.updated,
+                    version: info.data.version,
+                    icon: info.data.screenshot_url
+                }
+            });
+
+            document.getElementById('item').style.display = 'block';
+            document.getElementById('marketplace').style.display = 'none';
+         } else {
+            this.setState({
+                button: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>
+            });
+            document.getElementById('marketplace').style.display = 'block';
+            document.getElementById('item').style.display = 'none';
+        }
+    }
+
+    uninstall() {
+        let type, data = this.state.current_data.type;
+        if (data === undefined) data = this.state.current_data.content.data.type;
+        switch (data) {
+            case 'photos':
+                type = 'photo_packs';
+                break;
+            case 'quotes':
+                type = 'quote_packs';
+                break;
+            default:
+                type = this.state.current_data.type;
+                break;
+        }
+        MarketplaceFunctions.uninstall(this.state.current_data.name, type);
+        toast(this.props.toastLanguage.removed);
+        this.setState({
+            button: '',
+            installed: JSON.parse(localStorage.getItem('installed'))
+        });
+    }
+
+    install(input) {
+        let installed = JSON.parse(localStorage.getItem('installed'));
+        let button;
+
+        const installStuff = () => {
+           installed.push({
+                content: {
+                   updated: 'Unpublished',
+                   data: input
+                }
+           });
+           localStorage.setItem('installed', JSON.stringify(installed));
+           toast(this.props.toastLanguage.installed);
+           button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>;
+           this.setState({
+               button: button,
+               installed: JSON.parse(localStorage.getItem('installed'))
+            });
+        }
+
+        switch (input.type) {
+            case 'settings':
+                localStorage.removeItem('backup_settings');
+                let oldSettings = [];
+                for (const key of Object.keys(localStorage)) oldSettings.push({name: key, value: localStorage.getItem(key)});
+                localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
+                input.settings.forEach(element => localStorage.setItem(element.name, element.value));
+                installStuff();
+                break;
+            case 'photos':
+                localStorage.setItem('photo_packs', JSON.stringify(input.photos));
+                installStuff();
+                break;
+            case 'theme':
+                localStorage.setItem('theme', input.theme);
+                installStuff();
+                break;
+            case 'quote_packs':
+                if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api));
+                localStorage.setItem('quote_packs', JSON.stringify(input.quotes));
+                installStuff();
+                break;
+            default:
+               break;
+        }
+    }
+
+  componentDidMount() {
+    document.getElementById('file-input').onchange = (e) => {
+        const file = e.target.files[0];
+        if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
+
+        const reader = new FileReader();
+        reader.readAsText(file, 'UTF-8');
+
+        reader.onload = (readerEvent) => {
+          const content = JSON.parse(readerEvent.target.result);
+          this.install(content);
+        };
+    };
+
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+    this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
+  }
+
+  componentWillUnmount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  render() {
+     let content = <div className='items'>
+           {this.state.installed.map((item) =>
+                <div className='item' onClick={() => this.toggle('item', item.type, item.name)}>
+                <img alt='icon' src={item.content.data.icon_url} />
+                <div className='details'>
+                    <h4>{item.content.data.name}</h4>
+                    <p>{item.content.data.author}</p>
+                </div>
+            </div>)}
+    </div>;
+
+     if (this.state.installed.length === 0) {
+         content = <div className='items'>
+               <div className='emptyMessage'>
+                    <LocalMallIcon />
+                    <h1>{this.props.language.empty.title}</h1>
+                    <p className='description'>{this.props.language.empty.description}</p>
+                    <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
+              </div>
+           </div>;
+     }
+
+    return <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1>{this.props.modalLanguage.title}</h1>
+        <div className='tab'>
+            <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+            <button className='tablinks' id='active'>{this.props.modalLanguage.addons}</button>
+            <button className='tablinks' onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+        </div>
+        <div id='marketplace'>
+           <input id='file-input' type='file' name='name' className='hidden' />
+           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
+           <h1>{this.props.language.added}</h1>
+           {content}
+        </div>
+        <Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
+    </div>;
+    }
+}

src/components/modals/Marketplace.jsx

@@ -0,0 +1,252 @@
+import React from 'react';
+import WifiOffIcon from '@material-ui/icons/WifiOff';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import { toast } from 'react-toastify';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+import * as Constants from '../../modules/constants';
+import Items from './marketplace/Items';
+
+export default class Marketplace extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            themes: [],
+            settings: [],
+            photo_packs: [],
+            quote_packs: [],
+            see_more: [],
+            see_more_type: '',
+            current_data: {
+                type: '',
+                name: '',
+                content: {}
+            },
+            button: '',
+            featured: {},
+            done: false,
+            item_data: {
+                name: 'Name',
+                author: 'Author',
+                description: 'Description',
+                updated: '???',
+                version: '1.0.0',
+                icon: ''
+            }
+        }
+
+        this.offlineHTML = <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1>{this.props.modalLanguage.title}</h1>
+        <div className='tab'>
+            <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
+            <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+            <button className='tablinks'
+                onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+        </div>
+        <div id='marketplace'>
+            <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
+                <WifiOffIcon />
+                <h1>{this.props.language.offline.title}</h1>
+                <p className='description'>{this.props.language.offline.description}</p>
+            </div>
+        </div>
+        </div>;
+    }
+
+    async toggle(type, type2, data) {
+        if (type === 'seemore') {
+            document.getElementById('marketplace').style.display = 'none';
+            document.getElementById('seemore').style.display = 'block';
+            return this.setState({
+                see_more: this.state[type2],
+                see_more_type: type2
+            });
+        }
+
+        if (type === 'item') {
+            let info;
+            try {
+                info = await (await fetch(`${Constants.MARKETPLACE_URL}/item/${type2}/${data}`)).json();
+            } catch (e) {
+                return toast(this.props.toastLanguage.error);
+            }
+
+            this.setState({
+                current_data: { type: type2, name: data, content: info },
+                item_data: {
+                    name: info.data.name,
+                    author: info.data.author,
+                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+                    updated: info.updated,
+                    version: info.data.version,
+                    icon: info.data.screenshot_url
+                }
+            });
+
+            document.getElementById('marketplace').style.display = 'none';
+            document.getElementById('seemore').style.display = 'none';
+            document.getElementById('item').style.display = 'block';
+
+            let button = <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>;
+            const installed = JSON.parse(localStorage.getItem('installed'));
+            if (installed.some(item => item.name === data)) button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
+            this.setState({ button: button });
+        } else {
+            document.getElementById('marketplace').style.display = 'block';
+            document.getElementById('item').style.display = 'none';
+            document.getElementById('seemore').style.display = 'none';
+        }
+   }
+
+    async getItems() {
+        const data = await (await fetch(Constants.MARKETPLACE_URL + '/all')).json();
+        const featured = await (await fetch(Constants.MARKETPLACE_URL + '/featured')).json();
+        this.setState({
+            themes: data.data.themes,
+            settings: data.data.settings,
+            photo_packs: data.data.photo_packs,
+            quote_packs: data.data.quote_packs,
+            see_more: data.data.photo_packs,
+            featured: featured.data,
+            done: true
+        });
+    }
+
+    install() {
+        let installed = JSON.parse(localStorage.getItem('installed'));
+        let button;
+
+        const installStuff = () => {
+           installed.push(this.state.current_data);
+           localStorage.setItem('installed', JSON.stringify(installed));
+           toast(this.props.toastLanguage.installed);
+           button = <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>;
+           this.setState({ button: button });
+        }
+
+        switch (this.state.current_data.type) {
+            case 'settings':
+                localStorage.removeItem('backup_settings');
+                let oldSettings = [];
+                for (const key of Object.keys(localStorage)) oldSettings.push({name: key, value: localStorage.getItem(key)});
+                localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
+                this.state.current_data.content.data.settings.forEach(element => localStorage.setItem(element.name, element.value));
+                installStuff();
+                break;
+            case 'photo_packs':
+                localStorage.setItem('photo_packs', JSON.stringify(this.state.current_data.content.data.photos));
+                installStuff();
+                break;
+            case 'theme':
+                localStorage.setItem('theme', this.state.current_data.content.data.theme);
+                installStuff();
+                break;
+            case 'quote_packs':
+                if (this.state.current_data.content.data.quote_api) localStorage.setItem('quote_api', JSON.stringify(this.state.current_data.content.data.quote_api));
+                localStorage.setItem('quote_packs', JSON.stringify(this.state.current_data.content.data.quotes));
+                installStuff();
+                break;
+            default:
+               break;
+        }
+    }
+
+    uninstall() {
+        MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.type);
+        toast(this.props.toastLanguage.removed);
+        this.setState({
+            button: <button className='addToMue' onClick={() => this.install()}>{this.props.language.product.buttons.addtomue}</button>
+        });
+    }
+
+    componentDidMount() {
+      document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+      document.getElementById('center').classList.toggle('backgroundEffects');
+      if (navigator.onLine === false) return;
+      this.getItems();
+    }
+
+   componentWillUnmount() {
+      document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+      document.getElementById('center').classList.toggle('backgroundEffects');
+   }
+
+  render() {
+    if (navigator.onLine === false) return this.offlineHTML;
+    if (this.state.done === false) {
+        return <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1>{this.props.modalLanguage.title}</h1>
+        <div className='tab'>
+            <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
+            <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+            <button className='tablinks'
+                onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+        </div>
+        <div id='marketplace'>
+            <div className='emptyMessage' style={{'marginTop': '20px', 'transform': 'translateY(80%)'}}>
+                <h1>Loading...</h1>
+            </div>
+        </div>
+        </div>;
+    }
+
+    return <div className='content'>
+             <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+             <h1>{this.props.modalLanguage.title}</h1>
+             <div className='tab'>
+                 <button className='tablinks' id='active'>{this.props.modalLanguage.marketplace}</button>
+                 <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+                 <button className='tablinks'
+                     onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+             </div>
+             <div id='marketplace'>
+                 <div className='featured' style={{backgroundColor: this.state.featured.colour}}>
+                     <p>{this.state.featured.title}</p>
+                     <h1>{this.state.featured.name}</h1>
+                     <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
+                 </div>
+                 <Items
+                   title={this.props.language.photo_packs}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.photo_packs.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'photo_packs', input)}
+                   seeMoreFunction={() => this.toggle('seemore', 'photo_packs')} />
+                 <Items
+                   title={this.props.language.preset_settings}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.settings.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'settings', input)}
+                   seeMoreFunction={() => this.toggle('seemore', 'settings')} />
+                 <Items
+                   title={this.props.language.quote_packs}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.quote_packs.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'quote_packs', input)}
+                   seeMoreFunction={() => this.toggle('seemore', 'quote_packs')} />
+                 <Items
+                   title={this.props.language.themes}
+                   seeMoreTitle={this.props.language.see_more}
+                   items={this.state.themes.slice(0, 3)}
+                   toggleFunction={(input) => this.toggle('item', 'theme', input)}
+                   seeMoreFunction={() => this.toggle('seemore', 'themes')} />
+             </div>
+             <Item
+               button={this.state.button}
+               data={this.state.item_data}
+               content={this.state.current_data}
+               function={() => this.toggle()} language={this.props.language.product}
+             />
+             <div id='seemore'>
+                <ArrowBackIcon className='backArrow' onClick={() => this.toggle()} />
+                <Items
+                  title={this.props.language.see_more}
+                  seeMoreTitle={this.props.language.see_more}
+                  toggleFunction={(input) => this.toggle('item', this.state.see_more_type, input)}
+                  items={this.state.see_more}
+                />
+             </div>
+            </div>;
+    }
+}

src/components/modals/Settings.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import SettingsFunctions from '../../modules/settingsFunctions';
+import Checkbox from './settings/Checkbox';
+import Slider from './settings/Slider';
+import Section from './settings/Section';
+import { toast } from 'react-toastify';
+
+import BackgroundSettings from './settings/sections/BackgroundSettings';
+import ExperimentalSettings from './settings/sections/ExperimentalSettings';
+import SearchSettings from './settings/sections/SearchSettings';
+import LanguageSettings from './settings/sections/LanguageSettings';
+
+export default class Settings extends React.PureComponent {
+  resetGreeting() {
+    document.getElementById('greetingName').value = '';
+    toast(this.props.toastLanguage.reset);
+  }
+
+  updateCurrent() {
+    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+    document.getElementById('language').value = localStorage.getItem('language');
+
+    if (localStorage.getItem('darkTheme') === 'true') {
+      const choices = document.getElementsByClassName('choices');
+      for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542';
+    }
+  }
+
+  componentDidMount() {
+    this.updateCurrent();
+
+    document.getElementById('file-input').onchange = (e) => {
+      const file = e.target.files[0];
+      if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
+
+      const reader = new FileReader();
+      reader.readAsText(file, 'UTF-8');
+
+      reader.onload = (readerEvent) => {
+        const content = JSON.parse(readerEvent.target.result);
+        for (const key of Object.keys(content)) localStorage.setItem(key, content[key]);
+        toast(this.props.toastLanguage.imported);
+      };
+    };
+
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  componentWillUnmount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  render() {
+    return (
+      <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1>{this.props.modalLanguage.title}</h1>
+        <div className='tab'>
+          <button className='tablinks' onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+          <button className='tablinks' onClick={this.props.openAddons}>{this.props.modalLanguage.addons}</button>
+          <button className='tablinks' id='active'>{this.props.modalLanguage.settings}</button>
+        </div>
+        <br/>
+
+        <div className='columns'>
+          <Section title={this.props.language.time.title} name='time'>
+            <Checkbox name='seconds' text={this.props.language.time.seconds} />
+            <Checkbox name='24hour' text={this.props.language.time.twentyfourhour} />
+            <Checkbox name='ampm' text={this.props.language.time.ampm} />
+            <Checkbox name='zero' text={this.props.language.time.zero} />
+            <Checkbox name='analog' text={this.props.language.time.analog} />
+          </Section>
+          <Section title={this.props.language.greeting.title} name='greeting'>
+            <Checkbox name='events' text={this.props.language.greeting.events} />
+            <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
+            <ul>
+              <p>{this.props.language.greeting.name} <span className='modalLink' onClick={() => this.resetGreeting()}>{this.props.language.reset}</span></p>
+              <input type='text' id='greetingName'></input>
+            </ul>
+          </Section>
+          <Section title={this.props.language.quote.title} name='quote'>
+            <Checkbox name='copyButton' text={this.props.language.quote.copy} />
+            <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
+          </Section>
+          <Section title={this.props.language.background.title} name='background'>
+            <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+          </Section>
+          <Section title={this.props.language.searchbar.title} name='searchBar'>
+            <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
+          </Section>
+          <div className='section'>
+            <h4 class='nodropdown'>{this.props.language.offline}</h4>
+            <Slider name='offlineMode'/>
+          </div>
+          <div className='section'>
+            <h4 class='nodropdown'>{this.props.language.experimental.dark}</h4>
+            <Slider name='darkTheme'/>
+          </div>
+          <ExperimentalSettings language={this.props.language} />
+          <LanguageSettings language={this.props.language} />
+
+          <button className='apply' onClick={() => SettingsFunctions.saveStuff()}>{this.props.language.apply}</button>
+          <button className='reset' onClick={() => this.props.setDefaultSettings()}>{this.props.language.reset}</button>
+          <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
+          <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
+          <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
+        </div>
+      </div>
+    );
+  }
+}

src/components/modals/Update.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import * as Constants from '../../modules/constants';
+
+export default class Update extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      title: this.props.language.title,
+      date: '???',
+      content: this.props.language.title,
+      url: '',
+      author: 'Mue'
+    };
+ }
+
+ async getUpdate() {
+  if (localStorage.getItem('offlineMode') === 'true') return this.setState({
+    title: this.props.language.offline.title,
+    content: this.props.language.offline.description
+  });
+
+  try { // Get update log from the API
+    const data = await (await fetch(Constants.API_URL + '/getUpdate')).json();
+    this.setState({
+      title: data.title,
+      content: data.content,
+      date: data.published,
+      image: data.image,
+      url: data.url,
+      author: data.author
+    });
+  } catch (e) { // If it fails, we send an error
+    this.setState({
+      title: this.props.language.error.title,
+      content: this.props.language.error.description
+    });
+  }
+ }
+
+ componentDidMount() {
+   this.getUpdate();
+ }
+
+  render() {
+    return <div className='updateContent'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1 style={{ 'marginBottom':'-10px' }}>{this.state.title}</h1>
+        <h5 style={{ 'lineHeight':'0px' }}> By {this.state.author} • {this.state.date}</h5>
+        <img draggable='false' src={this.state.image} alt='Update'></img>
+        <p dangerouslySetInnerHTML={{__html: this.state.content + `<br/><p>Read on the blog here: <a target='_blank' class='modalLink' href='${this.state.url}'>${this.state.url}</a></p>`}}></p>
+      </div>;
+    }
+}

src/components/modals/Welcome.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import EmailIcon from '@material-ui/icons/Email';
+
+export default class Welcome extends React.PureComponent {
+  render() {
+    return <div className='welcomeContent'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <div className='welcomeModalText'>
+          <h2 className='subtitle'>Welcome to</h2>
+          <h1 className='welcometitle'>Mue Tab</h1>
+          <img alt='celebration' style={{'height': '200px', 'width': 'auto'}} src='./././icons/undraw_celebration.svg' />
+          <h2 className='subtitle'>Information</h2>
+          <p>Thank you for downloading Mue Tab,<br/> we hope you enjoy your time with our extension.</p>
+          <h2 className='subtitle'>Tutorials</h2>
+          <a href=''>General Start</a>
+          <br/>
+          <a href='https://blog.muetab.xyz/welcome-to-marketplace/'>Marketplace</a>
+          <br/>
+          <a href=''>Submitting Photos</a>
+          <br/>
+          <a href=''>Settings</a>
+          <h2 className='subtitle'>Support</h2>
+         {/* <img alt='twitter' href='https://twitter.com/getmue' className='icon' src=''/>
+          <img alt='discord' href='https://discord.gg/kJsufA9' className='icon' src=''/> */}
+          <EmailIcon />
+          <br/>
+          <button className='close' onClick={this.props.modalClose}>Close</button>
+        </div>
+      </div>;
+    }
+}

src/components/modals/marketplace/Item.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+export default class Item extends React.PureComponent {
+  render() {
+    //if (!this.props.data.icon) return null;
+    let warningHTML;
+    try { // For some reason it breaks sometimes so we use try/catch
+      if (this.props.content.content.data.quote_api) {
+        warningHTML = <div className='productInformation'>
+            <ul>
+                <li className='header'>{this.props.language.quoteWarning.title}</li>
+                <li id='updated'>{this.props.language.quoteWarning.description}</li>
+            </ul>
+        </div>
+      }
+    } catch (e) {}
+
+    return (
+      <div id='item'>
+      <br/>
+      <ArrowBackIcon className='backArrow' onClick={this.props.function} />
+      <br/>
+      <h1>{this.props.data.name}</h1>
+      {this.props.button}
+      <br/><br/>
+      <img alt='product' draggable={false} src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
+      <div className='informationContainer'>
+      <div className='productInformation'>
+          <h4>{this.props.language.information}</h4>
+          <ul>
+              <br/>
+              <li className='header'>{this.props.language.last_updated}</li>
+              <li>{this.props.data.updated}</li>
+              <br/>
+              <li className='header'>{this.props.language.version}</li>
+              <li>{this.props.data.version}</li>
+              <br/>
+              <li className='header'>{this.props.language.author}</li>
+              <li>{this.props.data.author}</li>
+          </ul>
+      </div>
+      <div className='productInformation'>
+          <ul>
+              <li className='header'>{this.props.language.notice.title}</li>
+              <li id='updated'>{this.props.language.notice.description}</li>
+          </ul>
+      </div>
+      {warningHTML}
+      </div>
+      <br/>
+      <h1>{this.props.language.overview}</h1>
+      <p className='description' dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
+    </div>
+    );
+  }
+}

src/components/modals/marketplace/Items.jsx

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

src/components/modals/settings/Checkbox.jsx

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

src/components/modals/settings/Section.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+import Slider from './Slider';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+
+export default class Section extends React.PureComponent {
+  render() {
+    let extraHTML, expandMore;
+    if (this.props.children) {
+        extraHTML = <li className={'extraSettings ' + this.props.title}>{this.props.children}</li>
+        expandMore = <ExpandMore
+                        style={{ 'transition': 'all 0.5s ease 0s' }}
+                        className={`expandIcons expand${this.props.title}`}
+                        onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}
+                    />
+    }
+    return (
+        <div className='section'>
+            <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}>{this.props.title}</h4>
+            {expandMore}
+            <Slider name={this.props.name} />
+            {extraHTML}
+        </div>
+    );
+  }
+}

src/components/modals/settings/Slider.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+
+export default class Slider extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      checked: (localStorage.getItem(this.props.name) === 'true')
+    };
+  }
+
+  handleChange(name) {
+    SettingsFunctions.setItem(name);
+    this.setState({ checked: (this.state.checked === true) ? false : true });
+  }
+
+  render() {
+    let setText = (this.props.override) ? this.props.override : this.props.name;
+    return (
+        <label className='switch'>
+          <input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange(setText)} />
+          <span className='slider'></span>
+        </label>
+    );
+  }
+}

src/components/modals/settings/sections/BackgroundSettings.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { toast } from 'react-toastify';
+
+export default class BackgroundSettings extends React.PureComponent {
+  resetItem(key) {
+    switch (key) {
+      case 'customBackgroundColour':
+        localStorage.setItem('customBackgroundColour', '');
+        document.getElementById('customBackgroundHex').textContent = 'Disabled';
+        break;
+      case 'customBackground': document.getElementById('customBackground').value = ''; break;
+      case 'blur':
+        localStorage.setItem('blur', 0);
+        document.getElementById('blurRange').value = 0;
+        document.getElementById('blurAmount').innerText = '0';
+        break;
+      case 'brightness':
+        localStorage.setItem('brightness', 100);
+        document.getElementById('brightnessRange').value = 100;
+        document.getElementById('brightnessAmount').innerText = '100';
+        break;
+      default: toast('resetItem requires a key!');
+    }
+    toast(this.props.toastLanguage.reset);
+  }
+
+   componentDidMount() {
+      document.getElementById('bg-input').onchange = (e) => {
+        const reader = new FileReader();
+        const file = e.target.files[0];
+
+        if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff');
+
+        reader.addEventListener('load', (e) => {
+            localStorage.setItem('customBackground', e.target.result);
+            document.getElementById('customBackground').src = e.target.result;
+            document.getElementById('customBackground').value = e.target.result;
+        });
+
+        reader.readAsDataURL(file);
+      };
+
+      const hex = localStorage.getItem('customBackgroundColour');
+      if (hex !== '') {
+          document.getElementById('customBackgroundColour').value = hex;
+          document.getElementById('customBackgroundHex').innerText = hex;
+      } else document.getElementById('customBackgroundHex').innerText = 'Disabled';
+
+      const blur = localStorage.getItem('blur');
+      const brightness = localStorage.getItem('brightness');
+
+      document.getElementById('blurAmount').innerText = blur;
+      document.getElementById('blurRange').value = blur;
+
+      document.getElementById('brightnessAmount').innerText = brightness;
+      document.getElementById('brightnessRange').value = brightness;
+
+      document.getElementById('customBackground').value = localStorage.getItem('customBackground');
+      document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
+    }
+
+  render() {
+    return (
+        <div>
+          <ul>
+            <label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
+            <label className='dropdown'>
+              <select className='select-css' name='backgroundapi' id='backgroundAPI' onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
+                <option className='choices' value='mue'>Mue</option>
+                <option className='choices' value='unsplash'>Unsplash</option>
+              </select>
+            </label>
+            </ul>
+            <ul>
+              <p>{this.props.language.background.blur} (<span id='blurAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
+              <input className='range' type='range' min='0' max='100' id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
+            </ul>
+            <ul>
+              <p>{this.props.language.background.brightness} (<span id='brightnessAmount'></span>%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
+              <input className='range' type='range' min='0' max='100' id='brightnessRange' onInput={() => document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} />
+            </ul>
+            <ul>
+              <p>{this.props.language.background.customURL} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+              <input type='text' id='customBackground'></input>
+            </ul>
+            <ul>
+              <p>{this.props.language.background.custombackground} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
+              <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.background.upload}</button>
+              <input id='bg-input' type='file' name='name' className='hidden' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' />
+            </ul>
+           <ul>
+              <p>{this.props.language.background.customcolour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
+              <input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
+              <label htmlFor='colour' id='customBackgroundHex'>#00000</label>
+           </ul>
+        </div>
+    );
+  }
+}

src/components/modals/settings/sections/ExperimentalSettings.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import SettingsFunctions from '../../../../modules/settingsFunctions';
+
+export default class ExperimentalSettings extends React.PureComponent {
+  render() {
+    return (
+        <div className='section'>
+          <h4 onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])}>{this.props.language.experimental.title}</h4>
+          <ExpandMore style={{ 'transition': 'all 0.5s ease 0s' }} className='expandIcons' onClick={() => SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} />
+          <li className='extraSettings'>
+            <Checkbox name='webp' text={this.props.language.experimental.webp} />
+            <Checkbox name='animations' text={this.props.language.experimental.animations} />
+            <Checkbox name='view' text={this.props.language.experimental.view} />
+            <Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
+            <Checkbox name='refresh' text={this.props.language.experimental.refresh} />
+          </li>
+        </div>
+    );
+  }
+}

src/components/modals/settings/sections/LanguageSettings.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default class LanguageSettings extends React.PureComponent {
+  render() {
+    return (
+        <div className='section'>
+        <h4 htmlFor='language'>{this.props.language.language}</h4>
+          <select className='select-css' name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
+            <option className='choices' value='en'>English</option>
+            <option className='choices' value='nl'>Nederlands</option>
+            <option className='choices' value='fr'>Français</option>
+            <option className='choices' value='no'>Norsk</option>
+            <option className='choices' value='ru'>Pусский</option>
+          </select>
+        </div>
+    );
+  }
+}

src/components/modals/settings/sections/SearchSettings.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import SettingsFunctions from '../../../../modules/settingsFunctions';
+import { toast } from 'react-toastify';
+
+const searchEngines = require('../../../../modules/searchEngines.json');
+
+export default class SearchSettings extends React.PureComponent {
+  resetSearch() {
+    localStorage.removeItem('customSearchEngine');
+    document.getElementById('customSearchEngine').value = '';
+    toast(this.props.toastLanguage.reset);
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('searchEngine') === 'custom') {
+      const input = document.getElementById('searchEngineInput');
+      input.style.display = 'block';
+      input.enabled = 'true';
+      document.getElementById('customSearchEngine').value = localStorage.getItem('customSearchEngine');
+    } else localStorage.removeItem('customSearchEngine');
+
+    document.getElementById('searchEngine').value = localStorage.getItem('searchEngine');
+  }
+
+  render() {
+    return (
+        <div>
+          <ul>
+            <label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
+              <select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}>
+                {searchEngines.map((engine) =>
+                  <option className='choices' value={engine.settingsName}>{engine.name}</option>
+                )}
+                <option className='choices' value='custom'>Custom</option>
+              </select>
+            </ul>
+            <ul id='searchEngineInput' style={{ display: 'none' }}>
+              <p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
+              <input type='text' id='customSearchEngine'></input>
+            </ul>
+        </div>
+    );
+  }
+}

src/components/widgets/Background.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import * as Constants from '../../modules/constants';
+
+export default class Background extends React.PureComponent {
+  setBackground(url, colour, credit) { // Sets the attributes of the background image
+    const background = colour ? `background-color: ${colour};` : `background-image: url(${url});`;
+
+    document.querySelector('#backgroundImage').setAttribute(
+      'style',
+      `${background};
+      -webkit-filter: blur(${localStorage.getItem('blur')}px);
+      -webkit-filter: brightness(${localStorage.getItem('brightness')}%);`
+    );
+
+    if (credit === 'false') document.querySelector('#credits').style.display = 'none'; // Hide the credit
+  }
+
+  setCredit(photographer) {
+    document.querySelector('#photographer').append(` ${photographer}`); // Append credit
+    document.getElementById('credit').textContent = photographer;
+  }
+
+  doOffline() { // Handles setting the background if the user is offline
+    const offlineImages = require('../../modules/offlineImages.json');
+    const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json
+    const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys
+    const randomImage = offlineImages[photographer].photo[
+      Math.floor(Math.random() * offlineImages[photographer].photo.length)
+    ]; // Select a random image
+    const url = `../offline-images/${randomImage}.jpeg`;
+
+    this.setBackground(url);
+    this.setCredit(photographer);
+
+    document.querySelector('#backgroundCredits').style.display = 'none'; // Hide the location icon
+  }
+
+  async determineMode() {
+    if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
+
+    const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
+    const customBackgroundColour = localStorage.getItem('customBackgroundColour');
+    const customBackground = localStorage.getItem('customBackground');
+    const favourited = JSON.parse(localStorage.getItem('favourite'));
+
+    if (favourited) {
+      this.setBackground(favourited.url, null, 'true');
+      this.setCredit(favourited.credit);
+      document.getElementById('location').textContent = favourited.location;
+    } else if (photoPack) {
+      const randomPhoto = photoPack[Math.floor(Math.random() * photoPack.length)];
+      this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer);
+      this.setCredit(randomPhoto.photographer);
+      document.getElementById('location').textContent = randomPhoto.location;
+    } else if (customBackgroundColour) {
+      this.setBackground(null, customBackgroundColour, 'false');
+    } else if (customBackground !== '') { // Local
+      this.setBackground(customBackground, null, 'false');
+    } else { // Online
+      try { // First we try and get an image from the API...
+        const enabled = localStorage.getItem('webp');
+        let requestURL;
+
+        switch (localStorage.getItem('backgroundAPI')) {
+          case 'unsplash':
+            requestURL = `${Constants.UNSPLASH_URL}/getImage`;
+            break;
+          default: // Defaults to Mue
+            if (localStorage.getItem('supportswebp') === 'true' && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`;
+            else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`;
+            break;
+        }
+
+        const data = await (await fetch(requestURL)).json(); // Fetch JSON data from requestURL
+
+        if (data.statusCode === 429) {
+          this.doOffline(); // If we hit the rate limit, fallback to local images
+        } else { // Otherwise, set the background and credit from remote data
+          this.setBackground(data.file);
+          this.setCredit(data.photographer);
+        }
+
+        if (data.location.replace(/[null]+/g, '') === ' ') return document.querySelector('#backgroundCredits').style.display = 'none';
+        document.getElementById('location').innerText = `${data.location.replace('null', '')}`; // Set the location tooltip
+      } catch (e) { // ..and if that fails we load one locally
+        this.doOffline();
+      }
+    }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('background') === 'false') return document.querySelector('#credits').style.display = 'none'; // Hide the credit
+    if (localStorage.getItem('animations') === 'true') document.querySelector('#backgroundImage').classList.add('fade-in');
+    this.determineMode();
+  }
+
+  render() {
+    return <div id='backgroundImage'></div>;
+  }
+}

src/components/widgets/Clock.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import Analog from 'react-clock';
+
+export default class Clock extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    this.timer = undefined;
+    this.state = {
+      time: '',
+      ampm: ''
+    };
+  }
+
+  startTime(time = localStorage.getItem('seconds') === 'true' || localStorage.getItem('analog') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
+    this.timer = setTimeout(() => {
+      const now = new Date();
+
+      // Analog clock
+      if (localStorage.getItem('analog') === 'true') {
+        this.setState({
+          time: now
+        });
+      } else {
+        let sec = '';
+
+        // Extra 0
+        const zero = localStorage.getItem('zero');
+
+        if (localStorage.getItem('seconds') === 'true') {
+          if (zero === 'false') sec = `:${now.getSeconds()}`;
+          else sec = `:${('00' + now.getSeconds()).slice(-2)}`;
+        }
+
+        if (localStorage.getItem('24hour') === 'true') {
+          let time = '';
+          if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`;
+
+          else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+          this.setState({
+            time: time
+          });
+        } else {
+          // 12 hour support
+          let hours = now.getHours();
+          if (hours > 12) hours -= 12;
+
+          // Toggle AM/PM
+          let ampm = now.getHours() > 11 ? 'PM' : 'AM';
+          if (localStorage.getItem('ampm') === 'false') ampm = '';
+
+          let time = '';
+          if (zero === 'false') time = `${hours}:${now.getMinutes()}${sec}`;
+          else time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+
+          this.setState({
+            time: time,
+            ampm: ampm
+          });
+        }
+      }
+
+      this.startTime();
+    }, time);
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('time') === 'false') return;
+    this.startTime(0);
+  }
+
+  render() {
+    let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span> </h1>;
+    if (localStorage.getItem('analog') === 'true') clockHTML = <Analog className='analogclock' value={this.state.time} renderHourMarks={false} renderMinuteMarks={false} />;
+    return clockHTML;
+  }
+}

src/components/widgets/Favourite.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import StarIcon from '@material-ui/icons/Star';
+import StarIcon2 from '@material-ui/icons/StarBorder';
+
+export default class Favourite extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            favourited: <StarIcon2 id='favouriteButton' onClick={() => this.favourite()} />
+        };
+    }
+
+  favourite() {
+      if (localStorage.getItem('favourite')) {
+        localStorage.removeItem('favourite');
+        this.setState({ favourited: <StarIcon2 id='favouriteButton' onClick={() => this.favourite()} /> });
+      } else {
+        const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
+        const credit = document.getElementById('credit').textContent;
+        const location = document.getElementById('location').textContent;
+        localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location }));
+        this.setState({ favourited: <StarIcon id='favouriteButton' onClick={() => this.favourite()} /> });
+      }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('favourite')) this.setState({ favourited: <StarIcon id='favouriteButton' onClick={() => this.favourite()} /> });
+  }
+
+  render() {
+    if (localStorage.getItem('favouriteEnabled') === 'false') return null;
+    return <div className='favourite'>
+        {this.state.favourited}
+    </div>
+  }
+}

src/components/widgets/Greeting.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export default class Greeting extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      greeting: ''
+    };
+ }
+
+  doEvents(time, message) {
+    if (localStorage.getItem('events') === 'false') return message;
+
+    // Get current month & day
+    const m = time.getMonth();
+    const d = time.getDate();
+
+    if (m === 11 && d === 25) message = 'Merry Christmas'; // If it's December 25th, set the greeting string to "Merry Christmas"
+    else if (m === 0 && d === 1) message = 'Happy new year'; // If the date is January 1st, set the greeting string to "Happy new year"
+    else if (m === 9 && d === 31) message = 'Happy Halloween'; // If it's October 31st, set the greeting string to "Happy Halloween"
+
+    return message;
+  }
+
+  getGreeting() {
+    const now = new Date();
+    const hour = now.getHours();
+
+    let message = this.props.language.evening; // Set the default greeting string to "Good evening"
+    if (hour < 12) message = this.props.language.morning; // If it's before 12am, set the greeting string to "Good morning"
+    else if (hour < 18) message = this.props.language.afternoon; // If it's before 6pm, set the greeting string to "Good afternoon"
+
+    // Events
+    message = this.doEvents(now, message);
+    let custom = localStorage.getItem('defaultGreetingMessage');
+    if (custom === 'false') message = '';
+
+    // Name
+    let name = '';
+    const data = localStorage.getItem('greetingName');
+
+    if (typeof data === 'string') {
+      if (data.replace(/\s/g, '').length > 0) name = `, ${data.trim()}`;
+    }
+
+    if (custom === 'false') name = name.replace(',', '');
+
+    // Set the state to the greeting string
+    this.setState({
+      greeting: `${message}${name}`
+    });
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('greeting') === 'false') return;
+    this.getGreeting();
+  }
+
+  render() {
+    return <h1 className='greeting'>
+      {this.state.greeting}
+    </h1>;
+  }
+}

src/components/widgets/Maximise.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import FullscreenIcon from '@material-ui/icons/Fullscreen';
+
+export default class View extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            hidden: false
+        };
+    }
+
+    setAttribute(blur, brightness) {
+        document.querySelector('#backgroundImage').setAttribute(
+            'style',
+            `background-image: url(${document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '')});
+            -webkit-filter: blur(${blur});
+            -webkit-filter: brightness(${brightness}%);`
+        );
+    }
+
+  viewStuff() {
+    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
+    elements.forEach((element) => {
+        try {
+            (this.state.hidden === false) ?  document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
+        } catch (e) {
+            return;
+        }
+    });
+    if (this.state.hidden === false) {
+        this.setState({ hidden: true });
+        this.setAttribute(0, 100);
+    } else {
+        this.setState({ hidden: false });
+        this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'));
+    }
+  }
+
+  render() {
+    if (localStorage.getItem('view') === 'false') return null;
+    return <div className='view'>
+        <FullscreenIcon id='viewButton' onClick={() => this.viewStuff()} />
+    </div>
+  }
+}

src/components/widgets/Quote.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import Quotes from '@muetab/quotes';
+import FileCopy from '@material-ui/icons/FilterNone';
+import { toast } from 'react-toastify';
+import * as Constants from '../../modules/constants';
+import TwitterIcon from '@material-ui/icons/Twitter';
+
+export default class Quote extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        quote: '',
+        author: ''
+    };
+  }
+
+  doOffline() {
+    const quote = Quotes.random(); // Get a random quote from our local package
+    this.setState({
+      quote: '"' + quote.quote + '"',
+      author: quote.author
+    }); // Set the quote
+  }
+
+  getQuotePack() {
+    let quotePack = localStorage.getItem('quote_packs');
+    if (quotePack === 'undefined') return this.doOffline();
+    quotePack = JSON.parse(quotePack);
+
+    if (quotePack) {
+      const data = quotePack[Math.floor(Math.random() * quotePack.length)];
+      return this.setState({
+        quote: '"' + data.quote + '"',
+        author: data.author
+      });
+    } else this.doOffline();
+  }
+
+  async getQuote() {
+    const quotePackAPI = JSON.parse(localStorage.getItem('quote_api'));
+    if (quotePackAPI) {
+      try {
+        const data = await (await fetch(quotePackAPI.url)).json();
+        let author = data[quotePackAPI.author];
+        if (quotePackAPI.authorOverride) author = quotePackAPI.authorOverride;
+        return this.setState({
+          quote: '"' + data[quotePackAPI.quote] + '"',
+          author: author
+        });
+      } catch (e) {
+        return this.getQuotePack();
+      }
+    }
+
+    if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
+
+    try { // First we try and get a quote from the API...
+      const data = await (await fetch(Constants.API_URL + '/getQuote')).json();
+      if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes
+      this.setState({
+        quote: '"' + data.quote + '"',
+        author: data.author
+      });
+    } catch (e) { // ..and if that fails we load one locally
+      this.doOffline();
+    }
+  }
+
+  copyQuote() {
+    navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`);
+    toast(this.props.language.quote);
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('quote') === 'false') return;
+    this.getQuote();
+  }
+
+  render() {
+    let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote()}></FileCopy>;
+    if (localStorage.getItem('copyButton') === 'false') copy = null;
+
+    let tweet = <TwitterIcon className='copyButton' onClick={() => window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus()}/>
+    if (localStorage.getItem('tweetButton') === 'false') tweet = null;
+
+    return (
+        <div className='quotediv'>
+          <h1 className='quote'>{`${this.state.quote}`}</h1>
+          <h1 className='quoteauthor'>{this.state.author} {copy} {tweet}</h1>
+        </div>
+    );
+  }
+}

src/components/widgets/Search.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+const searchEngines = require('../../modules/searchEngines.json');
+
+export default class Search extends React.PureComponent {
+  render() {
+    if (localStorage.getItem('searchBar') === 'false') return null;
+
+    let url;
+    let query = 'q';
+
+    const setting = localStorage.getItem('searchEngine');
+    const info = searchEngines.find(i => i.settingsName === setting);
+    if (info !== undefined) {
+      url = info.url;
+      if (info.query) query = info.query;
+    }
+
+    const custom = localStorage.getItem('customSearchEngine');
+    if (custom) url = custom;
+
+    const searchButton = () => {
+      let value = document.getElementById('searchtext').value;
+      if (!value) value = 'mue fast';
+      window.location.href = url + `?${query}=` + value;
+    };
+
+    return (
+      <div id='searchBar' className='searchbar'>
+        <form id='searchBar' className='searchbarform' action={url}>
+            <SearchIcon onClick={() => searchButton()} />
+            <input type='text' placeholder={this.props.language} name={query} id='searchtext' className='searchtext'/>
+            <div className='blursearcbBG'/>
+          </form>
+      </div>
+    );
+  }
+}

src/css/index.css

@@ -1 +0,0 @@
-.App-clock{font-size:4em;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-ampm-specifier{font-size:.5em}.App-greeting{margin:0;font-size:1.6em;text-shadow:0 0 25px rgba(0,0,0,.3)}.App-quote{font-size:.8em;text-shadow:0 0 25px rgba(0,0,0,.3)}@media screen and (min-width: 600px){.App-quote{margin-left:30%;margin-right:30%}}.App-quote-author{font-size:.9em;letter-spacing:.5px;margin:0;text-shadow:0 0 25px rgba(0,0,0,.3)}i.material-icons,h1.App-quote-author{display:inline}.search-bar{position:absolute;left:20px;top:20px;display:flex;flex-direction:row;display:block;color:#fff;font-family:"Lexend Deca"}.search-bar button{cursor:pointer;outline:none;display:inline}.search-bar button i.material-icons{text-shadow:0 0 25px rgba(0,0,0,.3)}.search-bar input[type=text]{font-size:calc(5px + 1.2vmin);background:none;border:2px solid #fff;padding:10px;color:#fff;position:absolute;box-shadow:0 0 25px rgba(0,0,0,.3);z-index:1}.input.searchText{border:none}.searchbarform{display:flex;flex-direction:row;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}#location{margin-bottom:-10px}#location,#photographer{font-size:calc(10px + 1.2vmin);text-shadow:0 0 25px rgba(0,0,0,.3);text-overflow:ellipsis}#photographer{position:absolute;bottom:10px;left:50px;width:1000px}.tooltip{position:absolute;bottom:15px;left:10px}.personicon,.locationicon{font-size:calc(10px + 1.2vmin)}.MuiSvgIcon-root{position:absolute;bottom:2px;left:2px;width:100em;height:100em;font-size:2rem;text-shadow:0 2px 25px rgba(0,0,0,.3)}.credits{bottom:2px;left:0px;position:absolute;text-align:left;min-width:50px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000}.tooltip .tooltiptext{visibility:hidden;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:20px;position:absolute;z-index:1;position:absolute;bottom:40px;left:60px;margin-left:-60px;opacity:0;transition:opacity 1s}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}#center{margin-left:2vw;margin-right:2vw;display:flex;flex-direction:column;justify-content:center;font-size:calc(10px + 2vmin);text-align:center}::placeholder{color:#fff;opacity:1}:-ms-input-placeholder{color:#fff}#root{background-size:cover;background-repeat:no-repeat;background-position:center center;background-attachment:fixed;min-height:100vh;display:grid;color:#fff}.App-link{color:#61dafb}body{background:#2f3640;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Lexend Deca";overflow:hidden}@font-face{font-family:"Lexend Deca";src:url("/./fonts/LexendDeca-Regular.woff2") format("woff2"),url("/./fonts/LexendDeca-Regular.woff") format("woff"),url("/./fonts/LexendDeca.ttf") format("truetype")}/*# sourceMappingURL=index.css.map */

src/css/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss","../scss/index.scss"],"names":[],"mappings":"AAAA,WACI,cACA,SACA,oCAGJ,oBACE,eCPF,cACI,SACA,gBACA,oCCHJ,WACE,eACA,oCAGF,qCACE,WACE,gBACA,kBAIJ,kBACE,eACA,oBACA,SACA,oCAGF,qCACE,eCpBF,YACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BACA,mBACI,eACA,aAIA,eAHA,oCACI,oCAIR,6BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCnCJ,UACI,oBAGJ,wBACI,+BACA,oCACA,uBAGJ,cACE,kBACA,YACA,UACA,aAGF,SACE,kBACA,YACA,UAGF,0BACE,+BAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACI,WACA,SACA,kBACA,gBACA,eAGJ,SACI,kBACA,qBACA,8BAEA,sBACI,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIR,4BACE,mBACA,UCxEF,QACI,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGJ,cACE,WACA,UAGF,uBACE,WCTF,MACI,sBACA,4BACA,kCACA,4BACA,iBACA,aACA,WAGJ,UACI,cAGJ,KACI,mBACA,SACA,mCACA,kCACA,0BACA,gBAGJ,WACI,0BACA","file":"index.css"}

src/index.css

@@ -1,16 +0,0 @@
-body {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: 'Lexend Deca';
-  }
-  
-  @font-face {
-    font-family: 'Lexend Deca'; /* IE9 Compat Modes */
-    src: url('/src/fonts/LexendDeca-Regular.woff2') format('woff2'), /* Super Modern Browsers */
-         url('/src/fonts/LexendDeca-Regular.woff') format('woff'), /* Pretty Modern Browsers */
-         url('/src/fonts/LexendDeca.ttf')  format('truetype'); /* Safari, Android, iOS */
-  }
-  code {
-    font-family: 'Lexend Deca';
-  }

src/index.js

@@ -1,15 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App.jsx';
-import * as serviceWorker from './serviceWorker';
+import App from './App';
+
+import './scss/index.scss';
+import 'react-toastify/dist/ReactToastify.css';
 
 ReactDOM.render(
-    <App />,
+    <App/>,
     document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-// Was unregister(), now register() - Derpy
-serviceWorker.register();

src/modules/Clock.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-const checkTime = (i) => {
-  if (i < 10) i = '0' + i;
-  return i;
-};
-
-export default class Clock extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      date: ``,
-      ampm: ``,
-    };
-  }
-
-  startTime() {
-    const today = new Date();
-    let h       = today.getHours();
-    const ampm  = h >= 12 ? 'PM' : 'AM';
-    const m     = checkTime(today.getMinutes());
-    // const s = checkTime(today.getSeconds());
-
-    if (h > 12) h = h - 12;
-
-    if (h < 12) this.setState({ date: '0' + h + ':' + m, ampm: ampm });
-    else this.setState({ date: h + ':' + m, ampm: ampm });
-
-    this.timeout = setTimeout(() => this.startTime(), 500);
-  }
-
-  componentDidMount() {
-    this.startTime();
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-  }
-
-  render() {
-    return <h1 className='App-clock'>
-      {this.state.date}
-      <span className='App-ampm-specifier'>
-        {this.state.ampm}  
-      </span>
-    </h1>;
-  }
-}

src/modules/Credit.jsx

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

src/modules/Greeting.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export default class Greeting extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        greeting: ``
-    };
- }
-
-  getGreeting() {
-    const h            = new Date().getHours();
-    let t              = 'Good evening'; // Set the default time string to "Good evening"	
-    if (h < 12) t      = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
-    else if (h < 18) t = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
-    this.setState({ greeting: t }); // Set the state to the time string
-  }
-
-  componentDidMount() {
-    this.getGreeting();
-  }
-  
-  render() {
-    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
-  }
-}

src/modules/Quote.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import Fetch from 'unfetch';
-import quotes from '../quotes.json';
-
-export default class Quote extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-        quote: ``,
-        author: ``
-    };
-  }
-
-  async getQuote() {
-    try {
-      let data = await Fetch('https://api.muetab.xyz/getQuote');
-      data     = await data.json();
-      this.setState({ quote: data.quote, author: data.author });
-    } catch (e) {
-      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
-      const num       = randomInt(1, 20);
-      this.setState({ quote: quotes[num].quote, author: quotes[num].author });
-    }
-  }
-
-  componentDidMount() {
-    this.getQuote();
-  }
-
-  render() {
-    return [
-    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
-    // <i class="material-icons">perm_identity</i>,
-    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
-    ];
-  }
-}

src/modules/Search.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default class Search extends React.Component {
-  render() {
-    return (
-    <div id='searchBar' className='search-bar'>
-    <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/modules/UpdateModal.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default class UpdateModal extends React.Component {
-
-  openModal() {
-      
-  }
-
-  componentDidMount() {
-      
-  }
-
-  componentWillUnmount() {
-    if (!this.timeout) return;
-    clearTimeout(this.timeout);
-  }
-
-  render() {
-    return;
-  }
-}

src/modules/constants.js

@@ -0,0 +1,4 @@
+export const API_URL = 'https://api.muetab.xyz';
+export const UNSPLASH_URL = 'https://unsplash.muetab.xyz';
+export const MARKETPLACE_URL = 'https://marketplace.muetab.xyz';
+export const OFFLINE_IMAGES = 20;

src/modules/defaultSettings.json

@@ -0,0 +1,86 @@
+[
+    {
+        "name": "time",
+        "value": true
+    },
+    {
+        "name": "greeting",
+        "value": true
+    },
+    {
+        "name": "background",
+        "value": true
+    },
+    {
+        "name": "quote",
+        "value": true
+    },
+    {
+        "name": "searchBar",
+        "value": true
+    },
+    {
+        "name": "blur",
+        "value": 0
+    },
+    {
+        "name": "brightness",
+        "value": 100
+    },
+    {
+        "name": "events",
+        "value": true
+    },
+    {
+        "name": "customBackgroundColour",
+        "value": ""
+    },
+    {
+        "name": "customBackground",
+        "value": ""
+    },
+    {
+        "name": "greetingName",
+        "value": ""
+    },
+    {
+        "name": "defaultGreetingMessage",
+        "value": true
+    },
+    {
+        "name": "backgroundAPI",
+        "value": "mue"
+    },
+    {
+        "name": "ampm",
+        "value": true
+    },
+    {
+        "name": "copyButton",
+        "value": false
+    },
+    {
+        "name": "installed",
+        "value": "[]"
+    },
+    {
+        "name": "searchEngine",
+        "value": "duckduckgo"
+    },
+    {
+        "name": "refresh",
+        "value": true
+    },
+    {
+        "name": "view",
+        "value": true
+    },
+    {
+        "name": "favouriteEnabled",
+        "value": true
+    },
+    {
+        "name": "tweetButton",
+        "value": false
+    }
+]

src/modules/marketplaceFunctions.js

@@ -0,0 +1,44 @@
+import { toast } from 'react-toastify';
+
+export default class MarketplaceFunctions {
+    static urlParser (input) { // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
+        const urlPattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/;
+        return input.replace(urlPattern, '<a href="$&" target="_blank">$&</a>');
+    }
+
+    static uninstall(name, type) {
+        let installed = JSON.parse(localStorage.getItem('installed'));
+
+        const uninstallStuff = () => {
+          for (let i = 0; i < installed.length; i++) {
+              if (installed[i].name === name) {
+                  installed.splice(i, 1);
+                  break;
+              }
+          }
+          localStorage.setItem('installed', JSON.stringify(installed));
+        };
+
+        switch (type) {
+            case 'settings':
+              const oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
+              localStorage.clear();
+              oldSettings.forEach(item => localStorage.setItem(item.name, item.value));
+              uninstallStuff();
+              break;
+            case 'quote_packs':
+                localStorage.removeItem('quote_packs');
+                localStorage.removeItem('quote_api');
+                uninstallStuff();
+                break;
+            default:
+              try {
+                  localStorage.removeItem(type);
+                  uninstallStuff();
+              } catch (e) {
+                  toast('Failed to uninstall addon, check the console');
+                  console.error(e);
+              }
+          }
+    }
+}

src/modules/merge.js

@@ -0,0 +1,17 @@
+/**
+ * Merges 2 objects into a huge one
+ * @template T The original object
+ * @template U The object that is returned
+ * @param {...T} items The objects to merge
+ * @returns {U} The merged object
+ */
+export const merge = (...items) => {
+  const obj = {};
+  for (let i = 0; i < items.length; i++) {
+    for (const k in items[i]) {
+      if (!obj.hasOwnProperty(k)) obj[k] = items[i][k];
+    }
+  }
+
+  return obj;
+};

src/modules/offlineImages.json

@@ -0,0 +1,20 @@
+{
+    "Tirachard Kumtanom" : {
+        "photo": [1]
+    },
+    "Sohail Na": {
+        "photo": [4]
+    },
+    "Miriam Espacio": {
+        "photo": [7]
+    },
+    "Fabian Wiktor": {
+        "photo": [20]
+    },
+    "Pixabay": {
+        "photo": [2, 3, 9, 11, 13, 14, 15]
+    },
+    "Unknown" : {
+        "photo": [5, 6, 8, 10, 12, 16, 17, 18, 19]
+    }
+}

src/modules/searchEngines.json

@@ -0,0 +1,48 @@
+[
+    {
+        "name": "DuckDuckGo",
+        "settingsName": "duckduckgo",
+        "url": "https://duckduckgo.com"
+    },
+    {
+        "name": "Google",
+        "settingsName": "google",
+        "url": "https://google.com/search"
+    },
+    {
+        "name": "Bing",
+        "settingsName": "bing",
+        "url": "https://bing.com/search"
+    },
+    {
+        "name": "Yahoo",
+        "settingsName": "yahoo",
+        "url": "https://search.yahoo.com/search"
+    },
+    {
+        "name": "Ecosia",
+        "settingsName": "ecosia",
+        "url": "https://ecosia.org/search"
+    },
+    {
+        "name": "Яндекс",
+        "settingsName": "yandex",
+        "url": "https://yandex.ru/search",
+        "query": "text"
+    },
+    {
+        "name": "Qwant",
+        "settingsName": "qwant",
+        "url": "https://www.quant.com/"
+    },
+    {
+        "name": "Ask",
+        "settingsName": "ask",
+        "url": "https://ask.com/web"
+    },
+    {
+        "name": "Startpage",
+        "settingsName": "startpage",
+        "url": "https://www.startpage.com/sp/search"
+    }
+]

src/modules/settingsFunctions.js

@@ -0,0 +1,99 @@
+import detectBrowserLanguage from 'detect-browser-language';
+
+const saveFile = (data, filename = 'file') => {
+    if (!data) return console.error('No data');
+    if (typeof data === 'object') data = JSON.stringify(data, undefined, 4);
+
+    const blob = new Blob([data], { type: 'text/json' });
+    let e = document.createEvent('MouseEvents');
+    let a = document.createElement('a');
+
+    a.href = window.URL.createObjectURL(blob);
+    a.download = filename;
+    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
+
+    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    a.dispatchEvent(e);
+};
+
+const defaultSettings = require('./defaultSettings.json');
+
+export default class SettingsFunctions {
+    static exportSettings() {
+        let settings = {};
+        for (const key of Object.keys(localStorage)) settings[key] = localStorage.getItem(key);
+        saveFile(settings, 'mue-settings.json');
+    }
+
+    static setItem(key, value) {
+        const old = localStorage.getItem(key);
+        let val = true;
+
+        if (old !== null && !value) {
+            if (old === 'true') val = false;
+            if (old === 'false') val = true;
+        }
+
+        localStorage.setItem(key, val);
+    }
+
+    static toggleExtra(element, element2) {
+        (element.style.display === 'none' || !element.style.display) ? element.style.display = 'block' : element.style.display = 'none';
+        (element2.style.transform === 'rotate(-180deg)') ? element2.style.transform = 'rotate(0)' : element2.style.transform = 'rotate(-180deg)';
+    }
+
+    static setSearchEngine(input) {
+        const searchEngineInput = document.getElementById('searchEngineInput');
+        if (input === 'custom') {
+          searchEngineInput.enabled = 'true';
+          searchEngineInput.style.display = 'block';
+        } else {
+          searchEngineInput.style.display = 'none';
+          searchEngineInput.enabled = 'false';
+          localStorage.setItem('searchEngine', input);
+        }
+    }
+
+    static saveStuff() {
+        localStorage.setItem('blur', document.getElementById('blurRange').value);  // this is better than inline onChange for performance
+        localStorage.setItem('brightness', document.getElementById('brightnessRange').value);
+        localStorage.setItem('greetingName', document.getElementById('greetingName').value);
+        localStorage.setItem('customBackground', document.getElementById('customBackground').value);
+        if (document.getElementById('customBackgroundHex').textContent !== 'Disabled') {
+            localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').textContent);
+        }
+        if (document.getElementById('searchEngineInput').enabled === 'true') {
+          const input = document.getElementById('customSearchEngine').value;
+          if (input) {
+            localStorage.setItem('searchEngine', 'custom');
+            localStorage.setItem('customSearchEngine', input);
+          }
+        }
+        window.location.reload();
+    }
+
+    static setDefaultSettings() {
+        localStorage.clear();
+        defaultSettings.forEach((element) => localStorage.setItem(element.name, element.value));
+
+        // Set theme depending on user preferred
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) localStorage.setItem('darkTheme', true);
+        else localStorage.setItem('darkTheme', false);
+
+        // Webp support
+        const supportsWebP = require('supports-webp'); // We import it here so it doesn't run the function on each page load
+        if (supportsWebP) localStorage.setItem('supportswebp', 'true');
+
+        // Languages
+        const languages = ['nl', 'no', 'fr', 'ru'];
+        const browserLanguage = detectBrowserLanguage();
+        if (languages.includes(browserLanguage)) {
+            localStorage.setItem('language', browserLanguage);
+            document.documentElement.lang = browserLanguage;
+        } else localStorage.setItem('language', 'en');
+
+        // Finally we set this to true so it doesn't run the function on every load
+        localStorage.setItem('firstRun', true);
+        window.location.reload();
+    }
+}

src/quotes.json

@@ -1,82 +0,0 @@
-{
-    "1": {
-        "author": "Robert De Niro",
-        "quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
-    },
-    "2": {
-        "author": "Walt Disney",
-        "quote": "All our dreams can come true, if we have the courage to pursue them."
-    },
-    "3": {
-        "author": "Confucius",
-        "quote": "It does not matter how slowly you go as long as you do not stop."
-    },
-    "4": {
-        "author": "Roy T. Bennett",
-        "quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
-    },
-    "5": {
-        "author": "Wayne Dyer",
-        "quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
-    },
-    "6": {
-        "author": "George Addair",
-        "quote": "Everything you’ve ever wanted is on the other side of fear."
-    },
-    "7": {
-        "author": "Winston Churchill",
-        "quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
-    },
-    "8": {
-        "author": "Paulo Coelho",
-        "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
-    },
-    "9": {
-        "author": "Brian Tracy",
-        "quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
-    },
-    "10": {
-        "author": "Chantal Sutherland",
-        "quote": "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."
-    },
-    "11": {
-        "author": "Les Brown",
-        "quote": "Too many of us are not living our dreams because we are living our fears."
-    },
-    "12": {
-        "author": "Bob Riley",
-        "quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
-    },
-    "13": {
-        "author": "Jack Canfield",
-        "quote": "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."
-    },
-    "14": {
-        "author": "Napolean Hill",
-        "quote": "Whatever the mind can conceive and believe, it can achieve."
-    },
-    "15": {
-        "author": "Jim Rohn",
-        "quote": "Don’t wish it were easier. Wish you were better."
-    },
-    "16": {
-        "author": "Serena Williams",
-        "quote": "A champion is defined not by their wins but by how they can recover when they fall."
-    },
-    "17": {
-        "author": "Sheryl Sandberg",
-        "quote": "Motivation comes from working on things we care about."
-    },
-    "18": {
-        "author": "Reese Witherspoon",
-        "quote": "With the right kind of coaching and determination you can accomplish anything."
-    },
-    "19": {
-        "author": "Hazrat Inayat Khan",
-        "quote": "Some people look for a beautiful place. Others make a place beautiful."
-    },
-    "20": {
-        "author": "Albert Einstein",
-        "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
-    }
-}

src/scss/_mixins.scss

@@ -0,0 +1,28 @@
+// credit: https://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-animations/
+@mixin animation($animate...) {
+    $max: length($animate);
+    $animations: '';
+
+    @for $i from 1 through $max {
+        $animations: #{$animations + nth($animate, $i)};
+
+        @if $i < $max {
+            $animations: #{$animations + ', '};
+        }
+    }
+    -webkit-animation: $animations;
+    -moz-animation: $animations;
+    animation: $animations;
+}
+
+@mixin keyframes($animationName) {
+    @-webkit-keyframes #{$animationName} {
+        @content;
+    }
+    @-moz-keyframes #{$animationName} {
+        @content;
+    }
+    @keyframes #{$animationName} {
+        @content;
+    }
+}