cleanup

src/App.jsx

@@ -12,7 +12,7 @@ import Date from './components/widgets/Date';
 
 import Navbar from './components/Navbar';
 
-import SettingsFunctions from './modules/helpers/settings';
+import SettingsFunctions from './modules/helpers/Settings';
 import { ToastContainer } from 'react-toastify';
 import Modal from 'react-modal';
 import merge from 'lodash.merge';

src/components/modals/MainModal.jsx

@@ -55,8 +55,7 @@ export default class MainModal extends React.PureComponent {
                   settingsActive: ''
               });
               break;
-            default:
-                break;
+            default: break;
       }
   }
 
@@ -73,6 +72,6 @@ export default class MainModal extends React.PureComponent {
         <br/>
         {this.state.tab}
       </div>
-    )
+    );
   }
 }

src/components/modals/Update.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as Constants from '../../modules/constants';
+import * as Constants from '../../modules/Constants';
 
 export default class Update extends React.PureComponent {
   constructor(...args) {

src/components/modals/Welcome.jsx

@@ -21,7 +21,7 @@ export default class Welcome extends React.PureComponent {
           <br/>
           <button className='close' onClick={this.props.modalClose}>{this.props.language.close}</button>
         </div>
-      </div>
+       </div>
       );
     }
 }

src/components/modals/settings/Checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingsFunctions from '../../../modules/helpers/settings';
+import SettingsFunctions from '../../../modules/helpers/Settings';
 import CheckboxUI from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 

src/components/modals/settings/Section.jsx

@@ -13,29 +13,27 @@ export default class Section extends React.PureComponent {
 
   toggleSection() {
     const display = (this.state.display === 'none') ? 'block': 'none';
-    const transform = (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)';
 
     this.setState({
       display: display,
-      transform: transform
+      transform: (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)'
     });
 
-    if (this.props.onToggle) {
-      this.props.onToggle(display);
-    }
+    if (this.props.onToggle) this.props.onToggle(display);
   }
 
   render() {
     let extraHTML, expandMore, slider, noDropdown;
+
     if (this.props.children) {
         extraHTML = <li className='extraSettings'>{this.props.children}</li>
-        expandMore = <ExpandMore
-                        style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
-                        className={`expandIcons`}
-                        onClick={() => this.toggleSection()}
-                      />;
+        expandMore = (
+          <ExpandMore
+            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} />;
     if (this.props.noDropdown) noDropdown = 'nodropdown';
 

src/components/modals/settings/Slider.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingsFunctions from '../../../modules/helpers/settings';
+import SettingsFunctions from '../../../modules/helpers/Settings';
 
 export default class Slider extends React.PureComponent {
   constructor(...args) {

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

@@ -7,6 +7,9 @@ import { ColorPicker } from 'react-color-gradient-picker';
 import hexToRgb from '../../../../modules/helpers/background/hexToRgb';
 import rgbToHex from '../../../../modules/helpers/background/rgbToHex';
 
+import 'react-color-gradient-picker/dist/index.css';
+import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
+
 export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" };
   GradientPickerInitalState = undefined;
@@ -171,7 +174,8 @@ export default class BackgroundSettings extends React.PureComponent {
             <div key={i}>
               <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>
-            </div>);
+            </div>
+          );
         });
       }
       colourSettings = (
@@ -180,7 +184,8 @@ export default class BackgroundSettings extends React.PureComponent {
           {this.state.gradientSettings.gradient[0].colour !== this.props.language.background.disabled &&
            !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.background.add_colour}</button>) : null
           }
-        </div>);
+        </div>
+      );
     }
     return (
       <React.Fragment>

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

@@ -9,8 +9,7 @@ export default class LanguageSettings extends React.PureComponent {
         <Dropdown
           name='language'
           id='language'
-          onChange={() => localStorage.setItem('language', document.getElementById('language').value)}
-        >
+          onChange={() => localStorage.setItem('language', document.getElementById('language').value)} >
           <option className='choices' value='en'>English</option>
           <option className='choices' value='es'>Español</option>
           <option className='choices' value='fr'>Français</option>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingsFunctions from '../../../../modules/helpers/settings';
+import SettingsFunctions from '../../../../modules/helpers/Settings';
 import { toast } from 'react-toastify';
 import Section from '../Section';
 import Dropdown from '../Dropdown';
@@ -31,8 +31,7 @@ export default class SearchSettings extends React.PureComponent {
             <Dropdown label={this.props.language.searchbar.search_engine}
               name='searchEngine'
               id='searchEngine'
-              onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}
-            >
+              onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)} >
               {searchEngines.map((engine) =>
                 <option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
               )}

