chore: release 6.0.5

Bumps [@mui/icons-material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-icons-material) from 5.5.1 to 5.6.0.
- [Release notes](https://github.com/mui/material-ui/releases)
- [Changelog](https://github.com/mui/material-ui/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mui/material-ui/commits/v5.6.0/packages/mui-icons-material)

---
updated-dependencies:
- dependency-name: "@mui/icons-material"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/automerge.yml

@@ -0,0 +1,27 @@
+name: automerge
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+  automerge:
+    needs: build
+    runs-on: ubuntu-latest
+
+    permissions:
+      pull-requests: write
+      contents: write
+
+    steps:
+      - uses: fastify/github-action-merge-dependabot@v3.0.0
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/submit.yml

@@ -0,0 +1,27 @@
+name: Submit
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Release tag to submit, i.e 6.0.5"
+        required: true
+
+jobs:
+  submit:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup Chrome
+        uses: browser-actions/setup-chrome@latest
+        with:
+          chrome-version: latest
+      - name: Download Github Release Assets
+        uses: plasmo-corp/download-release-asset@v1.0.0
+        with:
+          tag: ${{ github.event.inputs.tag }}
+      - name: Browser Plugin Publish
+        uses: plasmo-corp/bpp@v1
+        env:
+          PUPPETEER_EXECUTABLE_PATH: /opt/hostedtoolcache/chromium/latest/x64/chrome
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}

.gitignore

@@ -9,4 +9,6 @@ yarn-error.log
 .eslintcache
 stats.json
 yarn.lock
-*.zip
+*.zip
+
+keys.json

LICENSE

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2018-2021 The Mue Authors
+Copyright (c) 2018-2022 The Mue Authors
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

README.md

@@ -1,4 +1,4 @@
-<img src="https://raw.githubusercontent.com/mue/branding/main/logo/logo_round.png" align="left" width="180px" height="180px"/>
+<img src="assets/logo.png" align="left" width="180px" height="180px"/>
 <img align="left" width="0" height="192px" hspace="10"/>
 
 > <a href="https://muetab.com/">Mue</a>
@@ -86,6 +86,7 @@ Please see the [documentation](https://docs.muetab.com/translations).
 [Vicente](https://github.com/Vicente015) - Spanish <br/>
 [Austin Huang](https://github.com/austinhuang0131) - Chinese (Simplified) <br/>
 [FreeFun](https://github.com/xXFreeFunXx) - German <br/>
+[Aksal](https://github.com/aksalsf) - Indonesian <br/>
 ### Contributors
 Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs.
 

babel.config.js

@@ -2,5 +2,5 @@ module.exports = {
   presets: ['@babel/preset-env', ['@babel/preset-react', {
     runtime: 'automatic'
   }]],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/transform-runtime', '@babel/plugin-transform-react-inline-elements', 'babel-plugin-transform-react-class-to-function', '@babel/plugin-transform-react-constant-elements']
+  plugins: ['@babel/transform-runtime', '@babel/plugin-transform-react-inline-elements', '@babel/plugin-transform-react-constant-elements']
 };

manifest/chrome.json

@@ -4,7 +4,7 @@
   "default_locale": "en",
   "name": "__MSG_name__",
   "description": "__MSG_description__",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

manifest/firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Mue",
   "description": "Fast, open and free-to-use new tab page for modern browsers.",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

package.json

@@ -9,49 +9,46 @@
   "homepage": "https://muetab.com",
   "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D",
   "license": "BSD-3-Clause",
-  "version": "6.0.3",
+  "version": "6.0.5",
   "dependencies": {
-    "@eartharoid/i18n": "^1.0.2",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
+    "@eartharoid/i18n": "1.0.2",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@fontsource/lexend-deca": "4.4.5",
     "@fontsource/montserrat": "4.4.5",
-    "@mui/icons-material": "5.2.0",
-    "@mui/material": "5.2.1",
-    "react": "17.0.2",
-    "react-clock": "3.0.0",
+    "@mui/material": "5.6.0",
+    "react": "18.0.0",
+    "react-clock": "3.1.0",
     "react-color-gradient-picker": "0.1.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.0.0",
     "react-hot-keys": "2.7.1",
+    "react-icons": "^4.3.1",
     "react-modal": "3.14.4",
     "react-sortable-hoc": "2.0.0",
-    "react-toastify": "8.1.0",
-    "weather-icons-react": "1.2.0"
+    "react-toastify": "8.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.16.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-react": "^7.16.0",
+    "@babel/core": "^7.17.9",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-transform-react-constant-elements": "^7.17.6",
+    "@babel/plugin-transform-react-inline-elements": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
     "@eartharoid/deep-merge": "^0.0.2",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-transform-react-class-to-function": "^1.2.2",
+    "babel-loader": "^8.2.4",
     "copy-webpack-plugin": "9.1.0",
-    "css-loader": "^6.5.1",
-    "eslint": "^8.2.0",
-    "eslint-config-react-app": "^6.0.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.12.0",
+    "eslint-config-react-app": "^7.0.0",
     "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.4.4",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
-    "source-map-loader": "^3.0.0",
-    "webpack": "^5.63.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0"
+    "mini-css-extract-plugin": "^2.6.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^12.6.0",
+    "source-map-loader": "^3.0.1",
+    "webpack": "^5.71.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1"
   },
   "scripts": {
     "start": "webpack serve",

src/components/helpers/autocomplete/Autocomplete.jsx

@@ -53,7 +53,7 @@ export default class Autocomplete extends PureComponent {
     });
   }
 
-  componentWillUnount() {
+  componentWillUnmount() {
     EventBus.off('refresh');
   }
 

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>

src/components/modals/Modals.jsx

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { PureComponent, Suspense, lazy } from 'react';
+import { PureComponent } from 'react';
 import Modal from 'react-modal';
 //import Hotkeys from 'react-hot-keys';
 
@@ -9,10 +9,7 @@ import Preview from '../helpers/preview/Preview';
 
 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
-const Welcome = lazy(() => import('./welcome/Welcome'));
-const renderLoader = () => <></>;
+import Welcome from './welcome/Welcome';
 
 export default class Modals extends PureComponent {
   constructor() {
@@ -21,7 +18,6 @@ export default class Modals extends PureComponent {
       mainModal: false,
       updateModal: false,
       welcomeModal: false,
-      feedbackModal: false,
       preview: false
     };
   }
@@ -83,11 +79,9 @@ export default class Modals extends PureComponent {
         <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
           <Main modalClose={() => this.toggleModal('mainModal', false)}/>
         </Modal>
-        <Suspense fallback={renderLoader()}>
-          <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
-            <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()}/>
-          </Modal>
-        </Suspense>
+        <Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay welcomeoverlay' shouldCloseOnOverlayClick={false} ariaHideApp={false}>
+          <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()}/>
+        </Modal>
         {this.state.preview ? <Preview setup={() => window.location.reload()}/> : null}
         {/*variables.keybinds.toggleModal && variables.keybinds.toggleModal !== '' ? <Hotkeys keyName={variables.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null*/} 
       </>

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}

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

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>

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>

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

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>

src/components/modals/main/scss/marketplace/modules/_item.scss

@@ -24,7 +24,7 @@
 }
 
 #item>h1,
-#item>.MuiSvgIcon-root {
+#item>svg {
   display: inline;
 }
 

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

@@ -103,6 +103,10 @@
     align-items: center;
     color: var(--modal-text);
 
+    svg {
+      font-size: 2em;
+    }
+
     &:hover {
       background: var(--tab-active);
       cursor: pointer;

src/components/modals/main/scss/settings/modules/tabs/_about.scss

@@ -5,6 +5,10 @@
   &:hover {
     opacity: 0.8;
   }
+
+  svg {
+    font-size: 1.5em;
+  }
 }
 
 .aboutLink {

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

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

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

@@ -1,6 +1,8 @@
 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 { SiGithubsponsors, SiLiberapay, SiKofi, SiPatreon } from 'react-icons/si';
 
 import Tooltip from 'components/helpers/tooltip/Tooltip';
 
@@ -94,25 +96,21 @@ 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 href={'https://github.com/sponsors/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
-          &nbsp; • &nbsp;<a href={'https://ko-fi.com/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
-          &nbsp; • &nbsp;<a href={'https://patreon.com/' + variables.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
-        </p>
+        <h3 className='contacth3'>{this.getMessage('modals.main.settings.sections.about.support_mue')}</h3>
+        <a href={'https://github.com/sponsors/' + variables.constants.SPONSORS_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiGithubsponsors/></a>
+        <a href={'https://liberapay.com/' + variables.constants.LIBERAPAY_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiLiberapay/></a>
+        <a href={'https://ko-fi.com/' + variables.constants.KOFI_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiKofi/></a>
+        <a href={'https://patreon.com/' + variables.constants.PATREON_USERNAME} className='aboutIcon' target='_blank' rel='noopener noreferrer'><SiPatreon/></a>
 
         <h3>{this.getMessage('modals.main.settings.sections.about.resources_used.title')}</h3>
         <p>
           <a href='https://www.pexels.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Pexels</a>
           , <a href='https://unsplash.com' className='aboutLink' target='_blank' rel='noopener noreferrer'>Unsplash</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.bg_images')})
         </p>
-        <p><a href='https://undraw.co' className='aboutLink' target='_blank' rel='noopener noreferrer'>Undraw</a> ({this.getMessage('modals.main.settings.sections.about.resources_used.welcome_img')})</p>
 
         <h3>{this.getMessage('modals.main.settings.sections.about.contributors')}</h3>
         <p>{this.state.loading}</p>

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';
 
@@ -61,9 +61,6 @@ export default class AdvancedSettings extends PureComponent {
 
         <h3>{getMessage('modals.main.settings.sections.advanced.customisation')}</h3>
         <Text title={getMessage('modals.main.settings.sections.advanced.tab_name')} name='tabName' default={getMessage('tabname')} category='other'/>
-        {window.location.href.startsWith('http://') || window.location.href.startsWith('https://') ? 
-          <Text title={getMessage('modals.main.settings.sections.advanced.custom_js')} name='customjs' textarea={true} category='other' element='other'/>
-        : null}
         <Text title={getMessage('modals.main.settings.sections.advanced.custom_css')} name='customcss' textarea={true} category='other'/>
 
         <h3>{getMessage('modals.main.settings.sections.experimental.title')}</h3>

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

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

@@ -43,10 +43,10 @@ export default class DateSettings extends PureComponent {
       </>
     );
 
-    switch (this.state.dateType) {
-      case 'short': dateSettings = shortSettings; break;
-      case 'long': dateSettings = longSettings; break;
-      default: break;
+    if (this.state.dateType === 'long') {
+      dateSettings = longSettings;
+    } else {
+      dateSettings = shortSettings;
     }
 
     return (

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

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>
 ));
@@ -56,7 +56,7 @@ export default class OrderSettings extends PureComponent {
       items: JSON.parse(localStorage.getItem('order'))
     });
 
-    toast(getMessage('toats.reset'));
+    toast(getMessage('toasts.reset'));
   }
 
   enabled = (setting) => {

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

@@ -1,12 +1,15 @@
 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';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 
+import { toast } from 'react-toastify';
+import EventBus from 'modules/helpers/eventbus';
+
 export default class QuoteSettings extends PureComponent {
   getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
@@ -88,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>
           ))}

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

@@ -17,7 +17,7 @@ export default class TimeSettings extends PureComponent {
   render() {
     const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
-    let timeSettings;
+    let timeSettings = null;
 
     const digitalOptions = [
       {
@@ -50,10 +50,10 @@ export default class TimeSettings extends PureComponent {
       </>
     );
 
-    switch (this.state.timeType) {
-      case 'digital': timeSettings = digitalSettings; break;
-      case 'analogue': timeSettings = analogSettings; break;
-      default: timeSettings = null; break;
+    if (this.state.timeType === 'digital') {
+      timeSettings = digitalSettings;
+    } else if (this.state.timeType === 'analogue') {
+      timeSettings = analogSettings;
     }
 
     return (

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

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

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;
 

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';
@@ -28,7 +28,7 @@ export default class WelcomeSections extends PureComponent {
       importedSettings: []
     };
     this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
-    this.welcomeImages = ['./welcome-images/example1.webp', './welcome-images/example2.webp', './welcome-images/example3.webp', './welcome-images/example4.webp'];
+    this.welcomeImages = 4;
   }
 
   changeTheme(type) {
@@ -50,7 +50,7 @@ export default class WelcomeSections extends PureComponent {
   importSettings(e) {
     importSettings(e);
 
-    let settings = [];
+    const settings = [];
     const data = JSON.parse(e.target.result);
     Object.keys(data).forEach((setting) => {
       // language and theme already shown, the others are only used internally
@@ -82,14 +82,14 @@ export default class WelcomeSections extends PureComponent {
     let welcomeImage = this.state.welcomeImage;
 
     this.setState({
-      welcomeImage: ++welcomeImage % this.welcomeImages.length
+      welcomeImage: ++welcomeImage % this.welcomeImages
     });
 
-    this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
+    this.timeout = setTimeout(this.changeWelcomeImg, 3000);
   }
 
   componentDidMount() {
-    this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
+    this.timeout = setTimeout(this.changeWelcomeImg, 3000);
   }
 
   componentWillUnmount() {
@@ -106,23 +106,19 @@ export default class WelcomeSections extends PureComponent {
         clearTimeout(this.timeout);
         this.timeout = null;
       }
-    } else {
-      if (!this.timeout) {
-        this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
-      }
+    } else if (!this.timeout) {
+      this.timeout = setTimeout(this.changeWelcomeImg, 3000);
     }
   }
 
-  render() {
-    let tabContent;
-  
+  render() {  
     const intro = (
       <>
         <h1>{this.getMessage('modals.welcome.sections.intro.title')}</h1>
         <p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
         <h3 className='quicktip'>#shareyourmue</h3>
         <div className='examples'>
-          <img src={this.welcomeImages[this.state.welcomeImage]} alt='Example Mue setup' draggable={false}/>
+          <img src={`./welcome-images/example${[this.state.welcomeImage + 1]}.webp`} alt='Example Mue setup' draggable={false}/>
         </div>
       </>
     );
@@ -141,16 +137,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 +161,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>
@@ -206,15 +202,13 @@ export default class WelcomeSections extends PureComponent {
     );
   
     switch (this.props.currentTab) {
-      case 1: tabContent = chooseLanguage; break;
-      case 2: tabContent = settings; break;
-      case 3: tabContent = theme; break;
-      case 4: tabContent = privacy; break;
-      case 5: tabContent = final; break;
+      case 1: return chooseLanguage;
+      case 2: return settings;
+      case 3: return theme;
+      case 4: return privacy;
+      case 5: return final;
       // 0
-      default: tabContent = intro;
+      default: return intro;
     }
-  
-    return tabContent;
   }
 }

src/components/widgets/background/Background.jsx

@@ -182,12 +182,15 @@ export default class Background extends PureComponent {
         break;
 
       case 'custom':
-        let customBackground;
+        let customBackground = [];
+        const customSaved = localStorage.getItem('customBackground');
         try {
-          customBackground = JSON.parse(localStorage.getItem('customBackground'));
+          customBackground = JSON.parse(customSaved);
         } catch (e) {
-          // move to new format
-          customBackground = [localStorage.getItem('customBackground')];
+          if (customSaved !== '') {
+            // move to new format
+            customBackground = [customSaved];
+          }
           localStorage.setItem('customBackground', JSON.stringify(customBackground));
         }
 
@@ -401,7 +404,7 @@ export default class Background extends PureComponent {
 
     return (
       <>
-        <div style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
+        <div style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter && backgroundFilter !== 'none' ? (backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)') : ''}` }} id='backgroundImage'/>
         {(this.state.photoInfo.credit !== '') ?
           <PhotoInformation info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
         : null}

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/background/scss/_photoinformation.scss

@@ -78,7 +78,7 @@
   }
 
   h1,
-  .MuiSvgIcon-root {
+  svg {
     user-select: none;
     cursor: initial;
   }

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 { MdFileCopy, 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'><MdFileCopy/></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/quicklinks/QuickLinks.jsx

@@ -19,7 +19,6 @@ export default class QuickLinks extends PureComponent {
       name: '',
       url: '',
       showAddLink: 'hidden',
-      nameError: '',
       urlError: ''
     };
     this.quicklinksContainer = createRef();
@@ -43,10 +42,7 @@ export default class QuickLinks extends PureComponent {
     const data = JSON.parse(localStorage.getItem('quicklinks'));
     let url = this.state.url;
 
-    let nameError, urlError;
-    if (this.state.name.length <= 0) {
-      nameError = this.getMessage('widgets.quicklinks.name_error');
-    }
+    let urlError;
 
     // regex: https://ihateregex.io/expr/url/
     // eslint-disable-next-line no-useless-escape
@@ -54,9 +50,8 @@ export default class QuickLinks extends PureComponent {
       urlError = this.getMessage('widgets.quicklinks.url_error');
     }
 
-    if (nameError || urlError) {
+    if (urlError) {
       return this.setState({
-        nameError,
         urlError
       });
     }
@@ -66,7 +61,7 @@ export default class QuickLinks extends PureComponent {
     }
 
     data.push({
-      name: this.state.name,
+      name: this.state.name || url,
       url: url,
       icon: this.state.icon || '',
       key: Math.random().toString(36).substring(7) + 1
@@ -191,7 +186,7 @@ export default class QuickLinks extends PureComponent {
           <div className='topbarquicklinks' onKeyDown={this.topbarEnter}>
             <h4>{this.getMessage('widgets.quicklinks.new')}</h4>
             <TextareaAutosize rowsmax={1} placeholder={this.getMessage('widgets.quicklinks.name')} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
-            <p>{this.state.nameError}</p>
+            <p/>
             <TextareaAutosize rowsmax={10} placeholder={this.getMessage('widgets.quicklinks.url')} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
             <p>{this.state.urlError}</p>
             <TextareaAutosize rowsmax={10} placeholder={this.getMessage('widgets.quicklinks.icon')} value={this.state.icon} onChange={(e) => this.setState({ icon: e.target.value })} />

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/search/search.scss

@@ -35,7 +35,7 @@
     }
   }
 
-  .MuiSvgIcon-root {
+  svg {
     position: absolute;
     margin-top: 6px;
     font-size: 30px;

src/components/widgets/time/Clock.jsx

@@ -30,7 +30,8 @@ export default class Clock extends PureComponent {
       switch (localStorage.getItem('timeType')) {
         case 'percentageComplete':
           this.setState({
-            time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
+            time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%',
+            ampm: ''
           });
           break; 
         case 'analogue':

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

src/index.js

@@ -30,7 +30,8 @@ variables.language = new I18n(variables.languagecode, {
   nl: require('./translations/nl.json'),
   no: require('./translations/no.json'),
   ru: require('./translations/ru.json'),
-  zh_CN: require('./translations/zh_CN.json')
+  zh_CN: require('./translations/zh_CN.json'),
+  id_ID: require('./translations/id_ID.json')
 });
 
 // set html language tag

src/modules/constants.js

@@ -19,14 +19,15 @@ export const ORG_NAME = 'mue';
 export const REPO_NAME = 'mue';
 export const EMAIL = 'hello@muetab.com';
 export const TWITTER_HANDLE = 'getmue';
-export const INSTAGRAM_HANDLE = 'mue.tab';
-export const FACEBOOK_HANDLE = 'muetab';
 export const DISCORD_SERVER = 'zv8C9F8';
 export const COPYRIGHT_NAME = 'The Mue Authors';
 export const COPYRIGHT_YEAR = '2018';
 export const COPYRIGHT_LICENSE = 'BSD-3-Clause License';
-export const DONATE_USERNAME = 'davidcralph'; // this only works if you use the same username for Patreon, GitHub and Ko-Fi
+export const SPONSORS_USERNAME = 'davidcralph';
+export const LIBERAPAY_USERNAME = 'mue';
+export const KOFI_USERNAME = 'davidcralph';
+export const PATREON_USERNAME = 'davidcralph';
 
 export const OFFLINE_IMAGES = 20;
 
-export const VERSION = '6.0.3'; 
+export const VERSION = '6.0.5'; 

src/modules/default_settings.json

@@ -27,6 +27,10 @@
     "name": "brightness",
     "value": 90
   },
+  {
+    "name": "zero",
+    "value": true
+  },
   {
     "name": "events",
     "value": true

src/modules/helpers/settings/index.js

@@ -110,23 +110,11 @@ export function loadSettings(hotreload) {
     `);
   }
 
-  // everything below this either doesn't support hot reload (custom js) or shouldn't run on a hot reload event
+  // everything below this shouldn't run on a hot reload event
   if (hotreload === true) {
     return;
   }
 
-  if (window.location.href.startsWith('http://') || window.location.href.startsWith('https://')){
-    const js = localStorage.getItem('customjs');
-    if (js) {
-      try {
-        // eslint-disable-next-line no-eval
-        eval(js);
-      } catch (e) {
-        console.error('Failed to run custom JS: ', e);
-      }
-    }
-  }
-
   if (localStorage.getItem('experimental') === 'true') {
     experimentalInit();
   }

src/modules/helpers/settings/modals.js

@@ -1,19 +1,21 @@
 import variables from 'modules/variables';
 import { toast } from 'react-toastify';
 
-export function saveFile(data, filename = 'file') {
+const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
+export function saveFile(data, filename = 'file', type = 'text/json') {
   if (typeof data === 'object') {
     data = JSON.stringify(data, undefined, 4);
   }
   
-  const blob = new Blob([data], { type: 'text/json' });
+  const blob = new Blob([data], { type });
 
   const event = document.createEvent('MouseEvents');
   const a = document.createElement('a');
   
   a.href = window.URL.createObjectURL(blob);
   a.download = filename;
-  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
+  a.dataset.downloadurl = [type, a.download, a.href].join(':');
   
   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
   a.dispatchEvent(event);
@@ -29,7 +31,6 @@ export function exportSettings() {
 }
 
 export function importSettings(e) {
-  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
   const content = JSON.parse(e.target.result);
 
   Object.keys(content).forEach((key) => {

src/modules/languages.json

@@ -34,5 +34,9 @@
   {
     "name": "中文 (简体)",
     "value": "zh_CN"
+  },
+  {
+    "name": "Bahasa Indonesia",
+    "value": "id_ID"
   }
 ]

src/translations/de_DE.json

@@ -377,9 +377,7 @@
             "support_mue": "Mue unterstützen",
             "resources_used": {
               "title": "Verwendete Ressourcen",
-              "bg_images": "Offline Hintergrundbilder",
-              "welcome_img": "Willkommensbild",
-              "pin_icon": "Icon Anheften"
+              "bg_images": "Offline Hintergrundbilder"
             },
             "contributors": "Mitwirkende",
             "supporters": "Unterstützer",

src/translations/en_GB.json

@@ -376,9 +376,7 @@
             "support_mue": "Support Mue",
             "resources_used": {
               "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
             },
             "contributors": "Contributors",
             "supporters": "Supporters",

src/translations/en_US.json

@@ -376,9 +376,7 @@
             "support_mue": "Support Mue",
             "resources_used": {
               "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
             },
             "contributors": "Contributors",
             "supporters": "Supporters",

src/translations/es.json

@@ -376,9 +376,7 @@
             "support_mue": "Apoya Mue",
             "resources_used": {
               "title": "Recursos usados",
-              "bg_images": "Imágenes de fondo sin conexión",
-              "welcome_img": "Imagen de bienvenida",
-              "pin_icon": "Icono de chincheta"
+              "bg_images": "Imágenes de fondo sin conexión"
             },
             "contributors": "Contribuyentes",
             "supporters": "Partidarios",

src/translations/fr.json

@@ -376,9 +376,7 @@
             "support_mue": "Soutenir Mue",
             "resources_used": {
               "title": "Ressources utilisées",
-              "bg_images": "Images d'arrière-plan hors ligne",
-              "welcome_img": "Image de bienvenue",
-              "pin_icon": "Icône de broche"
+              "bg_images": "Images d'arrière-plan hors ligne"
             },
             "contributors": "Collaborateurs",
             "supporters": "Partisans",

src/translations/id_ID.json

@@ -0,0 +1,554 @@
+{
+  "tabname": "Tab Baru",
+  "widgets": {
+    "greeting": {
+      "morning": "Selamat Pagi",
+      "afternoon": "Selamat Siang",
+      "evening": "Selamat Malam",
+      "christmas": "Selamat Natal",
+      "newyear": "Selamat Tahun Baru",
+      "halloween": "Selamat Hari Halloween",
+      "birthday": "Selamat Ulang Tahun"
+    },
+    "background": {
+      "credit": "Foto oleh",
+      "unsplash": "di Unsplash",
+      "pexels": "di Pexels",
+      "information": "Informasi",
+      "download": "Unduh"
+    },
+    "search": "Cari",
+    "quicklinks": {
+      "new": "Pranala Baru",
+      "name": "Nama",
+      "url": "URL",
+      "icon": "Ikon (opsional)",
+      "add": "Tambah",
+      "name_error": "Harap cantumkan nama",
+      "url_error": "Harap cantumkan URL"
+    },
+    "date": {
+      "week": "Pekan"
+    },
+    "weather": {
+      "not_found": "Tidak Ditemukan",
+      "meters": "{amount} meter"
+    },
+    "navbar": {
+      "tooltips": {
+        "refresh": "Muat Ulang"
+      },
+      "notes": {
+        "title": "Catatan",
+        "placeholder": "Ketik di sini"
+      }
+    }
+  },
+  "modals": {
+    "main": {
+      "title": "Setelan",
+      "loading": "Sedang memuat...",
+      "file_upload_error": "Ukuran berkas lebih dari 2MB",
+      "navbar": {
+        "settings": "Pengaturan",
+        "addons": "Add-ons",
+        "marketplace": "Marketplace"
+      },
+      "error_boundary": {
+        "title": "Galat",
+        "message": "Gagal memuat komponen Mue",
+        "refresh": "Muat Ulang"
+      },
+      "settings": {
+        "enabled": "Aktif",
+        "reminder": {
+          "title": "PERHATIAN",
+          "message": "Agar semua perubahan dapat diterapkan, harap muat ulang halaman ini"
+        },
+        "sections": {
+          "time": {
+            "title": "Waktu",
+            "format": "Format",
+            "type": "Tipe",
+            "digital": {
+              "title": "Digital",
+              "seconds": "Detik",
+              "twentyfourhour": "24",
+              "twelvehour": "12 (AM/PM)",
+              "zero": "Zero-padded"
+            },
+            "analogue": {
+              "title": "Analog",
+              "second_hand": "Jarum Detik",
+              "minute_hand": "Jarum Menit",
+              "hour_hand": "Jarum Jam",
+              "hour_marks": "Penanda Jam",
+              "minute_marks": "Penanda Menit"
+            },
+            "percentage_complete": "Persentase"
+          },
+          "date": {
+            "title": "Tanggal",
+            "week_number": "Nomor Urut Pekan",
+            "day_of_week": "Hari",
+            "datenth": "Imbuhan nth",
+            "type": {
+              "short": "Ringkas",
+              "long": "Lengkap"
+            },
+            "short_date": "Tanggal Ringkas",
+            "short_format": "Format Ringkas",
+            "short_separator": {
+              "title": "Pemisah",
+              "dots": "Titik",
+              "dash": "Setrip",
+              "gaps": "Spasi",
+              "slashes": "Garis Miring"
+            }
+          },
+          "quote": {
+            "title": "Kutipan",
+            "author_link": "Pranala penulis",
+            "custom": "Kutipan kustom",
+            "custom_author": "Penulis kustom",
+            "add": "Tambahkan kutipan",
+            "buttons": {
+              "title": "Aksi",
+              "copy": "Salin",
+              "tweet": "Tweet",
+              "favourite": "Favorit"
+            }
+          },
+          "greeting": {
+            "title": "Sapaan",
+            "events": "Hari Besar",
+            "default": "Sapaan bawaan",
+            "name": "Nama",
+            "birthday": "Hari Ulang Tahun",
+            "birthday_age": "Usia",
+            "birthday_date": "Tanggal Ulang Tahun"
+          },
+          "background": {
+            "title": "Background",
+            "ddg_image_proxy": "Gunakan proksi gambar DuckDuckGo",
+            "transition": "Transisi Fade-in",
+            "photo_information": "Tampilkan informasi foto",
+            "show_map": "Tampilkan informasi lokasi foto jika ada",
+            "category": "Kategori",
+            "buttons": {
+              "title": "Aksi",
+              "view": "Layar Penuh",
+              "favourite": "Favorit",
+              "download": "Unduh"
+            },
+            "effects": {
+              "title": "Efek",
+              "blur": "Sesuaikan blur",
+              "brightness": "Sesuaikan kecerahan",
+              "filters": {
+                "title": "Filter background",
+                "amount": "Sesuaikan filter",
+                "grayscale": "Grayscale",
+                "sepia": "Sepia",
+                "invert": "Invert",
+                "saturate": "Saturate",
+                "contrast": "Contrast"
+              }
+            },
+            "type": {
+              "title": "Tipe",
+              "api": "API",
+              "custom_image": "Gambar kustom",
+              "custom_colour": "Warna/gradasi kustom",
+              "random_colour": "Warna acak",
+              "random_gradient": "Gradasi acak"
+            },
+            "source": {
+              "title": "Sumber",
+              "api": "Background API",
+              "custom_background": "Background kustom",
+              "custom_colour": "Background warna kustom",
+              "upload": "Unggah",
+              "add_colour": "Tambah warna",
+              "add_background": "Tambah background",
+              "add_url": "Tambah URL",
+              "disabled": "Nonaktif",
+              "loop_video": "Ulang video",
+              "mute_video": "Bisukan video",
+              "quality": {
+                "title": "Kualitas",
+                "original": "Original",
+                "high": "High Quality",
+                "normal": "Normal Quality",
+                "datasaver": "Data Saver"
+              }
+            },
+            "interval": {
+              "title": "Ubah setiap",
+              "minute": "Menit",
+              "half_hour": "Setengah jam",
+              "hour": "Jam",
+              "day": "Hari",
+              "month": "Bulan"
+            }
+          },
+          "search": {
+            "title": "Cari",
+            "search_engine": "Mesin pencari",
+            "custom": "URL kustom",
+            "autocomplete": "Autocomplete",
+            "autocomplete_provider": "Provider Autocomplete",
+            "voice_search": "Pencarian suara",
+            "dropdown": "Dropdown pencarian"
+          },
+          "weather": {
+            "title": "Cuaca",
+            "location": "Lokasi",
+            "auto": "Otomatis",
+            "temp_format": {
+              "title": "Format suhu",
+              "celsius": "Celsius",
+              "fahrenheit": "Fahrenheit",
+              "kelvin": "Kelvin"
+            },
+            "extra_info": {
+              "title": "Informasi Tambahan",
+              "show_location": "Tampilkan lokasi",
+              "show_description": "Tampilkan deskripsi",
+              "cloudiness": "Kondisi awan",
+              "humidity": "Kelembapan",
+              "visibility": "Jarak pandang",
+              "wind_speed": "Kecepatan angin",
+              "wind_direction": "Arah angin",
+              "min_temp": "Temperatur minimal",
+              "max_temp": "Temperatur maksimal",
+              "atmospheric_pressure": "Tekanan atmosfer"
+            }
+          },
+          "quicklinks": {
+            "title": "Pranala cepat",
+            "open_new": "Buka di tab baru",
+            "tooltip": "Tooltip",
+            "text_only": "Hanya teks"
+          },
+          "message": {
+            "title": "Pesan",
+            "add": "Tambahkan pesan",
+            "text": "Teks"
+          },
+          "appearance": {
+            "title": "Antarmuka",
+            "theme": {
+              "title": "Tema",
+              "auto": "Otomatis",
+              "light": "Light",
+              "dark": "Dark"
+            },
+            "navbar": {
+              "title": "Navbar",
+              "notes": "Catatan",
+              "refresh": "Muat ulang",
+              "hover": "Tampilkan ketika hover",
+              "refresh_options": {
+                "none": "Nonaktif",
+                "page": "Halaman"
+              }
+            },
+            "font": {
+              "title": "Font",
+              "custom": "Font kustom",
+              "google": "Impor dari Google Fonts",
+              "weight": {
+                "title": "Font weight",
+                "thin": "Thin",
+                "extra_light": "Extra Light",
+                "light": "Light",
+                "normal": "Normal",
+                "medium": "Medium",
+                "semi_bold": "Semi-Bold",
+                "bold": "Bold",
+                "extra_bold": "Extra-Bold"
+              },
+              "style": {
+                "title": "Font style",
+                "normal": "Normal",
+                "italic": "Italic",
+                "oblique": "Oblique"
+              }
+            },
+            "accessibility": {
+              "title": "Aksesibilitas",
+              "animations": "Animasi",
+              "text_shadow": "Widget text shadow",
+              "widget_zoom": "Widget zoom",
+              "toast_duration": "Durasi toast",
+              "milliseconds": "milliseconds"
+            }
+          },
+          "order": {
+            "title": "Urutan Widget"
+          },
+          "advanced": {
+            "title": "Lanjutan",
+            "offline_mode": "Mode Luring",
+            "data": "Data",
+            "reset_modal": {
+              "title": "PERINGATAN",
+              "question": "Apakah Anda ingin me-reset Mue?",
+              "information": "Aksi ini akan menghapus semua data Anda. Harap ekspor pengaturan Anda sebelum melakukan reset.",
+              "cancel": "Batal"
+            },
+            "customisation": "Kustomisasi",
+            "custom_css": "CSS Kustom",
+            "custom_js": "JS Kustom",
+            "tab_name": "Nama tab",
+            "timezone": {
+              "title": "Zona Waktu",
+              "automatic": "Otomatis"
+            },
+            "experimental_warning": "Harap diperhatikan bahwa tim Mue tidak menyediakan dukungan jika Anda mengaktifkan mode experimental. Harap nonaktifkan terlebih dahulu dan lihat apabila kendala Anda masih terjadi sebelum menghubungi kami."
+          },
+          "stats": {
+            "title": "Statistik",
+            "warning": "Anda harus mengizinkan penggunaan data untuk menggunakan fitur ini. Data hanya akan disimpan di perangkat Anda saja.",
+            "sections": {
+              "tabs_opened": "Riwayat tab terbuka",
+              "backgrounds_favourited": "Backgrounds favorit",
+              "backgrounds_downloaded": "Backgrounds terunduh",
+              "quotes_favourited": "Kutipan favorit",
+              "quicklinks_added": "Pranala cepat ditambahkan",
+              "settings_changed": "Perubahan pengaturan",
+              "addons_installed": "Add-ons ditambahkan"
+            },
+            "usage": "Statistik Penggunaan"
+          },
+          "keybinds": {
+            "title": "Keybinds",
+            "recording": "Recording...",
+            "click_to_record": "Click to record",
+            "background": {
+              "favourite": "Favourite background",
+              "maximise": "Maximise background",
+              "download": "Download background",
+              "show_info": "Show background information"
+            },
+            "quote": {
+              "favourite": "Favourite quote",
+              "copy": "Copy quote",
+              "tweet": "Tweet quote"
+            },
+            "notes": {
+              "pin": "Pin notes",
+              "copy": "Copy notes"
+            },
+            "search": "Focus search",
+            "quicklinks": "Toggle add quick link",
+            "modal": "Toggle modal"
+          },
+          "experimental": {
+            "title": "Experimental",
+            "warning": "These settings have not been fully tested/implemented and may not work correctly!",
+            "developer": "Developer"
+          },
+          "language": {
+            "title": "Bahasa",
+            "quote": "Bahasa untuk kutipan"
+          },
+          "changelog": {
+            "title": "Changelog",
+            "by": "Oleh {author}"
+          },
+          "about": {
+            "title": "Tentang Mue",
+            "copyright": "Hak Cipta",
+            "version": {
+              "title": "Versi",
+              "checking_update": "Periksa pembaruan",
+              "update_available": "Pembaruan tersedia",
+              "no_update": "Tidak ada pembaruan",
+              "offline_mode": "Periksa pembaruan tidak dapat dilakukan pada mode luring",
+              "error": {
+                "title": "Gagal mendapatkan informasi pembaruan",
+                "description": "Muncul galat saat mencoba mendapatkan informasi pembaruan. Harap coba lagi nanti."
+              }
+            },
+            "contact_us": "Hubungi Kami",
+            "support_mue": "Dukung Mue",
+            "resources_used": {
+              "title": "Resources yang kami gunakan",
+              "bg_images": "Offline background images"
+            },
+            "contributors": "Kontributor",
+            "supporters": "Suporter",
+            "no_supporters": "Mue belum punya suporter saat ini.",
+            "photographers": "Fotografer"
+          }
+        },
+        "buttons": {
+          "reset": "Reset",
+          "import": "Impor",
+          "export": "Ekspor"
+        }
+      },
+      "marketplace": {
+        "photo_packs": "Photo Packs",
+        "quote_packs": "Quote Packs",
+        "preset_settings": "Preset Settings",
+        "no_items": "Tidak ada item pada kategori ini",
+        "product": {
+          "overview": "Ikhtisar",
+          "information": "Informasi",
+          "last_updated": "Pembaruan Terakhir",
+          "version": "Versi",
+          "author": "Kreator",
+          "buttons": {
+            "addtomue": "Tambahkan ke Mue",
+            "remove": "Hapus",
+            "update_addon": "Perbarui Add-on"
+          },
+          "quote_warning": {
+            "title": "Peringatan",
+            "description": "Quote pack ini membutuhkan peladen eksternal yang mungkin melacak Anda!"
+          }
+        },
+        "offline": {
+          "title": "Sepertinya Anda sedang dalam mode luring",
+          "description": "Harap periksa kembali koneksi Anda dan coba lagi nanti"
+        }
+      },
+      "addons": {
+        "added": "Terinstal",
+        "check_updates": "Periksa pembaruan",
+        "no_updates": "Tidak ada pembaruan",
+        "updates_available": "Terdapat {amount} pembaruan",
+        "empty": {
+          "title": "Kosong",
+          "description": "Belum ada addons yang terinstal"
+        },
+        "sideload": {
+          "title": "Sideload",
+          "failed": "Failed to sideload addon",
+          "errors": {
+            "no_name": "No name provided",
+            "no_author": "No author provided",
+            "no_type": "No type provided",
+            "invalid_photos": "Invalid photos object",
+            "invalid_quotes": "Invalid quotes object"
+          }
+        },
+        "sort": {
+          "title": "Urutkan",
+          "newest": "Terinstal (Terbaru)",
+          "oldest": "Terinstal (Terlama)",
+          "a_z": "Abjad (A-Z)",
+          "z_a": "Abjad (Z-A)"
+        },
+        "create": {
+          "title": "Buat",
+          "other_title": "Buat Add-on",
+          "metadata": {
+            "name": "Nama",
+            "icon_url": "URL Ikon",
+            "screenshot_url": "URL Screenshot",
+            "description": "Deskripsi"
+          },
+          "finish": {
+            "title": "Selesai",
+            "download": "Unduh Add-on"
+          },
+          "settings": {
+            "current": "Impor",
+            "json": "Unggah JSON"
+          },
+          "photos": {
+            "title": "Tambahkan foto"
+          },
+          "quotes": {
+            "title": "Tambahkan Kutipan",
+            "api": {
+              "title": "API",
+              "url": "URL Kutipan",
+              "name": "Nama Kutipan",
+              "author": "Penulis kutipan"
+            },
+            "local": {
+              "title": "Lokal"
+            }
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Pembaruan",
+      "offline": {
+        "title": "Anda dalam mode luring",
+        "description": "Tidak dapat memeriksa pembaruan. Harap periksa kembali koneksi Anda dan coba lagi nanti."
+      },
+      "error": {
+        "title": "Galat",
+        "description": "Tidak dapat terhubung ke peladen"
+      }
+    },
+    "welcome": {
+      "tip": "Tip",
+      "sections": {
+        "intro": {
+          "title": "Selamat datang di Mue Tab",
+          "description": "Terima kasih sudah menginstal Mue, kami harap Anda dapat menikmati pengalaman bersama Mue"
+        },
+        "language": {
+          "title": "Pilih bahasa",
+          "description": "Antarmuka Mue dapat ditampilkan dalam ragam bahasa berikut. Kamu juga bisa menambahkan terjemahan baru untuk Mue pada"
+        },
+        "theme": {
+          "title": "Pilih tema",
+          "description": "Mue tersedia dalam tema terang dan gelap, atau kami juga bisa mengaturnya secara otomatis sesuai dengan preferensi sistem Anda.",
+          "tip": "Pengaturan otomatis akan menyesuaikan dengan tema komputer Anda. Pengaturan ini akan mengubah tampilan modal dan beberapa widget, seperti Cuaca dan Catatan."
+        },
+        "settings": {
+          "title": "Impor Pengaturan",
+          "description": "Sudah pernah menginstal Mue? Yuk coba impor pengaturan lama kamu tanpa perlu mengatur ulang dari awal!",
+          "tip": "Kamu bisa mengekspor pengaturan lama kamu melalui tab lanjutan pada Pengaturan. Klik tombol ekspor untuk mengunduh berkas JSON. Unggah berkas tersebut di sini sehingga kamu dapat menikmati preferensi yang sama pada perangkat yang berbeda!"
+        },
+        "privacy": {
+          "title": "Opsi Privasi",
+          "description": "Aktifkan pegaturan sehingga Mue dapat melindungi privasi Anda.",
+          "offline_mode_description": "Mengaktifkan mode luring akan menghalangi request ke semua layanan, termasuk Background Online, Kutipan Daring, Marketplace, Cuaca, Pranala Cepat, Change Log, dan beberapa informasi tentang tab.",
+          "ddg_proxy_description": "Anda dapat membuat permintaan gambar melalui DuckDuckGo jika Anda mau. Secara bawaan, permintaan API dilakukan melalui peladen terbuka kami sedangkan permintaan gambar melalui peladen original. Menonaktifkan pengaturan ini untuk Pranala Cepat akan mendapatkan ikon dari Google, bukan DuckDuckGo. Proksi DuckDuckGo selalu diaktifkan untuk Marketplace.",
+          "links": {
+            "title": "Pranala",
+            "privacy_policy": "Kebijakan Privasi",
+            "source_code": "Source Code"
+          }
+        },
+        "final": {
+          "title": "Langkah terakhir",
+          "description": "Pengalaman Mue Tab Anda akan segera dimulai!",
+          "changes": "Perubahan",
+          "changes_description": "Untuk mengubah pengaturan lainnya, klik pada ikon pengaturan di pojok kanan atas tab Anda.",
+          "imported": "Berhasil mengimpor {amount} pengaturan"
+        }
+      },
+      "buttons": {
+        "next": "Selanjutnya",
+        "preview": "Pratinjau",
+        "previous": "Kembali",
+        "close": "Tutup"
+      },
+      "preview": {
+        "description": "Kamu dalam mode Pratinjau. Pengaturan akan direset ketika tab ini ditutup.",
+        "continue": "Lanjutkan setup"
+      }
+    }
+  },
+  "toasts": {
+    "quote": "Berhasil menyalin kutipan",
+    "notes": "Berhasil menyalin catatan",
+    "reset": "Reset berhasil",
+    "installed": "Berhasil menginstal",
+    "uninstalled": "Berhasil menghapus",
+    "updated": "Berhasil diperbarui",
+    "error": "Terdapat kesalahan",
+    "imported": "Berhasil mengimpor"
+  }
+}

src/translations/nl.json

@@ -376,9 +376,7 @@
             "support_mue": "Support Mue",
             "resources_used": {
               "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
             },
             "contributors": "Contributors",
             "supporters": "Supporters",

src/translations/no.json

@@ -376,9 +376,7 @@
             "support_mue": "Support Mue",
             "resources_used": {
               "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
             },
             "contributors": "Contributors",
             "supporters": "Supporters",

src/translations/ru.json

@@ -376,9 +376,7 @@
             "support_mue": "Support Mue",
             "resources_used": {
               "title": "Resources used",
-              "bg_images": "Offline background images",
-              "welcome_img": "Welcome image",
-              "pin_icon": "Pin icon"
+              "bg_images": "Offline background images"
             },
             "contributors": "Contributors",
             "supporters": "Supporters",

src/translations/zh_CN.json

@@ -376,9 +376,7 @@
             "support_mue": "支持 Mue",
             "resources_used": {
               "title": "使用资源",
-              "bg_images": "离线背景",
-              "welcome_img": "欢迎图像",
-              "pin_icon": "便签图标"
+              "bg_images": "离线背景"
             },
             "contributors": "贡献者",
             "supporters": "支持者",