style: code cleanup and about tab changes

src/components/modals/main/settings/ResetModal.jsx

@@ -12,7 +12,7 @@ export default function ResetModal(props) {
 
   return (
     <>
-      <h3 style={{'textAlign': 'center'}}>{language.title}</h3>
+      <h3 style={{ 'textAlign': 'center' }}>{language.title}</h3>
       <h4>{language.question}</h4>
       <p>{language.information}</p>
       <div className='resetfooter'>

src/components/modals/main/settings/sections/About.jsx

@@ -86,7 +86,7 @@ export default class About extends React.PureComponent {
       <>
         <h2>{this.language.title}</h2>
         <img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Mue logo'></img>
-        <p>{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
+        <p>{this.language.copyright} 2018-{new Date().getFullYear()} <a href='https://github.com/mue/mue/graphs/contributors' className='aboutLink' target='_blank' rel='noopener noreferrer'>The Mue Authors</a> (BSD-3 License)</p>
         <p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
 
         <h3>{this.language.contact_us}</h3>
@@ -97,10 +97,17 @@ export default class About extends React.PureComponent {
         <a href='https://discord.gg/zv8C9F8' className='aboutIcon' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
 
         <h3>{this.language.support_mue}</h3>
-        <p><a href='https://github.com/sponsors/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> • <a href='https://ko-fi.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> • <a href='https://patreon.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a></p>
+        <p>
+          <a href='https://github.com/sponsors/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
+          &nbsp; • &nbsp;<a href='https://ko-fi.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
+          &nbsp; • &nbsp;<a href='https://patreon.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
+        </p>
 
         <h3>{this.language.resources_used.title}</h3>
-        <p><a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>, <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.language.resources_used.bg_images})</p>
+        <p>
+          <a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>
+          , <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.language.resources_used.bg_images})
+        </p>
         <p><a href='https://fonts.google.com/icons?selected=Material+Icons' className='aboutLink' target='_blank' rel='noopener noreferrer'>Google Fonts</a> ({this.language.resources_used.pin_icon})</p>
         <p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.language.resources_used.welcome_img})</p>
 

src/components/modals/main/settings/sections/Experimental.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
-//import Text from '../Text';
 
 export default function ExperimentalSettings() {
   const { experimental } = window.language.modals.main.settings.sections;
@@ -15,15 +14,6 @@ export default function ExperimentalSettings() {
       <h3>{experimental.developer}</h3>
       <Checkbox name='debug' text='Debug hotkey (Ctrl + #)' element='.other'/>
       <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' element='.other' />
-      {/* <Checkbox name='beta' text='Beta Mode Override'/>
-      <Text name='api_override' title='Version Override (format example: 5.0)'/>
-      <Text name='api_override' title='API URL Override'/>
-      <Text name='marketplace_override' title='Marketplace URL Override'/>
-      <Text name='unsplash_override' title='Unsplash URL Override'/>
-      <Text name='sponsors_override' title='Sponsors URL Override'/>
-      <Text name='github_override' title='GitHub URL Override'/> 
-      <br/><br/>
-      */}
       <br/><br/>
       <button className='reset' style={{'marginLeft': '0px'}} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
     </>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -139,7 +139,6 @@ export default class BackgroundSettings extends React.PureComponent {
     switch (this.state.backgroundType) {
       case 'custom': backgroundSettings = customSettings; break;
       case 'colour': backgroundSettings = <ColourSettings/>; break;
-      // API
       default: backgroundSettings = APISettings; break;
     }
   

src/components/modals/main/settings/sections/background/Colour.jsx

@@ -176,4 +176,4 @@ export default class ColourSettings extends React.PureComponent {
       </>
     );
   }
-}
+}

src/components/widgets/navbar/Navbar.jsx

@@ -19,10 +19,10 @@ export default function Navbar(props) {
 
   return (
     <>
-      {(localStorage.getItem('navbarHover') === 'true') ? <div className='navbar-hidden'/> :null}
+      {(localStorage.getItem('navbarHover') === 'true') ? <div className='navbar-hidden'/> : null}
       <div className='navbar-container'>
-        {(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> :null}
-        {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> :null}
+        {(localStorage.getItem('view') === 'true' && backgroundEnabled) ? <Maximise/> : null}
+        {(localStorage.getItem('favouriteEnabled') === 'true' && backgroundEnabled) ? <Favourite/> : null}
   
         {(localStorage.getItem('notesEnabled') === 'true') ?
           <div className='notes'>
@@ -35,13 +35,13 @@ export default function Navbar(props) {
           <Tooltip title={language.widgets.navbar.tooltips.feedback}>
             <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
           </Tooltip>
-        :null}
+        : null}
 
         {(localStorage.getItem('refresh') === 'true') ?
           <Tooltip title={language.widgets.navbar.tooltips.refresh}>
             <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
           </Tooltip>
-        :null}
+        : null}
 
         <Tooltip title={language.modals.main.navbar.settings}>
           <Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>

src/components/widgets/navbar/Notes.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+
 import CopyIcon from '@material-ui/icons/FileCopyRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Pin from './Pin';

src/components/widgets/navbar/scss/_notes.scss

@@ -7,6 +7,10 @@
     cursor: initial;
     user-select: none;
   }
+
+  &:hover .notescontainer {
+    visibility: visible;
+  }
 }
 
 .notescontainer {
@@ -30,10 +34,6 @@
   }
 }
 
-.notes:hover .notescontainer {
-  visibility: visible;
-}
-
 textarea {
   border: none;
   resize: none;

src/components/widgets/navbar/scss/index.scss

@@ -37,10 +37,6 @@
   visibility: visible !important;
 }
 
-.navbar-hidden + .navbar-container {
-  display: none;
-}
-
 .navbar-hidden {
   position: absolute;
   width: 50vw;
@@ -48,12 +44,16 @@
   top: 0;
   background: none;
   height: 75px;
-}
 
-.navbar-hidden:hover + .navbar-container {
-  display: block !important;
-}
+  +.navbar-container {
+    display: none;
+  }
 
-.navbar-container:hover {
-  display: block;
-}
+  &:hover {
+    display: block;
+
+    +.navbar-container {
+      display: block !important;
+    }
+  }
+}

src/components/widgets/weather/Weather.jsx

@@ -169,8 +169,8 @@ export default class Weather extends React.PureComponent {
         <span className='minmax'>{minmax()}</span>
         {enabled('humidity') ? <span className='loc'><br/><WiHumidity/>{this.state.weather.humidity}%</span> : null}
         {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.wind_speed}<span className='minmax'> m/s</span> {enabled('windDirection') ? <WindDirectionIcon degrees={this.state.weather.wind_degrees}/> : null}</span> : null}
-        {enabled('cloudiness') ? <span className='loc'><br/><WiCloud/>{this.state.weather.cloudiness}%</span>: null}
-        {enabled('visibility') ? <span className='loc'><br/>{this.state.weather.visibility} meters</span>: null}
+        {enabled('cloudiness') ? <span className='loc'><br/><WiCloud/>{this.state.weather.cloudiness}%</span> : null}
+        {enabled('visibility') ? <span className='loc'><br/>{this.state.weather.visibility} meters</span> : null}
         {enabled('atmosphericpressure') ? <span className='loc'><br/><WiBarometer/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
         <br/>
         {enabled('showlocation') ? <span className='loc'>{this.state.location}</span> : null}