Fix 0 space gamer name

README.md

@@ -5,7 +5,7 @@
 
 [![License](https://img.shields.io/badge/license-BSD%203-blue?style=flat-square)](/LICENSE) [![Discord](https://img.shields.io/discord/659129207208804381?label=discord&color=7289DA&style=flat-square)](https://discord.gg/zv8C9F8) [![Code Size]( https://img.shields.io/github/languages/code-size/mue/mue?color=green&label=size&style=flat-square)]()
 <br>
-[![Microsoft Edge](https://img.shields.io/badge/dynamic/json?style=flat-square&label=microsoft%20edge&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Faepnglgjfokepefimhbnibfjekidhmja)](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja) [![Firefox](https://img.shields.io/amo/v/mue?label=firefox&style=flat-square)](https://addons.mozilla.org/firefox/addon/mue) [![Chrome](https://img.shields.io/chrome-web-store/v/bngmbednanpcfochchhgbkookpiaiaid?label=chrome&style=flat-square)](https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid)
+[![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
 
@@ -39,12 +39,12 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 * Fast and free
 * Supports multiple browsers
 * Actively developed and open source
-* Automatically updating API (no tracking) with new photos, quotes and offline mode
+* Automatically updating API (with 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!
 
 ## Planned Features
+* Settings - enable/disable features!
+* Update modal, copy button and more!
 * Multilingual support
 
 ## Installation
@@ -63,7 +63,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/aepnglgjfokepefimhbnibfjekidhmja)
 
 ### Opera/Other
-[GitHub Releases](https://github.com/mue/mue/releases)
+Link: [GitHub Releases](https://github.com/mue/mue/releases)
 
 ### Development
 #### Requirements
@@ -79,7 +79,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
   <li> run <code>yarn start</code> or <code>npm start</code> to start testing
   <li> Code your heart out! (See the sections below for how to build the extension)
 </ol>
-<h2>Building</h2>
+<h2>Building</h5>
 <details>
   <summary><b>Chrome/Edge (Chromium)</b> (Click to expand)</summary>
   <ol>
@@ -95,7 +95,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
   <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"
-    <li> Copy <code>background-opera.js</code> in the "manifest" folder to "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>
@@ -127,12 +127,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 ## Credits
 ### Maintainers
 [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, Lead design, <br>
-
-### 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
@@ -140,4 +135,9 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 [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
 
+### Contributors
+[Wessel](https://github.com/Wessel) - Development <br>
+[Isaac](https://github.com/eartharoid) - Development <br>
+[Chris](https://github.com/auguwu) - Development <br>
+
 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,7 +3,7 @@
     "offline_enabled": true,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "3.0.1",
+    "version": "0.7.1",
     "browser_action": {
         "default_icon": "./icons/extension-icon.png"
     },

manifest/firefox.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "3.0.1",
+    "version": "0.7.2",
     "browser_action": {
         "default_icon": "./icons/extension-icon.png"
     },

manifest/opera.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Mue",
     "description": "Fast, open and free-to-use new tab page for most modern browsers.",
-    "version": "3.0.1",
+    "version": "0.7.1",
     "browser_action": {
         "default_icon": "./icons/extension-icon.png"
     },

package.json

@@ -13,7 +13,7 @@
   "homepage": "https://muetab.xyz",
   "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
   "license": "BSD-3-Clause",
-  "version": "3.0.1",
+  "version": "3.0",
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",

src/App.jsx

@@ -42,14 +42,10 @@ export default class App extends React.Component {
     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);

src/components/Search.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 export default class Search extends React.Component {
   render() {
-    const enabled = localStorage.getItem('searchBar');
+    const enabled = localStorage.getItem('searchbar');
     if (enabled === 'false') return (<div></div>);
 
     const searchEngine = localStorage.getItem('searchEngine');

src/components/Settings.jsx

@@ -1,4 +1,3 @@
-// eslint-disable
 import React from 'react';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 
@@ -26,24 +25,31 @@ export default class Settings extends React.Component {
     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);
+    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 'greetingName':
+        localStorage.setItem('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 'customBackground':
+        localStorage.setItem('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!');
+      default:
+        console.log('[ERROR] resetItem requires a key!');
     }
     this.showToast();
   }
@@ -57,12 +63,6 @@ export default class Settings extends React.Component {
 
   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);
@@ -88,12 +88,6 @@ export default class Settings extends React.Component {
     document.addEventListener('keyup', (event) => {
       if (event.keyCode === 13) this.saveStuff();
     });
-
-    const darkTheme = localStorage.getItem('darkTheme');
-    if (darkTheme === 'true') {
-      document.getElementById('customBackground').style.color = 'white';
-      document.getElementById('greetingName').style.color = 'white';
-    }
   }
 
   render() {
@@ -112,11 +106,11 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-            <input name="1" type="checkbox" onClick={()=> this.setItem('seconds')} id='secondsStatus' />
+            <input id="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' />
+            <input id="2" type="checkbox" onClick={()=> this.setItem('24hour')} id='24hourStatus' />
             <label htmlFor="2">24 Hour</label>
             </ul>
           </li>
@@ -131,11 +125,11 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-            <input name="3" type="checkbox" onClick={()=> this.setItem('events')} id='eventsStatus' />
+            <input id="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>
+              <p>Name for greeting <a className="modalLink" onClick={() => this.resetItem('greetingName')}>Reset</a></p>
               <input type='text' id='greetingName'></input>
             </ul>
           </li>
@@ -144,12 +138,12 @@ export default class Settings extends React.Component {
           <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' />
+            <input id="quoteStatus" 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' />
+            <input id="5" type="checkbox" onClick={()=> this.setItem('copyButton')} id='copyButtonStatus' />
             <label htmlFor="5">Copy Button</label>
             </ul>
           </li>
@@ -163,20 +157,19 @@ export default class Settings extends React.Component {
           </label>
           <li className="extraSettings">
             <ul>
-              <p>Adjust Blur (<span id='blurAmount'></span>%) <span className="modalLink" onClick={() => this.resetItem('blur')}>Reset</span></p>
+              <p>Adjust Blur (<span id='blurAmount'></span>%) <a className="modalLink" onClick={() => this.resetItem('blur')}>Reset</a></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>
+              <p>Custom Background URL <a className="modalLink" onClick={() => this.resetItem('customBackground')}>Reset</a></p>
               <input type='text' id='customBackground'></input>
             </ul>
-            { /*<ul>
+            <ul>
-              <p>Custom Background Colour <span className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</span></p>
+              <p>Custom Background Colour <a className="modalLink" onClick={() => this.resetItem('customBackgroundColour')}>Reset</a></p>
-              <input name='colour' type='color' id='customBackgroundColour' onChange={() => document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}></input>
+              <input type='color' id='customBackgroundColour'></input>
-              <label for='colour' id='customBackgroundHex'>#00000</label>
+            </ul>
-            </ul>  */}
           </li>
         </div>
         <div className='section'>
@@ -205,16 +198,15 @@ export default class Settings extends React.Component {
             <span className="slider"></span>
           </label>
         </div>
-        <h3>Experimental</h3>
         <div className='section'>
-          <h4>Enable WebP</h4>
+          <h4>Enable WebP (experimental)</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>
+          <h4>Dark Theme (experimental)</h4>
           <label className="switch">
             <input type="checkbox" onClick={()=> this.setItem('darkTheme')} id='darkThemeStatus'  />
             <span className="slider"></span>

src/scss/modules/_modal.scss

@@ -13,18 +13,24 @@
   }
 }
 
-.modalLink {
+a.modalLink {
   color: #5352ed;
   cursor: pointer;
-  &:hover {
+}
-    opacity: 0.8;
+
-  }
+.Overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .closeModal {
   float: right;
   font-size: 2em;
   cursor: pointer;
+
   &:hover {
     color: grey;
   }
@@ -40,13 +46,11 @@
   overflow: hidden; /* prevents background page from scrolling when the modal is open */
 }
 
-.Overlay {
+.ReactModal__Overlay {
   position: fixed;
   z-index: 999999;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
   width: 100vw;
   height: 90vh;
   display: flex;

src/scss/modules/_search.scss

@@ -6,7 +6,7 @@
     flex-direction: row;
     display: block;
     color: #ffff;
-    font-family: 'Lexend Deca', sans-serif;;
+    font-family: 'Lexend Deca';
 
     input[type=text] {
         font-size: calc(5px + 1.2vmin);

src/scss/modules/_settings.scss

@@ -22,6 +22,8 @@ $gradient: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
   right: 0;
   bottom: 0;
   background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
   border-radius: 34px;
 
   &:before {
@@ -100,7 +102,6 @@ h4, #engines {
   box-shadow: 20px #000;
   font-size: 1.3em;
   position: relative;
-  font-family: 'Lexend Deca', sans-serif;
 
   &:hover {
     transform: translateY(-0.10em);
@@ -169,10 +170,6 @@ h4, #engines {
 ul {
   padding-left: 5px;
   margin: 0;
-
-  > label {
-    vertical-align: middle;
-  }
 }
 
 li {
@@ -208,27 +205,3 @@ li {
     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%;
-  }
-}
-
-input[type=checkbox] {
-  vertical-align: middle;
-}