Cleanup things and style custom background gradient

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

src/App.jsx

@@ -41,17 +41,13 @@ export default class App extends React.PureComponent {
   render() {
     if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
 
-    let modalClassList = 'Modal';
-    if (localStorage.getItem('darkTheme') === 'true') modalClassList = 'Modal dark';
+    const modalClassList = (localStorage.getItem('darkTheme') === 'true') ? 'Modal dark' : 'Modal'; // Modal features
+    const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
 
-    let overlayClassList = 'Overlay';
-    if (localStorage.getItem('animations') === 'true') overlayClassList = 'Overlay modal-animation';
+    const en = require('./translations/en.json'); // User language
+    const language = merge(en, require(`./translations/${localStorage.getItem('language') || 'en'}.json`));
 
-    let language = require(`./translations/${localStorage.getItem('language') || 'en'}.json`);
-    const en = require('./translations/en.json');
-    language = merge(en, language);
-
-    const theme = localStorage.getItem('theme');
+    const theme = localStorage.getItem('theme'); // Marketplace themes (WIP)
     if (theme) {
       const style = document.createElement('link');
       style.href = theme;

src/components/modals/Update.jsx

@@ -14,7 +14,7 @@ export default class Update extends React.PureComponent {
  }
 
  async getUpdate() {
-  let supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
+  const supportText = `<br/><p>${this.props.language.contactsupport}: <a target='_blank' class='modalLink' href='https://muetab.xyz/contact.html'</a>https://muetab.xyz/contact</p>`;
 
   if (localStorage.getItem('offlineMode') === 'true') return this.setState({
     title: this.props.language.offline.title,
@@ -27,6 +27,7 @@ export default class Update extends React.PureComponent {
       title: this.props.language.error.title,
       html: this.props.language.error.description + supportText
     });
+
     this.setState({
       title: data.title,
       date: data.published,

src/components/modals/settings/Section.jsx

@@ -12,10 +12,8 @@ export default class Section extends React.PureComponent {
   }
 
   toggleSection() {
-    let display = 'none';
-    if (this.state.display === 'none') display = 'block';
-    let transform = 'rotate(0)';
-    if (this.state.transform === 'rotate(0)') transform = 'rotate(-180deg)';
+    const display = (this.state.display === 'none') ? 'block': 'none';
+    const transform = (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)';
 
     this.setState({
       display: display,
@@ -31,7 +29,7 @@ export default class Section extends React.PureComponent {
                         style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
                         className={`expandIcons`}
                         onClick={() => this.toggleSection()}
-                      />
+                      />;
     }
 
     if (this.props.slider !== false) slider = <Slider name={this.props.name} />;

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

@@ -51,6 +51,7 @@ export default class BackgroundSettings extends React.PureComponent {
 
     const hex = localStorage.getItem('customBackgroundColour');
     let gradientSettings = undefined;
+
     if (hex !== '') {
       try {
         gradientSettings = JSON.parse(hex);
@@ -58,15 +59,14 @@ export default class BackgroundSettings extends React.PureComponent {
         //Disregard exception.
       }
     }
-    if (gradientSettings === undefined) {
-      gradientSettings = this.DefaultGradientSettings
-    }
+
+    if (gradientSettings === undefined) gradientSettings = this.DefaultGradientSettings;
 
     this.setState({
       blur: localStorage.getItem('blur'),
       brightness: localStorage.getItem('brightness'),
       gradientSettings
-    })
+    });
 
     document.getElementById('customBackground').value = localStorage.getItem('customBackground');
     document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
@@ -124,7 +124,7 @@ export default class BackgroundSettings extends React.PureComponent {
         gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
       });
     }
-    return "Disabled";
+    return 'Disabled';
   }
 
   render() {
@@ -134,10 +134,10 @@ export default class BackgroundSettings extends React.PureComponent {
         const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
         return (
           <div key={i}>
-            {gradientHasMoreThanOneColour ? (<button type="button" className="remove" onClick={() => this.removeColour(i)}>x</button>) : null}
+            {gradientHasMoreThanOneColour ? (<button type='button' className='remove' onClick={() => this.removeColour(i)}>×</button>) : null}
             <input id={'colour_' + i} type='color' name='colour' className="colour" onChange={(event) => this.onGradientChange(event, i)} value={g.colour}></input>
             <label htmlFor={'colour_' + i} className="customBackgroundHex">{g.colour}</label>
-            {gradientHasMoreThanOneColour ? (              
+            {gradientHasMoreThanOneColour ? (
                 <input type="number" name='stop' className='stop' min={0} max={100} value={g.stop} onChange={(event) => this.onGradientChange(event, i)} />
               ) : null}
           </div>);

src/components/widgets/Clock.jsx

@@ -17,11 +17,8 @@ export default class Clock extends React.PureComponent {
       const now = new Date();
 
       // Analog clock
-      if (localStorage.getItem('analog') === 'true') {
-        this.setState({
-          time: now
-        });
-      } else {
+      if (localStorage.getItem('analog') === 'true') this.setState({ time: now });
+      else {
         let sec = '';
 
         // Extra 0
@@ -35,11 +32,9 @@ export default class Clock extends React.PureComponent {
         if (localStorage.getItem('24hour') === 'true') {
           let time = '';
           if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`;
-
           else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
-          this.setState({
-            time: time
-          });
+
+          this.setState({ time: time });
         } else {
           // 12 hour support
           let hours = now.getHours();

src/components/widgets/Greeting.jsx

@@ -32,7 +32,7 @@ export default class Greeting extends React.PureComponent {
 
     // Events
     message = this.doEvents(now, message);
-    let custom = localStorage.getItem('defaultGreetingMessage');
+    const custom = localStorage.getItem('defaultGreetingMessage');
     if (custom === 'false') message = '';
 
     // Name

src/components/widgets/Maximise.jsx

@@ -22,7 +22,7 @@ export default class View extends React.PureComponent {
     const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time'];
     elements.forEach((element) => {
         try {
-            (this.state.hidden === false) ?  document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
+            (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
         } catch (e) {
             return;
         }

src/components/widgets/Quote.jsx

@@ -41,8 +41,7 @@ export default class Quote extends React.PureComponent {
     if (quotePackAPI) {
       try {
         const data = await (await fetch(quotePackAPI.url)).json();
-        let author = data[quotePackAPI.author];
-        if (quotePackAPI.authorOverride) author = quotePackAPI.authorOverride;
+        const author = quotePackAPI.authorOverride || data[quotePackAPI.author];
         return this.setState({
           quote: '"' + data[quotePackAPI.quote] + '"',
           author: author
@@ -77,11 +76,9 @@ export default class Quote extends React.PureComponent {
   }
 
   render() {
-    let copy = <FileCopy className='copyButton' onClick={() => this.copyQuote()}></FileCopy>;
-    if (localStorage.getItem('copyButton') === 'false') copy = null;
-
-    let tweet = <TwitterIcon className='copyButton' onClick={() => window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus()}/>
-    if (localStorage.getItem('tweetButton') === 'false') tweet = null;
+    const copy = (localStorage.getItem('copyButton') === 'false') ? null : <FileCopy className='copyButton' onClick={() => this.copyQuote()}></FileCopy>;
+    const tweet = (localStorage.getItem('tweetButton') === 'false') ? null :
+                  <TwitterIcon className='copyButton' onClick={() => window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus()}/>;
 
     return (
         <div className='quotediv'>

src/components/widgets/Search.jsx

@@ -20,8 +20,7 @@ export default class Search extends React.PureComponent {
     if (custom) url = custom;
 
     const searchButton = () => {
-      let value = document.getElementById('searchtext').value;
-      if (!value) value = 'mue fast';
+      const value = document.getElementById('searchtext').value || 'mue fast';
       window.location.href = url + `?${query}=` + value;
     };
 

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 import './scss/index.scss';
-import 'react-toastify/dist/ReactToastify.css';
+import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
 
 ReactDOM.render(
     <App/>,

src/modules/settingsFunctions.js

@@ -1,4 +1,4 @@
-import detectBrowserLanguage from 'detect-browser-language';
+const defaultSettings = require('./defaultSettings.json');
 
 const saveFile = (data, filename = 'file') => {
     if (!data) return console.error('No data');
@@ -16,8 +16,6 @@ const saveFile = (data, filename = 'file') => {
     a.dispatchEvent(e);
 };
 
-const defaultSettings = require('./defaultSettings.json');
-
 export default class SettingsFunctions {
     static exportSettings() {
         let settings = {};
@@ -81,7 +79,7 @@ export default class SettingsFunctions {
 
         // Languages
         const languages = ['nl', 'no', 'fr', 'ru'];
-        const browserLanguage = detectBrowserLanguage();
+        const browserLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;
         if (languages.includes(browserLanguage)) {
             localStorage.setItem('language', browserLanguage);
             document.documentElement.lang = browserLanguage;

src/scss/modules/_buttons.scss

@@ -73,14 +73,16 @@
 
 .remove {
   @extend %settingsButton;
-  border-radius: 4px;
-  padding: 5px;
-  width: 25px;
-  background-color: map-get($modal, "background");
-  border: 2px solid map-get($modal, "background");
+  border-radius: 50%;
+  background: none;
+  border: 2px solid rgba(0,0,0,0);
   color: map-get($button-colours, "reset");
   text-align: center;
   vertical-align: sub;
+  height: 60px;
+  width: 60px;
+  padding: 0px;
+  font-size: 30px;
 
   &:hover {
     color: map-get($button-colours, "background");
@@ -187,4 +189,19 @@
     border: 2px solid #2d3436;
     background: none;
   }
+}
+
+.stop {
+  outline: none;
+  border-image-slice: 1;
+  border-image-source: map-get($theme-colours, "gradient");
+  font-size: 1.2em;
+  padding-left: 7px;
+  vertical-align: middle;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  opacity: 1;
+  outline: none;
 }

src/scss/modules/_settings.scss

@@ -243,7 +243,6 @@ select#language {
   cursor: pointer;
 }
 
-
 // Dark Theme
 .dark {
   #blurRange, #brightnessRange {