Final

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

.env

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

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,90 @@
-![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
-[![Discord Badge](https://discordapp.com/api/guilds/336039472250748928/widget.png)](https://discord.gg/HJmmmTB)
+> <a href="https://muetab.xyz/">Mue</a>
 
-Fast, open and free-to-use new tab page for most modern browsers.
+[![License](https://img.shields.io/badge/license-BSD%203-blue?style=flat-square)](/LICENSE) [![Discord](https://img.shields.io/discord/659129207208804381?label=discord&color=7289DA&style=flat-square)](https://discord.gg/zv8C9F8) [![Code Size]( https://img.shields.io/github/languages/code-size/mue/mue?color=green&label=size&style=flat-square)]()
+<br>
+[![Microsoft Edge](https://img.shields.io/badge/dynamic/json?style=flat-square&label=microsoft%20edge&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Faepnglgjfokepefimhbnibfjekidhmja)]() [![](https://img.shields.io/amo/v/mue?label=firefox&style=flat-square)]() [![](https://img.shields.io/chrome-web-store/v/bngmbednanpcfochchhgbkookpiaiaid?label=chrome&style=flat-square)]()
+
+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]()
+	* [Other](#other)
+
+
+## Screenshot
+*May be updated in the future*
+
+![Screenshot](assets/screenshot.jpg)
 
 ## Features
 * Fast and free
 * Supports multiple browsers
-* Actively developed and opensource
-* Automatically updating API (with no tracking!) with new photos, quotes and offline mode
-* ~~Multiple language support~~
-* ~~Settings feature - enable/disable features!~~
-* Search bar, ~~update modal, copy button and more!~~
+* Actively developed and open source
+* Automatically updating API (no tracking) with new photos, quotes and offline mode
+* Search bar
+* Settings - enable/disable various features and customise parts of Mue
+* Update modal, copy button and more!
 
-*Mue has been recently rewritten with React and is missing the features that are crossed out*
+## Planned Features
+* Multilingual support
 
 ## Installation
+*A demo of the tab can be found [here](https://mue.now.sh)*
 ### 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)
+Link: [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://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
-      download</b> and click <b>Download ZIP</b>)
-  <li> Open a terminal and run these commands: (in the Mue directory)
-  <li> <code>yarn</code> (or <code>npm i</code>)
-  <li> <code>yarn run all</code> (or <code>npm run all</code>)
-  <li> Start developing! (See the sections below for how to set up a developer copy of the extension.)
+  <li> clone the repository using <code>git clone https://github.com/mue/mue.git</code>
+  <li> run <code>yarn</code> or <code>npm i</code> to install all needed dependencies
+  <li> run <code>yarn start</code> or <code>npm start</code> to start testing
+  <li> Code your heart out! (See the sections below for how to build the extension)
 </ol>
 <h2>Building</h5>
-<i>This section is a work in progress, and doesn't include the manual edits you are required to do to get it working without errors. 
-Once I find a method to do it automatically, I will update this section accordingly.</i>
 <details>
-  <summary><b>Chrome</b> (Click to expand)</summary>
+  <summary><b>Chrome/Edge (Chromium)</b> (Click to expand)</summary>
   <ol>
-    <li> <code>yarn run build</code> (or <code>npm run build</code>)
-    <li> Rename <code>manifest-chrome.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
+    <li> <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"
     <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 +93,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> Rename <code>manifest-opera.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React)
+    <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"
+    <li> Copy <codebackground-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,10 +103,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> Rename <code>manifest-firefox.json</code> in the "manfiest" folder to <code>manifest.json</code> in "build" (replace the one created by React) 
+    <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"
     <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>
@@ -89,51 +117,27 @@ 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)
+[ohlookitsderpy](https://github.com/ohlookitsderpy) - Founder, Lead development, Photographer <br>
+[TurboMarshmello](https://github.com/TurboMarshmello) - Name, Lead design, Photographer <br>
 
-[TurboMarshmello](https://github.com/TurboMarshmello) (name idea, code contributions)
+### Contributors
+[Wessel](https://github.com/Wessel) - Development <br>
+[Isaac](https://github.com/eartharoid) - QA, Development, Photographer <br>
+[Chris](https://github.com/auguwu) - Development <br>
 
 ### 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
-
+[Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support <br>
 [Google Fonts](https://fonts.google.com/specimen/Lexend+Deca) - Lexend Deca font
 
-### Translations
-[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)
+And many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#), [Roee Lupo](https://github.com/MrSheldon), [Jeroen](#), [Glasvegas](https://twitter.com/_glasvegas), [Anders](https://github.com/FuryingFox/), [Oded Shapira](https://twitter.com/dondishdev) and [Nikka Lai](#) for letting us use their wonderful photographs

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": "3.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": "3.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": "3.0.0",
     "browser_action": {
-        "default_icon": "./extension-icon.png"
+        "default_icon": "./icons/extension-icon.png"
     },
     "background": {
         "scripts": [

package.json

@@ -8,27 +8,33 @@
   ],
   "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": "3.0.0",
   "dependencies": {
-    "@material-ui/core": "4.7.0",
-    "@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",
-    "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0"
+    "copy-text-to-clipboard": "^2.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-modal": "^3.11.2",
+    "react-scripts": "3.4.1",
+    "supports-webp": "^2.0.1"
   },
   "devDependencies": {
-    "eslint": "^6.7.2",
-    "node-sass": "^4.13.0"
+    "eslint": "^7.3.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/index.html

@@ -1,11 +1,11 @@
 <!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='favicon-32x32.png'>
-  <link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>
+  <link rel='icon' type='image/png' sizes='32x32' href='./icons/favicon-32x32.png'>
+  <link rel='icon' type='image/png' sizes='16x16' href='./icons/favicon-16x16.png'>
   <title>New Tab</title>
 </head>
 

src/App.jsx

@@ -6,23 +6,85 @@ import Greeting from './components/Greeting';
 import Quote from './components/Quote';
 import Search from './components/Search';
 import Credit from './components/Credit';
-//import Navbar from './components/Navbar';
+import Navbar from './components/Navbar';
+import Toast from './components/Toast';
+import Modal from 'react-modal';
 import './scss/index.scss'; 
 
+const Settings = React.lazy(() => import('./components/Settings'));
+const Update = React.lazy(() => import('./components/Update'));
+const renderLoader = () => <div></div>;
+
 //* App
 export default class App extends React.Component {
+  // Modal stuff
+  constructor(props) {
+    super(props);
+
+    this.state = { 
+      settingsModal: false, 
+      updateModal: false
+    };
+  }
+
+  setDefaultSettings() {
+    localStorage.clear();
+
+    localStorage.setItem('time', true);
+    localStorage.setItem('greeting', true);
+    localStorage.setItem('background', true);
+    localStorage.setItem('quote', true);
+    localStorage.setItem('searchBar', true);
+    localStorage.setItem('blur', 0);
+    localStorage.setItem('copyButton', false);
+    localStorage.setItem('seconds', false);
+    localStorage.setItem('24hour', false);
+    localStorage.setItem('offlineMode', false);
+    localStorage.setItem('webp', false);
+    localStorage.setItem('events', true);
+    localStorage.setItem('customBackgroundColour', '');
+    localStorage.setItem('customBackground', '');
+    localStorage.setItem('greetingName', '');
+
+    // 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);
+    localStorage.setItem('darkTheme', false);
+
+    // Finally we set this to true so it doesn't run the function on every load
+    localStorage.setItem('firstRun', true);
+    window.location.reload();
+  }
+
   // Render all the components
   render() {
+    if (!localStorage.getItem('firstRun')) this.setDefaultSettings();
+
+    let modalClassList = 'Modal';
+    const darkTheme = localStorage.getItem('darkTheme');
+    if (darkTheme === 'true') modalClassList = 'Modal dark';
+  
     return (
       <React.Fragment>
+        <div id='backgroundImage'></div>
         <Background/>
+        <div id='center'>
         <Search/>
-          <div id='center'>
-              <Greeting/>
-              <Clock/> 
-              <Quote/>
-              <Credit/>
-          </div>
+        <Navbar settingsModalOpen={() => this.setState({ settingsModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
+            <Greeting/>
+            <Clock/> 
+            <Quote />
+            <Credit/>
+            <Toast/>
+            <React.Suspense fallback={renderLoader()}>
+              <Modal isOpen={this.state.settingsModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
+                <Settings modalClose={() => this.setState({ settingsModal: false })} setDefaultSettings={() => this.setDefaultSettings()} />
+              </Modal>
+              <Modal isOpen={this.state.updateModal} className={modalClassList} overlayClassName="Overlay" ariaHideApp={false}>
+                <Update modalClose={() => this.setState({ updateModal: false })} />
+              </Modal>
+            </React.Suspense>
+        </div>
       </React.Fragment>
     );
   }

src/components/Background.jsx

@@ -1,79 +1,66 @@
 //* Imports
 import React from 'react';
+import supportsWebP from 'supports-webp';
 
 export default class Background extends React.Component {
+  doOffline() {
+    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
+    let pixabayNumbers = [2, 3, 9, 11, 13, 14, 15]; // As there are a lot of Pixabay photos, we shorten the code a bit here
+    if (pixabayNumbers.includes(photo)) photographer = 'Pixabay';
+    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
+    document.getElementById('photographer').innerText = `Photo by ${photographer} (Pexels)`; // Set the credit
+  }
+
   async setBackground() {    
+    const enabled = localStorage.getItem('offlineMode');
+    if (enabled === 'true') return this.doOffline();
+
+    const colour = localStorage.getItem('customBackgroundColour');
+    if (colour) {
+      document.getElementById('backgroundCredits').style.display = 'none'; // Hide the location icon
+      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
+      return document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${custom})`); // Set background and blur etc
+    }
+
     try { // First we try and get an image from the API...
-      let data = await fetch('https://api.muetab.xyz/getImage?category=Outdoors');
+      let requestURL;
+      const enabled = localStorage.getItem('webp');
+      if (await supportsWebP && enabled === 'true') requestURL = 'https://api.muetab.xyz/getImage?webp=true';
+      else requestURL = 'https://api.muetab.xyz/getImage?category=Outdoors';
+      let data = await fetch(requestURL);
       data = await data.json(); 
 
-      document.getElementById('root').style.backgroundImage = `url(${data.file})`; // Set the background
+      document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${data.file})`); // Set background and blur etc
       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
+      this.doOffline();
     }
   }
 
   componentDidMount() {
+    const enabled = localStorage.getItem('background');
+    if (enabled === 'false') {
+      document.getElementById('backgroundCredits').style.display = 'none'; 
+      return;
+    }
     this.setBackground();
   }
 

src/components/Clock.jsx

@@ -1,31 +1,46 @@
-//* Imports
 import React from 'react';
 
 export default class Clock extends React.Component {
   constructor(...args) {
     super(...args);
+
+    this.timer = undefined;
     this.state = {
       date: '',
-      ampm: '',
+      ampm: ''
     };
   }
+  
+  startTime(time = localStorage.getItem('seconds') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
+    this.timer = setTimeout(() => {
+      const now = new Date();
+      let sec = '';
+  
+      if (localStorage.getItem('seconds') === 'true') sec = `:${('00' + now.getSeconds()).slice(-2)}`;
 
-  startTime() {
-    const t = new Date(); // Get the current date 
-    let h = t.getHours(); // Get hours
-    // const s = today.getSeconds();
+      if (localStorage.getItem('24hour') === 'true') {
+        this.setState({ 
+          date: `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`
+        }); 
+      } else {
+        // 12 hour support
+        let hours = now.getHours();
+        if (hours > 12) hours -= 12;
 
-    if (h > 12) h = h - 12; // 12 hour support
+        this.setState({ 
+          date: `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`,
+          ampm: now.getHours() > 11 ? 'PM' : 'AM' 
+        });
+      }
 
-    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
+      this.startTime();
+    }, time);
   }
 
   componentDidMount() {
-    this.startTime();
+    const enabled = localStorage.getItem('time');
+    if (enabled === 'false') return;
+    this.startTime(0);
   }
 
   render() {

src/components/Greeting.jsx

@@ -1,38 +1,57 @@
-//* Imports
 import React from 'react';
 
 export default class Greeting extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
-        greeting: ''
+      greeting: ''
     };
  }
 
-  getGreeting() {
-    const t = new Date(); // Current date object
-    
-    // Normal
-    const h = t.getHours(); // Current hour
+  doEvents(time, message) {
+    const enabled = localStorage.getItem('events');
+    if (enabled === 'false') return message;
 
-    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"
+    // Get current month & day
+    const m = time.getMonth(); // Current month
+    const d = time.getDate(); // Current Date
+
+    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 = 'Good evening'; // Set the default greeting string to "Good evening"	
+    if (hour < 12) message = 'Good morning'; // If it's before 12am, set the greeting string to "Good morning"
+    else if (hour < 18) message = '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
+    message = this.doEvents(now, message);
 
-    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"
+    // Name
+    let name = '';
+    let data = localStorage.getItem('greetingName');
 
+    if (typeof data === 'string') {
+      data = data.replace(/\s/g, ' ');
+      if (data.length > 0) name = `, ${data}`;
+    }
+
+    // Set the state to the greeting string
     this.setState({ 
-      greeting: g 
-    }); // Set the state to the greeting string
+      greeting: `${message}${name}`
+    });
   }
 
   componentDidMount() {
+    const enabled = localStorage.getItem('greeting');
+    if (enabled === 'false') return;
     this.getGreeting();
   }
   

src/components/Navbar.jsx

@@ -1,6 +1,7 @@
 //* Imports
 import RefreshIcon from '@material-ui/icons/Refresh';
-import LocalPizzaIcon from '@material-ui/icons/LocalPizza';
+import Gear from '@material-ui/icons/Settings';
+import NewReleases from '@material-ui/icons/NewReleases';
 import React from 'react';
 
 export default class Navbar extends React.Component {
@@ -8,10 +9,13 @@ export default class Navbar extends React.Component {
     return (
       <div className='navbar-container'>
         <div className='navbar1'>
-              <RefreshIcon className='locationicon'/>
+          <Gear className='settings-icon' onClick={this.props.settingsModalOpen} />
         </div>
         <div className='navbar2'>
-            <LocalPizzaIcon className='pizzaicon'/>
+            <RefreshIcon className='refreshicon' onClick={() => window.location.reload()} />
+        </div>
+        <div className='navbar3'>
+            <NewReleases className='refreshicon' onClick={this.props.updateModalOpen} />
         </div>
       </div>
     );

src/components/Quote.jsx

@@ -1,6 +1,8 @@
 //* Imports
 import React from 'react';
 import Quotes from '@muetab/quotes';
+import copy from 'copy-text-to-clipboard';
+import FileCopy from '@material-ui/icons/AttachFile';
 
 export default class Quote extends React.Component {
   constructor(...args) {
@@ -11,32 +13,52 @@ export default class Quote extends React.Component {
     };
   }
 
+  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 enabled = localStorage.getItem('offlineMode');
+    if (enabled === 'true') return this.doOffline();
+    
     try { // First we try and get a quote from the API...
       let data = await fetch('https://api.muetab.xyz/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, 
+        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
+      this.doOffline();
     }
   }
 
+  copyQuote() {
+    copy(`${this.state.quote} - ${this.state.author}`);
+    let toast = document.getElementById('toast');
+    toast.className = 'show';
+    setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000);
+  } 
+
   componentDidMount() {
+    const enabled = localStorage.getItem('quote');
+    if (enabled === 'false') return;
     this.getQuote();
   }
 
   render() {
+    let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote() }></FileCopy>;
+    const enabled = localStorage.getItem('copyButton');
+    if (enabled === 'false') copy = '';
+
     return [
-      <h1 className='quote'>{`"${this.state.quote}"`}</h1>,
-      // <i class="material-icons">perm_identity</i>,
-      <h1 className='quoteauthor'>{`${this.state.author}`}</h1>,
+        <h1 className='quote'>{`${this.state.quote}`}</h1>,
+    <h1 className='quoteauthor'>{this.state.author} {copy}</h1>,
     ];
   }
 }

src/components/Search.jsx

@@ -1,12 +1,24 @@
 //* Imports
 import React from 'react';
 
-// TODO: Add option to change search engine
 export default class Search extends React.Component {
   render() {
+    const enabled = localStorage.getItem('searchbar');
+    if (enabled === 'false') return (<div></div>);
+
+    const searchEngine = localStorage.getItem('searchEngine');
+    let url;
+
+    switch (searchEngine) {
+      case 'duckduckgo': url = 'https://duckduckgo.com'; break;
+      case 'google': url = 'https://google.com/search'; break;
+      case 'bing': url = 'https://bing.com/search'; break;
+      default: url = 'https://duckduckgo.com'; break;
+    }
+
     return (
       <div id='searchBar' className='searchbar'>
-        <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}> 
+        <form id='searchBar' className='searchbarform' action={url}> 
             <input type='text' placeholder='Search' name='q' id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
           </form>

src/components/Settings.jsx

@@ -0,0 +1,223 @@
+// eslint-disable
+import React from 'react';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+
+export default class Settings extends React.Component {
+  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);
+    //document.getElementById(`${key}Status`).innerHTML = val === true ? 'ON' : 'OFF';
+    // console.log(`[DEBUG] setItem(${key}, ${old} -> ${val})`);
+  }
+
+  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)';
+  }
+
+  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('customBackgroundColour').enabled === 'false') localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundColour').value);
+    window.location.reload();
+  }
+
+  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;
+      default: console.log('[ERROR] resetItem requires a key!');
+    }
+    this.showToast();
+  }
+
+  showToast() {
+    let toast = document.getElementById('toast');
+    toast.innerText = 'Reset successfully!';
+    toast.className = 'show';
+    setTimeout(() => { toast.className = toast.className.replace('show', ''); }, 3000);
+  }
+
+  componentDidMount() {
+    document.getElementById('greetingName').value = localStorage.getItem('greetingName');
+    document.getElementById('customBackground').value = localStorage.getItem('customBackground');
+    /*const hex = localStorage.getItem('customBackgroundColour');
+    if (!hex === '') {
+      document.getElementById('customBackgroundColour').value = hex;
+      document.getElementById('customBackgroundHex').innerText = hex;
+    }*/
+
+    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;
+      }
+    }
+
+    document.addEventListener('keyup', (event) => {
+      if (event.keyCode === 13) this.saveStuff();
+    });
+  }
+
+  render() {
+    return <div className="content">
+      <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
+      <h1>Settings</h1>
+      <p>Edit different components to make Mue your new tab.</p>
+      <div className='columns'>
+          <div className='group'>
+          <div className='section'>
+            <h4>Time</h4>     
+            <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('time')} id='timeStatus' />
+            <span className="slider round"></span>
+          </label>
+          <li className="extraSettings">
+            <ul>
+            <input name="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
+            <label htmlFor="1">Seconds</label>
+            </ul>
+            <ul>
+            <input name="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
+            <label htmlFor="2">24 Hour</label>
+            </ul>
+          </li>
+        </div>
+        </div>
+        <div style={{ "lineHeight": "1px" }} className='section'>
+          <h4>Greeting</h4>       
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('greeting')} id='greetingStatus' />
+            <span className="slider round"></span>
+          </label>
+          <li className="extraSettings">
+            <ul>
+            <input name="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
+            <label htmlFor="3">Events</label>
+            </ul>
+            <ul>
+              <p>Name for greeting <span className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</span></p>
+              <input type='text' id='greetingName'></input>
+            </ul>
+          </li>
+        </div>
+        <div className='section'>
+          <h4>Quote</h4>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('quote')} id='quoteStatus' />
+            <span className="slider"></span>
+          </label>
+          <li className="extraSettings">
+            <ul>
+            <input name="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
+            <label htmlFor="5">Copy Button</label>
+            </ul>
+          </li>
+        </div>
+        <div className='section'>
+          <h4>Background</h4>
+          <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} />
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('background')} id='backgroundStatus'  />
+            <span className="slider"></span>
+          </label>
+          <li className="extraSettings">
+            <ul>
+              <p>Adjust Blur (<span id='blurAmount'></span>%) <span className="modalLink" onClick={() => this.resetItem('blur')}>Reset</span></p>
+            </ul>
+            <ul>
+              <input className="range" type="range" min="0" max="100" id='blurRange' onInput={() => document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} />
+            </ul>
+            <ul>
+              <p>Custom Background URL <span className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</span></p>
+              <input type='text' id='customBackground'></input>
+            </ul>
+            { /*<ul>
+              <p>Custom Background Colour <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 for='colour' id='customBackgroundHex'>#00000</label>
+            </ul>  */}
+          </li>
+        </div>
+        <div className='section'>
+          <h4>Search Bar</h4>
+          {/* <ExpandMore className='expandIcons' onClick={() => this.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} /> */ }
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('searchBar')} id='searchBarStatus'  />
+            <span className="slider"></span>
+          </label>
+          {/* <li className="extraSettings">
+            <ul>
+            <label htmlFor="4">Search Engine</label>
+            <select name="4" id='searchBar'>
+              <option value="duckduckgo">DuckDuckGo</option>
+              <option value="google">Google</option>
+              <option value="bing">Bing</option>
+              <option value="custom">Custom</option>
+            </select>
+            </ul>
+          </li> */}
+        </div>
+        <div className='section'>
+          <h4>Offline Mode</h4>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('offlineMode')} id='offlineModeStatus'  />
+            <span className="slider"></span>
+          </label>
+        </div>
+        <h3>Experimental</h3>
+        <div className='section'>
+          <h4>Enable WebP</h4>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('webp')} id='webpStatus'  />
+            <span className="slider"></span>
+          </label>
+        </div>
+        <div className='section'>
+          <h4>Dark Theme</h4>
+          <label className="switch">
+            <input type="checkbox" onClick={()=> this.setItem('darkTheme')} id='darkThemeStatus'  />
+            <span className="slider"></span>
+          </label>
+        </div>
+        <button className="apply" onClick={() => this.saveStuff()}>Apply</button>
+        <button className="reset" onClick={() => this.props.setDefaultSettings()}>Reset</button>
+      </div>
+      
+    </div>;
+  }
+}

src/components/Toast.jsx

@@ -0,0 +1,15 @@
+//* Imports
+import React from 'react';
+import FileCopy from '@material-ui/icons/AttachFile';
+
+export default class Toast extends React.Component {
+  render() {
+    return (
+        <div id='toast'>
+        <FileCopy className="copyButton"/>
+        <hr />
+       Quote Copied!
+      </div>
+    );
+  }
+}

src/components/Update.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export default class Update extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      title: 'Loading...',
+      date: '',
+      content: 'Loading...'
+    };
+ }
+
+ async getUpdate() {
+  const enabled = localStorage.getItem('offlineMode');
+  if (enabled === 'true') return this.setState({
+    title: 'Offline',
+    content: 'Cannot get update logs while in offline mode'
+  });
+
+  try { // First we try and get a quote from the API...
+    let data = await fetch('https://api.muetab.xyz/getUpdate');
+    data = await data.json();
+    this.setState({ 
+      title: data.title, 
+      content: data.content
+    });
+  } catch (e) {
+    this.setState({
+      title: 'Error',
+      content: 'Could not connect to the server!'
+    });
+  }
+ }
+
+ componentDidMount() {
+   this.getUpdate();
+ }
+
+  render() {
+    return <div className="content">
+        <span className="closeModal" onClick={this.props.modalClose}>&times;</span>
+        <h1 dangerouslySetInnerHTML={{__html: this.state.title}}></h1>
+        <p dangerouslySetInnerHTML={{__html: this.state.content}}></p>
+      </div>;
+    }
+}

src/scss/index.scss

@@ -4,5 +4,62 @@
 @import 'modules/quote';
 @import 'modules/search';
 @import 'modules/credit';
-/*@import 'modules/navbar';*/
-@import 'modules/miscellaneous';
+@import 'modules/navbar';
+@import 'modules/modal';
+@import 'modules/settings';
+@import 'modules/toast';
+
+body {
+    background: #2f3640;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: 'Lexend Deca', sans-serif;
+    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;
+    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: #ffffff;
+    opacity: 1;
+}
+
+#root {
+    min-height: 100vh;
+    display: grid;
+    color: white;
+}
+
+#backgroundImage {
+    height: 100vh;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    z-index: 0;
+    border: none;
+    transform: scale(1.1);
+}
+
+
+
+@font-face {
+    font-family: 'Lexend Deca';
+    src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
+}

