refactor: cleanup

src/App.jsx

@@ -8,13 +8,6 @@ import SettingsFunctions from './modules/helpers/settings';
 import { ToastContainer } from 'react-toastify';
 
 export default class App extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      toastDisplayTime: localStorage.getItem('toastDisplayTime') || 2500
-    };
-  }
-
   componentDidMount() {
     if (!localStorage.getItem('firstRun')) {
       SettingsFunctions.setDefaultSettings();
@@ -27,7 +20,7 @@ export default class App extends React.PureComponent {
     return (
       <>
         <Background/>
-        <ToastContainer position='bottom-right' autoClose={this.state.toastDisplayTime} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
+        <ToastContainer position='bottom-right' autoClose={localStorage.getItem('toastDisplayTime') || 2500} newestOnTop={true} closeOnClick pauseOnFocusLoss/>
         <div id='center'>
           <Widgets/>
           <Modals/>

src/components/modals/Modals.jsx

@@ -8,18 +8,17 @@ import Modal from 'react-modal';
 const Main = React.lazy(() => import('./main/Main'));
 const Update = React.lazy(() => import('./update/Update'));
 const Welcome = React.lazy(() => import('./welcome/Welcome'));
-//const Feedback = React.lazy(() => import('./components/modals/Feedback'));
+const Feedback = React.lazy(() => import('./feedback/Feedback'));
 const renderLoader = () => <></>;
 
 export default class Modals extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       mainModal: false,
       updateModal: false,
       welcomeModal: false,
-      feedbackModal: false,
-      overlayClassList: (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay',
+      feedbackModal: false
     };
   }
 
@@ -43,18 +42,18 @@ export default class Modals extends React.PureComponent {
       <>
         <Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
         <React.Suspense fallback={renderLoader()}>
-          <Modal closeTimeoutMS={300} id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+          <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
             <Main modalClose={() => this.setState({ mainModal: false })}/>
           </Modal>
-          <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+          <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
             <Update modalClose={() => this.setState({ updateModal: false })}/>
           </Modal>
-         <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName={this.state.overlayClassList} ariaHideApp={false}>
+          <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()}/>
           </Modal>
-          {/* <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
+          <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
             <Feedback modalClose={() => this.setState({ feedbackModal: false })}/>
-            </Modal> */}
+          </Modal>
         </React.Suspense>
       </>
     );

src/components/modals/main/marketplace/sections/Added.jsx

@@ -10,8 +10,8 @@ import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 import { toast } from 'react-toastify';
 
 export default class Added extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       installed: JSON.parse(localStorage.getItem('installed')),
       current_data: {

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -10,8 +10,8 @@ import MarketplaceFunctions from '../../../../../modules/helpers/marketplace';
 import { toast } from 'react-toastify';
 
 export default class Marketplace extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       items: [],
       current_data: {

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

@@ -29,18 +29,6 @@
   }
 }
 
-.apply {
-  @extend %settingsButton;
-  margin-right: 20px;
-  background-color: map-get($button-colours, 'confirm');
-  border: 2px solid map-get($button-colours, 'confirm');
-
-  &:hover {
-    border: 2px solid map-get($button-colours, 'confirm');
-    color: map-get($button-colours, 'confirm');
-  }
-}
-
 .reset {
   @extend %settingsButton;
   margin-left: 5px;
@@ -167,43 +155,6 @@ input[type=number]::-webkit-outer-spin-button {
   outline: none;
 }
 
-.pinNote {
-  @extend %settingsButton;
-  background-color: map-get($button-colours, 'confirm');
-  border: 2px solid map-get($button-colours, 'confirm');
-  color: map-get($theme-colours, 'main');
-  transition: 0s;
-
-  &:hover {
-    color: map-get($button-colours, 'confirm');
-  }
-
-  svg {
-    fill: currentColor;
-    width: 1em;
-    height: 1em;
-    display: inline-block;
-    font-size: 1.5rem;
-    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    flex-shrink: 0;
-    user-select: none;
-  }
-}
-
-.saveNote {
-  @extend %settingsButton;
-  background-color: map-get($button-colours, 'other');
-  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');
-  }
-}
-
 .MuiCheckbox-root {
   color: var(--modal-text) !important;
 }

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

@@ -37,18 +37,6 @@ input {
   }
 }
 
-h4,
-.switch {
-  display: inline;
-  font-size: 1.4em;
-  font-weight: 100;
-}
-
-h4,
-#engines {
-  display: inline;
-}
-
 h4 {
   cursor: pointer;
 }
