0.7.0

fix url for Yanderella

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug-report.md

@@ -14,8 +14,7 @@ A clear and concise description of what the bug is.
 Steps to reproduce the behaviour:
 1. Go to '...'
 2. Click on '....'
-3. Scroll down to '....'
-4. See error
+4. See error in console (Ctrl + Shift + I)
 
 **Expected behaviour**
 A clear and concise description of what you expected to happen.
@@ -24,10 +23,12 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. Windows]
- - Browser [e.g. Chrome, Firefox]
- - Version [e.g. 70]
- - Resolution [e.g 1920x1080]
+ - OS: [e.g. Windows, Ubuntu]
+ - OS Version: [e.g 10, 19.10]
+ - Browser: [e.g. Chrome, Firefox]
+ - Browser Version: [e.g. 70]
+ - Mue Version: [e.g. 0.5]
+ - Resolution: [e.g 1920x1080]
 
 **Additional context**
 Add any other context about the problem here.

.gitignore

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

CODE_OF_CONDUCT.md

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

LICENSE

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

README.md

@@ -1,16 +1,10 @@
-<img src='assets/logo/logo_horizontal.png'>
+![Logo](https://github.com/muetab/branding/raw/master/logo/logo_horizontal.png)
 
 # Mue
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/fba7ad7fc6e14fe0bc2a8d53dbf0bb41)](https://www.codacy.com/app/ohlookitsderpy/Mue?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=ohlookitsderpy/Mue&amp;utm_campaign=Badge_Grade)
 [![Discord Badge](https://discordapp.com/api/guilds/336039472250748928/widget.png)](https://discord.gg/HJmmmTB)
 
-<a href='https://ko-fi.com/ohlookitsderpy' target='_blank'><img height='36' src='assets/kofi.png' alt='Buy me a coffee at ko-fi.com' /></a>
-<a href='https://patreon.com/ohlookitsderpy' target='_blank'><img height='36' src='assets/patreon.png' alt='Become a patron on patreon.com' /></a>
-
 Fast, open and free-to-use new tab page for most modern browsers.
 
-*This is the code for the extension. If you are looking for the website code, please go [here](https://github.com/TurboMarshmello/muetab.xyz).*
-
 ## Features
 * Fast and free
 * Supports multiple browsers
@@ -20,17 +14,17 @@ Fast, open and free-to-use new tab page for most modern browsers.
 * ~~Settings feature - enable/disable features!~~
 * Search bar, ~~update modal, copy button and more!~~
 
-* Mue has been recently rewritten with React and is missing the features that are crossed out *
+*Mue has been recently rewritten with React and is missing the features that are crossed out*
 
 ## Installation
 ### Chrome
-<a href='https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid'><img src='assets/chrome.png' target='_blank'></a> 
+[![Chrome Web Store Logo](assets/chrome.png)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 
 Link: [Chrome Web Store](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
 
 Development: Read the [Development](#development) section.
 ### Firefox
-<a href='https://addons.mozilla.org/firefox/addon/mue'><img src='assets/firefox.png' target='_blank'></a> 
+[![Firefox Add-ons Logo](assets/firefox.png)](https://addons.mozilla.org/firefox/addon/mue)
 
 Link: [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/mue)
 
@@ -40,7 +34,7 @@ Link: [GitHub Releases](https://github.com/ohlookitsderpy/Mue/releases)
 
 Development/Other: Read the [Development](#development) section.
 ### Development
-<h5>Requirements</h5>
+##### Requirements
 <ol>
   <li><a href='https://git-scm.com'>Git</a> (optional)</li>
   <li><a href='https://nodejs.org'>Node.js</a></li>
@@ -48,7 +42,7 @@ Development/Other: Read the [Development](#development) section.
 </ol>
 <h5>Starting</h5>
 <ol>
-  <li> <code>git clone https://github.com/ohlookitsderpy/Mue</code> (If you don't have Git just go to <b>Clone or
+  <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>)
@@ -57,7 +51,7 @@ Development/Other: Read the [Development](#development) section.
 </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.</li>
+Once I find a method to do it automatically, I will update this section accordingly.</i>
 <details>
   <summary><b>Chrome</b> (Click to expand)</summary>
   <ol>
@@ -103,25 +97,25 @@ Once I find a method to do it automatically, I will update this section accordin
 ## Screenshot
 *Will be updated if needed*
 
-<img src='assets/screenshot.jpg'>
+![Screenshot](assets/screenshot.jpg)
 
 ## Credits
 ### Maintainers
-[ohlookitsderpy](https://github.com/ohlookitsderpy)
+[ohlookitsderpy](https://github.com/ohlookitsderpy) (lead dev)
 
-[TurboMarshmello](https://github.com/TurboMarshmello)
+[TurboMarshmello](https://github.com/TurboMarshmello) (name idea, code contributions)
 
 ### Other
-[TurboMarshmello](https://github.com/TurboMarshmello) - Portions of original code, name idea
-
 [Pexels](https://pexels.com) - Stock photos used for offline mode
 
 [Opera Forum](https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14) - Portions of code to add Opera support
 
+[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/tomiedev) - Italian (Quotes and Messages)
+[Yanderella](https://github.com/gbacretin) - Italian (Quotes and Messages)
 
 Pepehound - Spanish (Quotes and Messages)
 
@@ -129,7 +123,7 @@ Candystick - Portuguese (Some Quotes)
 
 [PassTheWessel](https://github.com/PassTheWessel) - Dutch (Messages)
 
-[Yanderella](https://github.com/tomiedev) and [ohlookitsderpy](https://github.com/ohlookitsderpy) - French (Messages)
+[Yanderella](https://github.com/gbacretin) and [ohlookitsderpy](https://github.com/ohlookitsderpy) - French (Messages)
 
 [untocodes](https://github.com/untocodes) - Finnish and German (Messages)
 
@@ -140,3 +134,6 @@ Candystick - Portuguese (Some Quotes)
 *Feel free to pull request with other translations!*
 
 and all the contributors <3
+
+# License
+Code - [BSD-3-Clause](LICENSE)

manifest/background-opera.js

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

manifest/chrome.json

@@ -2,9 +2,10 @@
     "manifest_version": 2,
     "offline_enabled": true,
     "name": "Mue",
-    "version": "0.6",
+    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
+    "version": "0.7",
     "browser_action": {
-        "default_icon": "./android-chrome-512x512.png"
+        "default_icon": "./extension-icon.png"
     },
     "chrome_url_overrides": {
         "newtab": "index.html"

manifest/firefox.json

@@ -1,9 +1,10 @@
 {
     "manifest_version": 2,
     "name": "Mue",
-    "version": "0.6",
+    "description": "Fast, open and free-to-use new tab page for most modern browsers.",
+    "version": "0.7",
     "browser_action": {
-        "default_icon": "./android-chrome-512x512.png"
+        "default_icon": "./extension-icon.png"
     },
     "chrome_url_overrides": {
         "newtab": "index.html"

manifest/opera.json

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

package.json

@@ -1,29 +1,34 @@
 {
   "name": "mue",
-  "author": "ohlookitsderpy",
+  "private": true,
+  "author": "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.xyz> (https://derpyenterprises.org)",
+  "maintainers": [
+    "David \"ohlookitsderpy\" Ralph <d.ralph@muetab.xyz> (https://derpyenterprises.org)",
+    "Alex \"TurboMarshmello\" Sparkes <a.sparkes@muetab.xyz> (https://github.com/TurboMarshmello)"
+  ],
   "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-  "license": "MIT",
-  "version": "2.0.1",
+  "repository": {
+    "url": "github:muetab/mue"
+  },
+  "homepage": "https://muetab.xyz",
+  "bugs": "https://github.com/muetab/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
+  "license": "BSD-3-Clause",
+  "version": "0.7.0",
   "dependencies": {
-    "@material-ui/core": "^4.5.1",
+    "@material-ui/core": "4.7.0",
     "@material-ui/icons": "^4.5.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0",
-    "unfetch": "^4.1.0"
+    "@muetab/quotes": "^1.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0"
   },
   "devDependencies": {
-    "eslint": "^6.5.0",
-    "npm-run-all": "^4.1.5",
-    "sass": "^1.23.0"
+    "eslint": "^6.7.2",
+    "node-sass": "^4.13.0"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "sass": "sass --watch src/scss:src/css --style compressed",
-    "start-all": "npm-run-all -p start sass"
+    "build": "react-scripts build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -36,8 +41,7 @@
     ],
     "development": [
       "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 firefox version"
     ]
   }
 }

public/manifest.json

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

src/App.jsx

@@ -6,7 +6,8 @@ import Greeting from './components/Greeting';
 import Quote from './components/Quote';
 import Search from './components/Search';
 import Credit from './components/Credit';
-import './css/index.css';
+//import Navbar from './components/Navbar';
+import './scss/index.scss'; 
 
 //* App
 export default class App extends React.Component {

src/components/Background.jsx

@@ -1,46 +1,83 @@
+//* Imports
 import React from 'react';
-import Fetch from 'unfetch';
 
-const getCookie = (cookiename) =>  {
-    const cookiestring = RegExp('' + cookiename + '[^;]+').exec(document.cookie);
-    return unescape(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,'') : '');
-};
-  
-const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
-  
 export default class Background extends React.Component {
-  // Set background: Attempt to get one from the API first, and if that fails then use the offline ones.
-  async getAndSetBackground() {
-    const root = document.getElementById('root');
-    
-    try {
-      let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-      data     = await data.json(); 
+  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(); 
 
-      const checkRepeat = getCookie('backgroundimageurl');
-      document.getElementById('photographer').innerText = `Photo by ${data.photographer}`;
-      document.getElementById('location').innerText     = `${data.location}`;
-
-      if (checkRepeat !== root.style.backgroundImage) root.style.backgroundImage = `url(${data.file})`;
-      else {
-        /*let data = await Fetch('https://api.muetab.xyz/getImage?category=Outdoors');
-        data = await data.json();*/ 
-        document.cookie            = 'backgroundimageurl; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-        root.style.backgroundImage = `url(${data.file})`;
-        document.cookie            = `backgroundimageurl=${data.file}`;
+      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;
+        }
       }
-    } catch (e) {
-      document.getElementById('backgroundCredits').style.display = 'none';
-      document.getElementById('photographer').innerText          = 'Photo from Pexels';
-      root.style.backgroundImage = `url(../offline-images/${randomInt(1, 25)}.jpeg)`;
+      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.getAndSetBackground();
+    this.setBackground();
   }
 
   render() {
-    return null;
+    return null; // React gets annoyed if I don't put anything here or use "return;"
   }
 }

src/components/Clock.jsx

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

src/components/Credit.jsx

@@ -1,15 +1,17 @@
 /* eslint-disable */
+//* Imports
 import RoomIcon from '@material-ui/icons/Room';
 import React from 'react';
 
-export default class Search extends React.Component {
+export default class Credit extends React.Component {
   render() {
     return (
       <div className='credits'>
-          {/* <h1 id='location'></h1> */}
-          <h1 id='photographer'></h1>
-          <div id='backgroundCredits' className='tooltip'><RoomIcon className='locationicon'/>
-            <span className='tooltiptext' id='location'></span>
+          {/*<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,19 +1,35 @@
+//* Imports
 import React from 'react';
 
 export default class Greeting extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
-        greeting: ``
+        greeting: ''
     };
  }
 
   getGreeting() {
-    const h = new Date().getHours();
-    let t = 'Good evening'; // Set the default time string to "Good evening"	
-    if (h < 12) t = 'Good morning'; // If it's before 12am, set the time string to "Good morning"
-    else if (h < 18) t = 'Good afternoon'; // If it's before 6pm, set the time string to "Good afternoon"
-    this.setState({ greeting: t }); // Set the state to the time string
+    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() {
@@ -21,6 +37,8 @@ export default class Greeting extends React.Component {
   }
   
   render() {
-    return <h1 className='App-greeting'>{this.state.greeting}</h1>;
+    return <h1 className='greeting'>
+      {this.state.greeting}
+    </h1>;
   }
-}
+}

src/components/Navbar.jsx

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

src/components/Quote.jsx

@@ -1,25 +1,30 @@
+//* Imports
 import React from 'react';
-import Fetch from 'unfetch';
-import quotes from '../quotes.json';
+import Quotes from '@muetab/quotes';
 
 export default class Quote extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
-        quote: ``,
-        author: ``
+        quote: '',
+        author: ''
     };
   }
 
   async getQuote() {
-    try {
-      let data = await Fetch('https://api.muetab.xyz/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) {
-      const randomInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; };
-      const num = randomInt(1, 20);
-      this.setState({ quote: quotes[num].quote, author: quotes[num].author });
+      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
     }
   }
 
@@ -29,9 +34,9 @@ export default class Quote extends React.Component {
 
   render() {
     return [
-    <h1 className='App-quote'>{`"${this.state.quote}"`}</h1>,
-    // <i class="material-icons">perm_identity</i>,
-    <h1 className='App-quote-author'>{`${this.state.author}`}</h1>,
+      <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,13 +1,15 @@
+//* 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='search-bar'>
-    <form id='searchBar' className='searchbarform' action='https://duckduckgo.com/' onSubmit={('search();')}>
-        <input type='text' placeholder='Search' name='q' id='searchText' className='searchText' />
-        <div className='blursearcbBG' />
-      </form>
+      <div 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/css/index.css

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

src/css/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../scss/modules/_clock.scss","../scss/modules/_greeting.scss","../scss/modules/_quote.scss","../scss/modules/_search.scss","../scss/modules/_credit.scss","../scss/modules/_miscellaneous.scss","../scss/index.scss"],"names":[],"mappings":"AAAA,WACE,cACA,SACA,oCAGF,oBACE,eCPF,cACI,SACA,gBACA,oCCHJ,WACE,eACA,oCAGF,qCACE,WACE,gBACA,kBAIJ,kBACE,eACA,oBACA,SACA,oCAGF,qCAEE,eCrBF,YACI,kBACA,UACA,SACA,aACA,mBACA,cACA,WACA,0BAEA,mBACI,eACA,aAMA,eAJA,oCACI,oCAMR,6BACI,8BACA,gBACA,sBACA,aACA,WACA,kBACA,mCACA,UAIR,kBACI,YAGJ,eACI,aACA,mBACA,6CCxCJ,UACE,oBAGF,wBAEE,+BACA,oCACA,uBAGF,cACE,kBACA,YACA,UACA,aAGF,SACE,kBACA,YACA,UAGF,0BAEE,+BAGF,iBACE,kBACA,WACA,SACA,YACA,aACA,eACA,sCAGF,SACE,WACA,SACA,kBACA,gBACA,eAGF,SACE,kBACA,qBACA,8BAEA,sBACE,kBACA,sBACA,WACA,kBACA,kBACA,aACA,kBACA,UACA,kBACA,YACA,UACA,kBAEA,UACA,sBAIJ,4BACE,mBACA,UCzEF,QACE,gBACA,iBACA,aACA,sBACA,uBACA,6BACA,kBAGF,cACE,WACA,UAIF,uBAEE,WCXF,MACI,sBACA,4BACA,kCACA,4BACA,iBACA,aACA,WAGJ,UACI,cAGJ,KACI,mBACA,SACA,mCACA,kCACA,0BACA,gBAGJ,WACI,0BACA","file":"index.css"}

src/index.js

@@ -1,7 +1,9 @@
+//* Imports
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App.jsx';
+import App from './App';
 
+//* Render
 ReactDOM.render(
     <App/>,
     document.getElementById('root')

src/quotes.json

@@ -1,102 +0,0 @@
-{
-    "1": {
-        "author": "Robert De Niro",
-        "quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
-    },
-    "2": {
-        "author": "Walt Disney",
-        "quote": "All our dreams can come true, if we have the courage to pursue them."
-    },
-    "3": {
-        "author": "Confucius",
-        "quote": "It does not matter how slowly you go as long as you do not stop."
-    },
-    "4": {
-        "author": "Roy T. Bennett",
-        "quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
-    },
-    "5": {
-        "author": "Wayne Dyer",
-        "quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
-    },
-    "6": {
-        "author": "George Addair",
-        "quote": "Everything you’ve ever wanted is on the other side of fear."
-    },
-    "7": {
-        "author": "Winston Churchill",
-        "quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
-    },
-    "8": {
-        "author": "Paulo Coelho",
-        "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
-    },
-    "9": {
-        "author": "Brian Tracy",
-        "quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
-    },
-    "10": {
-        "author": "Chantal Sutherland",
-        "quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going."
-    },
-    "11": {
-        "author": "Les Brown",
-        "quote": "Too many of us are not living our dreams because we are living our fears."
-    },
-    "12": {
-        "author": "Bob Riley",
-        "quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
-    },
-    "13": {
-        "author": "Jack Canfield",
-        "quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily."
-    },
-    "14": {
-        "author": "Napolean Hill",
-        "quote": "Whatever the mind can conceive and believe, it can achieve."
-    },
-    "15": {
-        "author": "Jim Rohn",
-        "quote": "Don’t wish it were easier. Wish you were better."
-    },
-    "16": {
-        "author": "Serena Williams",
-        "quote": "A champion is defined not by their wins but by how they can recover when they fall."
-    },
-    "17": {
-        "author": "Sheryl Sandberg",
-        "quote": "Motivation comes from working on things we care about."
-    },
-    "18": {
-        "author": "Reese Witherspoon",
-        "quote": "With the right kind of coaching and determination you can accomplish anything."
-    },
-    "19": {
-        "author": "Hazrat Inayat Khan",
-        "quote": "Some people look for a beautiful place. Others make a place beautiful."
-    },
-    "20": {
-        "author": "Albert Einstein",
-        "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
-    },
-    "21": {
-        "author": "Walt Disney",
-        "quote": "The way to get started is to quit talking and begin doing."
-    },
-    "22": {
-        "author": "Winston Churchill",
-        "quote": "A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty."
-    },
-    "23": {
-        "author": "Will Rogers",
-        "quote": "Don't let yesterday take up too much of today."
-    },
-    "24": {
-        "author": "Vince Lombardi",
-        "quote": "It's not whether you get knocked down, it's whether you get up."
-    },
-    "25": {
-        "author": "Steve Jobs",
-        "quote": "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you."
-    }
-}

src/scss/index.scss

@@ -1,34 +1,8 @@
+/* Imports */
 @import 'modules/clock';
 @import 'modules/greeting';
 @import 'modules/quote';
 @import 'modules/search';
 @import 'modules/credit';
-@import 'modules/miscellaneous';
-
-#root {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-attachment: fixed;
-    min-height: 100vh;
-    display: grid;
-    color: white;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-body {
-    background: #2f3640;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: 'Lexend Deca';
-    overflow: hidden;
-}
-
-@font-face {
-    font-family: 'Lexend Deca';
-    src: url('/./fonts/LexendDeca-Regular.woff2') format('woff2');
-}
+/*@import 'modules/navbar';*/
+@import 'modules/miscellaneous';

src/scss/modules/_clock.scss

@@ -1,9 +1,9 @@
-.App-clock {
+.clock {
   font-size: 4em;
   margin: 0;
   text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
-.App-ampm-specifier {
+.ampm {
   font-size: 0.5em;
 }

src/scss/modules/_credit.scss

@@ -1,7 +1,3 @@
-#location {
-  margin-bottom: -10px;
-}
-
 #location,
 #photographer {
   font-size: calc(10px + 1.2vmin);
@@ -9,6 +5,10 @@
   text-overflow: ellipsis;
 }
 
+#location {
+  margin-bottom: -10px;
+}
+
 #photographer {
   position: absolute;
   bottom: 10px;
@@ -16,15 +16,9 @@
   width: 1000px;
 }
 
-.tooltip {
-  position: absolute;
-  bottom: 15px;
-  left: 10px;
-}
-
-.personicon,
 .locationicon {
   font-size: calc(10px + 1.2vmin);
+  cursor: pointer;
 }
 
 .MuiSvgIcon-root {
@@ -49,6 +43,8 @@
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
+  bottom: 15px;
+  left: 10px;
 
   .tooltiptext {
     visibility: hidden;
@@ -59,11 +55,9 @@
     padding: 20px;
     position: absolute;
     z-index: 1;
-    position: absolute;
     bottom: 40px;
     left: 60px;
     margin-left: -60px;
-    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
     opacity: 0;
     transition: opacity 1s;
   }

src/scss/modules/_greeting.scss

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

src/scss/modules/_miscellaneous.scss

@@ -1,3 +1,12 @@
+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;
@@ -11,10 +20,19 @@
 ::placeholder {
   color: #ffffff;
   opacity: 1;
-  /* Firefox */
 }
 
-:-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
-  color: #ffffff;
+#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/_navbar.scss

@@ -0,0 +1,25 @@
+%navbar {
+    position: absolute;
+    text-align: right;
+    min-width: 50px;
+}
+
+.navbar1 {
+    @extend navbar;
+    top: 50px;
+    right: 0px;
+}
+
+.navbar2 {
+    @extend navbar;
+    top: 50px;
+    right: 50px;
+}
+
+.PizzaIcon {
+    margin-right: 20px; 
+}
+
+.pizza {
+    right: 2000px;
+}

src/scss/modules/_quote.scss

@@ -1,16 +1,16 @@
-.App-quote {
+.quote {
   font-size: 0.8em;
   text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 @media screen and (min-width: 600px) {
-  .App-quote {
+  .quote {
     margin-left: 30%;
     margin-right: 30%;
   }
 }
 
-.App-quote-author {
+.quoteauthor {
   font-size: 0.9em;
   letter-spacing: 0.5px;
   margin: 0;
@@ -18,6 +18,6 @@
 }
 
 i.material-icons,
-h1.App-quote-author {
+h1.quoteauthor {
   display: inline;
 }

src/scss/modules/_search.scss

@@ -1,4 +1,4 @@
-.search-bar {
+.searchbar {
     position: absolute;
     left: 20px;
     top: 20px;
@@ -8,17 +8,6 @@
     color: #ffff;
     font-family: 'Lexend Deca';
 
-    button {
-        cursor: pointer;
-        outline: none;
-
-        i.material-icons {
-            text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
-        }
-
-        display: inline;
-    }
-
     input[type=text] {
         font-size: calc(5px + 1.2vmin);
         background: none;
@@ -31,7 +20,7 @@
     }
 }
 
-.input.searchText {
+.input.searchtext {
     border: none;
 }