src/scss/modules/_clock.scss

@@ -1,7 +1,8 @@
 .clock {
   font-size: 4em;
+  //text-shadow: 5px 2px rgba(0, 0, 0, 0.8);
   margin: 0;
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+  // text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 .ampm {

src/scss/modules/_credit.scss

@@ -28,7 +28,6 @@
   width: 100em;
   height: 100em;
   font-size: 2rem;
-  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.3);
 }
 
 .credits {
@@ -45,6 +44,8 @@
   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 {
     visibility: hidden;

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/_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,65 @@
+.Modal {
+  color: #000;
+  background-color: #fff;
+  box-shadow: 0 0 200px rgba(0, 0, 0, 0.3);
+  border: none;
+  opacity: 1;
+  z-index: -2;
+  padding: 20px;
+  cursor: hand;
+
+  &: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; /* prevents background page from scrolling when the modal is open */
+}
+
+.Overlay {
+  position: fixed;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 90vh;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.ReactModal__Content {
+  width: 500px;
+  max-width: 600px;
+  max-height: calc(100vh - 10vh);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+  overflow-y: auto;
+  position: relative;
+}

src/scss/modules/_navbar.scss

@@ -2,24 +2,25 @@
     position: absolute;
     text-align: right;
     min-width: 50px;
+    cursor: pointer;
+    -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));
 }
 
 .navbar1 {
-    @extend navbar;
+    @extend %navbar;
     top: 50px;
     right: 0px;
 }
 
 .navbar2 {
-    @extend navbar;
+    @extend %navbar;
     top: 50px;
     right: 50px;
 }
 
