style: code cleanup and about tab changes

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}