part 2

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

.env

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

.github/ISSUE_TEMPLATE/bug-report.md

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

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,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

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

LICENSE

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

README.md

@@ -1,62 +1,88 @@
-![Logo](https://github.com/muetab/branding/raw/master/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
+> <a href="https://muetab.xyz/">Mue</a>
-[![Discord Badge](https://discordapp.com/api/guilds/336039472250748928/widget.png)](https://discord.gg/HJmmmTB)
 
-Fast, open and free-to-use new tab page for most modern browsers.
+[![License](https://img.shields.io/badge/license-BSD%203-blue?style=flat-square)](/LICENSE) [![Discord](https://img.shields.io/discord/659129207208804381?label=discord&color=7289DA&style=flat-square)](https://discord.gg/zv8C9F8) [![Code Size]( https://img.shields.io/github/languages/code-size/mue/mue?color=green&label=size&style=flat-square)]()
+<br>
+[![Microsoft Edge](https://img.shields.io/badge/dynamic/json?style=flat-square&label=microsoft%20edge&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Faepnglgjfokepefimhbnibfjekidhmja)](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja) [![Firefox](https://img.shields.io/amo/v/mue?label=firefox&style=flat-square)](https://addons.mozilla.org/firefox/addon/mue) [![Chrome](https://img.shields.io/chrome-web-store/v/bngmbednanpcfochchhgbkookpiaiaid?label=chrome&style=flat-square)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+
+Mue is a fast, open and free-to-use browser extension that gives a new, fresh and customizable tab page to most modern browsers
+
+<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
+*May be updated in the future*
+
+![Screenshot](assets/screenshot.jpg)
 
 ## Features
 * Fast and free
 * Supports multiple browsers
-* Actively developed and opensource
+* Actively developed and open source
-* Automatically updating API (with no tracking!) with new photos, quotes and offline mode
+* Automatically updating API (no tracking) with new photos, quotes and offline mode
-* ~~Multiple language support~~
+* Search bar
-* ~~Settings feature - enable/disable features!~~
+* Settings - enable/disable various features and customise parts of Mue
-* Search bar, ~~update modal, copy button and more!~~
+* 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*
 
 ## Installation
+*A demo of the tab can be found [here](https://demo.muetab.xyz)*
 ### Chrome
 [![Chrome Web Store Logo](assets/chrome.png)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+<br>
+[Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 
-Link: [Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
-
-Development: Read the [Development](#development) section.
 ### Firefox
 [![Firefox Add-ons Logo](assets/firefox.png)](https://addons.mozilla.org/firefox/addon/mue)
+<br>
+[Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
 
-Link: [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
+### Edge (Chromium)
+[Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)
 
-Development: Read the [Development](#development) section.
 ### Opera/Other
-Link: [GitHub Releases](https://github.com/ohlookitsderpy/Mue/releases)
+[GitHub Releases](https://github.com/mue/mue/releases)
 
-Development/Other: Read the [Development](#development) section.
 ### Development
-##### Requirements
+#### Requirements
 <ol>
-  <li><a href='https://git-scm.com'>Git</a> (optional)</li>
+  <li><a href='https://git-scm.com'>Git</a></li>
-  <li><a href='https://nodejs.org'>Node.js</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/muetab/mue</code> (If you don't have Git just go to <b>Clone or
+  <li> Clone the repository using <code>git clone https://github.com/mue/mue.git</code>
-      download</b> and click <b>Download ZIP</b>)
+  <li> Run <code>yarn</code> or <code>npm i</code> to install all needed dependencies
-  <li> Open a terminal and run these commands: (in the Mue directory)
+  <li> Run <code>yarn start</code> or <code>npm start</code> to start testing
-  <li> <code>yarn</code> (or <code>npm i</code>)
+  <li> Code your heart out! (See the sections below for how to build the extension)
-  <li> <code>yarn run all</code> (or <code>npm run all</code>)
-  <li> Start developing! (See the sections below for how to set up a developer copy of the extension.)
 </ol>
-<h2>Building</h5>
+<h2>Building</h2>
-<i>This section is a work in progress, and doesn't include the manual edits you are required to do to get it working without errors. 
-Once I find a method to do it automatically, I will update this section accordingly.</i>
 <details>
-  <summary><b>Chrome</b> (Click to expand)</summary>
+  <summary><b>Chrome/Edge (Chromium)</b> (Click to expand)</summary>
   <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
+    <li> <code>yarn run build</code> or <code>npm run build</code>
-    <li> Rename <code>manifest-chrome.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
+    <li> Rename <code>manifest-chrome.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build"
     <li> Visit <code>chrome://extensions</code> in Chrome
     <li> Click <b>Load unpacked</b> (Make sure <b>Developer Mode</b> is on)
     <li> Go to the directory containing the built copy of Mue and click <b>ok</b>
@@ -65,8 +91,9 @@ Once I find a method to do it automatically, I will update this section accordin
 <details>
   <summary><b>Opera</b> (Click to expand)</summary>
   <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
+    <li> <code>yarn run build</code> or <code>npm run build</code>
-    <li> Rename <code>manifest-opera.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
+    <li> Rename <code>manifest-opera.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build"
+    <li> Copy <code>background-opera.js</code> in the "manifest" folder to "build"
     <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>
@@ -74,11 +101,9 @@ Once I find a method to do it automatically, I will update this section accordin
 </details>
 <details>
   <summary><b>Firefox</b> (Click to expand)</summary>
-  <i>Note: I'm currently trying to find a better method to do this, but this works for now.</i>
   <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
+    <li> <code>yarn run build</code> or <code>npm run build</code>
-    <li> Rename <code>manifest-firefox.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React) 
+    <li> Rename <code>manifest-firefox.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build"
-    <li> Move <code>manifest/background-opera.js</code> to <code>build/background-opera.js</code>   
     <li> Visit <code>about:debugging#addons</code> in Firefox
     <li> Click <b>Load Temporary Add-on</b>
     <li> Go to the directory containing Mue and click on the <b>manifest.json</b>
@@ -89,51 +114,30 @@ Once I find a method to do it automatically, I will update this section accordin
   <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*
-
-![Screenshot](assets/screenshot.jpg)
-
 ## Credits
 ### Maintainers
-[ohlookitsderpy](https://github.com/ohlookitsderpy) (lead dev)
+[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) (name idea, code contributions)
+### 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)
 
 ### Other
 [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
-
 [Google Fonts](https://fonts.google.com/specimen/Lexend+Deca) - Lexend Deca font
 
-### Translations
+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
-[ohlookitsderpy](https://github.com/ohlookitsderpy) - English (Quotes and Messages)
-
-[Yanderella](https://github.com/gbacretin) - Italian (Quotes and Messages)
-
-Pepehound - Spanish (Quotes and Messages)
-
-Candystick - Portuguese (Some Quotes)
-
-[PassTheWessel](https://github.com/PassTheWessel) - Dutch (Messages)
-
-[Yanderella](https://github.com/gbacretin) and [ohlookitsderpy](https://github.com/ohlookitsderpy) - French (Messages)
-
-[untocodes](https://github.com/untocodes) - Finnish and German (Messages)
-
-[dondish](https://github.com/dondish) - Hebrew and Russian (Messages)
-
-[Roee Lupo (MrSheldon)](https://github.com/MrSheldon) - Arabic and Swedish (Messages)
-
-*Feel free to pull request with other translations!*
-
-and all the contributors <3
-
-# License
-Code - [BSD-3-Clause](LICENSE)

manifest/chrome.json

@@ -3,11 +3,16 @@
     "offline_enabled": true,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7",
+    "version": "4.0.0",
     "browser_action": {
-        "default_icon": "./extension-icon.png"
+        "default_icon": "./icons/extension-icon.png"
     },
     "chrome_url_overrides": {
         "newtab": "index.html"
-    }
+    },
+    "icons": {
+		"16": "./icons/16x16-circle.png",
+		"48": "./icons/48x48-circle.png",
+		"128": "./icons/128x128-circle.png"
+	}
 }

manifest/firefox.json

@@ -2,9 +2,9 @@
     "manifest_version": 2,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7",
+    "version": "4.0.0",
     "browser_action": {
-        "default_icon": "./extension-icon.png"
+        "default_icon": "./icons/extension-icon.png"
     },
     "chrome_url_overrides": {
         "newtab": "index.html"
@@ -12,4 +12,4 @@
     "chrome_settings_overrides": {
         "homepage": "index.html"
     }
-}
+}

manifest/opera.json

@@ -2,9 +2,9 @@
     "manifest_version": 2,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "0.7",
+    "version": "4.0.0",
     "browser_action": {
-        "default_icon": "./extension-icon.png"
+        "default_icon": "./icons/extension-icon.png"
     },
     "background": {
         "scripts": [

package.json

@@ -4,31 +4,39 @@
   "author": "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.xyz> (https://derpyenterprises.org)",
   "maintainers": [
     "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.xyz> (https://derpyenterprises.org)",
-    "Alex \"TurboMarshmello\" Sparkes <a.sparkes@muetab.xyz> (https://github.com/TurboMarshmello)"
+    "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.",
   "repository": {
-    "url": "github:muetab/mue"
+    "url": "github:mue/mue"
   },
   "homepage": "https://muetab.xyz",
-  "bugs": "https://github.com/muetab/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
+  "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
   "license": "BSD-3-Clause",
-  "version": "0.7.0",
+  "version": "4.0.0",
   "dependencies": {
-    "@material-ui/core": "4.7.0",
+    "@eartharoid/dtf": "^1.0.7",
-    "@material-ui/icons": "^4.5.1",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@muetab/quotes": "^1.0.0",
-    "react": "^16.12.0",
+    "detect-browser-language": "0.0.2",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.1",
-    "react-scripts": "3.3.0"
+    "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.7.2",
+    "react-scripts": "3.4.1",
-    "node-sass": "^4.13.0"
+    "node-sass": "^4.14.1"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build"
+    "build": "react-scripts build",
+    "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"

public/icons/iconmonstr-twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>

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,17 +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='icon' type='image/png' sizes='32x32' href='./icons/favicon-32x32.png'>
+    <link rel='icon' type='image/png' sizes='16x16' href='./icons/favicon-16x16.png'>
+    <title>New Tab</title>
+  </head>
 
-<head>
+  <body>
-  <meta charset='utf-8' />
+    <noscript>You need to enable JavaScript to use Mue.</noscript>
-  <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <div id='root'></div>
-  <link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>
+  </body>
-  <link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
-  <title>New Tab</title>
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to use Mue.</noscript>
-  <div id='root'></div>
-</body>
 
 </html>

src/App.jsx

@@ -1,28 +1,119 @@
-//* Imports
 import React from 'react';
-import Background from './components/Background';
+import Background from './components/widgets/Background';
-import Clock from './components/Clock';
+import Clock from './components/widgets/Clock';
-import Greeting from './components/Greeting';
+import Greeting from './components/widgets/Greeting';
-import Quote from './components/Quote';
+import Quote from './components/widgets/Quote';
-import Search from './components/Search';
+import Search from './components/widgets/Search';
-import Credit from './components/Credit';
+import Navbar from './components/Navbar';
-//import Navbar from './components/Navbar';
+import SettingsFunctions from './modules/settingsFunctions';
-import './scss/index.scss'; 
+import { ToastContainer } from 'react-toastify';
+import Modal from 'react-modal';
+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
+    };
+  }
 
-//* App
-export default class App extends React.Component {
   // 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')}.json`);
+
+    const theme = localStorage.getItem('theme');
+    if (theme) {
+      let style = document.createElement('link');
+      style.href = theme;
+      style.rel = 'stylesheet';
+      document.head.appendChild(style);
+    }
+
     return (
       <React.Fragment>
         <Background/>
-        <Search/>
+        <ToastContainer className='toast' position='bottom-right' autoClose={2500} hideProgressBar={false} newestOnTop={true} closeOnClick rtl={false} pauseOnFocusLoss />
-          <div id='center'>
+        <div id='center'>
-              <Greeting/>
+          <Search language={language.search} />
-              <Clock/> 
+          <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
-              <Quote/>
+          <Greeting language={language.greeting} />
-              <Credit/>
+          <Clock/>
+          <Quote language={language.toasts}/>
+          <div className='credits'>
+            <h1 id='photographer'>{language.credit}</h1>
+            <div id='backgroundCredits' className='tooltip'>
+              <RoomIcon className='locationicon'/>
+              <span className='tooltiptext' id='location'/>
+            </div>
           </div>
+          <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}
+                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>
     );
   }

src/components/Background.jsx

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

src/components/Clock.jsx

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

src/components/Credit.jsx

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

src/components/Greeting.jsx

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

src/components/Navbar.jsx

@@ -1,17 +1,26 @@
-//* Imports
-import RefreshIcon from '@material-ui/icons/Refresh';
-import LocalPizzaIcon from '@material-ui/icons/LocalPizza';
 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.Component {
+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 = '';
+
+    const viewedUpdate = localStorage.getItem('viewedUpdate');
+    let update = <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />;
+    if (viewedUpdate === 'false') update =  <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
+
     return (
       <div className='navbar-container'>
         <div className='navbar1'>
-              <RefreshIcon className='locationicon'/>
+          <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
         </div>
-        <div className='navbar2'>
+        {refreshHTML}
-            <LocalPizzaIcon className='pizzaicon'/>
+        <div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
+        {update}
         </div>
       </div>
     );

src/components/Quote.jsx

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

src/components/Search.jsx

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

src/components/modals/Addons.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { toast } from 'react-toastify';
+import dtf from '@eartharoid/dtf';
+import Item from './marketplace/Item';
+import MarketplaceFunctions from '../../modules/marketplaceFunctions';
+
+export default class Addons extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            installed: [],
+            item_data: {
+                name: 'Name',
+                author: 'Author',
+                description: 'Description',
+                updated: '???',
+                version: '1.0.0',
+                icon: ''
+            }
+        }
+    }
+
+    async toggle(type, type2, data) {
+        if (type === 'item') {
+            let installed = JSON.parse(localStorage.getItem('installed'));
+            let info = installed.find(i => i.name === data).content;
+            this.setState({
+                current_data: { type: type2, name: data, content: info },
+                item_data: {
+                    name: info.data.name,
+                    author: info.data.author,
+                    description: MarketplaceFunctions.urlParser(info.data.description.replace(/\n/g, '<br>')),
+                    updated: dtf('n_D MMM YYYY', info.updated, 'en-GB'),
+                    version: info.data.version,
+                    icon: info.data.screenshot_url
+                }
+             });
+            document.getElementById('marketplace').style.display = 'none';
+            document.getElementById('item').style.display = 'block';
+         } else {
+            document.getElementById('marketplace').style.display = 'block';
+            document.getElementById('item').style.display = 'none';
+        }
+    }
+
+    uninstall() {
+        let installed = JSON.parse(localStorage.getItem('installed'));
+
+        const uninstallStuff = () => {
+            for (let i = 0; i < installed.length; i++) {
+                if (installed[i].name === this.state.current_data.name) {
+                    installed.splice(i, 1);
+                    break;
+                }
+            }
+            localStorage.setItem('installed', JSON.stringify(installed));
+            toast(this.props.toastLanguage.removed);
+            this.toggle();
+            this.componentDidMount();
+        }
+
+        switch (this.state.current_data.type) {
+            case 'settings':
+                let oldSettings = JSON.parse(localStorage.getItem('backup_settings'));
+                localStorage.clear();
+                oldSettings.forEach(item => localStorage.setItem(item.name, item.value));
+                uninstallStuff();
+                break;
+            default:
+                try {
+                    localStorage.removeItem(this.state.current_data.type);
+                    uninstallStuff();
+                } catch (e) {
+                    console.log('invalid');
+                }
+        }
+    }
+
+  componentDidMount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+    this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
+  }
+
+  componentWillUnmount() {
+    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
+    document.getElementById('center').classList.toggle('backgroundEffects');
+  }
+
+  render() {
+     if (this.state.installed.length === 0) {
+         return <div className='content'>
+         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+         <h1>{this.props.modalLanguage.title}</h1>
+             <div className="tab">
+               <button className="tablinks" onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+               <button className="tablinks" id="active">{this.props.modalLanguage.addons}</button>
+               <button className="tablinks" onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+            </div>
+         <div id='marketplace'>
+         { /*<input id='file-input' type='file' name='name' className='hidden' />
+        <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button> */}
+           <h1>{this.props.language.added}</h1>
+           <div className="items">
+               <div className="emptyMessage">
+                    <LocalMallIcon />
+                    <h1>{this.props.language.empty.title}</h1>
+                    <p className="description">{this.props.language.empty.description}</p>
+                    <button className="goToMarket" onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
+              </div>
+           </div>
+         </div>
+         </div>
+     }
+
+    return <div className='content'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1>{this.props.modalLanguage.title}</h1>
+             <div className="tab">
+               <button className="tablinks" onClick={this.props.openMarketplace}>{this.props.modalLanguage.marketplace}</button>
+               <button className="tablinks" id="active">{this.props.modalLanguage.addons}</button>
+               <button className="tablinks" onClick={this.props.openSettings}>{this.props.modalLanguage.settings}</button>
+            </div>
+        <div id='marketplace'>
+       { /*<input id='file-input' type='file' name='name' className='hidden' />
+        <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>Sideload</button> */}
+        <h1>{this.props.language.added}</h1>
+          <div className="items">
+              {this.state.installed.map((item) =>
+                   <div className="item" onClick={()=> this.toggle('item', item.type, item.name)}>
+                   <img alt="icon" src={item.content.data.icon_url} />
+                   <div className="details">
+                       <h4>{item.content.data.name}</h4>
+                       <p>{item.content.data.author}</p>
+                   </div>
+               </div>)}
+          </div>
+        </div>
+        <Item button={<button className="removeFromMue" onClick={() => this.uninstall()}>{this.props.language.product.buttons.remove}</button>} data={this.state.item_data} function={()=> this.toggle()} language={this.props.language.product} />
+    </div>;
+    }
+}

src/components/modals/Marketplace.jsx

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

src/components/modals/Settings.jsx

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

src/components/modals/Update.jsx

@@ -0,0 +1,48 @@
+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: '26/08/2020',
+      content: this.props.language.title
+    };
+ }
+
+ async getUpdate() {
+  if (localStorage.getItem('offlineMode') === 'true') return this.setState({
+    title: this.props.language.offline.title,
+    content: this.props.language.offline.description
+  });
+
+  try { // Get update log from the API
+    let data = await fetch(Constants.API_URL + '/getUpdate');
+    data = await data.json();
+    this.setState({
+      title: data.title,
+      content: data.content
+    });
+  } catch (e) { // If it fails, we send an error
+    this.setState({
+      title: this.props.language.error.title,
+      content: this.props.language.error.description
+    });
+  }
+ }
+
+ componentDidMount() {
+   localStorage.setItem('viewedUpdate', true);
+   this.getUpdate();
+ }
+
+  render() {
+    return <div className='updateContent'>
+        <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
+        <h1 style={{ 'marginBottom':'-10px' }} dangerouslySetInnerHTML={{__html: this.state.title}}></h1>
+        <h5 style={{ 'lineHeight':'0px' }}> By Mue • <span dangerouslySetInnerHTML={{__html: this.state.date}}></span></h5>
+        <p dangerouslySetInnerHTML={{__html: this.state.content}}></p>
+      </div>;
+    }
+}

src/components/modals/Welcome.jsx

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

src/components/modals/marketplace/Item.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+export default class Item extends React.PureComponent {
+  render() {
+    return (
+      <div id='item'>
+      <br/>
+      <ArrowBackIcon className='backArrow' onClick={this.props.function} />
+      <br/>
+      <h1>{this.props.data.name}</h1>
+      {this.props.button}
+      <br/><br/>
+      <img alt="product" src={'https://external-content.duckduckgo.com/iu/?u=' + this.props.data.icon} />
+      <div className="informationContainer">
+      <div className="productInformation">
+          <h4>{this.props.language.information}</h4>
+          <ul>
+              <br/>
+              <li className="header">{this.props.language.last_updated}</li>
+              <li>{this.props.data.updated}</li>
+              <br/>
+              <li className="header">{this.props.language.version}</li>
+              <li>{this.props.data.version}</li>
+              <br/>
+              <li className="header">{this.props.language.author}</li>
+              <li>{this.props.data.author}</li>
+          </ul>
+      </div>
+      <div className="productInformation">
+          <ul>
+              <li className="header">{this.props.language.notice.title}</li>
+              <li id='updated'>{this.props.language.notice.description}</li>
+          </ul>
+      </div>
+      </div>
+      <br/>
+      <h1>{this.props.language.overview}</h1>
+      <p className="description" dangerouslySetInnerHTML={{__html: this.props.data.description}}></p>
+    </div>
+    );
+  }
+}

src/components/modals/marketplace/Items.jsx

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

src/components/modals/settings/Checkbox.jsx

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

src/components/modals/settings/Slider.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import SettingsFunctions from '../../../modules/settingsFunctions';
+
+export default class Slider extends React.PureComponent {
+  render() {
+    let setText = this.props.name;
+    if (this.props.override) setText = this.props.override;
+    return (
+        <label className="switch">
+          <input type="checkbox" onClick={() => SettingsFunctions.setItem(setText)} id={this.props.name + 'Status'}  />
+          <span className="slider"></span>
+        </label>
+    );
+  }
+}

src/components/widgets/Background.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import supportsWebP from 'supports-webp';
+import * as Constants from '../../modules/constants';
+
+export default class Background extends React.PureComponent {
+  doOffline() {
+    const photo = Math.floor(Math.random() * (Constants.OFFLINE_IMAGES - 1 + 1)) + 1; // There are 20 images in the offline-images folder
+    document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+
+    let photographer; // Photographer credit
+    if ([2, 3, 9, 11, 13, 14, 15].includes(photo)) photographer = 'Pixabay';  // As there are a lot of Pixabay photos, we shorten the code a bit here
+    else switch (photo) {
+      case 1: photographer = 'Tirachard Kumtanom'; break;
+      case 4: photographer = 'Sohail Na'; break;
+      case 7: photographer = 'Miriam Espacio'; break;
+      case 10: photographer = 'NO NAME'; break;
+      case 20: photographer = 'Fabian Wiktor'; break;
+      default: photographer = 'Unknown'; break;
+    }
+
+    document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(../offline-images/${photo}.jpeg)`); // Set background and blur etc
+    let credit = document.getElementById('photographer');
+    credit.innerText = `${credit.innerText} ${photographer} (Pexels)`; // Set the credit
+  }
+
+  async setBackground() {
+    if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
+
+    const photoPack = JSON.parse(localStorage.getItem('photo_packs'));
+    if (photoPack) {
+      let background = photoPack[Math.floor(Math.random() * photoPack.length)];
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      document.getElementById('photographer').style.display = 'none';
+      return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${background.url.default})`); // Set background and blur etc
+    }
+
+    const colour = localStorage.getItem('customBackgroundColour');
+    if (colour) {
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      document.getElementById('photographer').style.display = 'none';
+      return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-color: ${colour}`); // Set background and blur etc
+    }
+
+    const custom = localStorage.getItem('customBackground');
+    if (custom !== '') {
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      document.getElementById('photographer').style.display = 'none';
+      return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`); // Set background and blur etc
+    } else {
+      try { // First we try and get an image from the API...
+        let requestURL;
+        const enabled = localStorage.getItem('webp');
+        const backgroundAPI = localStorage.getItem('backgroundAPI');
+        let data;
+
+        switch (backgroundAPI) {
+          case 'mue':
+            if (await supportsWebP && enabled === 'true') requestURL = Constants.API_URL + '/getImage?webp=true';
+            else requestURL = Constants.API_URL + '/getImage?category=Outdoors';
+            break;
+          case 'unsplash':
+            requestURL = 'https://unsplash.muetab.xyz/getImage';
+            break;
+          default:
+            if (await supportsWebP && enabled === 'true') requestURL = Constants.API_URL +'/getImage?webp=true';
+            else requestURL = Constants.API_URL + '/getImage?category=Outdoors';
+            break;
+        }
+
+        data = await fetch(requestURL);
+        data = await data.json();
+
+        document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`); // Set background and blur etc
+        let credit = document.getElementById('photographer');
+        credit.innerText = `${credit.innerText} ${data.photographer}`; // Set the credit
+        document.getElementById('location').innerText = `${data.location}`; // Set the location tooltip
+      } catch (e) { // ..and if that fails we load one locally
+        this.doOffline();
+      }
+    }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('background') === 'false') return document.getElementById('backgroundCredits').style.display = 'none';
+    if (localStorage.getItem('animations') === 'true') document.getElementById('backgroundImage').classList.add('fade-in');
+    this.setBackground();
+  }
+
+  render() {
+    return <div id='backgroundImage'></div>;
+  }
+}

src/components/widgets/Clock.jsx

@@ -0,0 +1,75 @@
+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/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/Quote.jsx

@@ -0,0 +1,70 @@
+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';
+
+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
+  }
+
+  async getQuote() {
+    const quotePack = JSON.parse(localStorage.getItem('quote_packs'));
+    if (quotePack) {
+      const data = quotePack[Math.floor(Math.random() * quotePack.length)]
+      return this.setState({
+        quote: '"' + data.quote + '"',
+        author: data.author
+      });
+    }
+
+    if (localStorage.getItem('offlineMode') === 'true') return this.doOffline();
+
+    try { // First we try and get a quote from the API...
+      let data = await fetch(Constants.API_URL + '/getQuote');
+      data = await data.json();
+      if (data.statusCode === 429) 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 = '';
+
+    return (
+        <div>
+          <h1 className='quote'>{`${this.state.quote}`}</h1>
+          <h1 className='quoteauthor'>{this.state.author} {copy}</h1>
+        </div>
+    )
+  }
+}

src/components/widgets/Search.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import SearchIcon from '@material-ui/icons/Search';
+
+export default class Search extends React.PureComponent {
+  render() {
+    if (localStorage.getItem('searchBar') === 'false') return <div></div>;
+
+    let url;
+    let query = 'q';
+
+    switch (localStorage.getItem('searchEngine')) {
+      case 'duckduckgo': url = 'https://duckduckgo.com'; break;
+      case 'google': url = 'https://google.com/search'; break;
+      case 'bing': url = 'https://bing.com/search'; break;
+      case 'yahoo': url ='https://search.yahoo.com/search'; break;
+      case 'ecosia': url = 'https://ecosia.org/search'; break;
+      case 'yandex': url = 'https://yandex.ru/search'; query = 'text'; break;
+      case 'qwant': url = 'https://www.qwant.com/'; break;
+      case 'ask': url = 'https://ask.com/web'; break;
+      case 'startpage': url = 'https://www.startpage.com/sp/search'; break;
+      default: url = 'https://duckduckgo.com'; break;
+    }
+
+    const searchButton = () => {
+      let value = document.getElementById('searchtext').value;
+      if (!value) value = 'mue fast';
+      window.location.href = url + '?q=' + 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/index.js

@@ -1,9 +1,10 @@
-//* Imports
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
-//* Render
+import './scss/index.scss';
+import 'react-toastify/dist/ReactToastify.css';
+
 ReactDOM.render(
     <App/>,
     document.getElementById('root')

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,66 @@
+[
+    {
+        "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": "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"
+    }
+]

src/modules/marketplaceFunctions.js

@@ -0,0 +1,6 @@
+export default class MarketplaceFunctions {
+    static urlParser (input) { // based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
+        let 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>');
+    }
+}

src/modules/settingsFunctions.js

@@ -0,0 +1,93 @@
+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) {
+        let 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 = 'false';
+          searchEngineInput.style.display = 'block';
+        } else {
+          searchEngineInput.style.display = 'none';
+          searchEngineInput.enabled = 'true';
+          localStorage.setItem('searchEngine', input);
+        }
+    }
+
+    static saveStuff() {
+        localStorage.setItem('blur', document.getElementById('blurRange').value); // this is better than inline onChange for performance
+        localStorage.setItem('greetingName', document.getElementById('greetingName').value);
+        localStorage.setItem('customBackground', document.getElementById('customBackground').value);
+        if (!document.getElementById('searchEngineInput').enabled === 'false') {
+          localStorage.setItem('customSearchEngine', document.getElementById('searchEngineInput').value);
+        }
+        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);
+
+        switch(detectBrowserLanguage()) {
+            case 'nl':
+                localStorage.setItem('language', 'nl');
+                break;
+            case 'no':
+                localStorage.setItem('language', 'no');
+                break;
+            case 'fr':
+                localStorage.setItem('language', 'fr');
+                break;
+            default:
+                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/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;
+    }
+}

src/scss/_variables.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+
+$theme-colours: (
+  'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
+  'main': rgba(242, 243, 244, 1),
+  'secondary': rgba(0, 0, 0, 1),
+  'main-text-color': rgba(242, 243, 244, 1),
+);
+
+$modal: (
+  'background': #fff,
+  'text': rgba(0, 0, 0, 1),
+  'tab-underline': rgba(204, 204, 204, 1),
+  'tab-underline-active': rgba(0, 0, 0, 1),
+  'border-radius': 12px,
+);
+
+$marketplace: (
+    'item-background': rgba(242, 243, 244, 1),
+    'product-information-backgroud': rgba(242, 243, 244, 1),
+);
+
+$button-colours: (
+  'confirm': rgba(46, 213, 115, 1),
+  'reset': rgba(255, 71, 87, 1),
+  'other': rgba(83, 82, 237, 1),
+);
+
+$main-parts: (
+    'shadow':  0 0 1rem 0 rgba(0, 0, 0, .2),
+);

src/scss/index.scss

@@ -1,8 +1,89 @@
-/* Imports */
+@import 'variables';
+@import 'mixins';
+
 @import 'modules/clock';
 @import 'modules/greeting';
 @import 'modules/quote';
 @import 'modules/search';
 @import 'modules/credit';
-/*@import 'modules/navbar';*/
+@import 'modules/navbar';
-@import 'modules/miscellaneous';
+@import 'modules/modal';
+@import 'modules/settings';
+@import 'modules/toast';
+@import 'modules/marketplace';
+@import 'modules/checkbox';
+@import 'modules/buttons';
+@import 'modules/welcome';
+
+body {
+    background: #2f3640;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: 'Lexend Deca', sans-serif;
+    overflow: hidden;
+}
+
+* {
+    font-family: 'Lexend Deca' !important;
+    outline: none;
+}
+
+@font-face {
+    font-family: 'Lexend Deca';
+    src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
+}
+
+#center {
+    margin-left: 2vw;
+    margin-right: 2vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+}
+
+::placeholder {
+    color: map-get($theme-colours, 'main');
+    opacity: 1;
+}
+
+#root {
+    min-height: 100vh;
+    display: grid;
+    color: map-get($theme-colours, 'main-text-color');
+}
+
+#backgroundImage {
+    height: 100vh;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+}
+
+.fade-in {
+    @include animation('fadein 2s');
+}
+
+@include keyframes(fadein) {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+.backgroundEffects {
+    opacity: .7;
+    transition: ease 0.6s;
+}
+
+#searchEngine {
+    width: 130px;
+}

src/scss/modules/_buttons.scss

@@ -0,0 +1,160 @@
+%settingsButton {
+  text-align: center;
+  border: none;
+  transition: ease 0.33s;
+  color: map-get($theme-colours, "main");
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  padding: 10px 30px;
+  font-size: 20px;
+  border-radius: 24px;
+  background: none;
+  &:hover {
+    outline: none;
+  }
+
+  &:active {
+    outline: none;
+  }
+}
+
+.apply {
+  @extend %settingsButton;
+  margin-right: 20px;
+  background-color: map-get($button-colours, "confirm");
+  border: 2px solid map-get($button-colours, "confirm");
+
+  &:hover {
+    border: 2px solid map-get($button-colours, "confirm");
+    color: map-get($button-colours, "confirm");
+    background: none;
+  }
+}
+
+
+.reset {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, "reset");
+  border: 2px solid map-get($button-colours, "reset");
+  margin-left: 5px;
+
+  &:hover {
+    border: 2px solid map-get($button-colours, "reset");
+    color: map-get($button-colours, "reset");
+    background: none;
+  }
+}
+
+.close {
+  @extend %settingsButton;
+  padding: 10px 50px 10px 50px;
+  background-color: map-get($button-colours, "other");
+  border: 2px solid map-get($button-colours, "other");
+
+  &:hover {
+    color: map-get($button-colours, "other");
+    border: 2px solid map-get($button-colours, "other");
+    background: none;
+  }
+}
+
+.export,
+.uploadbg,
+.import {
+  @extend %settingsButton;
+  background-color: map-get($button-colours, "other");
+  border: 2px solid map-get($button-colours, "other");
+  color: map-get($theme-colours, "main");
+
+  &:hover {
+    color: map-get($button-colours, "other");
+    border: 2px solid map-get($button-colours, "other");
+    background: none;
+  }
+}
+
+.export,
+.import {
+  float: right;
+  margin-left: 20px;
+}
+
+.storebutton {
+  cursor: pointer;
+  font-size: 18px;
+  float: right;
+  vertical-align: middle;
+  padding: 5px 30px;
+  background: none;
+  outline: none;
+  border: none;
+  border: 2px solid #2d3436;
+  border-radius: 24px;
+  font-family: 'Lexend Deca', sans-serif;
+  transition: ease 0.33s;
+
+  &:hover {
+    background: #2d3436;
+    color: map-get($theme-colours, "main");;
+    border: 2px solid #2d3436;
+  }
+}
+
+.dark .storebutton {
+  border: 2px solid map-get($theme-colours, "main");
+  color: map-get($theme-colours, "main");
+
+  &:hover {
+    background: map-get($theme-colours, "main");
+    color: #2d3436;
+    border: 2px solid map-get($theme-colours, "main");
+  }
+}
+
+#item >.removeFromMue {
+  border: 2px solid #ff4757;
+  color: #ff4757;
+
+  &:hover {
+    background: #ff4757;
+    color: map-get($theme-colours, "main");;
+    border: 2px solid #ff4757;
+  }
+
+  @extend .storebutton;
+}
+
+#item .addToMue,
+#item .removeFromMue {
+  margin-top: 5px;
+}
+
+.addToMue {
+  @extend .storebutton;
+}
+
+.goToMarket {
+  float: none;
+  @extend .storebutton;
+}
+
+.sideload {
+  margin-top: 12px;
+}
+
+.seemore {
+  margin-top: 12px;
+}
+
+.seemore {
+  @extend %settingsButton;
+  background-color: #2d3436;
+  border: 2px solid #2d3436;
+
+  &:hover {
+    color: #2d3436;
+    border: 2px solid #2d3436;
+    background: none;
+  }
+}

src/scss/modules/_checkbox.scss

@@ -0,0 +1,3 @@
+.MuiCheckbox-colorPrimary.Mui-checked {
+    color: map-get($button-colours, "reset") !important;
+}

src/scss/modules/_clock.scss

@@ -1,9 +1,20 @@
 .clock {
   font-size: 4em;
   margin: 0;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 .ampm {
   font-size: 0.5em;
+}
+
+.analogclock, .react-clock__face {
+  margin: 0 auto;
+  border-radius: 100%;
+  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
+  border: 1px solid map-get($theme-colours, "main");
+}
+
+.react-clock__hand__body {
+  background: map-get($theme-colours, "main");;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }

src/scss/modules/_credit.scss

@@ -17,18 +17,16 @@
 }
 
 .locationicon {
-  font-size: calc(10px + 1.2vmin);
+  width: auto;
   cursor: pointer;
 }
 
-.MuiSvgIcon-root {
+.navbar-container > svg, #backgroundCredits > svg  {
+  font-size: calc(10px + 1.5vmin) !important;
   position: absolute;
   bottom: 2px;
   left: 2px;
-  width: 100em;
+  transition: all 0.5s ease 0s;
-  height: 100em;
-  font-size: 2rem;
-  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.3);
 }
 
 .credits {
@@ -36,34 +34,44 @@
   left: 0px;
   position: absolute;
   text-align: left;
-  min-width: 50px;
+  width: auto;
+  height: auto;
 }
 
 .tooltip {
   position: relative;
   display: inline-block;
-  border-bottom: 1px dotted black;
   bottom: 15px;
   left: 10px;
+  -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
+  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
 
   .tooltiptext {
+    width: 200px;
+    display: inline-block;
     visibility: hidden;
-    background-color: black;
+    border-radius: 12px;
-    color: #fff;
+    background-color: map-get($theme-colours, "main");;
-    text-align: center;
+    color: #000;
-    border-radius: 6px;
+    font-size: calc(10px + 1.2vmin);
-    padding: 20px;
     position: absolute;
     z-index: 1;
+    padding: 15px 32px;
     bottom: 40px;
     left: 60px;
     margin-left: -60px;
     opacity: 0;
     transition: opacity 1s;
+    box-sizing: border-box;
+  }
+
+  &:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
   }
 }
 
-.tooltip:hover .tooltiptext {
+#photographer, .locationicon {
-  visibility: visible;
+  display: inline;
-  opacity: 1;
+  vertical-align: midddle;
 }

src/scss/modules/_greeting.scss

@@ -1,5 +1,4 @@
 .greeting {
     margin: 0;
     font-size: 1.6em;
-    text-shadow: 0 0 25px rgba(0,0,0,0.3);
 }

src/scss/modules/_marketplace.scss

@@ -0,0 +1,287 @@
+.tab,
+button.tablinks {
+  margin-top: -10px;
+  font-size: 24px;
+  background: none;
+  border: none;
+  outline: none;
+  color: map-get($modal, "text");
+}
+
+button.tablinks {
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 12px;
+  padding: 10px 30px 10px 30px;
+
+  &:hover {
+    background: rgba(189, 195, 199, .075);
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    margin: 0 auto;
+    width: 50%;
+    padding-top: 10px;
+    border-bottom: 3px solid map-get($modal, "tab-underline");
+  }
+}
+
+#item a {
+  color: map-get($button-colours, "other");
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+
+#active:after {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 50%;
+  padding-top: 10px;
+  border-bottom: 3px solid map-get($modal, "tab-underline-active");
+}
+
+.dark {
+
+  .tab,
+  button.tablinks {
+    color: white;
+  }
+
+  #active:after {
+    border-image-slice: 1;
+    border-image-source: map-get($theme-colours, "gradient");
+    border-bottom: 3px solid;
+  }
+}
+
+.tab {
+  margin-left: -3px;
+}
+
+.items {
+  display: flex;
+  flex-flow: wrap;
+  align-items: left;
+  justify-content: left;
+  margin-top: -10px;
+
+  .item {
+    position: relative;
+    border-radius: 12px;
+    height: 80px;
+    width: 270px;
+    background: map-get($marketplace, "item-background");
+    transition: 0.5s;
+    cursor: pointer;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    overflow: none;
+
+    img {
+      height: 100%;
+      width: auto;
+      border-radius: 12px 0 0 12px;
+      background: white;
+    }
+
+    h4 {
+      font-size: 20px;
+      line-height: 20px;
+      font-weight: 600;
+    }
+
+    img,
+    .details {
+      display: inline;
+    }
+
+    .details {
+      position: absolute;
+      left: 90px;
+      top: 15px;
+
+      img {
+        margin-left: 10px;
+        height: 15px;
+      }
+    }
+
+    p {
+      margin-top: 5px;
+    }
+
+    p.desc {
+      margin-top: -14px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+.dark .items .item {
+  background: #2d3436;
+}
+
+p.author {
+  margin-top: -5px;
+}
+
+#item {
+  display: none;
+
+  h1 {
+    font-size: 40px;
+  }
+}
+
+#item>h1,
+#item>.MuiSvgIcon-root {
+  display: inline;
+  font-size: 35px !important;
+}
+
+
+p.description {
+  margin-top: 0px;
+}
+
+.emptyMessage {
+  margin: 0 auto;
+  text-align: center;
+  transform: translateY(30%);
+
+  svg {
+    font-size: 50px;
+    line-height: 0px;
+    margin: 0;
+    margin-bottom: -20px;
+  }
+}
+
+.backArrow {
+  position: relative;
+  cursor: pointer;
+
+  &:hover {
+    color: grey;
+  }
+}
+
+.informationContainer {
+  float: right;
+}
+
+.productInformation {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: map-get($marketplace, "product-information-backgroud");
+  width: 200px;
+  border-radius: 12px;
+
+  li {
+    margin-left: -4px;
+    list-style: none;
+  }
+
+  li.header {
+    text-transform: uppercase;
+    color: #787878;
+    list-style: none;
+    margin-left: -5px;
+  }
+}
+
+.dark .productInformation {
+  background: #2d3436;
+}
+
+#item>img {
+  border-radius: 24px;
+  height: 200px;
+  width: auto;
+}
+
+#marketplace {
+  -webkit-animation: content 0.5s;
+  -moz-animation: content 0.5s;
+  -ms-animation: content 0.5s;
+  -o-animation: content 0.5s;
+  animation: content 0.5s;
+}
+
+@keyframes content {
+  from {
+    opacity: 0;
+    transform: translateY(5%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.banner {
+  text-align: center;
+  background: #54a0ff;
+  border-radius: 24px;
+  padding: 10px;
+  margin: 0;
+  color: map-get($theme-colours, "main");
+  display: none !important;
+}
+
+.featured {
+  background: #2d3436;
+  margin-top: 20px;
+  border-radius: 24px;
+  padding: 50px;
+  color: map-get($theme-colours, "main");
+
+  button {
+    float: left;
+    margin-top: -20px;
+    border: 2px solid map-get($theme-colours, "main");
+    color: map-get($theme-colours, "main");
+
+    &:hover {
+      border: 2px solid map-get($theme-colours, "main");
+      background: map-get($theme-colours, "main");
+      color: #2d3436;
+    }
+  }
+
+  h1 {
+    margin-top: -20px;
+  }
+}
+
+.dark .featured {
+  background: black;
+  color: white;
+}
+
+.requires {
+  float: right;
+}
+
+#seemore {
+  display: none;
+}
+
+#seemore svg {
+  font-size: 35px !important;
+  margin-bottom: -30px;
+}

src/scss/modules/_miscellaneous.scss

@@ -1,38 +0,0 @@
-body {
-  background: #2f3640;
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: 'Lexend Deca';
-  overflow: hidden;
-}
-
-#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: #ffffff;
-  opacity: 1;
-}
-
-#root {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-attachment: fixed;
-  min-height: 100vh;
-  display: grid;
-  color: white;
-}
-
-@font-face {
-  font-family: 'Lexend Deca';
-  src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
-}

src/scss/modules/_modal.scss

@@ -0,0 +1,186 @@
+.Modal {
+  color: map-get($modal, "text");
+  background-color: map-get($modal, "background");
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  border: none;
+  opacity: 1;
+  z-index: -2;
+  padding: 25px;
+  cursor: hand;
+  transition: 0.6s;
+  transition-timing-function: ease-in;
+  border-radius: map-get($modal, "border-radius");
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+
+.modalLink {
+  color: #5352ed;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.closeModal {
+  float: right;
+  font-size: 2em;
+  cursor: pointer;
+
+  &:hover {
+    color: grey;
+  }
+}
+
+.dark {
+  background-color: #2f3542 !important;
+  color: white !important;
+}
+
+.ReactModal__Html--open,
+.ReactModal__Body--open {
+  overflow: hidden;
+}
+
+@-webkit-keyframes zoom-in {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.05, 1.05);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes zoom-in {
+  0% {
+    -webkit-transform: scale(0);
+  }
+
+  50% {
+    -webkit-transform: scale(1.05, 1.05);
+  }
+
+  100% {
+    -webkit-transform: scale(1, 1);
+  }
+}
+
+.Overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 90vh;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.modal-animation {
+  -webkit-animation: zoom-in 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: zoom-in 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.ReactModal__Content {
+  min-height: calc(100vh - 30vh);
+  max-height: calc(100vh - 10vh);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+  overflow-y: auto;
+  position: relative;
+}
+
+@media only screen and (max-height: 700px) {
+  .ReactModal__Content {
+    min-height: 500px;
+    max-height: calc(100vh - 30vh);
+  }
+}
+
+@media only screen and (min-height: 700px){
+  .ReactModal__Content {
+    min-height: 600px;
+  }
+}
+
+.content {
+  margin-top: -20px;
+  width: 900px;
+
+  h1 {
+    font-size: 35px;
+  }
+
+  p {
+    font-size: 16px;
+  }
+
+  .columns {
+    font-size: 15px;
+
+    li {
+      padding-left: 10px;
+    }
+  }
+}
+
+.zoom-out {
+  -webkit-animation: zoom-out 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: zoom-out 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@-webkit-keyframes zoom-out {
+  0% {
+    transform: scale(1, 1);
+  }
+
+  50% {
+    transform: scale(1.05, 1.05);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes zoom-out {
+  0% {
+    -webkit-transform: scale(1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.05, 1.05);
+  }
+
+  100% {
+    -webkit-transform: scale(0);
+  }
+}
+
+.updateContent {
+  width: 400px;
+  padding: 5px;
+  .closeModal {
+    margin-top: 10px;
+    font-size: 45px;
+  }
+  img {
+    width: 100%;
+    height: auto;
+  }
+}

src/scss/modules/_navbar.scss

@@ -2,24 +2,41 @@
     position: absolute;
     text-align: right;
     min-width: 50px;
+    cursor: pointer;
+    -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
+    filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
+    top: 20px;
+
+    svg {
+        transition: ease 0.2s;
+        font-size: calc(10px + 1.5vmin) !important;
+    }
+
+    &:hover {
+        svg {
+            transform: scale(1.1);
+            color: map-get($theme-colours, "main");;
+        }
+    }
 }
 
 .navbar1 {
-    @extend navbar;
+    @extend %navbar;
-    top: 50px;
+    right: 20px;
-    right: 0px;
+    svg {
+        -webkit-backface-visibility: hidden;
+        -webkit-transform: translateZ(0) scale(1.0, 1.0);
+        backface-visibility: hidden;
+        transform: translateZ(0) scale(1.0, 1.0);
+    }
 }
 
 .navbar2 {
-    @extend navbar;
+    @extend %navbar;
-    top: 50px;
+    right: 60px;
-    right: 50px;
 }
 
-.PizzaIcon {
+.navbar3 {
-    margin-right: 20px; 
+    @extend %navbar;
-}
+    right: 100px;
-
-.pizza {
-    right: 2000px;
 }

src/scss/modules/_quote.scss

@@ -1,6 +1,6 @@
 .quote {
   font-size: 0.8em;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
 @media screen and (min-width: 600px) {
@@ -14,10 +14,42 @@
   font-size: 0.9em;
   letter-spacing: 0.5px;
   margin: 0;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+}
+
+.quoteAuthor, .copyButton {
+  display: inline;
+  font-size: 0.8em;
+  position: relative !important;
+  display: block;
+  margin: 0 auto;
+}
+
+.copyButton {
+  cursor: pointer;
+  vertical-align: middle;
+  float: middle;
+  margin: 0 auto;
+  text-align: right;
+  transition: ease 0.2s !important;
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
 i.material-icons,
 h1.quoteauthor {
   display: inline;
+}
+
+button.copyButton {
+  background: transparent;
+  border: none;
+  color: map-get($theme-colours, "main");;
+  padding: 20px 20px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 20px;
+  cursor: pointer;
+  border-radius: 5px;
+  display: table-cell
 }

src/scss/modules/_search.scss

@@ -1,31 +1,39 @@
 .searchbar {
-    position: absolute;
+  position: absolute;
-    left: 20px;
+  left: 20px;
-    top: 20px;
+  top: 20px;
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    display: block;
+  display: block;
-    color: #ffff;
+  color: map-get($theme-colours, "main-text-color");
-    font-family: 'Lexend Deca';
 
-    input[type=text] {
+  input[type=text] {
-        font-size: calc(5px + 1.2vmin);
+    width: 140px;
-        background: none;
+    margin-left: 12px;
-        border: 2px solid #ffff;
+    border-radius: 24px;
-        padding: 10px;
+    font-size: calc(5px + 1.2vmin);
-        color: #ffff;
+    background: transparent;
-        position: absolute;
+    border: none;
-        box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+    color: map-get($theme-colours, "main-text-color");
-        z-index: 1;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.1);
+    -webkit-transition: width 0.5s ease-in-out;
+    transition: width 0.5s ease-in-out;
+
+    &:focus {
+      width: 400px;
+      background-color: rgba(0, 0, 0, .3);
     }
+  }
+
+  .MuiSvgIcon-root {
+    margin-top: 4px;
+    font-size: 30px;
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+  }
 }
 
 .input.searchtext {
-    border: none;
+  border: none;
 }
-
-.searchbarform {
-    display: flex;
-    flex-direction: row;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
-}

src/scss/modules/_settings.scss

@@ -0,0 +1,219 @@
+.switch {
+  position: relative;
+  width: 60px;
+  height: 34px;
+  float: right;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 34px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: #fff;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  &.round:before {
+    border-radius: 50%;
+  }
+}
+
+input {
+  &[type=text] {
+    width: 200px;
+    padding: 0.5rem 1rem;
+    box-sizing: border-box;
+    border-image-slice: 1;
+    border-image-source: map-get($theme-colours, "gradient");
+    outline: none;
+    background: transparent;
+  }
+
+  &:checked+.slider {
+    background: map-get($theme-colours, "gradient");
+
+    &:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+  }
+
+  &:focus+.slider {
+    box-shadow: 0 0 1px #e67e22;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  background: #bdc3c7;
+  height: auto;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #34495e;
+}
+
+h4,
+.switch,
+.expandIcons {
+  display: inline;
+  font-size: 1.4em;
+  font-weight: 100;
+}
+
+h4,
+#engines {
+  display: inline;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.expandIcons {
+  position: relative;
+  font-size: 25px;
+  vertical-align: middle;
+  display: inline-flex;
+}
+
+h4,
+.expandIcons {
+  cursor: pointer;
+}
+
+.extraSettings {
+  display: none;
+  border-left: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(to bottom, #ffb032 0%, #dd3b67 100%);
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  select {
+    margin-left: 20px;
+  }
+
+  input[type=text],
+  input[type=range],
+  p,
+  button {
+    margin-top: 10px;
+  }
+}
+
+ul {
+  padding-left: 5px;
+  margin: 0;
+
+  >label {
+    vertical-align: middle;
+  }
+}
+
+li {
+  margin-top: 1px;
+}
+
+.range {
+  -webkit-appearance: none;
+  width: 200px;
+  height: 15px;
+  background: #ccc;
+  border-radius: 12px;
+  outline: none;
+  background: #ecf0f1;
+  border-radius: 12px;
+  box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    background: map-get($theme-colours, "gradient");
+    cursor: pointer;
+  }
+
+  &::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    background: map-get($theme-colours, "gradient");
+    cursor: pointer;
+  }
+}
+
+input[type=color] {
+  border-radius: 100%;
+  height: 30px;
+  width: 30px;
+  box-shadow: map-get($main-parts, "shadow");
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 100%;
+  }
+}
+
+input[type=checkbox] {
+  vertical-align: middle;
+}
+
+#customBackgroundHex {
+  font-size: 1.2em;
+  padding-left: 7px;
+}
+
+select {
+  background: none;
+  height: 34px;
+  width: 120px;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
+  border-left: 10px solid;
+  color: map-get($modal, "text");
+}
+
+select#language {
+  float: right;
+}

src/scss/modules/_toast.scss

@@ -0,0 +1,28 @@
+.Toastify__toast-body {
+    color: #000 !important;
+    font-size: 16px !important;
+    padding: 15px 20px !important;
+}
+
+.Toastify__toast {
+    border-radius: 12px !important;
+    min-height: auto !important;
+    height: auto !important;
+    width: auto !important;
+    min-width: auto !important;
+    padding: 0px !important;
+}
+
+.Toastify__close-button {
+    margin-top: 10px;
+    margin-right: 10px;
+}
+
+.Toastify__progress-bar--default {
+    height: 3px !important;
+    background: #000 !important;
+}
+
+.Toastify__toast-container {
+    width: auto !important;
+}

src/scss/modules/_welcome.scss

@@ -0,0 +1,42 @@
+.welcomeModalText {
+    line-height: 2px;
+    h2.subtitle {
+        font-size: 24px;
+        color: #535353;
+        text-transform: uppercase;
+    }
+    h1.welcometitle {
+        font-size: 50px;
+    }
+}
+
+.welcomeContent {
+    text-align: center;
+    padding: 25px;
+    a {
+        text-decoration: none;
+        line-height: 20px !important;
+        color: #5352ED;
+        cursor: pointer;
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+    img.icon, svg {
+        margin-top: -12px;
+        padding: 10px;
+        cursor: pointer;
+        transition: ease 0.2s;
+        &:hover {
+            transform: scale(1.1);
+        }
+    }
+    p {
+        margin-top: 0.7rem;
+        line-height: 1em;
+    }
+    img, svg {
+        height: 24px;
+        width: auto;
+    }
+}

src/translations/en.json

@@ -0,0 +1,130 @@
+{
+    "greeting": {
+        "morning": "Good Morning",
+        "afternoon": "Good Afternoon",
+        "evening": "Good Evening",
+        "christmas": "Merry Christmas",
+        "newyear": "Happy new year",
+        "halloween": "Happy Halloween"
+    },
+    "credit": "Photo by",
+    "search": "Search",
+    "modals": {
+        "title": "Options",
+        "settings": "Settings",
+        "addons": "My Add-ons",
+        "marketplace": "Marketplace"
+    },
+    "settings": {
+        "time": {
+            "title": "Time",
+            "seconds": "Seconds",
+            "twentyfourhour": "24 Hour",
+            "ampm": "AM/PM (12 hour)",
+            "zero": "Zero-padded",
+            "analog": "Analog"
+        },
+        "greeting": {
+            "title": "Greeting",
+            "events": "Events",
+            "default": "Default Greeting Message",
+            "name": "Name for greeting"
+        },
+        "quote": {
+            "title": "Quote",
+            "copy": "Copy Button"
+        },
+        "background": {
+            "title": "Background",
+            "API": "Background API",
+            "blur": "Adjust Blur",
+            "customURL": "Custom Background URL",
+            "custombackground": "Custom Background",
+            "customcolour": "Custom Background Colour"
+        },
+        "searchbar": {
+            "title": "Search Bar",
+            "searchengine": "Search Engine"
+        },
+        "offline": "Offline Mode",
+        "experimental": {
+            "title": "Experimental",
+            "webp": "Enable WebP",
+            "dark": "Dark Theme",
+            "animations": "Animations"
+        },
+        "language": "Language",
+        "apply": "Apply",
+        "reset": "Reset",
+        "import": "Import",
+        "export": "Export"
+    },
+    "update": {
+        "title": "Update",
+        "offline": {
+            "title": "Offline",
+            "description": "Cannot get update logs while in offline mode"
+        },
+        "error": {
+            "title": "Error",
+            "content": "Could not connect to the server"
+        },
+        "loading": "Loading..."
+    },
+    "toasts": {
+        "quote": "Quote Copied",
+        "reset": "Reset successfully",
+        "installed": "Successfully installed",
+        "removed": "Successfully removed",
+        "error": "Something went wrong"
+    },
+    "marketplace": {
+        "photo_packs": "Photo Packs",
+        "quote_packs": "Quote Packs",
+        "preset_settings": "Preset Settings",
+        "themes": "Themes",
+        "product": {
+            "overview": "Overview",
+            "information": "Information",
+            "last_updated": "Last Updated",
+            "version": "Version",
+            "author": "Author",
+            "notice": {
+                "title": "Notice",
+                "description": "In order for the change to take place, the page must be refreshed."
+            },
+            "buttons": {
+                "addtomue": "Add To Mue",
+                "remove": "Remove"
+            }
+        },
+        "offline": {
+            "title": "Looks like you're offline",
+            "description": "Please connect to the internet."
+        },
+        "see_more": "See More"
+    },
+    "addons": {
+        "added": "Added",
+        "product": {
+            "overview": "Overview",
+            "information": "Information",
+            "last_updated": "Last Updated",
+            "version": "Version",
+            "author": "Author",
+            "notice": {
+                "title": "Notice",
+                "description": "In order for the change to take place, the page must be refreshed."
+            },
+            "buttons": {
+                "addtomue": "Add To Mue",
+                "remove": "Remove"
+            }
+        },
+        "empty": {
+            "title": "It's empty here",
+            "description": "Head to the marketplace to add some.",
+            "button": "Take me there"
+        }
+    }
+}

src/translations/fr.json

@@ -0,0 +1,130 @@
+{
+    "greeting": {
+        "morning": "Bonjour",
+        "afternoon": "Bonne après-midi",
+        "evening": "Bonsoir",
+        "christmas": "Bonne Noël",
+        "newyear": "Bonne année",
+        "halloween": "Joyeux Halloween"
+    },
+    "credit": "Photo par",
+    "search": "Trouver",
+    "modals": {
+        "title": "Options",
+        "settings": "Parametres",
+        "addons": "Mes Options",
+        "marketplace": "Marché"
+    },
+    "settings": {
+        "time": {
+            "title": "Temps",
+            "seconds": "Seconds",
+            "twentyfourhour": "24 Heures",
+            "ampm": "AM/PM (12 hour)",
+            "zero": "Zero-padded",
+            "analog": "Analogue"
+        },
+        "greeting": {
+            "title": "Salutation",
+            "events": "Événements",
+            "default": "Défaut Salutation",
+            "name": "Nom Pour Salutation"
+        },
+        "quote": {
+            "title": "Citation",
+            "copy": "Au bouton copie"
+        },
+        "background": {
+            "title": "Fond",
+            "API": "Fond API",
+            "blur": "Ajuster le flou",
+            "customURL": "URL D'arrière-plan personnalisée",
+            "custombackground": "D'arrière-plan personnalisée",
+            "customcolour": "Couleur d'arrière-plan personnalisée"
+        },
+        "searchbar": {
+            "title": "Barre de Recherche",
+            "searchengine": "Moteur de recherche"
+        },
+        "offline": "Mode Hors-Ligne",
+        "experimental": {
+            "title": "Expérimental",
+            "webp": "Activer WebP",
+            "dark": "Thème sombre",
+            "animations": "Animations"
+        },
+        "language": "Langue",
+        "apply": "Appliquer",
+        "reset": "Reset",
+        "import": "Importer",
+        "export": "Exporter"
+    },
+    "update": {
+        "title": "Actualiser",
+        "offline": {
+            "title": "Hors ligne",
+            "description": "Peut pas se connecter à Internet"
+        },
+        "error": {
+            "title": "Erreur",
+            "content": "Could not connect to the server"
+        },
+        "loading": "Chargement..."
+    },
+    "toasts": {
+        "quote": "Citation Copié",
+        "reset": "Réinitaliser avec succès",
+        "installed": "Installé avec succès",
+        "removed": "Enlevée avec succès",
+        "error": "Quelque chose a mal tourné."
+    },
+    "marketplace": {
+        "photo_packs": "Des Photos Packs",
+        "quote_packs": "Des Citation Packs",
+        "preset_settings": "Paramètres de prédéterminée",
+        "themes": "Thème",
+        "product": {
+            "overview": "Aperçu",
+            "information": "Information",
+            "last_updated": "Dernière mise à jour",
+            "version": "Version",
+            "author": "Auteur",
+            "notice": {
+                "title": "Écriteau",
+                "description": "S'il vous plait, recharger la page."
+            },
+            "buttons": {
+                "addtomue": "Ajouter au Mue",
+                "remove": "Enlever"
+            }
+        },
+        "offline": {
+            "title": "Vous êtes hors ligne",
+            "description": "Veuillez vous connecter à l'internet."
+        },
+        "see_more": "Voir de Plus"
+    },
+    "addons": {
+        "added": "Ajoutée",
+        "product": {
+            "overview": "Aperçu",
+            "information": "Informations",
+            "last_updated": "Dernière mise à jour",
+            "version": "Version",
+            "author": "Auteure",
+            "notice": {
+                "title": "Écriteau",
+                "description": "S'il vous plait, recharger la page."
+            },
+            "buttons": {
+                "addtomue": "Ajouter au Mue",
+                "remove": "Enlever"
+            }
+        },
+        "empty": {
+            "title": "Il est vide ici",
+            "description": "Aller su le marché pour en ajouter.",
+            "button": "Naviguer vers le marché"
+        }
+    }
+}

src/translations/nl.json

@@ -0,0 +1,130 @@
+{
+    "greeting": {
+        "morning": "Goedemorgen",
+        "afternoon": "Goedemiddag",
+        "evening": "Goedenavond",
+        "christmas": "Fijne kerstdagen",
+        "newyear": "Gelukkig nieuw jaar",
+        "halloween": "Fijne halloween"
+    },
+    "credit": "Afbeelding door",
+    "search": "Zoeken",
+    "modals": {
+        "title": "Opties",
+        "settings": "Instellingen",
+        "addons": "Mijn Extensies",
+        "marketplace": "Marktplaats"
+    },
+    "settings": {
+        "time": {
+            "title": "Tijd",
+            "seconds": "Seconden",
+            "twentyfourhour": "24 uurs",
+            "ampm": "AM/PM (12 uurs)",
+            "zero": "Nul Opvulling",
+            "analog": "Analoog"
+        },
+        "greeting": {
+            "title": "Groeten",
+            "events": "Evenementen",
+            "default": "Standaard begroetingsnaam",
+            "name": "Naam Voor Groet"
+        },
+        "quote": {
+            "title": "Citaat",
+            "copy": "Kopieer Knop"
+        },
+        "background": {
+            "title": "Achtergrond",
+            "API": "Achtergrond API",
+            "blur": "Onscherpte Aanpassen",
+            "customURL": "Aangepaste Achtergrond URL",
+            "custombackground": "Aangepaste Achtergrond",
+            "customcolour": "Aangepaste Achtergrondkleur"
+        },
+        "searchbar": {
+            "title": "Zoekbalk",
+            "searchengine": "Zoekmachine"
+        },
+        "offline": "Offline Modus",
+        "experimental": {
+            "title": "Experimenteel",
+            "webp": "WebP Gebruiken",
+            "dark": "Donker Thema",
+            "animations": "Animaties"
+        },
+        "language": "Taal",
+        "apply": "Toepassen",
+        "reset": "Resetten",
+        "import": "Importeren",
+        "export": "Exporteren"
+    },
+    "update": {
+        "title": "Veranderingen",
+        "offline": {
+            "title": "Offline",
+            "description": "Kan veranderingen logboek niet verkrijgen in offline modus"
+        },
+        "error": {
+            "title": "Fout",
+            "content": "Kon niet verbinden met de servers"
+        },
+        "loading": "Aan het laden..."
+    },
+    "toasts": {
+        "quote": "Quote Copied",
+        "reset": "Reset successfully",
+        "installed": "Successvol geïnstalleerd",
+        "removed": "Successvol verwijderd",
+        "error": "Iets is verkeerd gegaan"
+    },
+    "marketplace": {
+        "photo_packs": "Afbeelding Pakketten",
+        "quote_packs": "Citaat Pakketten",
+        "preset_settings": "Vooraf ingestelde instellingen",
+        "themes": "Themas",
+        "product": {
+            "overview": "Overzicht",
+            "information": "Informatie",
+            "last_updated": "Laatst Geüpdatet",
+            "version": "Versie",
+            "author": "Auteur",
+            "notice": {
+                "title": "Aankondiging",
+                "description": "De veranderingen gaan in zodra je de pagina herlaad."
+            },
+            "buttons": {
+                "addtomue": "Voeg aan Mue toe",
+                "remove": "Verwijder"
+            }
+        },
+        "offline": {
+            "title": "Het ziet er uit dat je offline bent",
+            "description": "Verbind met het internet."
+        },
+        "see_more": "Zie Meer"
+    },
+    "addons": {
+        "added": "Toegevoegd",
+        "product": {
+            "overview": "Overzicht",
+            "information": "Informatie",
+            "last_updated": "Laatst Geüpdatet",
+            "version": "Versie",
+            "author": "Auteur",
+            "notice": {
+                "title": "Aankondiging",
+                "description": "De veranderingen gaan in zodra je de pagina herlaad."
+            },
+            "buttons": {
+                "addtomue": "Voeg aan Mue toe",
+                "remove": "Verwijder"
+            }
+        },
+        "empty": {
+            "title": "Het is hier leeg",
+            "description": "Ga naar de marktplaats om een paar extensies toe te veogen.",
+            "button": "Breng me naar de marktplaats"
+        }
+    }
+}

src/translations/no.json

@@ -0,0 +1,130 @@
+{
+    "greeting": {
+        "morning": "God Morgen",
+        "afternoon": "God Ettermiddag",
+        "evening": "God Kveld",
+        "christmas": "God Jul",
+        "newyear": "Godt Nyttår",
+        "halloween": "Ha en god Halloween"
+    },
+    "credit": "Bilde av",
+    "search": "Søk",
+    "modals": {
+        "title": "Options",
+        "settings": "Instillinger",
+        "addons": "Mine add-ons",
+        "marketplace": "Markedsplass"
+    },
+    "settings": {
+        "time": {
+            "title": "Tid",
+            "seconds": "Sekunder",
+            "twentyfourhour": "24 Timer",
+            "ampm": "AM/PM (12 Timer)",
+            "zero": "Ekstra Null",
+            "analog": "Analog"
+        },
+        "greeting": {
+            "title": "Hallo",
+            "events": "Planer",
+            "default": "Standard Hallo Melding",
+            "name": "Navn for Hallo"
+        },
+        "quote": {
+            "title": "Sitat",
+            "copy": "Kopier knapp"
+        },
+        "background": {
+            "title": "Bakgrunn",
+            "API": "Bakgrunn API",
+            "blur": "Juster Blur",
+            "customURL": "Personlig bakgrunn URL",
+            "custombackground": "Personlig bakgrunn",
+            "customcolour": "Personlig Bakgrunn Farge"
+        },
+        "searchbar": {
+            "title": "Søkebar",
+            "searchengine": "Søkemotor"
+        },
+        "offline": "Frakoblet Modus",
+        "experimental": {
+            "title": "Eksperimental",
+            "webp": "Skru på WebP",
+            "dark": "Mørkt tema",
+            "animations": "Animasjoner"
+        },
+        "language": "Språk",
+        "apply": "Bruk",
+        "reset": "Nullstill",
+        "import": "Importer",
+        "export": "Eksporter"
+    },
+    "update": {
+        "title": "Oppdater",
+        "offline": {
+            "title": "Offline",
+            "description": "Kan ikke få oppdatering loggene når i offline modus."
+        },
+        "error": {
+            "title": "Error",
+            "content": "Kan ikke koble til serveren."
+        },
+        "loading": "Laster..."
+    },
+    "toasts": {
+        "quote": "Sitat kopiert",
+        "reset": "Tilbakestillte vellykket",
+        "installed": "Installert",
+        "removed": "Fjernet",
+        "error": "Noe gikk galt"
+    },
+    "marketplace": {
+        "photo_packs": "Bilde pakker",
+        "quote_packs": "Sitat pakker",
+        "preset_settings": "Preset instillinger",
+        "themes": "Themes",
+        "product": {
+            "overview": "Oversikt",
+            "information": "Informasjon",
+            "last_updated": "Sist oppdatert",
+            "version": "Versjon",
+            "author": "Forfatter",
+            "notice": {
+                "title": "Vær oppmerksom",
+                "description": "For at endringen skal ta skje, må siden relastes."
+            },
+            "buttons": {
+                "addtomue": "Legg Til Mue",
+                "remove": "Fjern"
+            }
+        },
+        "offline": {
+            "title": "Ser ut som at du er offiline.",
+            "description": "Vær så snill, koble til internettet."
+        },
+        "see_more": "Se mer"
+    },
+    "addons": {
+        "added": "Lagt til",
+        "product": {
+            "overview": "Oversikt",
+            "information": "Informasjon",
+            "last_updated": "Sist oppdatert",
+            "version": "Versjon",
+            "author": "Forfatter",
+            "notice": {
+                "title": "Vær oppmerksom",
+                "description": "For at endringen skal ta skje, må siden relastes."
+            },
+            "buttons": {
+                "addtomue": "Legg Til Mue",
+                "remove": "Fjern"
+            }
+        },
+        "empty": {
+            "title": "Det er tomt her.",
+            "description": "Gå til markedsplassen å legg til noe.",
+            "button": "Ta meg der"
+        }
+    }
+}

src/translations/ru.json

@@ -0,0 +1,74 @@
+{
+    "greeting": {
+        "morning": "Доброе утро",
+        "afternoon": "Добрый день",
+        "evening": "Добрый вечер",
+        "christmas": "С Рождеством",
+        "newyear": "С Новым Годом",
+        "halloween": "Счастливого Хэллоуина"
+    },
+    "credit": "Фото",
+    "search": "Поиск",
+    "settings": {
+        "title": "Настройки",
+        "description": "Измените компоненты Mue по своему вкусу.",
+        "time": {
+            "title": "Время",
+            "seconds": "Секунды",
+            "twentyfourhour": "24 Часа",
+            "ampm": "AM/PM (12 часов)",
+            "zero": "Дополнительный ноль",
+            "analog": "Аналоговое"
+        },
+        "greeting": {
+            "title": "Приветствие",
+            "events": "События",
+            "default": "Сообщение с приветствием по-умолчанию",
+            "name": "Имя для приветствия"
+        },
+        "quote": {
+            "title": "Цитата",
+            "copy": "Кнопка копирования"
+        },
+        "background": {
+            "title": "Фон",
+            "API": "API для фона",
+            "blur": "Размытие",
+            "customURL": "Ссылка для пользовательского фона",
+            "custombackground": "Пользовательский фон",
+            "customcolour": "Пользовательский цвет фона"
+        },
+        "searchbar": {
+            "title": "Панель поиска",
+            "searchengine": "Поисковый движок"
+        },
+        "offline": "Офлайн режим",
+        "experimental": {
+            "title": "Экспериментальные настройки",
+            "webp": "Включить WebP",
+            "dark": "Тёмная тема",
+            "animations": "Анимации"
+        },
+        "language": "Язык",
+        "apply": "Применить",
+        "reset": "Сбросить",
+        "import": "Импорт",
+        "export": "Экспорт"
+    },
+    "update": {
+        "title": "Обновление",
+        "offline": {
+            "title": "Офлайн",
+            "description": "Не удалось получить журнал обновления в офлайн режиме"
+        },
+        "error": {
+            "title": "Ошибка",
+            "content": "Не удалось подключиться к серверу"
+        },
+        "loading": "Загрузка..."
+    },
+    "toasts": {
+        "quote": "Цитата скопирована!",
+        "reset": "Сброшено!"
+    }
+}