-.PizzaIcon {
-    margin-right: 20px; 
-}
-
-.pizza {
-    right: 2000px;
+.navbar3 {
+    @extend %navbar;
+    top: 50px;
+    right: 100px;
 }

src/scss/modules/_quote.scss

@@ -14,10 +14,39 @@
   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;
+  transform: rotate(45deg);
 }
 
 i.material-icons,
 h1.quoteauthor {
   display: inline;
+}
+
+button.copyButton {
+  background: transparent;
+  border: none;
+  color: #fff;
+  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

@@ -6,17 +6,16 @@
     flex-direction: row;
     display: block;
     color: #ffff;
-    font-family: 'Lexend Deca';
+    font-family: 'Lexend Deca', sans-serif;;
 
     input[type=text] {
         font-size: calc(5px + 1.2vmin);
-        background: none;
+        background: transparent;
         border: 2px solid #ffff;
         padding: 10px;
         color: #ffff;
         position: absolute;
         box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
-        z-index: 1;
     }
 }
 

src/scss/modules/_settings.scss

@@ -0,0 +1,229 @@
+$gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
+
+.switch {
+  position: relative;
+ /* display: inline-block; */
+  width: 60px;
+  height: 34px;
+  float: right;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+}
+
+.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: white;
+    -webkit-transition: .4s;
+    transition: .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: $gradient;
+    outline: none;
+    font-family: 'Lexend Deca', sans-serif;
+    background: transparent;
+  }
+
+  &:checked + .slider {
+    background: $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: #555;
+}
+
+h4, .switch, .expandIcons {
+  display: inline;
+  font-size: 1.4em;
+  font-weight: 100;
+}
+
+h4, #engines {
+  display: inline;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+%settingsButton {
+  height: 45px;
+  width: 130px;
+  text-align: center;
+  border: none;
+  transition: 0.25s;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  box-shadow: 20px #000;
+  font-size: 1.3em;
+  position: relative;
+
+  &:hover {
+    transform: translateY(-0.10em);
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    width: 0%;
+    top: 0;
+    left: 0;
+    height: 100%;
+    transition: 0.3s linear;
+    z-index: -1;
+    color: #fff;
+  }
+
+  &:hover:before {
+    width: 100%;
+  }
+
+  &:active {
+    outline: none;
+  }
+}
+
+.apply {
+  @extend %settingsButton;
+  background-color: #dd3b67;
+  &:before {
+    background: $gradient;
+  }
+}
+
+.reset {
+  @extend %settingsButton;
+  background-color: #ffb032;
+  margin-left: 20px;
+  &:before {
+    background: linear-gradient(90deg, #dd3b67 0%, #ffb032 100%);
+  }
+}
+
+.expandIcons {
+  position: relative;
+  font-size: 25px;
+  vertical-align: middle;
+  display: inline-flex;
+  cursor: pointer;
+  transition-duration: 0.5s;
+}
+
+.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;
+  }
+}
+
+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: $gradient;
+    cursor: pointer;
+  }
+  
+  &::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    border-radius: 12px;
+    background: $gradient;
+    cursor: pointer;
+  }
+}
+
+input[type=color] {
+  border-radius: 100%;
+  height: 30px;
+  width: 30px;
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;	
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 100%;
+  }
+}

src/scss/modules/_toast.scss

@@ -0,0 +1,97 @@
+#toast {
+    visibility: hidden;
+    text-align: center;
+    position: fixed;
+    z-index: 2;
+    bottom: 30px;
+    padding: 10px;
+    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
+    // backdrop-filter: blur(20px);  stupid firefox :(
+    border-radius: 10px;
+    background: #fff;
+    color: #000;
+    text-align: left;
+    font-size: 16px;
+    width: auto;
+    bottom: 30px;
+    right: 30px;
+
+    &.show {
+        visibility: visible;
+        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+        animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    }
+
+    > img {
+        height: 20px;
+        width: auto;
+        float: left;
+    }
+
+    > hr {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
+
+.copyButton, hr {
+    display: inline;
+    vertical-align: middle;
+}
+
+hr {
+    height: 20px;
+    width: 1px;
+    margin: 0;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+
+@-webkit-keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@keyframes fadein {
+    from {
+        bottom: 0;
+        opacity: 0;
+    }
+
+    to {
+        bottom: 30px;
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes fadeout {
+    from {
+        bottom: 30px;
+        opacity: 1;
+    }
+
+    to {
+        bottom: 0;
+        opacity: 0;
+    }
+}