src/components/modals/tabs/Addons.jsx

@@ -3,13 +3,13 @@ import LocalMallIcon from '@material-ui/icons/LocalMall';
 import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
 import Items from '../marketplace/Items';
-import MarketplaceFunctions from '../../../modules/helpers/marketplace';
+import MarketplaceFunctions from '../../../modules/helpers/Marketplace';
 
 export default class Addons extends React.PureComponent {
     constructor(...args) {
         super(...args);
         this.state = {
-            installed: [],
+            installed: JSON.parse(localStorage.getItem('installed')),
             current_data: {
                 type: '',
                 name: '',
@@ -26,7 +26,7 @@ export default class Addons extends React.PureComponent {
             button: ''
         }
         this.buttons = {
-            uninstall: <button className='removeFromMue' onClick={() => this.uninstall()}>{this.props.marketplaceLanguage.product.buttons.remove}</button>,
+            uninstall: <button className='removeFromMue' onClick={() => this.manage('uninstall')}>{this.props.marketplaceLanguage.product.buttons.remove}</button>,
         }
     }
 
@@ -55,38 +55,24 @@ export default class Addons extends React.PureComponent {
         this.setState({ button: this.buttons.uninstall });
     }
 
-    uninstall() {
-        let type, data = this.state.current_data.content.type;
-        switch (data) {
-            case 'photos': type = 'photo_packs'; break;
-            case 'quotes': type = 'quote_packs'; break;
-            default: type = this.state.current_data.type; break;
-        }
-        MarketplaceFunctions.uninstall(this.state.current_data.name, type);
-        toast(this.props.toastLanguage.uninstalled);
-        this.setState({
-            button: '',
-            installed: JSON.parse(localStorage.getItem('installed'))
-        });
-    }
-
-    install(input) {
-        MarketplaceFunctions.install(input.type, input, true);
-        toast(this.props.toastLanguage.installed);
-        this.setState({
-            button: this.buttons.uninstall,
-            installed: JSON.parse(localStorage.getItem('installed'))
-        });
+  manage(type, input) {
+    switch (type) {
+        case 'install': MarketplaceFunctions.install(input.type, input, true); break;
+        case 'uninstall': MarketplaceFunctions.uninstall(this.state.current_data.name, this.state.current_data.content.type); break;
+        default: break;
     }
+    toast(this.props.toastLanguage[type + 'ed']);
+    let button = '';
+    if (type === 'install') button = this.buttons.uninstall;
+    this.setState({ button: button, installed: JSON.parse(localStorage.getItem('installed')) });
+  }
 
   componentDidMount() {
     document.getElementById('file-input').onchange = (e) => {
         const reader = new FileReader();
         reader.readAsText(e.target.files[0], 'UTF-8');
-        reader.onload = (readerEvent) => this.install(JSON.parse(readerEvent.target.result));
+        reader.onload = (readerEvent) => this.manage('install', JSON.parse(readerEvent.target.result));
     };
-
-    this.setState({ installed: JSON.parse(localStorage.getItem('installed')) });
   }
 
   render() {
@@ -96,25 +82,25 @@ export default class Addons extends React.PureComponent {
          content = (
            <div className='items'>
             <div className='emptyMessage'>
-                 <LocalMallIcon/>
-                 <h1>{this.props.language.empty.title}</h1>
-                 <p className='description'>{this.props.language.empty.description}</p>
-                 <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
+                <LocalMallIcon/>
+                <h1>{this.props.language.empty.title}</h1>
+                <p className='description'>{this.props.language.empty.description}</p>
+                <button className='goToMarket' onClick={this.props.openMarketplace}>{this.props.language.empty.button}</button>
            </div>
           </div>
         );
     }
 
     return (
-       <div>
-         <div id='marketplace'>
+       <React.Fragment>
+        <div id='marketplace'>
           <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />
           <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.props.language.sideload}</button>
           <h1>{this.props.language.added}</h1>
           {content}
-         </div>
-         <Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
-       </div>
-        );
+        </div>
+        <Item button={this.state.button} data={this.state.item_data} function={() => this.toggle()} language={this.props.marketplaceLanguage.product} />
+       </React.Fragment>
+      );
     }
-}
+}