@@ -62,10 +50,6 @@ ul {
   }
 }
 
-li {
-  margin-top: 1px;
-}
-
 .range {
   -webkit-appearance: none;
   width: 200px;
@@ -136,16 +120,6 @@ input[type=color]::-moz-color-swatch {
   }
 }
 
-.customBackgroundHex {
-  font-size: 1.2em;
-  padding-left: 7px;
-  vertical-align: middle;
-}
-
-.nodropdown {
-  cursor: default;
-}
-
 .newFeature {
   color: #ff4757;
   font-size: 12px;

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

@@ -6,14 +6,14 @@ import CheckboxUI from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 export default class Checkbox extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.state = {
       checked: (localStorage.getItem(this.props.name) === 'true')
     };
   }
 
-  handleChange() {
+  handleChange = () => {
     SettingsFunctions.setItem(this.props.name);
 
     this.setState({
@@ -33,7 +33,7 @@ export default class Checkbox extends React.PureComponent {
     return (
       <>
         <FormControlLabel
-          control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
+          control={<CheckboxUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
           label={text}
         />
         <br/>

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 export default class Dropdown extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.state = {
       value: localStorage.getItem(this.props.name) || ''
     };
@@ -12,7 +12,9 @@ export default class Dropdown extends React.PureComponent {
     return this.props.label ? <label>{this.props.label}</label> : null;
   }
 
-  onChange(value) {
+  onChange = (e) => {
+    const { value } = e.target;
+
     this.setState({
       value: value
     });
@@ -28,7 +30,7 @@ export default class Dropdown extends React.PureComponent {
     return (
       <>
         {this.getLabel()}
-        <select value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
+        <select value={this.state.value} onChange={this.onChange}>
           {this.props.children}
         </select>
       </>

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

@@ -7,14 +7,16 @@ import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
 
 export default class Radio extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.state = {
       value: localStorage.getItem(this.props.name)
     };
   }
   
-  handleChange(value) {
+  handleChange = (e) => {
+    const { value } = e.target;
+
     localStorage.setItem(this.props.name, value);
   
     this.setState({
@@ -26,7 +28,7 @@ export default class Radio extends React.PureComponent {
     return (
       <FormControl component='fieldset'>
         <FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
-        <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={(e) => this.handleChange(e.target.value)} value={this.state.value}>
+        <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
           {this.props.options.map(option =>
             <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
           )}

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

@@ -3,22 +3,24 @@ import React from 'react';
 import { toast } from 'react-toastify';
 
 export default class Slider extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.state = {
       value: localStorage.getItem(this.props.name) || ''
     };
     this.language = window.language.modals.main.settings;
   }
 
-  handleChange(value) {
+  handleChange = () => {
+    const { value } = e.target;
+  
     localStorage.setItem(this.props.name, value);
     this.setState({
       value: value
     });
   }
 
-  resetItem() {
+  resetItem = () => {
     localStorage.setItem(this.props.name, this.props.default);
     this.setState({
       value: this.props.default
@@ -30,8 +32,8 @@ export default class Slider extends React.PureComponent {
   render() {
     return (
       <>
-        <p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
-        <input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={(e) => this.handleChange(e.target.value)} />
+        <p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
+        <input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={this.handleChange} />
       </>
     );
   }

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

@@ -6,14 +6,14 @@ import SwitchUI from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 export default class Switch extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.state = {
       checked: (localStorage.getItem(this.props.name) === 'true')
     };
   }
 
-  handleChange() {
+  handleChange = () => {
     SettingsFunctions.setItem(this.props.name);
 
     this.setState({
@@ -33,7 +33,7 @@ export default class Switch extends React.PureComponent {
     return (
       <>
         <FormControlLabel
-          control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={() => this.handleChange()} />}
+          control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
           label={text}
           labelPlacement='start'
         />

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

@@ -3,15 +3,17 @@ import React from 'react';
 import { toast } from 'react-toastify';
 
 export default class Text extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.state = {
       value: localStorage.getItem(this.props.name) || ''
     };
     this.language = window.language.modals.main.settings;
   }
 
-  handleChange(value) {
+  handleChange(e) {
+    const { value } = e.target;
+  
     // Alex wanted font to work with montserrat and Montserrat, so I made it work
     if (this.props.upperCaseFirst === true) {
       value = value.charAt(0).toUpperCase() + value.slice(1);
@@ -23,7 +25,7 @@ export default class Text extends React.PureComponent {
     });
   }
 
-  resetItem() {
+  resetItem = () => {
     localStorage.setItem(this.props.name, this.props.default || '');
     this.setState({
       value: this.props.default || ''
@@ -35,10 +37,10 @@ export default class Text extends React.PureComponent {
   render() {
     return (
       <>
-        <p>{this.props.title} <span className='modalLink' onClick={() => this.resetItem()}>{this.language.buttons.reset}</span></p>
+        <p>{this.props.title} <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
         {(this.props.textarea === true) ? 
-           <textarea className='settingsTextarea' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
-          :<input type='text' value={this.state.value} onChange={(e) => this.handleChange(e.target.value)}/>
+          <textarea className='settingsTextarea' value={this.state.value} onChange={this.handleChange}/>
+          :<input type='text' value={this.state.value} onChange={this.handleChange}/>
         }
       </>
     );

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

@@ -5,8 +5,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 const other_contributors = require('../../../../../modules/other_contributors.json');
 
 export default class About extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       contributors: [],
       sponsors: [],

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

@@ -11,8 +11,8 @@ import { toast } from 'react-toastify';
 import Modal from 'react-modal';
 
 export default class AdvancedSettings extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       resetModal: false
     };

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

@@ -18,8 +18,8 @@ export default class BackgroundSettings extends React.PureComponent {
   DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': window.language.modals.main.settings.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };
   GradientPickerInitalState = undefined;
 
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       customBackground: localStorage.getItem('customBackground') || '',
       gradientSettings: this.DefaultGradientSettings

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

@@ -1,8 +1,8 @@
 import React from 'react';
 
 export default class Changelog extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       title: this.props.language.title,
       date: null,

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

@@ -8,15 +8,15 @@ import DayPickerInput from 'react-day-picker/DayPickerInput';
 import 'react-day-picker/lib/style.css';
 
 export default class GreetingSettings extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       birthday: new Date(localStorage.getItem('birthday')) || new Date()
     };
     this.language = window.language.modals.main.settings;
   }
 
-  changeDate(data) {
+  changeDate = (data) => {
     localStorage.setItem('birthday', data);
 
     this.setState({
@@ -38,10 +38,8 @@ export default class GreetingSettings extends React.PureComponent {
         <h3>{greeting.birthday}</h3>
         <Switch name='birthdayenabled' text={this.language.enabled}/>
         <Checkbox name='birthdayage' text='Birthday Age'/>
-        <ul>
         <p>{greeting.birthday_date}</p>
-          <DayPickerInput onDayChange={(data) => this.changeDate(data)} value={this.state.birthday} />
-        </ul>
+        <DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
       </>
     );
   }

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

@@ -15,8 +15,8 @@ const SortableContainer = sortableContainer(({children}) => {
 });
 
 export default class OrderSettings extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       items: JSON.parse(localStorage.getItem('order'))
     };

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

@@ -6,8 +6,8 @@ import Switch from '../Switch';
 import Radio from '../Radio';
 
 export default class TimeSettings extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       timeType: localStorage.getItem('timeType') || 'digital',
       dateType: localStorage.getItem('dateType') || 'long'

src/components/modals/main/tabs/backend/Tab.jsx

@@ -19,8 +19,6 @@ import Experimental from '@material-ui/icons/BugReport';
 import Order from '@material-ui/icons/List';
 
 // Store
-import Colors from '@material-ui/icons/ColorLens';
-import Plugins from '@material-ui/icons/Widgets';
 import Added from '@material-ui/icons/AddCircle';
 
 export default function Tab(props) {
@@ -58,10 +56,8 @@ export default function Tab(props) {
     case 'About': icon = <About/>; break;
 
     // Store
-    case 'Themes': icon = <Colors/>; break;
     case 'Photo Packs': icon = <Background/>; break;
     case 'Quote Packs': icon = <Quote/>; break;
-    case 'Plugins': icon = <Plugins/>; divider = true; break;
     case 'Added': icon = <Added/>; break;
 
     default: break;

src/components/modals/update/Update.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import './update.scss';
 
 export default class Update extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       title: this.props.language.title,
       date: null,

src/components/widgets/Widgets.jsx

@@ -9,8 +9,8 @@ import Favourite from './background/Favourite';
 import Date from './time/Date';
 
 export default class Widgets extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     // widgets we can re-order
     this.widgets = {
       time: this.enabled('time') ? <Clock/> : null,

src/components/widgets/background/Background.jsx

@@ -5,8 +5,8 @@ import PhotoInformation from './PhotoInformation';
 import './scss/index.scss';
 
 export default class Background extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       style: '',
       url: '',

src/components/widgets/background/Favourite.jsx

@@ -4,8 +4,8 @@ import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';
 
 export default class Favourite extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       favourited: (localStorage.getItem('favourite')) ? <StarIcon onClick={() => this.favourite()} /> : <StarIcon2 onClick={() => this.favourite()} />
     };

src/components/widgets/background/Maximise.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 
 export default class View extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       hidden: false
     };

src/components/widgets/greeting/Greeting.jsx

@@ -5,8 +5,8 @@ import dtf from '@eartharoid/dtf';
 import './greeting.scss';
 
 export default class Greeting extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       greeting: ''
     };

src/components/widgets/navbar/Notes.jsx

@@ -7,8 +7,8 @@ import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Pin from './Pin';
 
 export default class Notes extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       notes: localStorage.getItem('notes') || ''
     };

src/components/widgets/quote/Quote.jsx

@@ -11,8 +11,8 @@ import './quote.scss';
 
 
 export default class Quote extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       quote: '',
       author: '',

src/components/widgets/search/Search.jsx

@@ -8,8 +8,8 @@ import './search.scss';
 const searchEngines = require('./search_engines.json');
 
 export default class Search extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       url: '',
       query: '',
@@ -18,7 +18,7 @@ export default class Search extends React.PureComponent {
     this.language = window.language.widgets.search;
   }
 
-  startSpeechRecognition() {
+  startSpeechRecognition = () => {
     const voiceSearch = new window.webkitSpeechRecognition();
     voiceSearch.start();
 
@@ -35,7 +35,7 @@ export default class Search extends React.PureComponent {
     }
   }
 
-  searchButton() {
+  searchButton = () => {
     const value = document.getElementById('searchtext').value || 'mue fast';
     window.location.href = this.state.url + `?${this.state.query}=` + value;
   }
@@ -58,7 +58,7 @@ export default class Search extends React.PureComponent {
     }
 
     if (localStorage.getItem('voiceSearch') === 'true') {
-      microphone = <MicIcon className='micIcon' onClick={() => this.startSpeechRecognition()}/>;
+      microphone = <MicIcon className='micIcon' onClick={this.startSpeechRecognition}/>;
     }
 
     this.setState({
@@ -72,7 +72,7 @@ export default class Search extends React.PureComponent {
     return (
       <form action={this.state.url} className='searchBar'>
         {this.state.microphone}
-        <SearchIcon onClick={() => this.searchButton()}/>
+        <SearchIcon onClick={this.searchButton}/>
         <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
       </form>
     );

src/components/widgets/time/Clock.jsx

@@ -5,8 +5,8 @@ import Analog from 'react-clock';
 import './clock.scss';
 
 export default class Clock extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
 
     this.timer = undefined;
     this.state = {

src/components/widgets/time/Date.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import dtf from '@eartharoid/dtf';
 
 export default class DateWidget extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super();
     this.state = {
       date: ''
     };

src/index.js

@@ -15,6 +15,7 @@ import merge from '@material-ui/utils/deepmerge';
 const languagecode = localStorage.getItem('language') || 'en-GB';
 // we set things to window. so they're global and we avoid passing the translation strings as props to each component
 window.languagecode = languagecode;
+// these are merged so if a string is untranslated it doesn't break mue
 window.language = merge(require('./translations/en-GB.json'), require(`./translations/${languagecode}.json`));
 
 // window.constants

src/scss/modules/_buttons.scss

@@ -17,152 +17,6 @@
   box-shadow: none;
 }
 
-.refresh {
-  @extend %settingsButton;
-  background-color: map-get($button-colours, 'confirm');
-  border: 2px solid map-get($button-colours, 'confirm');
-
-  &:hover {
-    border: 2px solid map-get($button-colours, 'confirm');
-    color: map-get($button-colours, 'confirm');
-  }
-}
-
-.apply {
-  @extend %settingsButton;
-  margin-right: 20px;
-  background-color: map-get($button-colours, 'confirm');
-  border: 2px solid map-get($button-colours, 'confirm');
-
-  &:hover {
-    border: 2px solid map-get($button-colours, 'confirm');
-    color: map-get($button-colours, 'confirm');
-  }
-}
-
-.reset {
-  @extend %settingsButton;
-  margin-left: 5px;
-  background-color: map-get($button-colours, 'reset');
-  border: 2px solid map-get($button-colours, 'reset');
-
-  &:hover {
-    border: 2px solid map-get($button-colours, 'reset');
-    color: map-get($button-colours, 'reset');
-  }
-}
-
-.close {
-  @extend %settingsButton;
-  padding: 10px 50px 10px 50px;
-  background-color: map-get($button-colours, 'other');
-  border: 2px solid map-get($button-colours, 'other');
-
-  &:hover {
-    color: map-get($button-colours, 'other');
-    border: 2px solid map-get($button-colours, 'other');
-  }
-}
-
-.add {
-  @extend %settingsButton;
-  background-color: map-get($button-colours, 'other');
-  border: 2px solid map-get($button-colours, 'other');
-
-  &:hover {
-    color: map-get($button-colours, 'other');
-    border: 2px solid map-get($button-colours, 'other');
-  }
-}
-
-.export,
-.uploadbg,
-.import {
-  @extend %settingsButton;
-  background-color: map-get($button-colours, 'other');
-  border: 2px solid map-get($button-colours, 'other');
-  color: map-get($theme-colours, 'main');
-
-  &:hover {
-    color: map-get($button-colours, 'other');
-  }
-}
-
-.export,
-.import {
-  margin-left: 20px;
-}
-
-%storebutton {
-  cursor: pointer;
-  font-size: 18px;
-  float: right;
-  padding: 5px 30px;
-  background: none;
-  border-radius: 24px;
-  transition: ease 0.33s;
-  border: 2px solid black;
-
-  &:hover {
-    background: #2d3436;
-    color: map-get($theme-colours, 'main');;
-  }
-}
-
-.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;
-  }
-}
-
-.removeFromMue {
-  @extend %storebutton;
-  border: 2px solid #ff4757;
-  color: #ff4757;
-
-  &:hover {
-    background: #ff4757;
-    color: map-get($theme-colours, 'main');;
-  }
-}
-
-#item .addToMue,
-#item .removeFromMue {
-  margin-top: 5px;
-}
-
-.addToMue {
-  @extend %storebutton;
-}
-
-.goToMarket {
-  float: none;
-  @extend %storebutton;
-}
-
-.sideload, .seemore {
-  margin-top: 12px;
-}
-
-.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;
-}
-
 .pinNote {
   @extend %settingsButton;
   background-color: map-get($button-colours, 'confirm');