refactor: cleanup

src/App.jsx

@@ -1,13 +1,13 @@
 import { PureComponent } from 'react';
+import { ToastContainer } from 'react-toastify';
 
 import Background from './components/widgets/background/Background';
 import Widgets from './components/widgets/Widgets';
 import Modals from './components/modals/Modals';
 
-import EventBus from './modules/helpers/eventbus';
 import { loadSettings, moveSettings } from './modules/helpers/settings';
 
-import { ToastContainer } from 'react-toastify';
+import EventBus from './modules/helpers/eventbus';
 
 export default class App extends PureComponent {
   componentDidMount() {

src/components/modals/ErrorBoundary.jsx

@@ -1,6 +1,5 @@
 import { PureComponent } from 'react';
-
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+import { ErrorOutline } from '@material-ui/icons';
 
 export default class ErrorBoundary extends PureComponent {
   constructor(props) {
@@ -24,7 +23,7 @@ export default class ErrorBoundary extends PureComponent {
       return (
         <div className='emptyitems'>
           <div className='emptyMessage'>
-            <ErrorOutlineIcon/>
+            <ErrorOutline/>
             <h1>{this.language.title}</h1>
             <p>{this.language.message}</p>
             <button className='refresh' onClick={() => window.location.reload()}>{this.language.refresh}</button>

src/components/modals/Modals.jsx

@@ -1,12 +1,11 @@
 import { PureComponent, Suspense, lazy } from 'react';
-
-import EventBus from '../../modules/helpers/eventbus';
+import Modal from 'react-modal';
 
 import Main from './main/Main';
 import Feedback from './feedback/Feedback';
 import Navbar from '../widgets/navbar/Navbar';
 
-import Modal from 'react-modal';
+import EventBus from '../../modules/helpers/eventbus';
 
 // Welcome modal is lazy loaded as the user won't use it every time they open a tab
 // We used to lazy load the main and feedback modals, but doing so broke the modal open animation on first click

src/components/modals/main/marketplace/Item.jsx

@@ -1,11 +1,9 @@
 import { PureComponent } from 'react';
-
+import { ArrowBack } from '@material-ui/icons';
 import Modal from 'react-modal';
 
 import Lightbox from './Lightbox';
 
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
 export default class Item extends PureComponent {
   constructor() {
     super();
@@ -42,7 +40,7 @@ export default class Item extends PureComponent {
     return (
       <div id='item'>
         <br/>
-        <ArrowBackIcon className='backArrow' onClick={this.props.toggleFunction}/>
+        <ArrowBack className='backArrow' onClick={this.props.toggleFunction}/>
         <br/>
         <h1>{this.props.data.display_name}</h1>
         {this.props.button}

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

@@ -1,14 +1,13 @@
 import { PureComponent } from 'react';
+import { LocalMall } from '@material-ui/icons';
+import { toast } from 'react-toastify';
 
-import LocalMallIcon from '@material-ui/icons/LocalMall';
 import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
 
 import { uninstall, urlParser } from '../../../../../modules/helpers/marketplace';
 
-import { toast } from 'react-toastify';
-
 export default class Added extends PureComponent {
   constructor() {
     super();
@@ -100,7 +99,7 @@ export default class Added extends PureComponent {
       return (
         <div className='emptyitems'>
           <div className='emptyMessage'>
-            <LocalMallIcon/>
+            <LocalMall/>
             <h1>{this.language.empty.title}</h1>
             <p className='description'>{this.language.empty.description}</p>
           </div>

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

@@ -1,13 +1,14 @@
 import { PureComponent } from 'react';
-
-import FileUpload from '../../settings/FileUpload';
-
-import Settings from '@material-ui/icons/SettingsRounded';
-import Photos from '@material-ui/icons/PhotoOutlined';
-import Quotes from '@material-ui/icons/FormatQuoteOutlined';
+import { 
+  SettingsRounded as Settings, 
+  PhotoOutlined as Photos, 
+  FormatQuoteOutlined as Quotes
+} from '@material-ui/icons';
+import { toast } from 'react-toastify';
 
 import { saveFile } from '../../../../../modules/helpers/settings/modals';
-import { toast } from 'react-toastify';
+
+import FileUpload from '../../settings/FileUpload';
 
 import '../../../welcome/welcome.scss';
 

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

@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
-
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { toast } from 'react-toastify';
+import { WifiOff, LocalMall } from '@material-ui/icons';
 
 import Item from '../Item';
 import Items from '../Items';
@@ -9,8 +8,6 @@ import Dropdown from '../../settings/Dropdown';
 
 import { install, urlParser, uninstall } from '../../../../../modules/helpers/marketplace';
 
-import { toast } from 'react-toastify';
-
 export default class Marketplace extends PureComponent {
   constructor() {
     super();
@@ -178,7 +175,7 @@ export default class Marketplace extends PureComponent {
 
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(<>
-        <WifiOffIcon/>
+        <WifiOff/>
         <h1>{this.language.offline.title}</h1>
         <p className='description'>{this.language.offline.description}</p>
       </>);
@@ -193,7 +190,7 @@ export default class Marketplace extends PureComponent {
         <>
           {featured()}
           {errorMessage(<>
-            <LocalMallIcon/>
+            <LocalMall/>
             <h1>{window.language.modals.main.addons.empty.title}</h1>
             <p className='description'>{this.language.no_items}</p>
           </>)}

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

@@ -1,9 +1,9 @@
-import LocalMallIcon from '@material-ui/icons/LocalMall';
+import { LocalMall } from '@material-ui/icons';
+import { toast } from 'react-toastify';
 
 import FileUpload from '../../settings/FileUpload';
 
 import { install } from '../../../../../modules/helpers/marketplace';
-import { toast } from 'react-toastify';
 
 export default function Sideload() {
   const installAddon = (input) => {
@@ -16,7 +16,7 @@ export default function Sideload() {
     <div className='emptyitems'>
       <div className='emptyMessage'>
         <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => installAddon(JSON.parse(e.target.result))} />
-        <LocalMallIcon/>
+        <LocalMall/>
         <h1>{window.language.modals.main.addons.sideload}</h1>
         <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.settings.sections.background.source.upload}</button>
       </div>

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

@@ -106,11 +106,6 @@ ul {
   }
 }
 
-.newFeature {
-  color: #ff4757;
-  font-size: 12px;
-}
-
 .settingsTextarea {
   font-family: Consolas !important;
   padding: 15px;

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

@@ -1,10 +1,8 @@
 import { PureComponent } from 'react';
+import { Checkbox as CheckboxUI, FormControlLabel } from '@material-ui/core';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import CheckboxUI from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
 export default class Checkbox extends PureComponent {
   constructor(props) {
     super(props);
@@ -34,19 +32,11 @@ export default class Checkbox extends PureComponent {
   }
 
   render() {
-    let text = this.props.text;
-
-    if (this.props.newFeature) {
-      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
-    } else if (this.props.betaFeature) {
-      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
-    }
-
     return (
       <>
         <FormControlLabel
           control={<CheckboxUI name={this.props.name} color='primary' className='checkbox' checked={this.state.checked} onChange={this.handleChange} />}
-          label={text}
+          label={this.props.text}
         />
         <br/>
       </>

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

@@ -1,5 +1,4 @@
 import { PureComponent } from 'react';
-
 import { toast } from 'react-toastify';
 
 export default class FileUpload extends PureComponent {

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

@@ -1,13 +1,8 @@
 import { PureComponent } from 'react';
+import { Radio as RadioUI, RadioGroup, FormControlLabel, FormControl, FormLabel } from '@material-ui/core';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import RadioUI from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-
 export default class Radio extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -1,6 +1,4 @@
-import CloseIcon from '@material-ui/icons/Close';
-import DeleteIcon from '@material-ui/icons/Delete';
-
+import { Close, Delete } from '@material-ui/icons';
 import { setDefaultSettings } from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
@@ -20,10 +18,10 @@ export default function ResetModal(props) {
       <span>{language.information}</span>
       <div className='resetfooter'>
         <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
-          <DeleteIcon/>
+          <Delete/>
         </button>
         <button className='round import' style={{ marginLeft: '5px' }} onClick={props.modalClose}>
-          <CloseIcon/>
+          <Close/>
         </button>
       </div>
     </>

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

@@ -1,10 +1,9 @@
 // todo: find a better method to do width of number input
 import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import { toast } from 'react-toastify';
-
 export default class Slider extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -1,10 +1,8 @@
 import { PureComponent } from 'react';
+import { Switch as SwitchUI, FormControlLabel } from '@material-ui/core';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import SwitchUI from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
 export default class Switch extends PureComponent {
   constructor(props) {
     super(props);
@@ -34,19 +32,11 @@ export default class Switch extends PureComponent {
   }
 
   render() {
-    let text = this.props.text;
-
-    if (this.props.newFeature) {
-      text = <>{this.props.text} <span className='newFeature'> NEW</span></>;
-    } else if (this.props.betaFeature) {
-      text = <>{this.props.text} <span className='newFeature'> BETA</span></>;
-    }
-
     return (
       <>
         <FormControlLabel
           control={<SwitchUI name={this.props.name} color='primary' checked={this.state.checked} onChange={this.handleChange} />}
-          label={text}
+          label={this.props.text}
           labelPlacement='start'
         />
         <br/>

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

@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
 
 import EventBus from '../../../../modules/helpers/eventbus';
 
-import { toast } from 'react-toastify';
-
 export default class Text extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -1,11 +1,7 @@
 import { PureComponent } from 'react';
+import { Email, Twitter, Chat, Instagram, Facebook } from '@material-ui/icons';
 
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
-import EmailIcon from '@material-ui/icons/Email';
-import TwitterIcon from '@material-ui/icons/Twitter';
-import ChatIcon from '@material-ui/icons/Chat';
-import InstagramIcon from '@material-ui/icons/Instagram';
-import FacebookIcon from '@material-ui/icons/Facebook';
 
 const other_contributors = require('../../../../../modules/other_contributors.json');
 
@@ -94,11 +90,11 @@ export default class About extends PureComponent {
         <a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{window.language.modals.welcome.sections.privacy.links.privacy_policy}</a>
 
         <h3>{this.language.contact_us}</h3>
-        <a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
-        <a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
-        <a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><InstagramIcon/></a>
-        <a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FacebookIcon/></a>
-        <a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><ChatIcon/></a>
+        <a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
+        <a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
+        <a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
+        <a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
+        <a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
 
         <h3>{this.language.support_mue}</h3>
         <p>

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

@@ -1,4 +1,7 @@
 import { PureComponent } from 'react';
+import Modal from 'react-modal';
+
+import { exportSettings, importSettings } from '../../../../../modules/helpers/settings/modals';
 
 import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
@@ -7,10 +10,6 @@ import Switch from '../Switch';
 import ResetModal from '../ResetModal';
 import Dropdown from '../Dropdown';
 
-import { exportSettings, importSettings } from '../../../../../modules/helpers/settings/modals';
-
-import Modal from 'react-modal';
-
 const time_zones = require('../../../../widgets/time/timezones.json');
 
 export default class AdvancedSettings extends PureComponent {

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

@@ -1,11 +1,9 @@
 import { PureComponent } from 'react';
-
+import { WifiOff } from '@material-ui/icons';
 import Modal from 'react-modal';
 
 import Lightbox from '../../marketplace/Lightbox';
 
-import WifiOffIcon from '@material-ui/icons/WifiOff';
-
 export default class Changelog extends PureComponent {
   constructor() {
     super();
@@ -89,7 +87,7 @@ export default class Changelog extends PureComponent {
       const language = window.language.modals.main.marketplace;
     
       return errorMessage(<>
-        <WifiOffIcon/>
+        <WifiOff/>
         <h1>{language.offline.title}</h1>
         <p className='description'>{language.offline.description}</p>
       </>);

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

@@ -1,5 +1,6 @@
 import Checkbox from '../Checkbox';
 import Slider from '../Slider';
+
 import EventBus from '../../../../../modules/helpers/eventbus';
 
 export default function ExperimentalSettings() {

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

@@ -1,12 +1,10 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../../../modules/helpers/eventbus';
-
-import DragHandleIcon from '@material-ui/icons/DragIndicator';
-
+import { DragIndicator } from '@material-ui/icons';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
+import EventBus from '../../../../../modules/helpers/eventbus';
+
 const enabled = (setting) => {
   switch (setting) {
     case 'quicklinks':
@@ -27,7 +25,7 @@ const widget_name = {
 
 const SortableItem = sortableElement(({ value }) => (
   <li className='sortableitem' style={{ display: enabled(value) ? 'block' : 'none' }}>
-    <DragHandleIcon style={{ verticalAlign: 'middle' }} />
+    <DragIndicator style={{ verticalAlign: 'middle' }} />
     {widget_name[value]}
   </li>
 ));

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

@@ -1,4 +1,5 @@
 import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
 
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
@@ -7,8 +8,6 @@ import Radio from '../Radio';
 
 import EventBus from '../../../../../modules/helpers/eventbus';
 
-import { toast } from 'react-toastify';
-
 const searchEngines = require('../../../../widgets/search/search_engines.json');
 const autocompleteProviders = require('../../../../widgets/search/autocomplete_providers.json');
 

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

@@ -1,6 +1,5 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../../../../modules/helpers/eventbus';
+import { toast } from 'react-toastify';
 
 import Checkbox from '../../Checkbox';
 import Dropdown from '../../Dropdown';
@@ -11,7 +10,7 @@ import Radio from '../../Radio';
 
 import ColourSettings from './Colour';
 
-import { toast } from 'react-toastify';
+import EventBus from '../../../../../../modules/helpers/eventbus';
 
 export default class BackgroundSettings extends PureComponent {
   constructor() {

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

@@ -1,12 +1,10 @@
 import { PureComponent, Fragment } from 'react';
-
 import { ColorPicker } from 'react-color-gradient-picker';
+import { toast } from 'react-toastify';
 
 import hexToRgb from '../../../../../../modules/helpers/background/hexToRgb';
 import rgbToHex from '../../../../../../modules/helpers/background/rgbToHex';
 
-import { toast } from 'react-toastify';
-
 import 'react-color-gradient-picker/dist/index.css';
 import '../../../scss/settings/react-color-picker-gradient-picker-custom-styles.scss';
 

src/components/modals/main/tabs/Addons.jsx

@@ -1,9 +1,9 @@
+import Tabs from './backend/Tabs';
+
 import Added from '../marketplace/sections/Added';
 import Sideload from '../marketplace/sections/Sideload';
 import Create from '../marketplace/sections/Create';
 
-import Tabs from './backend/Tabs';
-
 export default function Addons() {
   const addons = window.language.modals.main.addons;
 

src/components/modals/main/tabs/Marketplace.jsx

@@ -1,7 +1,7 @@
-import MarketplaceTab from '../marketplace/sections/Marketplace';
-
 import Tabs from './backend/Tabs';
 
+import MarketplaceTab from '../marketplace/sections/Marketplace';
+
 export default function Marketplace() {
   const marketplace = window.language.modals.main.marketplace;
 

src/components/modals/main/tabs/Settings.jsx

@@ -1,3 +1,5 @@
+import Tabs from './backend/Tabs';
+
 import About from '../settings/sections/About';
 import Language from '../settings/sections/Language';
 import Search from '../settings/sections/Search';
@@ -14,8 +16,6 @@ import QuickLinks from '../settings/sections/QuickLinks';
 import Weather from '../settings/sections/Weather';
 import Stats from '../settings/sections/Stats';
 
-import Tabs from './backend/Tabs';
-
 export default function Settings() {
   const { reminder, sections } = window.language.modals.main.settings;
   const display = (localStorage.getItem('showReminder') === 'true') ? 'block' : 'none';

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

@@ -1,31 +1,27 @@
 import { memo } from 'react';
-
-// Navbar
-import Settings from '@material-ui/icons/SettingsRounded';
-import Addons from '@material-ui/icons/Widgets';
-import Marketplace from '@material-ui/icons/ShoppingBasket';
-
-// Settings
-import Time from '@material-ui/icons/AccessAlarm';
-import Greeting from '@material-ui/icons/EmojiPeopleOutlined';
-import Quote from '@material-ui/icons/FormatQuoteOutlined';
-import Background from '@material-ui/icons/PhotoOutlined';
-import Search from '@material-ui/icons/Search';
-import Appearance from '@material-ui/icons/FormatPaintOutlined';
-import Language from '@material-ui/icons/Translate';
-import Changelog from '@material-ui/icons/NewReleasesOutlined';
-import About from '@material-ui/icons/InfoOutlined';
-import Experimental from '@material-ui/icons/BugReportOutlined';
-import Order from '@material-ui/icons/List';
-import Weather from '@material-ui/icons/CloudOutlined';
-import Advanced from '@material-ui/icons/SettingsOutlined';
-import QuickLinks from '@material-ui/icons/Link';
-import Stats from '@material-ui/icons/AssessmentOutlined';
-
-// Addons
-import Sideload from '@material-ui/icons/Code';
-import Added from '@material-ui/icons/AddCircleOutline';
-import Create from '@material-ui/icons/CreateNewFolderOutlined';
+import {
+  SettingsRounded as Settings,
+  Widgets as Addons,
+  ShoppingBasket as Marketplace,
+  AccessAlarm as Time,
+  EmojiPeopleOutlined as Greeting,
+  FormatQuoteOutlined as Quote,
+  PhotoOutlined as Background,
+  Search,
+  FormatPaintOutlined as Appearance,
+  Translate as Language,
+  NewReleasesOutlined as Changelog,
+  InfoOutlined as About,
+  BugReportOutlined as Experimental,
+  List as Order,
+  CloudOutlined as Weather,
+  SettingsOutlined as Advanced,
+  Link as QuickLinks,
+  AssessmentOutlined as Stats,
+  Code as Sideload,
+  AddCircleOutline as Added,
+  CreateNewFolderOutlined as Create
+} from '@material-ui/icons';
 
 function Tab(props) {
   let className = 'tab-list-item';

src/components/modals/welcome/WelcomeSections.jsx

@@ -1,14 +1,10 @@
 import { PureComponent } from 'react';
+import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@material-ui/icons';
 
 import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
 import FileUpload from '../main/settings/FileUpload';
 
-import UploadIcon from '@material-ui/icons/CloudUpload';
-import AutoIcon from '@material-ui/icons/AutoAwesome';
-import LightModeIcon from '@material-ui/icons/LightMode';
-import DarkModeIcon from '@material-ui/icons/DarkMode';
-
 import { loadSettings } from '../../../modules/helpers/settings';
 import { importSettings } from '../../../modules/helpers/settings/modals';
 
@@ -139,16 +135,16 @@ export default class WelcomeSections extends PureComponent {
         <p>{language.sections.theme.description}</p>
         <div className='themesToggleArea'>
           <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
-            <AutoIcon/>
+            <AutoAwesome/>
             <span>{appearance.theme.auto}</span>
           </div>
           <div className='options'>
             <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
-              <LightModeIcon/>
+              <LightMode/>
               <span>{appearance.theme.light}</span>
             </div>
             <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
-              <DarkModeIcon/>
+              <DarkMode/>
               <span>{appearance.theme.dark}</span>
             </div>
           </div>
@@ -163,7 +159,7 @@ export default class WelcomeSections extends PureComponent {
         <h1>{language.sections.settings.title}</h1>
         <p>{language.sections.settings.description}</p>
         <button className='upload' onClick={() => document.getElementById('file-input').click()}>
-          <UploadIcon/>
+          <CloudUpload/>
           <br/>
           <span>{window.language.modals.main.settings.buttons.import}</span>
         </button>

src/components/widgets/Widgets.jsx

@@ -1,7 +1,5 @@
 import { PureComponent, Fragment, Suspense, lazy } from 'react';
 
-import EventBus from '../../modules/helpers/eventbus';
-
 import Clock from './time/Clock';
 import Greeting from './greeting/Greeting';
 import Quote from './quote/Quote';
@@ -9,6 +7,8 @@ import Search from './search/Search';
 import QuickLinks from './quicklinks/QuickLinks';
 import Date from './time/Date';
 
+import EventBus from '../../modules/helpers/eventbus';
+
 const Weather = lazy(() => import('./weather/Weather'));
 const renderLoader = () => <></>;
 

src/components/widgets/background/Background.jsx

@@ -1,11 +1,11 @@
 // todo: rewrite this mess
 import { PureComponent } from 'react';
 
+import PhotoInformation from './PhotoInformation';
+
 import EventBus from '../../../modules/helpers/eventbus';
 import Interval from '../../../modules/helpers/interval';
 
-import PhotoInformation from './PhotoInformation';
-
 import './scss/index.scss';
 
 export default class Background extends PureComponent {

src/components/widgets/background/Favourite.jsx

@@ -1,14 +1,12 @@
 import { PureComponent } from 'react';
+import { Star, StarBorder } from '@material-ui/icons';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
-import StarIcon from '@material-ui/icons/Star';
-import StarIcon2 from '@material-ui/icons/StarBorder';
-
 export default class Favourite extends PureComponent {
   buttons = {
-    favourited: <StarIcon onClick={() => this.favourite()} className='topicons' />,
-    unfavourited: <StarIcon2 onClick={() => this.favourite()} className='topicons' />
+    favourited: <Star onClick={() => this.favourite()} className='topicons' />,
+    unfavourited: <StarBorder onClick={() => this.favourite()} className='topicons' />
   }
 
   constructor() {

src/components/widgets/background/Maximise.jsx

@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
+import { Fullscreen } from '@material-ui/icons';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
-import FullscreenIcon from '@material-ui/icons/Fullscreen';
-
 export default class Maximise extends PureComponent {
   constructor() {
     super();
@@ -57,7 +56,7 @@ export default class Maximise extends PureComponent {
   render() {
     return (
       <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
-        <FullscreenIcon onClick={this.maximise} className='topicons' />
+        <Fullscreen onClick={this.maximise} className='topicons' />
       </Tooltip>
     );
   }

src/components/widgets/background/PhotoInformation.jsx

@@ -1,11 +1,5 @@
 import { useState } from 'react';
-
-import Info from '@material-ui/icons/Info';
-import Location from '@material-ui/icons/LocationOn';
-import Camera from '@material-ui/icons/PhotoCamera';
-import Resolution from '@material-ui/icons/Crop';
-import Photographer from '@material-ui/icons/Person';
-import Download from '@material-ui/icons/GetApp';
+import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -68,9 +62,9 @@ export default function PhotoInformation(props) {
           <Info className='infoIcon'/>
           <h1>{language.information}</h1>
           <hr/>
-          <Location/>
+          <LocationOn/>
           <span id='infoLocation'>{props.info.location || 'N/A'}</span>
-          <Camera/>
+          <PhotoCamera/>
           <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
           <Resolution/>
           <span id='infoResolution'>{width}x{height}</span>

src/components/widgets/greeting/Greeting.jsx

@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
-
 import { utcToZonedTime } from 'date-fns-tz';
-import EventBus from '../../../modules/helpers/eventbus';
 
 import dtf from '../../../modules/helpers/date';
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './greeting.scss';
 

src/components/widgets/navbar/Navbar.jsx

@@ -1,9 +1,5 @@
 import { PureComponent } from 'react';
-
-import RefreshIcon from '@material-ui/icons/RefreshRounded';
-import Gear from '@material-ui/icons/SettingsRounded';
-import NotesIcon from '@material-ui/icons/AssignmentRounded';
-import Report from '@material-ui/icons/SmsFailed';
+import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded, SmsFailed as Report } from '@material-ui/icons';
 
 import Notes from './Notes';
 import Maximise from '../background/Maximise';
@@ -33,7 +29,7 @@ export default class Navbar extends PureComponent {
     
         {(localStorage.getItem('notesEnabled') === 'true') ?
           <div className='notes'>
-            <NotesIcon className='topicons'/>
+            <NotesRounded className='topicons'/>
             <Notes/>
           </div>
         : null}
@@ -46,12 +42,12 @@ export default class Navbar extends PureComponent {
   
         {(localStorage.getItem('refresh') === 'true') ?
           <Tooltip title={window.language.widgets.navbar.tooltips.refresh}>
-            <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
+            <RefreshRounded className='refreshicon topicons' onClick={() => window.location.reload()}/>
           </Tooltip>
         : null}
   
         <Tooltip title={window.language.modals.main.navbar.settings}>
-          <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
+          <SettingsRounded className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
         </Tooltip>
       </div>
     );

src/components/widgets/navbar/Notes.jsx

@@ -1,11 +1,6 @@
 import { PureComponent } from 'react';
-
+import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
 import TextareaAutosize from '@material-ui/core/TextareaAutosize';
-
-import CopyIcon from '@material-ui/icons/FileCopyRounded';
-import NotesIcon from '@material-ui/icons/AssignmentRounded';
-import Pin from '@material-ui/icons/PushPin';
-
 import { toast } from 'react-toastify';
 
 export default class Notes extends PureComponent {
@@ -57,12 +52,12 @@ export default class Notes extends PureComponent {
     return (
       <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
         <div className='topbarnotes'>
-          <NotesIcon/>
+          <NotesRounded/>
           <h3>{this.language.title}</h3>
         </div>
         <TextareaAutosize rowsmax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
-        <button onClick={() => this.pin()} className='pinNote'><Pin/></button>
-        <button onClick={() => this.copy()} className='copyNote'><CopyIcon/></button>
+        <button onClick={() => this.pin()} className='pinNote'><PushPin/></button>
+        <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
       </span>
     );
   }

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -1,10 +1,9 @@
 import { PureComponent } from 'react';
+import Tooltip from '../../helpers/tooltip/Tooltip';
+import { TextareaAutosize } from '@material-ui/core';
 
 import EventBus from '../../../modules/helpers/eventbus';
 
-import Tooltip from '../../helpers/tooltip/Tooltip';
-import TextareaAutosize from '@material-ui/core/TextareaAutosize';
-
 import './quicklinks.scss';
 
 export default class QuickLinks extends PureComponent {
@@ -88,15 +87,9 @@ export default class QuickLinks extends PureComponent {
   }
 
   toggleAdd = () => {
-    if (this.state.showAddLink === 'hidden') {
-      this.setState({
-        showAddLink: 'visible'
-      });
-    } else {
-      this.setState({
-        showAddLink: 'hidden'
-      });
-    }
+    this.setState({
+      showAddLink: (this.state.showAddLink === 'hidden') ? 'visible' : 'hidden'
+    });
   }
 
   // widget zoom
@@ -154,9 +147,9 @@ export default class QuickLinks extends PureComponent {
     }
 
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
+    const useProxy = (localStorage.getItem('quicklinksddgProxy') !== 'false');
 
     const quickLink = (item) => {
-      const useProxy = (localStorage.getItem('quicklinksddgProxy') !== 'false');
       const url = useProxy ? 'https://icons.duckduckgo.com/ip2/' : 'https://www.google.com/s2/favicons?sz=32&domain=';
 
       const link = (
@@ -166,7 +159,7 @@ export default class QuickLinks extends PureComponent {
       );
 
       if (tooltipEnabled === 'true') {
-        return <Tooltip title={item.name} key={item.name} draggable={false}>{link}</Tooltip>;
+        return <Tooltip title={item.name}>{link}</Tooltip>;
       } else {
         return link;
       }

src/components/widgets/quote/Quote.jsx

@@ -1,23 +1,18 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../modules/helpers/eventbus';
-import Interval from '../../../modules/helpers/interval';
-
-import FileCopy from '@material-ui/icons/FilterNone';
-import TwitterIcon from '@material-ui/icons/Twitter';
-import StarIcon from '@material-ui/icons/Star';
-import StarIcon2 from '@material-ui/icons/StarBorder';
-
+import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/icons';
 import { toast } from 'react-toastify';
 
+import Interval from '../../../modules/helpers/interval';
+import EventBus from '../../../modules/helpers/eventbus';
+
 import './quote.scss';
 
 export default class Quote extends PureComponent {
   buttons = {
-    tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
+    tweet: <Twitter className='copyButton' onClick={() => this.tweetQuote()} />,
     copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />,
-    unfavourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />,
-    favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} />
+    unfavourited: <StarBorder className='copyButton' onClick={() => this.favourite()} />,
+    favourited: <Star className='copyButton' onClick={() => this.favourite()} />
   }
 
   constructor() {

src/components/widgets/search/Search.jsx

@@ -1,11 +1,9 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../modules/helpers/eventbus';
+import { Search as SearchIcon, Mic } from '@material-ui/icons';
 
 import AutocompleteInput from '../../helpers/autocomplete/Autocomplete';
 
-import SearchIcon from '@material-ui/icons/Search';
-import MicIcon from '@material-ui/icons/Mic';
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './search.scss';
 
@@ -101,7 +99,7 @@ export default class Search extends PureComponent {
     }
 
     if (localStorage.getItem('voiceSearch') === 'true') {
-      microphone = <MicIcon className='micIcon' onClick={this.startSpeechRecognition}/>;
+      microphone = <Mic className='micIcon' onClick={this.startSpeechRecognition}/>;
     }
 
     let autocompleteURL, autocompleteQuery, autocompleteCallback;

src/components/widgets/time/Clock.jsx

@@ -1,6 +1,6 @@
 import { PureComponent, Suspense, lazy } from 'react';
-
 import { utcToZonedTime } from 'date-fns-tz';
+
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './clock.scss';

src/components/widgets/time/Date.jsx

@@ -1,9 +1,8 @@
 import { PureComponent } from 'react';
-
 import { utcToZonedTime } from 'date-fns-tz';
-import EventBus from '../../../modules/helpers/eventbus';
 
 import dtf from '../../../modules/helpers/date';
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './date.scss';
 

src/components/widgets/weather/Weather.jsx

@@ -1,10 +1,10 @@
 import { PureComponent } from 'react';
-
-import EventBus from '../../../modules/helpers/eventbus';
+import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
 
 import WeatherIcon from './WeatherIcon';
 import WindDirectionIcon from './WindDirectionIcon';
-import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
+
+import EventBus from '../../../modules/helpers/eventbus';
 
 import './weather.scss';
 
@@ -133,10 +133,6 @@ export default class Weather extends PureComponent {
       return (localStorage.getItem(setting) === 'true');
     };
 
-    if (enabled('offlineMode')) {
-      return null;
-    }
-
     if (this.state.location === window.language.widgets.weather.not_found) {
       return (<div className='weather'>
         <span className='loc'>{this.state.location}</span>

src/index.js

@@ -20,7 +20,6 @@ if (languagecode === 'en') {
   window.languagecode = 'en_GB';
 }
 
-// these are merged so if a string is untranslated it doesn't break mue
 window.language = require(`./translations/${window.languagecode}.json`);
 
 // set html language tag