src/components/modals/tabs/Marketplace.jsx

@@ -3,8 +3,8 @@ import WifiOffIcon from '@material-ui/icons/WifiOff';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { toast } from 'react-toastify';
 import Item from '../marketplace/Item';
-import MarketplaceFunctions from '../../../modules/helpers/marketplace';
-import * as Constants from '../../../modules/constants';
+import MarketplaceFunctions from '../../../modules/helpers/Marketplace';
+import * as Constants from '../../../modules/Constants';
 import Items from '../marketplace/Items';
 
 export default class Marketplace extends React.PureComponent {

src/components/modals/tabs/Settings.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingsFunctions from '../../../modules/helpers/settings';
+import SettingsFunctions from '../../../modules/helpers/Settings';
 import Checkbox from '../settings/Checkbox';
 import Section from '../settings/Section';
 import { toast } from 'react-toastify';

src/components/widgets/Background.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as Constants from '../../modules/constants';
+import * as Constants from '../../modules/Constants';
 
 export default class Background extends React.PureComponent {
   gradientStyleBuilder(gradientSettings) {
@@ -80,11 +80,10 @@ export default class Background extends React.PureComponent {
       this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer);
       this.setCredit(randomPhoto.photographer);
       document.getElementById('location').textContent = randomPhoto.location;
-    } else if (customBackgroundColour) {
-      this.setBackground(null, customBackgroundColour, 'false');
-    } else if (customBackground !== '') { // Local
-      this.setBackground(customBackground, null, 'false');
-    } else if (customBackgroundVideo) {
+    }
+    else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false');
+    else if (customBackground !== '') this.setBackground(customBackground, null, 'false'); // Local
+    else if (customBackgroundVideo) {
       document.getElementById('backgroundImage').innerHTML = `
       <video autoplay muted loop id="backgroundVideo">
           <source src="${customBackgroundVideo}"/>

src/components/widgets/Date.jsx

@@ -34,14 +34,9 @@ export default class DateWidget extends React.PureComponent {
 
       let format;
       switch (localStorage.getItem('shortFormat')) {
-        case 'dash':
-          format = `${day}-${month}-${year}`;
-          break;
-        case 'gaps':
-          format = `${day} - ${month} - ${year}`;
-          break;
-        default:
-          format = `${day}/${month}/${year}`;
+        case 'dash': format = `${day}-${month}-${year}`; break;
+        case 'gaps': format = `${day} - ${month} - ${year}`; break;
+        default: format = `${day}/${month}/${year}`;
       }
 
       this.setState({ date: format });

src/components/widgets/Maximise.jsx

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

src/components/widgets/Notes.jsx

@@ -19,8 +19,7 @@ export default class Notes extends React.PureComponent {
 
     pin() {
         document.getElementById('noteContainer').classList.toggle('visibilityshow');
-        if (localStorage.getItem('notesPinned') === 'true') localStorage.setItem('notesPinned', false);
-        else localStorage.setItem('notesPinned', true);
+        (localStorage.getItem('notesPinned') === 'true') ? localStorage.setItem('notesPinned', false) : localStorage.setItem('notesPinned', true);
     }
 
     componentDidMount() {

src/components/widgets/Quote.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Quotes from '@muetab/quotes';
 import FileCopy from '@material-ui/icons/FilterNone';
 import { toast } from 'react-toastify';
-import * as Constants from '../../modules/constants';
+import * as Constants from '../../modules/Constants';
 import TwitterIcon from '@material-ui/icons/Twitter';
 import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';

src/components/widgets/Search.jsx

@@ -14,7 +14,6 @@ export default class Search extends React.PureComponent {
   }
 
   startSpeechRecognition() {
-    if (localStorage.getItem('voiceSearch') === 'false') return;
     const voiceSearch = new window.webkitSpeechRecognition();
     voiceSearch.start();
     voiceSearch.onresult = (event) => document.getElementById('searchtext').value = event.results[0][0].transcript;
@@ -34,8 +33,7 @@ export default class Search extends React.PureComponent {
       if (info.query) query = info.query;
     }
 
-    const custom = localStorage.getItem('customSearchEngine');
-    if (custom) url = custom;
+    if (setting === 'custom') url = localStorage.getItem('customSearchEngine');
 
     const searchButton = () => {
       const value = document.getElementById('searchtext').value || 'mue fast';

src/index.js

@@ -3,8 +3,6 @@ import ReactDOM from 'react-dom';
 
 import App from './App';
 
-import 'react-color-gradient-picker/dist/index.css';
-import './scss/react-color-picker-gradient-picker-custom-styles.scss';
 import './scss/index.scss';
 import 'react-toastify/dist/ReactToastify.css'; // the toast css is based on default so we need to import it
 

src/modules/helpers/background/setRgba.js

@@ -1,4 +1,4 @@
-function isValidRGBValue(value) {
+const isValidRGBValue = (value) => {
     return (typeof (value) === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255);
 }
 
@@ -11,9 +11,7 @@ export default function setRGBA(red, green, blue, alpha) {
         };
 
         if (isValidRGBValue(alpha) === true) color.alpha = alpha | 0;
-
         // RGBToHSL(color.r, color.g, color.b);
-
         return color;
     }
 }

src/modules/helpers/marketplace.js

@@ -43,9 +43,7 @@ export default class MarketplaceFunctions {
                 localStorage.setItem('backup_settings', JSON.stringify(oldSettings));
                 input.settings.forEach(element => localStorage.setItem(element.name, element.value));
                 break;
-            case 'photo_packs':
-                localStorage.setItem('photo_packs', JSON.stringify(input.photos));
-                break;
+            case 'photo_packs': localStorage.setItem('photo_packs', JSON.stringify(input.photos)); break;
             case 'quote_packs':
                 if (input.quote_api) localStorage.setItem('quote_api', JSON.stringify(input.quote_api));
                 localStorage.setItem('quote_packs', JSON.stringify(input.quotes));

src/modules/json/search_engines.json

@@ -33,7 +33,7 @@
     {
         "name": "Qwant",
         "settingsName": "qwant",
-        "url": "https://www.quant.com/"
+        "url": "https://www.qwant.com/"
     },
     {
         "name": "Ask",

src/scss/_mixins.scss

@@ -10,6 +10,7 @@
             $animations: #{$animations + ', '};
         }
     }
+
     -webkit-animation: $animations;
     -moz-animation: $animations;
     animation: $animations;
@@ -19,9 +20,11 @@
     @-webkit-keyframes #{$animationName} {
         @content;
     }
+
     @-moz-keyframes #{$animationName} {
         @content;
     }
+
     @keyframes #{$animationName} {
         @content;
     }

src/scss/modules/_buttons.scss

@@ -10,15 +10,16 @@
   font-size: 20px;
   border-radius: 24px;
   background: none;
-  box-shadow: 0 5px 15px rgba(46, 213, 115, .4);
+  box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
 
-  &:hover {
+  &:hover, &:active {
     outline: none;
+    background: none;
   }
+}
 
-  &:active {
-    outline: none;
-  }
+.dark %settingsButton {
+  box-shadow: none;
 }
 
 .apply {
@@ -30,7 +31,6 @@
   &:hover {
     border: 2px solid map-get($button-colours, 'confirm');
     color: map-get($button-colours, 'confirm');
-    background: none;
   }
 }
 
@@ -43,7 +43,6 @@
   &:hover {
     border: 2px solid map-get($button-colours, 'reset');
     color: map-get($button-colours, 'reset');
-    background: none;
   }
 }
 
@@ -56,7 +55,6 @@
   &:hover {
     color: map-get($button-colours, 'other');
     border: 2px solid map-get($button-colours, 'other');
-    background: none;
   }
 }
 
@@ -68,27 +66,6 @@
   &:hover {
     color: map-get($button-colours, 'other');
     border: 2px solid map-get($button-colours, 'other');
-    background: none;
-  }
-}
-
-.remove {
-  @extend %settingsButton;
-  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');
-    border: 2px solid map-get($button-colours, 'reset');
-    background: none;
   }
 }
 
@@ -102,8 +79,6 @@
 
   &:hover {
     color: map-get($button-colours, 'other');
-    border: 2px solid map-get($button-colours, 'other');
-    background: none;
   }
 }
 
@@ -113,7 +88,7 @@
   margin-left: 20px;
 }
 
-.storebutton {
+%storebutton {
   cursor: pointer;
   font-size: 18px;
   float: right;
@@ -130,32 +105,28 @@
   &:hover {
     background: #2d3436;
     color: map-get($theme-colours, 'main');;
-    border: 2px solid #2d3436;
   }
 }
 
-.dark .storebutton {
+.dark %storebutton {
   border: 2px solid map-get($theme-colours, 'main');
   color: map-get($theme-colours, 'main');
 
   &:hover {
     background: map-get($theme-colours, 'main');
     color: #2d3436;
-    border: 2px solid map-get($theme-colours, 'main');
   }
 }
 
-#item >.removeFromMue {
+.removeFromMue {
+  @extend %storebutton;
   border: 2px solid #ff4757;
   color: #ff4757;
 
   &:hover {
     background: #ff4757;
     color: map-get($theme-colours, 'main');;
-    border: 2px solid #ff4757;
   }
-
-  @extend .storebutton;
 }
 
 #item .addToMue,
@@ -164,30 +135,18 @@
 }
 
 .addToMue {
-  @extend .storebutton;
+  @extend %storebutton;
 }
 
 .goToMarket {
   float: none;
-  @extend .storebutton;
+  @extend %storebutton;
 }
 
 .sideload, .seemore {
   margin-top: 12px;
 }
 
-.seemore {
-  @extend %settingsButton;
-  background-color: #2d3436;
-  border: 2px solid #2d3436;
-
-  &:hover {
-    color: #2d3436;
-    border: 2px solid #2d3436;
-    background: none;
-  }
-}
-
 .stop {
   outline: none;
   border-image-slice: 1;
@@ -212,8 +171,6 @@ input[type=number]::-webkit-outer-spin-button {
 
   &:hover {
     color: map-get($button-colours, 'confirm');
-    border: 2px solid map-get($button-colours, 'confirm');
-    background: none;
   }
 
   svg {
@@ -234,15 +191,10 @@ input[type=number]::-webkit-outer-spin-button {
   border: 2px solid map-get($button-colours, 'other');
   color: map-get($theme-colours, 'main');
   transition: 0s;
+  display: inline;
+  margin: 5px;
 
   &:hover {
     color: map-get($button-colours, 'other');
-    border: 2px solid map-get($button-colours, 'other');
-    background: none;
   }
-}
-
-.saveNote {
-  display: inline;
-  margin: 5px;
 }

src/scss/modules/_checkbox.scss

@@ -1,3 +1,3 @@
 .MuiCheckbox-colorPrimary.Mui-checked {
-    color: map-get($button-colours, "reset") !important;
+    color: map-get($button-colours, 'reset') !important;
 }

src/scss/modules/_credit.scss

@@ -83,19 +83,18 @@
 }
 
 .view {
-  position: absolute;
   bottom: 10px;
   right: 25px;
 }
 
 .favourite {
-  position: absolute;
   bottom: 10px;
   right: 50px;
   padding-right: 5px;
 }
 
 .view, .favourite {
+  position: absolute;
   transition: all 0.5s ease 0s;
   &:hover {
     transform: scale(1.1);

src/scss/modules/_dropdown.scss

@@ -3,7 +3,7 @@
     background: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
     height: 34px;
     width: 120px;
-    color: map-get($modal, "text");
+    color: map-get($modal, 'text');
 
     border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
     border-image-slice: 1;

src/scss/modules/_marketplace.scss

@@ -5,7 +5,7 @@ button.tablinks {
   background: none;
   border: none;
   outline: none;
-  color: map-get($modal, "text");
+  color: map-get($modal, 'text');
 }
 
 button.tablinks {
@@ -19,17 +19,17 @@ button.tablinks {
   }
 
   &:after {
-    content: "";
+    content: '';
     display: block;
     margin: 0 auto;
     width: 50%;
     padding-top: 10px;
-    border-bottom: 3px solid map-get($modal, "tab-underline");
+    border-bottom: 3px solid map-get($modal, 'tab-underline');
   }
 }
 
 #item a {
-  color: map-get($button-colours, "other");
+  color: map-get($button-colours, 'other');
   cursor: pointer;
 
   &:hover {
@@ -39,12 +39,12 @@ button.tablinks {
 
 
 #active:after {
-  content: "";
+  content: '';
   display: block;
   margin: 0 auto;
   width: 50%;
   padding-top: 10px;
-  border-bottom: 3px solid map-get($modal, "tab-underline-active");
+  border-bottom: 3px solid map-get($modal, 'tab-underline-active');
 }
 
 .dark {
@@ -55,7 +55,7 @@ button.tablinks {
 
   #active:after {
     border-image-slice: 1;
-    border-image-source: map-get($theme-colours, "gradient");
+    border-image-source: map-get($theme-colours, 'gradient');
     border-bottom: 3px solid;
   }
 }
@@ -76,7 +76,7 @@ button.tablinks {
     border-radius: 12px;
     height: 80px;
     width: 270px;
-    background: map-get($marketplace, "item-background");
+    background: map-get($marketplace, 'item-background');
     transition: 0.5s;
     cursor: pointer;
     margin-right: 20px;
@@ -184,20 +184,20 @@ p.description {
 .productInformation {
   margin-bottom: 20px;
   padding: 20px;
-  background: map-get($marketplace, "product-information-backgroud");
+  background: map-get($marketplace, 'product-information-backgroud');
   width: 200px;
   border-radius: 12px;
 
   li {
     margin-left: -4px;
     list-style: none;
-  }
 
-  li.header {
-    text-transform: uppercase;
-    color: #787878;
-    list-style: none;
-    margin-left: -5px;
+    &.header {
+      text-transform: uppercase;
+      color: #787878;
+      list-style: none;
+      margin-left: -5px;
+    }
   }
 }
 
@@ -233,7 +233,7 @@ p.description {
   border-radius: 24px;
   padding: 10px;
   margin: 0;
-  color: map-get($theme-colours, "main");
+  color: map-get($theme-colours, 'main');
   display: none !important;
 }
 
@@ -242,17 +242,16 @@ p.description {
   margin-top: 20px;
   border-radius: 24px;
   padding: 50px;
-  color: map-get($theme-colours, "main");
+  color: map-get($theme-colours, 'main');
 
   button {
     float: left;
     margin-top: -20px;
-    border: 2px solid map-get($theme-colours, "main");
-    color: map-get($theme-colours, "main");
+    border: 2px solid map-get($theme-colours, 'main');
+    color: map-get($theme-colours, 'main');
 
     &:hover {
-      border: 2px solid map-get($theme-colours, "main");
-      background: map-get($theme-colours, "main");
+      background: map-get($theme-colours, 'main');
       color: #2d3436;
     }
   }

src/scss/modules/_modal.scss

@@ -1,6 +1,6 @@
 .Modal {
-  color: map-get($modal, "text");
-  background-color: map-get($modal, "background");
+  color: map-get($modal, 'text');
+  background-color: map-get($modal, 'background');
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   border: none;
   opacity: 1;
@@ -9,7 +9,7 @@
   cursor: hand;
   transition: 0.6s;
   transition-timing-function: ease-in;
-  border-radius: map-get($modal, "border-radius");
+  border-radius: map-get($modal, 'border-radius');
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
@@ -167,14 +167,14 @@
 ::-webkit-scrollbar {
   width: 13px;
   background: #bdc3c7;
-  border-top-right-radius: map-get($modal, "border-radius");
-  border-bottom-right-radius: map-get($modal, "border-radius");
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
 }
 
 ::-webkit-scrollbar-thumb {
   background: #34495e;
-  border-top-right-radius: map-get($modal, "border-radius");
-  border-bottom-right-radius: map-get($modal, "border-radius");
+  border-top-right-radius: map-get($modal, 'border-radius');
+  border-bottom-right-radius: map-get($modal, 'border-radius');
 }
 
 .tablinks svg {

src/scss/modules/_navbar.scss

@@ -57,41 +57,6 @@
         transition: .2s ease;
 
         &:hover {
-            color: map-get($theme-colours, 'main-text-color');
-            transform: translateZ(0);
-            transform: scale(1.3);
-        }
-    }
-}
-
-
-.navbar-container-bottom {
-    position: absolute;
-    bottom: 1rem;
-    right: 1rem;
-
-    div {
-        display: inline;
-    }
-
-    img {
-        height: 1em;
-        width: auto;
-        margin: 0.5rem;
-    }
-
-    svg.topicons {
-        color: map-get($theme-colours, 'main-text-color');
-        -webkit-font-smoothing: subpixel-antialiased;
-        font-size: 1em;
-        display: inline;
-        margin: 0.5rem;
-        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-        cursor: pointer;
-        transition: .2s ease;
-
-        &:hover {
-            color: map-get($theme-colours, 'main-text-color');
             transform: translateZ(0);
             transform: scale(1.3);
         }

src/scss/modules/_quote.scss

@@ -45,7 +45,7 @@ h1.quoteauthor {
 button.copyButton {
   background: transparent;
   border: none;
-  color: map-get($theme-colours, "main");;
+  color: map-get($theme-colours, 'main');
   padding: 20px 20px;
   text-align: center;
   text-decoration: none;

src/scss/modules/_search.scss

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: row;
   display: block;
-  color: map-get($theme-colours, "main-text-color");
+  color: map-get($theme-colours, 'main-text-color');
 
   input[type=text] {
     width: 140px;
@@ -14,7 +14,6 @@
     font-size: calc(5px + 1.2vmin);
     background: transparent;
     border: none;
-    color: map-get($theme-colours, "main-text-color");
     position: absolute;
     background-color: rgba(0, 0, 0, 0.1);
     -webkit-transition: width 0.5s ease-in-out;

src/scss/modules/_settings.scss

@@ -27,7 +27,7 @@
 
   &:before {
     position: absolute;
-    content: "";
+    content: '';
     height: 26px;
     width: 26px;
     left: 4px;
@@ -49,13 +49,13 @@ input {
     padding: 0.5rem 1rem;
     box-sizing: border-box;
     border-image-slice: 1;
-    border-image-source: map-get($theme-colours, "gradient");
+    border-image-source: map-get($theme-colours, 'gradient');
     outline: none;
     background: transparent;
   }
 
   &:checked+.slider {
-    background: map-get($theme-colours, "gradient");
+    background: map-get($theme-colours, 'gradient');
 
     &:before {
       -webkit-transform: translateX(26px);
@@ -152,7 +152,7 @@ li {
     width: 25px;
     height: 25px;
     border-radius: 12px;
-    background: map-get($theme-colours, "gradient");
+    background: map-get($theme-colours, 'gradient');
     cursor: pointer;
   }
 
@@ -161,7 +161,7 @@ li {
     height: 25px;
     border-radius: 12px;
     border: 0;
-    background: map-get($theme-colours, "gradient");
+    background: map-get($theme-colours, 'gradient');
     cursor: pointer;
   }
 }
@@ -170,7 +170,7 @@ input[type=color] {
   border-radius: 100%;
   height: 30px;
   width: 30px;
-  box-shadow: map-get($main-parts, "shadow");
+  box-shadow: map-get($main-parts, 'shadow');
   border: none;
   outline: none;
   -webkit-appearance: none;
@@ -191,7 +191,7 @@ input[type=color]::-moz-color-swatch {
   border-radius: 100%;
   height: 30px;
   width: 30px;
-  box-shadow: map-get($main-parts, "shadow");
+  box-shadow: map-get($main-parts, 'shadow');
   border: none;
   outline: none;
   -webkit-appearance: none;

src/scss/modules/_toast.scss

@@ -1,5 +1,5 @@
 .Toastify__toast-body {
-    color: #000 !important;
+    color: #000000 !important;
     font-size: 16px !important;
     padding: 15px 20px !important;
 }
@@ -20,7 +20,7 @@
 
 .Toastify__progress-bar--default {
     height: 3px !important;
-    background: #000 !important;
+    background: #000000 !important;
 }
 
 .Toastify__toast-container {