feat: multiline messages, add react-icons etc

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() {

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>
     );

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/>

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>
     );
   }

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>
     );

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>

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() {

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>

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';

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;

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 }) {