fix: slider, add about page loading text, background bug fix etc

src/components/modals/main/scss/index.scss

@@ -233,6 +233,10 @@ li {
   font-size: 22px;
   font-weight: 500;
   display: inline-flex;
+
+  &:hover {
+    color: rgb(105, 105, 105);
+  }
 }
 
 .modalNavbar {
@@ -296,7 +300,6 @@ li {
   }
 
   &:hover {
-    opacity: .8;
     background: map-get($theme-colours, 'gradient');
     -webkit-background-clip: text;
     background-clip: text;

src/components/modals/main/scss/settings/_main.scss

@@ -11,19 +11,6 @@ input {
     padding: 10px 10px;
     border-radius: 5px;
   }
-
-  &:checked+.slider {
-    background: map-get($theme-colours, 'gradient');
-
-    &:before {
-      -webkit-transform: translateX(26px);
-      transform: translateX(26px);
-    }
-  }
-
-  &:focus+.slider {
-    box-shadow: 0 0 1px #e67e22;
-  }
 }
 
 h4 {
@@ -42,7 +29,7 @@ ul {
 .range {
   -webkit-appearance: none;
   width: 200px;
-  height: 15px;
+  height: 12px;
   border-radius: 12px;
   outline: none;
   background: var(--sidebar);
@@ -52,10 +39,10 @@ ul {
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 25px;
-    height: 25px;
+    width: 20px;
+    height: 20px;
     border-radius: 12px;
-    background: map-get($theme-colours, 'gradient');
+    background: #ff4757;
     cursor: pointer;
   }
 
@@ -64,7 +51,7 @@ ul {
     height: 25px;
     border-radius: 12px;
     border: 0;
-    background: map-get($theme-colours, 'gradient');
+    background: #ff4757;
     cursor: pointer;
   }
 }

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

@@ -11,7 +11,7 @@ export default class Slider extends React.PureComponent {
     this.language = window.language.modals.main.settings;
   }
 
-  handleChange = () => {
+  handleChange = (e) => {
     const { value } = e.target;
   
     localStorage.setItem(this.props.name, value);

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

@@ -11,7 +11,8 @@ export default class About extends React.PureComponent {
       contributors: [],
       sponsors: [],
       other_contributors: [],
-      update: window.language.modals.main.settings.sections.about.version.checking_update
+      update: window.language.modals.main.settings.sections.about.version.checking_update,
+      loading: 'Loading...'
     }
     this.language = window.language.modals.main.settings.sections.about;
   }
@@ -32,7 +33,8 @@ export default class About extends React.PureComponent {
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
       sponsors: sponsors,
       update: updateMsg,
-      other_contributors: other_contributors
+      other_contributors: other_contributors,
+      loading: null
     });
   }
 
@@ -59,6 +61,7 @@ export default class About extends React.PureComponent {
         <p>Google ({this.language.resources_used.pin_icon})</p>
         <p>Undraw ({this.language.resources_used.welcome_img})</p>
         <h3>{this.language.contributors}</h3>
+        {this.state.loading}
         {this.state.contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
@@ -71,6 +74,7 @@ export default class About extends React.PureComponent {
           </Tooltip>
         )}
         <h3>{this.language.supporters}</h3>
+        {this.state.loading}
         {this.state.sponsors.map((item) =>
           <Tooltip title={item.handle} placement='top' key={item.handle}>
             <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=256'} alt={item.handle}></img></a>

src/components/modals/welcome/welcome.scss

@@ -15,6 +15,7 @@
 }
 
 .welcomeContent {
+  margin-top: 2em;
   text-align: center;
   padding: 25px;
 

src/components/widgets/background/Background.jsx

@@ -132,7 +132,6 @@ export default class Background extends React.PureComponent {
       case 'colour':
         // background colour
         const customBackgroundColour = localStorage.getItem('customBackgroundColour');
-        if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
         let gradientSettings = '';
         try {
           gradientSettings = JSON.parse(customBackgroundColour);
@@ -148,7 +147,6 @@ export default class Background extends React.PureComponent {
         if (typeof gradientSettings === 'object' && gradientSettings !== null) {
           return this.gradientStyleBuilder(gradientSettings);
         }
-      }
       break;
 
       case 'custom':
@@ -188,7 +186,10 @@ export default class Background extends React.PureComponent {
             }
           });
         }
-      }
+      break;
+      default: 
+        break;
+    }
   }
 
   componentDidMount() {

src/components/widgets/navbar/Navbar.jsx

@@ -6,11 +6,9 @@ import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 import Report from '@material-ui/icons/SmsFailed';
 
-import './scss/index.scss';
+import Notes from './Notes';
 
-// the user probably won't use the notes feature every time so we lazy load
-const Notes = React.lazy(() => import('./Notes'));
-const renderLoader = () => <></>;
+import './scss/index.scss';
 
 export default function Navbar(props) {
   const language = window.language;
@@ -20,9 +18,7 @@ export default function Navbar(props) {
       {(localStorage.getItem('notesEnabled') === 'true') ?
         <div className='notes'>
           <NotesIcon className='topicons'/>
-          <React.Suspense fallback={renderLoader()}>
-            <Notes/>
-          </React.Suspense>
+          <Notes/>
         </div>
       :null}