feat: multiline messages, add react-icons etc

2026-07-10 22:14:39 +02:00 · 2022-04-07 10:25:01 +01:00
parent faacd68e44
commit 81b10d9795
33 changed files with 154 additions and 122 deletions
--- a/src/components/modals/ErrorBoundary.jsx
+++ b/src/components/modals/ErrorBoundary.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { ErrorOutline } from '@mui/icons-material';
+import { MdErrorOutline } from 'react-icons/md';

 export default class ErrorBoundary extends PureComponent {
  constructor(props) {
@@ -23,7 +23,7 @@ export default class ErrorBoundary extends PureComponent {
      return (
        <div className='emptyitems'>
          <div className='emptyMessage'>
-            <ErrorOutline/>
+            <MdErrorOutline/>
            <h1>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.title')}</h1>
            <p>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.message')}</p>
            <button className='refresh' onClick={() => window.location.reload()}>{variables.language.getMessage(variables.languagecode, 'modals.main.error_boundary.refresh')}</button>
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, Fragment } from 'react';
 import { toast } from 'react-toastify';
-import { ArrowBack } from '@mui/icons-material';
+import { MdArrowBack } from 'react-icons/md';
 import Modal from 'react-modal';

 import { install, uninstall } from 'modules/helpers/marketplace';
@@ -66,7 +66,7 @@ export default class Item extends PureComponent {
    return (
      <div id='item'>
        <br/>
-        <ArrowBack className='backArrow' onClick={this.props.toggleFunction}/>
+        <MdArrowBack className='backArrow' onClick={this.props.toggleFunction}/>
        <br/>
        <h1>{this.props.data.display_name}</h1>
        {this.props.button}
--- a/src/components/modals/main/marketplace/SideloadFailedModal.jsx
+++ b/src/components/modals/main/marketplace/SideloadFailedModal.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { Close } from '@mui/icons-material';
+import { MdClose } from 'react-icons/md';

 export default function SideloadFailedModal({ modalClose, reason }) {
  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -12,7 +12,7 @@ export default function SideloadFailedModal({ modalClose, reason }) {
      <span>{reason}</span>
      <div className='resetfooter'>
        <button className='round import' style={{ marginLeft: '-30px' }} onClick={modalClose}>
-          <Close/>
+          <MdClose/>
        </button>
      </div>
    </>
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { LocalMall } from '@mui/icons-material';
+import { MdLocalMall } from 'react-icons/md';
 import { toast } from 'react-toastify';

 import Item from '../Item';
@@ -119,7 +119,7 @@ export default class Added extends PureComponent {
      return (
        <div className='emptyitems'>
          <div className='emptyMessage'>
-            <LocalMall/>
+            <MdLocalMall/>
            <h1>{this.getMessage('modals.main.addons.empty.title')}</h1>
            <p className='description'>{this.getMessage('modals.main.addons.empty.description')}</p>
          </div>
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -1,12 +1,12 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { 
-  SettingsRounded as Settings, 
-  PhotoOutlined as Photos, 
-  FormatQuoteOutlined as Quotes,
-  Upload as ImportIcon,
-  Download as ExportIcon,
-} from '@mui/icons-material';
+import {
+  MdSettings as Settings,
+  MdOutlineInsertPhoto as Photos,
+  MdOutlineFormatQuote as Quotes,
+  MdUpload as ImportIcon,
+  MdDownload as ExportIcon
+} from 'react-icons/md';
 import { TextField } from '@mui/material';
 import { toast } from 'react-toastify';

@@ -221,7 +221,7 @@ export default class Create extends PureComponent {
        <TextField label={getMessage('modals.main.marketplace.product.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
        <TextField label={getMessage('modals.main.addons.create.metadata.icon_url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
        <TextField label={getMessage('modals.main.addons.create.metadata.screenshot_url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
-        <TextField label={getMessage('modals.main.addons.create.metadata.description')} varient='outlined' InputLabelProps={{ shrink: true }} multiline spellCheck={false} rows={4} InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
+        <TextField label={getMessage('modals.main.addons.create.metadata.description')} varient='outlined' InputLabelProps={{ shrink: true }} multiline spellCheck={false} rows={4} value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
        <br/>
        <button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
        <button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { WifiOff, LocalMall } from '@mui/icons-material';
+import { MdWifiOff, MdLocalMall } from 'react-icons/md';

 import Item from '../Item';
 import Items from '../Items';
@@ -174,7 +174,7 @@ export default class Marketplace extends PureComponent {

    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
      return errorMessage(<>
-        <WifiOff/>
+        <MdWifiOff/>
        <h1>{this.getMessage('modals.main.marketplace.offline.title')}</h1>
        <p className='description'>{this.getMessage('modals.main.marketplace.offline.description')}</p>
      </>);
@@ -204,7 +204,7 @@ export default class Marketplace extends PureComponent {
        <>
          {featured()}
          {errorMessage(<>
-            <LocalMall/>
+            <MdLocalMall/>
            <h1>{this.getMessage('modals.main.addons.empty.title')}</h1>
            <p className='description'>{this.getMessage('modals.main.marketplace.no_items')}</p>
          </>)}
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { LocalMall } from '@mui/icons-material';
+import { MdIntegrationInstructions } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import Modal from 'react-modal';

@@ -54,7 +54,7 @@ export default class Sideload extends PureComponent {
      <div className='emptyitems'>
        <div className='emptyMessage'>
          <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))} />
-          <LocalMall/>
+          <MdIntegrationInstructions />
          <h1>{this.getMessage('modals.main.addons.sideload.title')}</h1>
          <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</button>
        </div>
--- a/src/components/modals/main/settings/KeybindInput.jsx
+++ b/src/components/modals/main/settings/KeybindInput.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { Cancel } from '@mui/icons-material';
+import { MdCancel } from 'react-icons/md';
 import { TextField } from '@mui/material';

 export default function KeybindInput(props) {
@@ -9,9 +9,9 @@ export default function KeybindInput(props) {
    if (!value) {
      return <button className='cleanButton' style={{ visibility: 'hidden' }} onClick={() => props.action('reset', props.setting)}><Cancel/></button>;;
    } else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
-      return <button className='cleanButton' onClick={() => props.action('cancel', props.setting)}><Cancel/></button>;
+      return <button className='cleanButton' onClick={() => props.action('cancel', props.setting)}><MdCancel/></button>;
    } else {
-      return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><Cancel/></button>;
+      return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><MdCancel/></button>;
    }
  }

--- a/src/components/modals/main/settings/ResetModal.jsx
+++ b/src/components/modals/main/settings/ResetModal.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { Close, Delete } from '@mui/icons-material';
+import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'modules/helpers/settings';

 export default function ResetModal({ modalClose }) {
@@ -17,10 +17,10 @@ export default function ResetModal({ modalClose }) {
      <span>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.information')}</span>
      <div className='resetfooter'>
        <button className='round reset' style={{ marginLeft: 0 }} onClick={() => reset()}>
-          <Delete/>
+          <MdRestartAlt/>
        </button>
        <button className='round add' style={{ marginLeft: '5px' }} onClick={modalClose}>
-          <Close/>
+          <MdClose/>
        </button>
      </div>
    </>
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Email, Twitter, Chat, Instagram, Facebook } from '@mui/icons-material';
+import { MdEmail } from 'react-icons/md';
+import { FaDiscord, FaTwitter } from 'react-icons/fa';

 import Tooltip from 'components/helpers/tooltip/Tooltip';

@@ -94,11 +95,9 @@ export default class About extends PureComponent {
        <a href={variables.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer' style={{ fontSize: '1rem' }}>{this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}</a>

        <h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
-        <a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Email/></a>
-        <a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Twitter/></a>
-        <a href={'https://instagram.com/' + variables.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Instagram/></a>
-        <a href={'https://facebook.com/' + variables.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Facebook/></a>
-        <a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><Chat/></a>
+        <a href={'mailto:' + variables.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><MdEmail/></a>
+        <a href={'https://twitter.com/' + variables.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaTwitter/></a>
+        <a href={'https://discord.gg/' + variables.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FaDiscord/></a>

        <h3>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
        <p>
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -2,7 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
 import { MenuItem } from '@mui/material';
-import { Upload as ImportIcon, Download as ExportIcon, RestartAlt as ResetIcon } from '@mui/icons-material';
+import { MdUpload as ImportIcon, MdDownload as ExportIcon, MdRestartAlt as ResetIcon } from 'react-icons/md';

 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';

--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { WifiOff } from '@mui/icons-material';
+import { MdOutlineWifiOff } from 'react-icons/md';
 import Modal from 'react-modal';

 import Lightbox from '../../marketplace/Lightbox';
@@ -91,7 +91,7 @@ export default class Changelog extends PureComponent {

    if (navigator.onLine === false || this.offlineMode) {    
      return errorMessage(<>
-        <WifiOff/>
+        <MdOutlineWifiOff/>
        <h1>{getMessage('modals.main.marketplace.offline.title')}</h1>
        <p className='description'>{getMessage('modals.main.marketplace.offline.description')}</p>
      </>);
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Cancel, Add } from '@mui/icons-material';
+import { MdCancel, MdAdd } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import { TextField } from '@mui/material';

@@ -64,13 +64,13 @@ export default class Message extends PureComponent {
        <Header title={this.getMessage('modals.main.settings.sections.message.title')} setting='message' category='message' element='.message' zoomSetting='zoomMessage'/>
        <p>{this.getMessage('modals.main.settings.sections.message.text')}</p>
        <div className='data-buttons-row'>
-          <button onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')} <Add/></button>
+          <button onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')} <MdAdd/></button>
        </div>
        {this.state.messages.map((_url, index) => (
          <div style={{ display: 'flex' }} key={index}>
            <TextField value={this.state.messages[index]} onChange={(e) => this.message(e, true, index)} varient='outlined' />
            {this.state.messages.length > 1 ? <button className='cleanButton' onClick={() => this.modifyMessage('remove', index)}>
-              <Cancel/>
+              <MdCancel/>
            </button> : null}
          </div>
        ))}
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { DragIndicator } from '@mui/icons-material';
+import { MdOutlineDragIndicator } from 'react-icons/md';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';

@@ -18,7 +18,7 @@ const widget_name = {

 const SortableItem = sortableElement(({ value }) => (
  <li className='sortableitem'>
-    <DragIndicator style={{ verticalAlign: 'middle' }} />
+    <MdOutlineDragIndicator style={{ verticalAlign: 'middle' }} />
    {widget_name[value]}
  </li>
 ));
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Cancel, Add } from '@mui/icons-material';
+import { MdCancel, MdAdd } from 'react-icons/md';
 import { TextField } from '@mui/material';

 import Header from '../Header';
@@ -91,14 +91,14 @@ export default class QuoteSettings extends PureComponent {
        <>
          <p>{this.getMessage('modals.main.settings.sections.quote.custom')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
          <div className='data-buttons-row'>
-            <button onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')} <Add/></button>
+            <button onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')} <MdAdd/></button>
          </div>
          {this.state.customQuote.map((_url, index) => (
            <div style={{ display: 'flex' }} key={index}>
              <TextField value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')} varient='outlined' style={{ marginRight: '10px' }} />
              <TextField value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')} varient='outlined' />
              {this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)} style={{ marginBottom: '-14px' }}>
-                <Cancel/>
+                <MdCancel/>
              </button> : null}
            </div>
          ))}
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { Cancel, AddLink, AddPhotoAlternate, PersonalVideo } from '@mui/icons-material';
+import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
 import EventBus from 'modules/helpers/eventbus';

 import Checkbox from '../../Checkbox';
@@ -116,15 +116,15 @@ export default class CustomSettings extends PureComponent {
      <ul>
        <p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
        <div className='data-buttons-row'>
-          <button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <AddPhotoAlternate/></button>
-          <button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <AddLink/></button>
+          <button onClick={() => this.uploadCustomBackground()}>{this.getMessage('modals.main.settings.sections.background.source.add_background')} <MdAddPhotoAlternate/></button>
+          <button onClick={() => this.setState({ customURLModal: true })}>{this.getMessage('modals.main.settings.sections.background.source.add_url')} <MdAddLink/></button>
        </div>
        <div className='images-row'>
          {this.state.customBackground.map((url, index) => (
            <div style={{ backgroundImage: `url(${!this.videoCheck(url) ? this.state.customBackground[index] : ''})` }} key={index}>
-              {this.videoCheck(url) ? <PersonalVideo className='customvideoicon'/> : null} 
+              {this.videoCheck(url) ? <MdPersonalVideo className='customvideoicon'/> : null} 
              {this.state.customBackground.length > 0 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
-                <Cancel/>
+                <MdCancel/>
              </button> : null}
            </div>
          ))}
--- a/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
+++ b/src/components/modals/main/settings/sections/background/CustomURLModal.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { useState } from 'react';
-import { Add } from '@mui/icons-material';
+import { MdAdd } from 'react-icons/md';
 import { TextField } from '@mui/material'; 

 export default function CustomURLModal({ modalClose, modalCloseOnly }) {
@@ -13,7 +13,7 @@ export default function CustomURLModal({ modalClose, modalCloseOnly }) {
      <TextField value={url} onChange={(e) => setURL(e.target.value)} varient='outlined'/>
      <div className='resetfooter'>
        <button className='round import' style={{ marginLeft: '5px' }} onClick={() => modalClose(url)}>
-          <Add/>
+          <MdAdd/>
        </button>
      </div>
    </>
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -1,34 +1,34 @@
 import variables from 'modules/variables';
 import { memo } from 'react';
 import {
-  SettingsRounded as Settings,
-  Widgets as Addons,
-  ShoppingBasket as Marketplace,
-  
-  MenuOutlined as Navbar,
-  EmojiPeopleOutlined as Greeting,
-  AccessAlarm as Time,
-  FormatQuoteOutlined as Quote,
-  Link as QuickLinks,
-  DateRangeOutlined as Date,
-  SmsOutlined as Message,
-  PhotoOutlined as Background,
-  Search,
-  CloudOutlined as Weather,
-  List as Order,
-  FormatPaintOutlined as Appearance,
-  Translate as Language,
-  SettingsOutlined as Advanced,
-  BugReportOutlined as Experimental,
+  MdSettings as Settings,
+  MdWidgets as Addons,
+  MdShoppingBasket as Marketplace,
+  MdMenu as Navbar,
+  MdEmojiPeople as Greeting,
+  MdAccessAlarm as Time,
+  MdOutlineFormatQuote as Quote,
+  MdLink as QuickLinks,
+  MdDateRange as Date,
+  MdOutlineTextsms as Message,
+  MdOutlinePhoto as Background,
+  MdSearch,
+  MdCloudQueue as Weather,
+  MdList as Order,
+  MdFormatPaint as Appearance,
+  MdTranslate as Language,
+  MdOutlineSettings as Advanced,
+  MdBugReport as Experimental,
  //KeyboardAltOutlined as Keybinds,
-  AssessmentOutlined as Stats,
-  NewReleasesOutlined as Changelog,
-  InfoOutlined as About,
+  MdOutlineAssessment as Stats,
+  MdOutlineNewReleases as Changelog,
+  MdInfoOutline as About,
+  MdEvent as Reminder,
+  MdCode as Sideload,
+  MdAddCircleOutline as Added,
+  MdAddCircleOutline as Create
+} from 'react-icons/md';

-  Code as Sideload,
-  AddCircleOutline as Added,
-  CreateNewFolderOutlined as Create
-} from '@mui/icons-material';

 function Tab({ label, currentTab, onClick, navbarTab }) {
  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -59,7 +59,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
    case getMessage('modals.main.settings.sections.date.title'): icon = <Date/>; break;
    case getMessage('modals.main.settings.sections.message.title'): icon = <Message/>; break;
    case getMessage('modals.main.settings.sections.background.title'): icon = <Background/>; break;
-    case getMessage('modals.main.settings.sections.search.title'): icon = <Search/>; break;
+    case getMessage('modals.main.settings.sections.search.title'): icon = <MdSearch/>; break;
    case getMessage('modals.main.settings.sections.weather.title'): icon = <Weather/>; divider = true; break;
    case getMessage('modals.main.settings.sections.order.title'): icon = <Order/>; break;

--- a/src/components/modals/welcome/WelcomeSections.jsx
+++ b/src/components/modals/welcome/WelcomeSections.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { CloudUpload, AutoAwesome, LightMode, DarkMode } from '@mui/icons-material';
+import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';

 import Radio from '../main/settings/Radio';
 import Checkbox from '../main/settings/Checkbox';
@@ -141,16 +141,16 @@ export default class WelcomeSections extends PureComponent {
        <p>{this.getMessage('modals.welcome.sections.theme.description')}</p>
        <div className='themesToggleArea'>
          <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
-            <AutoAwesome/>
+            <MdAutoAwesome/>
            <span>{this.getMessage('modals.main.settings.sections.appearance.theme.auto')}</span>
          </div>
          <div className='options'>
            <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
-              <LightMode/>
+              <MdLightMode/>
              <span>{this.getMessage('modals.main.settings.sections.appearance.theme.light')}</span>
            </div>
            <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
-              <DarkMode/>
+              <MdDarkMode/>
              <span>{this.getMessage('modals.main.settings.sections.appearance.theme.dark')}</span>
            </div>
          </div>
@@ -165,7 +165,7 @@ export default class WelcomeSections extends PureComponent {
        <h1>{this.getMessage('modals.welcome.sections.settings.title')}</h1>
        <p>{this.getMessage('modals.welcome.sections.settings.description')}</p>
        <button className='upload' onClick={() => document.getElementById('file-input').click()}>
-          <CloudUpload/>
+          <MdCloudUpload/>
          <br/>
          <span>{this.getMessage('modals.main.settings.buttons.import')}</span>
        </button>
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,14 +1,14 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Star, StarBorder } from '@mui/icons-material';
+import { MdStar, MdStarBorder } from 'react-icons/md';
 //import Hotkeys from 'react-hot-keys';

 import Tooltip from 'components/helpers/tooltip/Tooltip';

 export default class Favourite extends PureComponent {
  buttons = {
-    favourited: <Star onClick={() => this.favourite()} className='topicons' />,
-    unfavourited: <StarBorder onClick={() => this.favourite()} className='topicons' />
+    favourited: <MdStar onClick={() => this.favourite()} className='topicons' />,
+    unfavourited: <MdStarBorder onClick={() => this.favourite()} className='topicons' />
  }

  constructor() {
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { Fullscreen } from '@mui/icons-material';
+import { MdCropFree } from 'react-icons/md';
 //import Hotkeys from 'react-hot-keys';

 import Tooltip from 'components/helpers/tooltip/Tooltip';
@@ -58,7 +58,7 @@ export default class Maximise extends PureComponent {
  render() {
    return (
      <Tooltip title={variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.background.buttons.view')}>
-        <Fullscreen onClick={this.maximise} className='topicons' />
+        <MdCropFree onClick={this.maximise} className='topicons' />
        {/*variables.keybinds.maximiseBackground && variables.keybinds.maximiseBackground !== '' ? <Hotkeys keyName={variables.keybinds.maximiseBackground} onKeyDown={this.maximise} /> : null*/}
      </Tooltip>
    );
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -1,6 +1,13 @@
 import variables from 'modules/variables';
 import { useState, Fragment } from 'react';
-import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@mui/icons-material';
+import {
+  MdInfo,
+  MdLocationOn,
+  MdPhotoCamera,
+  MdCrop as Resolution,
+  MdPerson as Photographer,
+  MdGetApp as Download
+} from 'react-icons/md';
 //import Hotkeys from 'react-hot-keys';

 const toDataURL = async (url) => {
@@ -124,19 +131,19 @@ export default function PhotoInformation({ info, url, api }) {
  return (
    <div className='photoInformation'>
      <h1>{photo} <span id='credit'>{credit}</span></h1>
-      <Info className='photoInformationHover'/>
+      <MdInfo className='photoInformationHover'/>
      <div className='infoCard'>
-        <Info className='infoIcon'/>
+        <MdInfo className='infoIcon'/>
        <h1>{variables.language.getMessage(variables.languagecode, 'widgets.background.information')}</h1>
        <hr/>
        {photoMap()}
        {/* fix console error by using fragment and key */}
        {info.location && info.location !== 'N/A' ? <Fragment key='location'>
-          <LocationOn/>
+          <MdLocationOn/>
          <span id='infoLocation'>{info.location}</span>
        </Fragment> : null}
        {info.camera && info.camera !== 'N/A' ? <Fragment key='camera'>
-          <PhotoCamera/>
+          <MdPhotoCamera/>
          <span id='infoCamera'>{info.camera}</span>
        </Fragment> : null}
        <Resolution/>
--- a/src/components/widgets/message/Message.jsx
+++ b/src/components/widgets/message/Message.jsx
@@ -35,7 +35,12 @@ export default class Message extends PureComponent {
  render() {
    return (
      <h2 className='message' ref={this.message}>
-        {this.state.messageText}
+        {this.state.messageText.split('\\n').map((item, i) => (
+          <span key={i}>
+            {item}
+            <br />
+          </span>
+        ))}
      </h2>
    );
  }
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { RefreshRounded, SettingsRounded, AssignmentRounded as NotesRounded } from '@mui/icons-material';
+import { MdRefresh, MdSettings, MdAssignment } from 'react-icons/md';

 import Notes from './Notes';
 import Maximise from '../background/Maximise';
@@ -62,19 +62,19 @@ export default class Navbar extends PureComponent {
    
        {(localStorage.getItem('notesEnabled') === 'true') ?
          <div className='notes'>
-            <NotesRounded className='topicons'/>
+            <MdAssignment className='topicons'/>
            <Notes/>
          </div>
        : null}

        {(this.refreshValue !== 'false') ?
          <Tooltip title={variables.language.getMessage(variables.languagecode, 'widgets.navbar.tooltips.refresh')}>
-            <RefreshRounded className='refreshicon topicons' onClick={() => this.refresh()}/>
+            <MdRefresh className='refreshicon topicons' onClick={() => this.refresh()}/>
          </Tooltip>
        : null}
  
        <Tooltip title={variables.language.getMessage(variables.languagecode, 'modals.main.navbar.settings')}>
-          <SettingsRounded className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
+          <MdSettings className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')}/>
        </Tooltip>
      </div>
    );
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin } from '@mui/icons-material';
+import { MdContentCopy, MdAssignment, MdPushPin } from 'react-icons/md';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import { toast } from 'react-toastify';
 //import Hotkeys from 'react-hot-keys';
@@ -48,12 +48,12 @@ export default class Notes extends PureComponent {
    return (
      <span className='notescontainer' style={{ visibility: this.state.visibility, marginLeft: this.state.marginLeft }}>
        <div className='topbarnotes'>
-          <NotesRounded/>
+          <MdAssignment/>
          <h3>{variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.title')}</h3>
        </div>
        <TextareaAutosize placeholder={variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.placeholder')} value={this.state.notes} onChange={this.setNotes}/>
-        <button onClick={() => this.pin()} className='pinNote'><PushPin/></button>
-        <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
+        <button onClick={() => this.pin()} className='pinNote'><MdPushPin/></button>
+        <button onClick={() => this.copy()} className='copyNote'><MdContentCopy/></button>
        {/*variables.keybinds.pinNotes && variables.keybinds.pinNotes !== '' ? <Hotkeys keyName={variables.keybinds.pinNotes} onKeyDown={() => this.pin()}/> : null*/}
        {/*variables.keybinds.copyNotes && variables.keybinds.copyNotes !== '' ? <Hotkeys keyName={variables.keybinds.copyNotes} onKeyDown={() => this.copy()}/> : null*/}
      </span>
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -1,6 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent, createRef } from 'react';
-import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@mui/icons-material';
+import { MdContentCopy, MdStarBorder, MdStar } from 'react-icons/md';
+import { FaTwitter } from 'react-icons/fa';
 import { toast } from 'react-toastify';
 //import Hotkeys from 'react-hot-keys';

@@ -11,10 +12,10 @@ import './quote.scss';

 export default class Quote extends PureComponent {
  buttons = {
-    tweet: <Twitter className='copyButton' onClick={() => this.tweetQuote()} />,
-    copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />,
-    unfavourited: <StarBorder className='copyButton' onClick={() => this.favourite()} />,
-    favourited: <Star className='copyButton' onClick={() => this.favourite()} />
+    tweet: <FaTwitter className='copyButton' onClick={() => this.tweetQuote()} />,
+    copy: <MdContentCopy className='copyButton' onClick={() => this.copyQuote()} />,
+    unfavourited: <MdStarBorder className='copyButton' onClick={() => this.favourite()} />,
+    favourited: <MdStar className='copyButton' onClick={() => this.favourite()} />
  }

  constructor() {
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
-import { PureComponent, Fragment } from 'react';
-import { Search as SearchIcon, Mic } from '@mui/icons-material';
+import { PureComponent } from 'react';
+import { MdSearch, MdMic } from 'react-icons/md';
 //import Hotkeys from 'react-hot-keys';

 import AutocompleteInput from 'components/helpers/autocomplete/Autocomplete';
@@ -95,7 +95,7 @@ export default class Search extends PureComponent {
    }

    if (localStorage.getItem('voiceSearch') === 'true') {
-      microphone = <Mic className='micIcon' onClick={this.startSpeechRecognition}/>;
+      microphone = <MdMic className='micIcon' onClick={this.startSpeechRecognition}/>;
    }

    let autocompleteURL, autocompleteQuery, autocompleteCallback;
@@ -191,7 +191,7 @@ export default class Search extends PureComponent {
        <form onSubmit={this.searchButton} className='searchBar'>
        {localStorage.getItem('searchDropdown') === 'true' ? <span className="dropdown-span" onClick={() => this.toggleDropdown()}>{this.state.currentSearch}</span> : ''}
          {this.state.microphone}
-          <SearchIcon onClick={this.searchButton}/>
+          <MdSearch onClick={this.searchButton}/>
          <AutocompleteInput placeholder={variables.language.getMessage(variables.languagecode, 'widgets.search')} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
          {/*variables.keybinds.focusSearch && variables.keybinds.focusSearch !== '' ? <Hotkeys keyName={variables.keybinds.focusSearch} onKeyDown={() => document.getElementById('searchtext').focus()}/> : null*/}
        </form>
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'weather-icons-react';
+import { WiHumidity, WiWindy, WiBarometer, WiCloud } from 'react-icons/wi';

 import WeatherIcon from './WeatherIcon';
 import WindDirectionIcon from './WindDirectionIcon';
--- a/src/components/widgets/weather/WeatherIcon.jsx
+++ b/src/components/widgets/weather/WeatherIcon.jsx
@@ -1,4 +1,17 @@
-import { WiDaySunny, WiNightClear, WiDayCloudy, WiNightCloudy, WiCloud, WiCloudy, WiDayShowers, WiNightShowers, WiRain, WiThunderstorm, WiSnow, WiFog } from 'weather-icons-react';
+import {
+  WiDaySunny,
+  WiNightClear,
+  WiDayCloudy,
+  WiNightCloudy,
+  WiCloud,
+  WiCloudy,
+  WiDayShowers,
+  WiNightShowers,
+  WiRain,
+  WiThunderstorm,
+  WiSnow,
+  WiFog,
+} from 'react-icons/wi';

 export default function WeatherIcon({ name }) {
  let icon;
--- a/src/components/widgets/weather/WindDirectionIcon.jsx
+++ b/src/components/widgets/weather/WindDirectionIcon.jsx
@@ -1,4 +1,13 @@
-import { WiDirectionDownLeft, WiDirectionDownRight, WiDirectionDown, WiDirectionLeft, WiDirectionRight, WiDirectionUpLeft, WiDirectionUpRight, WiDirectionUp } from 'weather-icons-react';
+import {
+  WiDirectionDownLeft,
+  WiDirectionDownRight,
+  WiDirectionDown,
+  WiDirectionLeft,
+  WiDirectionRight,
+  WiDirectionUpLeft,
+  WiDirectionUpRight,
+  WiDirectionUp,
+} from 'react-icons/wi';

 // degrees is imported because of a potential bug, idk what causes it but now it is fixed
 export default function WindDirectionIcon({ degrees }) {