chore: release 6.0.6

Bumps [@mui/material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material) from 5.9.3 to 5.10.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.10.0/packages/mui-material)

---
updated-dependencies:
- dependency-name: "@mui/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: PlasmoHQ/download-release-asset@v1.0.0
+        with:
+          tag: ${{ github.event.inputs.tag }}
+      - name: Browser Plugin Publish
+        uses: PlasmoHQ/bpp@v2
+        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>
@@ -11,6 +11,9 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 
 <br>
 
+## NOTICE
+This is the branch with the currently deployed Mue code. All development is currently occuring in the 7.0 branch. Please open pull requests to that branch only.
+
 ## Table of contents
 * [Screenshots](#screenshot)
 * [Features](#features)
@@ -86,6 +89,9 @@ 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/>
+efeaydal - Turkish <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.2",
+  "version": "6.0.6",
   "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.2",
+  "version": "6.0.6",
   "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.2",
+  "version": "6.0.6",
   "dependencies": {
-    "@eartharoid/i18n": "^1.0.2",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
+    "@eartharoid/i18n": "1.0.4",
+    "@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.1.1",
-    "@mui/material": "5.1.1",
-    "react": "17.0.2",
-    "react-clock": "3.0.0",
+    "@mui/material": "5.10.0",
+    "react": "18.2.0",
+    "react-clock": "3.1.0",
     "react-color-gradient-picker": "0.1.2",
-    "react-dom": "17.0.2",
-    "react-hot-keys": "2.7.1",
-    "react-modal": "3.14.4",
+    "react-dom": "18.2.0",
+    "react-hot-keys": "2.7.2",
+    "react-icons": "^4.3.1",
+    "react-modal": "3.15.1",
     "react-sortable-hoc": "2.0.0",
-    "react-toastify": "8.1.0",
-    "weather-icons-react": "1.2.0"
+    "react-toastify": "9.0.8"
   },
   "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": "^13.0.0",
+    "source-map-loader": "^4.0.0",
+    "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

@@ -35,7 +35,12 @@ export default class Autocomplete extends PureComponent {
       input: e.target.innerText
     });
 
-    this.props.onClick(e);
+    this.props.onClick({
+      preventDefault: () => e.preventDefault(),
+      target: {
+        value: e.target.innerText
+      }
+    });
   };
 
   componentDidMount() {
@@ -48,7 +53,7 @@ export default class Autocomplete extends PureComponent {
     });
   }
 
-  componentWillUnount() {
+  componentWillUnmount() {
     EventBus.off('refresh');
   }
 

src/components/helpers/preview/Preview.jsx

@@ -7,9 +7,9 @@ export default function Preview(props) {
 
   return (
     <div className='preview-mode'>
-      <h3>{getMessage('modals.main.settings.reminder.title')}</h3>
-      <h1>{getMessage('modals.welcome.preview.description')}</h1>
-      <button className='close' onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
+      <h1>{getMessage('modals.main.settings.reminder.title')}</h1>
+      <p>{getMessage('modals.welcome.preview.description')}</p>
+      <button className='pinNote' onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
     </div>
   );
 }

src/components/helpers/preview/preview.scss

@@ -6,8 +6,10 @@
   color: var(--modal-text);
   background: var(--background);
   max-width: 300px;
-  border-radius: 0.7em;
+  border-radius: .7em;
   z-index: 999;
+  text-align: left;
+  cursor: default;
 
   h1 {
     font-size: 1rem;

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';
 
@@ -58,7 +58,8 @@ export default class Create extends PureComponent {
     const data = input || localStorage;
     let settings = {};
     Object.keys(data).forEach((key) => {
-      if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') {
+      if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats' || key === 'backup_settings' || key === 'showReminder' 
+      || key === 'experimental' || key === 'debugtimeout' || key === 'quotelanguage') {
         return;
       }
       settings[key] = localStorage.getItem(key);
@@ -67,7 +68,7 @@ export default class Create extends PureComponent {
     this.setState({
       addonData: settings,
       settingsClasses: {
-        current: input ? 'toggle lightTheme' : 'toggle lightTheme active',
+        current: input ? 'toggle lightTheme active' : 'toggle lightTheme',
         json: input ? 'toggle lightTheme active' : 'toggle lightTheme'
       }
     });
@@ -220,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>
@@ -231,9 +232,9 @@ export default class Create extends PureComponent {
     const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
     const importSettings = (
       <>
-        <h3>{getMessage('modals.mwelcome.sections.title')}</h3>
-        <div className='themesToggleArea'>
-          <div className='options'>
+        <h3>{getMessage('modals.welcome.sections.settings.title')}</h3>
+        <div className='themesToggleArea' >
+          <div className='options' style={{ maxWidth: '512px' }}>
             <div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
               <ExportIcon/>
               <span>{getMessage('modals.main.addons.create.settings.current')}</span>
@@ -267,11 +268,18 @@ export default class Create extends PureComponent {
           <TextField label={getMessage('modals.main.addons.create.quotes.api.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.author} onInput={(e) => this.updateQuotePack(e.target.value, 'author')}/>
           <br/><br/>
         </> : <>
-          <button onClick={() => this.importQuotes()} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
-          <br/><br/>
+        <div className='themesToggleArea'>
+          <div className='options'>
+            <div onClick={() => this.importQuotes()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
         </>}
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }}disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <button onClick={() => this.changeTab(2)} className='uploadbg'>{getMessage('modals.welcome.buttons.previous')}</button>
+        <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
@@ -280,18 +288,31 @@ export default class Create extends PureComponent {
     const addPhotos = (
       <>
         <h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
-        <button onClick={() => this.importPhotos()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
-        <br/><br/>
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
+        <div className='themesToggleArea'>
+          <div className='options'>
+            <div onClick={() => this.importPhotos()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.settings.current')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
+        <button onClick={() => this.changeTab(2)} className='uploadbg'>{getMessage('modals.welcome.buttons.previous')}</button>
         <button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
 
     const downloadAddon = (
       <>
-        <h3>{getMessage('modals.main.addons.create.finish.title')}</h3>
-        <button onClick={() => this.downloadAddon()} className='upload'>{getMessage('modals.main.addons.create.finish.download')}</button>
-        <br/><br/>
+        <div className='themesToggleArea'>
+          <div className='options'>
+            <div onClick={() => this.downloadAddon()} className='toggle lightTheme' style={{ width: '60%', margin: '10px 0 10px 0' }}>
+              <ExportIcon/>
+              <span>{getMessage('modals.main.addons.create.finish.download')}</span>
+            </div>
+          </div>
+        </div>
+        <br/>
         <button onClick={() => this.changeTab((this.state.addonMetadata.type === 'quote_api') ? 'quotes' : this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</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;
 }
 
@@ -73,6 +73,17 @@ p.description {
   }
 }
 
+@media only screen and (max-width: 1200px) {
+  .side {
+    margin-top: 222px;
+    float: none !important;
+  }
+
+  .overview {
+    margin-top: -160px !important;
+  }
+}
+
 .overview {
   font-size: 30px !important;
   margin-top: 33px;

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

@@ -58,6 +58,11 @@ input {
     padding: 15px 20px;
     border-radius: 4px;
     display: flex !important;
+    cursor: pointer;
+
+    &::-webkit-calendar-picker-indicator {
+      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/Background.jsx

@@ -90,11 +90,19 @@ export default class BackgroundSettings extends PureComponent {
     const APISettings = (
       <>
         <Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage' onChange={(e) => this.setState({ backgroundAPI: e })}/>
-        <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
-          {this.state.backgroundCategories.map((category) => (
-            <MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
-          ))}
-        </Dropdown>
+        {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ?
+          <>
+            <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
+              <MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
+              <MenuItem value='loading' key='loading'>{getMessage('modals.main.loading')}</MenuItem>
+            </Dropdown>
+          </> : 
+          <Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' >
+            {this.state.backgroundCategories.map((category) => (
+              <MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
+            ))}
+          </Dropdown>
+        }
         <Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
           <option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
           <option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
@@ -125,7 +133,7 @@ export default class BackgroundSettings extends PureComponent {
         <Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' disabled={!usingImage} />
         <Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' disabled={!usingImage} />
         <Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' disabled={this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'} />
-        {/*<Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>*/}
+        <Checkbox name='photoMap' text={getMessage('modals.main.settings.sections.background.show_map')} element='.other' disabled={this.state.backgroundAPI !== 'unsplash'}/>
 
         <h3>{getMessage('modals.main.settings.sections.background.source.title')}</h3>
         <Dropdown label={getMessage('modals.main.settings.sections.background.type.title')} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>

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,21 @@ 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() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
   }
 
   // cancel welcome image timer if not on welcome tab
@@ -99,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>
       </>
     );
@@ -134,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>
@@ -158,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>
@@ -199,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/modals/welcome/welcome.scss

@@ -79,13 +79,13 @@
 
 .themesToggleArea {
   .active {
-    background: var(--tab-active) !important;
+    background: var(--tab-active);
   }
 
   .toggle {
     background: var(--sidebar);
     text-align: center;
-    border-radius: 40px;
+    border-radius: 20px;
     padding: 20px;
     margin: 10px;
     border: 3px solid var(--tab-active);
@@ -96,9 +96,10 @@
     align-content: center;
     justify-content: center;
 
+    cursor: pointer;
+
     &:hover {
       background: var(--tab-active);
-      cursor: pointer;
     }
 
     span {

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,8 +1,14 @@
 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';
-//import { lat2tile, lon2tile } from 'modules/helpers/background/widget';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -26,6 +32,7 @@ const downloadImage = async (info) => {
 export default function PhotoInformation({ info, url, api }) {
   const [width, setWidth] = useState(0);
   const [height, setHeight] = useState(0);
+  const [usePhotoMap, setPhotoMap] = useState(false);
 
   if (info.hidden === true || !info.credit) {
     return null;
@@ -75,7 +82,7 @@ export default function PhotoInformation({ info, url, api }) {
   }
 
   const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !info.offline && !info.photographerURL && api;
-  /*const downloadBackground = () => { 
+  const downloadBackground = () => { 
     if (downloadEnabled) {
       downloadImage(info);
     }
@@ -90,53 +97,53 @@ export default function PhotoInformation({ info, url, api }) {
         element.style.display = 'none';
       }
     }
-  };*/
+  };
 
-  {/*const photoMap = () => {
-    if (localStorage.getItem('photoMap') !== 'true' || !info.latitude || !info.longitude) {
+  const photoMap = () => {
+    if (localStorage.getItem('photoMap') !== 'true' || !info.latitude || !info.longitude || usePhotoMap === false) {
       return null;
     }
 
     const zoom = 12;
-    const lat = lat2tile(info.latitude, zoom);
-    const lon = lon2tile(info.longitude, zoom);
-    const tile = `${variables.constants.MAPBOX_URL}/styles/v1/mapbox/streets-v11/tiles/${zoom}/${lon}/${lat}?access_token=${info.maptoken}`;
-    
-    let icon = variables.constants.CDN_URL + '/mapbox/mapbox-logo-dark.png';
-    if (document.body.classList.contains('dark')) {
-      icon = variables.constants.CDN_URL + '/mapbox/mapbox-logo-white.png';
-    }
+    const tile = `${variables.constants.MAPBOX_URL}/styles/v1/mapbox/streets-v11/static/pin-s+555555(${info.longitude},${info.latitude})/${info.longitude},${info.latitude},${zoom},0/300x100?access_token=${info.maptoken}`;
 
     return (
-      <Fragment key='test'>
-        <a href={`https://www.openstreetmap.org/?mlat=${info.latitude}&mlon=${info.longitude}`} target='_blank' rel='noopener noreferrer'>
+      <Fragment key='photomap'>
+        <a href={`${variables.constants.OPENSTREETMAP_URL}/?mlat=${info.latitude}&mlon=${info.longitude}`} target='_blank' rel='noopener noreferrer'>
           <img className='locationMap' src={tile} alt='location' draggable={false}/>
         </a>
         <br/>
-        <img className='mapboxLogo' src={icon} alt='mapbox logo' draggable={false}/>
         <span className='mapCopyright'>
           <a href='https://www.mapbox.com/about/maps/' target='_blank' rel='noopener noreferrer'> © Mapbox</a>, <a href='https://www.openstreetmap.org/about/' target='_blank' rel='noopener noreferrer'>© OpenStreetMap</a>. <a href='https://www.mapbox.com/map-feedback/' target='_blank' rel='noopener noreferrer'>Improve this map</a>.
         </span>
       </Fragment>
     );
-  }*/}
+  }
+
+  // only request map image if the user looks at the photo information
+  // this is to reduce requests to the api
+  try {
+    document.getElementsByClassName('photoInformation')[0].onmouseover = () => {
+      setPhotoMap(true);
+    }
+  } catch (e) {}
 
   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()*/}
+        {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

@@ -22,7 +22,7 @@ if (languagecode === 'en') {
 }
 
 variables.language = new I18n(variables.languagecode, {
-  de: require('./translations/de_DE.json'),
+  de_DE: require('./translations/de_DE.json'),
   en_GB: require('./translations/en_GB.json'),
   en_US: require('./translations/en_US.json'),
   es: require('./translations/es.json'),
@@ -30,7 +30,9 @@ 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'),
+  tr_TR: require('./translations/tr_TR.json')
 });
 
 // set html language tag

src/modules/constants.js

@@ -5,28 +5,29 @@ export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';
 export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
-//export const MAPBOX_URL = 'https://api.mapbox.com';
+export const MAPBOX_URL = 'https://api.mapbox.com';
+export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';
 
 // Mue URLs
 export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
 export const BLOG_POST = 'https://blog.muetab.com/posts/version-6-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
-export const CDN_URL = 'https://res.cloudinary.com/mue/image/upload';
 
 // Mue Info
 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.2'; 
+export const VERSION = '6.0.6'; 

src/modules/default_settings.json

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

src/modules/helpers/background/widget.js

@@ -72,12 +72,3 @@ export function randomColourStyleBuilder(type) {
     style
   }
 }
-
-// source: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29
-/*export function lon2tile(lon, zoom) {
-  return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
-}
-
-export function lat2tile(lat, zoom) {
-  return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
-}*/

src/modules/helpers/marketplace.js

@@ -48,6 +48,7 @@ export function install(type, input, sideload) {
       localStorage.setItem('quoteType', 'quote_pack');
       EventBus.dispatch('refresh', 'quote');
       break;
+
     default:
       break;
   }
@@ -78,6 +79,7 @@ export function uninstall(type, name) {
       });
       showReminder();
       break;
+
     case 'quotes':
       localStorage.removeItem('quote_packs');
       localStorage.removeItem('quoteAPI');
@@ -85,12 +87,14 @@ export function uninstall(type, name) {
       localStorage.removeItem('oldQuoteType');
       EventBus.dispatch('refresh', 'marketplacequoteuninstall');
       break;
+
     case 'photos':
       localStorage.removeItem('photo_packs');
       localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
       localStorage.removeItem('oldBackgroundType');
       EventBus.dispatch('refresh', 'marketplacebackgrounduninstall');
       break;
+
     default:
       break;
   }

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,13 @@
   {
     "name": "中文 (简体)",
     "value": "zh_CN"
+  },
+  {
+    "name": "Bahasa Indonesia",
+    "value": "id_ID"
+  },
+  {
+    "name": "Türkçe",
+    "value": "tr_TR"
   }
 ]

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/tr_TR.json

@@ -0,0 +1,554 @@
+{
+    "tabname": "Yeni Sekme",
+    "widgets": {
+        "greeting": {
+            "morning": "Günaydın",
+            "afternoon": "Tünaydın",
+            "evening": "İyi akşamlar",
+            "christmas": "Mutlu Noeller",
+            "newyear": "Yeni Yılın Kutlu Olsun",
+            "halloween": "Cadılar Bayramın kutlu olsun",
+            "birthday": "Doğum günün kutlu olsun"
+        },
+        "background": {
+            "credit": "Fotoğrafı çeken",
+            "unsplash": "Unsplash",
+            "pexels": "Pexels",
+            "information": "Bilgi",
+            "download": "İndir"
+        },
+        "search": "Ara",
+        "quicklinks": {
+            "new": "Yeni Link",
+            "name": "İsim",
+            "url": "URL",
+            "icon": "İkon (opsiyonel)",
+            "add": "Ekle",
+            "name_error": "Bir isim eklemelisiniz",
+            "url_error": "Bir URL eklemelisiniz"
+        },
+        "date": {
+            "week": "Hafta"
+        },
+        "weather": {
+            "not_found": "Bulunamadı",
+            "meters": "{amount} metre"
+        },
+        "navbar": {
+            "tooltips": {
+                "refresh": "Sayfayı Yenile"
+            },
+            "notes": {
+                "title": "Notlar",
+                "placeholder": "Buraya yazın"
+            }
+        }
+    },
+    "modals": {
+        "main": {
+            "title": "Seçenekler",
+            "loading": "Yükleniyor...",
+            "file_upload_error": "Dosya 2MB'ı geçmemeli",
+            "navbar": {
+                "settings": "Ayarlar",
+                "addons": "Eklentiler",
+                "marketplace": "Mağaza"
+            },
+            "error_boundary": {
+                "title": "Hata",
+                "message": "Mue'nin bileşenleri yüklenirken hata oluştu",
+                "refresh": "Yenile"
+            },
+            "settings": {
+                "enabled": "Etkin",
+                "reminder": {
+                    "title": "Not",
+                    "message": "Tüm değişikliklerin gerçekleşmesi için sayfanın yenilenmesi gerekir"
+                },
+                "sections": {
+                    "time": {
+                        "title": "Zaman",
+                        "format": "Format",
+                        "type": "Tip",
+                        "digital": {
+                            "title": "Dijital",
+                            "seconds": "Saniye",
+                            "twentyfourhour": "24 Saat",
+                            "twelvehour": "12 Saat",
+                            "zero": "Sıfır dolgulu"
+                        },
+                        "analogue": {
+                            "title": "Analog",
+                            "second_hand": "Saniye ibresi",
+                            "minute_hand": "Dakika ibresi",
+                            "hour_hand": "Saat ibresi",
+                            "hour_marks": "Saat işareti",
+                            "minute_marks": "Dakika işareti"
+                        },
+                        "percentage_complete": "Oranında tamamlandı"
+                    },
+                    "date": {
+                        "title": "Tarih",
+                        "week_number": "Hafta sayısını göster",
+                        "day_of_week": "Gün ismini göster",
+                        "datenth": "Gün sayısının yanına th ekle",
+                        "type": {
+                            "short": "Kısa",
+                            "long": "Uzun"
+                        },
+                        "short_date": "Kısa tarih",
+                        "short_format": "Kısa biçim",
+                        "short_separator": {
+                            "title": "Kısa ayırıcı",
+                            "dots": "Nokta",
+                            "dash": "Kısa çizgi(-)",
+                            "gaps": "Boşluk",
+                            "slashes": "Eğik çizgi"
+                        }
+                    },
+                    "quote": {
+                        "title": "Alıntı sözler",
+                        "author_link": "Yazar linki",
+                        "custom": "Özel alıntı söz",
+                        "custom_author": "Özel yazar",
+                        "add": "Alıntı söz ekle",
+                        "buttons": {
+                            "title": "Butonlar",
+                            "copy": "Kopyala",
+                            "tweet": "Tweet",
+                            "favourite": "Favori"
+                        }
+                    },
+                    "greeting": {
+                        "title": "Karşılama",
+                        "events": "Etkinlikler",
+                        "default": "Varsayılan karşılama mesajı",
+                        "name": "Karşılanacak kişi ismi",
+                        "birthday": "Doğum günü",
+                        "birthday_age": "Yaş",
+                        "birthday_date": "Doğum Tarihi"
+                    },
+                    "background": {
+                        "title": "Arkaplan",
+                        "ddg_image_proxy": "DuckDuckGo resim proxysini kullan",
+                        "transition": "Animasyonlu açılışı etkinleştir",
+                        "photo_information": "Fotoğraf bilgilerini göster",
+                        "show_map": "Fotoğraf bilgilerinde konum haritası varsa göster",
+                        "category": "Kategori",
+                        "buttons": {
+                            "title": "Butonlar",
+                            "view": "Arkaplanı göster",
+                            "favourite": "Favorilere ekle",
+                            "download": "İndir"
+                        },
+                        "effects": {
+                            "title": "Efektler",
+                            "blur": "Bulanıklık",
+                            "brightness": "Parlaklık",
+                            "filters": {
+                                "title": "Arkaplan filtresi",
+                                "amount": "Filtre miktarı",
+                                "grayscale": "Gri tonlamalı",
+                                "sepia": "Sepya",
+                                "invert": "Renkleri Ters Çevir",
+                                "saturate": "Canlılık",
+                                "contrast": "Kontrast"
+                            }
+                        },
+                        "type": {
+                            "title": "Tür",
+                            "api": "API",
+                            "custom_image": "Custom image",
+                            "custom_colour": "Özel renk/gradyan",
+                            "random_colour": "Rastgele renk",
+                            "random_gradient": "Rastgele gradyan"
+                        },
+                        "source": {
+                            "title": "Kaynak",
+                            "api": "Arkaplan API",
+                            "custom_background": "Özel arkaplan",
+                            "custom_colour": "Özel arkaplan rengi",
+                            "upload": "Yükle",
+                            "add_colour": "Renk Ekle",
+                            "add_background": "Arkaplan Ekle",
+                            "add_url": "Link Ekle",
+                            "disabled": "Devre Dışı",
+                            "loop_video": "Videoyu Döngüye Al",
+                            "mute_video": "Videoyu sustur",
+                            "quality": {
+                                "title": "Kalite",
+                                "original": "Orjinal",
+                                "high": "Yüksek Kalite",
+                                "normal": "Normal Kalite",
+                                "datasaver": "Veri Tasarrufu"
+                            }
+                        },
+                        "interval": {
+                            "title": "Arkaplan değişme zamanı",
+                            "minute": "Dakika",
+                            "half_hour": "Yarım saat",
+                            "hour": "Saat",
+                            "day": "Gün",
+                            "month": "Ay"
+                        }
+                    },
+                    "search": {
+                        "title": "Ara",
+                        "search_engine": "Arama motoru",
+                        "custom": "Özel arama motoru",
+                        "autocomplete": "Otomatik Tamamlama",
+                        "autocomplete_provider": "Otomatik Tamamlama Sağlayıcısı",
+                        "voice_search": "Sesli Arama",
+                        "dropdown": "Arama sağlayıcılarını göster"
+                    },
+                    "weather": {
+                        "title": "Hava durumu",
+                        "location": "Konum",
+                        "auto": "Otomatik",
+                        "temp_format": {
+                            "title": "Sıcaklık formatı",
+                            "celsius": "Santigrat",
+                            "fahrenheit": "Fahrenhayt",
+                            "kelvin": ""
+                        },
+                        "extra_info": {
+                            "title": "Ek bilgiler",
+                            "show_location": "Konumu göster",
+                            "show_description": "Açıklamayı göster",
+                            "cloudiness": "Bulut oranı",
+                            "humidity": "Nem oranı",
+                            "visibility": "Görünebilirlik oranı",
+                            "wind_speed": "Rüzgar hızı",
+                            "wind_direction": "Rüzgar yönü",
+                            "min_temp": "Minimum sıcaklık",
+                            "max_temp": "Maksimum sıcaklık",
+                            "atmospheric_pressure": "Atmosferik basınç"
+                        }
+                    },
+                    "quicklinks": {
+                        "title": "Hızlı ulaşım linkleri",
+                        "open_new": "Yeni sekmede aç",
+                        "tooltip": "İpucu",
+                        "text_only": "Yalnızca metni göster"
+                    },
+                    "message": {
+                        "title": "Mesaj",
+                        "add": "Mesaj ekle",
+                        "text": "Mesaj içeriği"
+                    },
+                    "appearance": {
+                        "title": "Görünüm",
+                        "theme": {
+                            "title": "Tema",
+                            "auto": "Otomatik",
+                            "light": "Açık",
+                            "dark": "Koyu"
+                        },
+                        "navbar": {
+                            "title": "Gezinme çubuğu",
+                            "notes": "Notlar",
+                            "refresh": "Sayfayı Yenile",
+                            "hover": "Yalnızca fareyle üzerine gelindiğinde göster",
+                            "refresh_options": {
+                                "none": "Hiçbiri",
+                                "page": "Sayfa"
+                            }
+                        },
+                        "font": {
+                            "title": "Font",
+                            "custom": "Özel font",
+                            "google": "Google Fontlardan içeri aktar",
+                            "weight": {
+                                "title": "Font kalınlığı",
+                                "thin": "İnce",
+                                "extra_light": "Ekstra açık",
+                                "light": "Açık",
+                                "normal": "Normal",
+                                "medium": "Orta",
+                                "semi_bold": "Yarı Kalın",
+                                "bold": "Kalın",
+                                "extra_bold": "Ekstra Kalın"
+                            },
+                            "style": {
+                                "title": "Font stili",
+                                "normal": "Normal",
+                                "italic": "İtalik",
+                                "oblique": "Eğik"
+                            }
+                        },
+                        "accessibility": {
+                            "title": "Erişilebilirlik",
+                            "animations": "Animasyonlar",
+                            "text_shadow": "Widget metinlerinin gölgesi",
+                            "widget_zoom": "Widget büyüklüğü",
+                            "toast_duration": "Widget yüklenme süresi",
+                            "milliseconds": "Milisaniye"
+                        }
+                    },
+                    "order": {
+                        "title": "Widget Sıralaması"
+                    },
+                    "advanced": {
+                        "title": "Gelişmiş",
+                        "offline_mode": "Çevrimdışı mod",
+                        "data": "Veri",
+                        "reset_modal": {
+                            "title": "Uyarı",
+                            "question": "Mue'yu sıfırlamak istediğinizden emin misiniz?",
+                            "information": "Bu işlem, tüm verilerinizi silecektir. Verilerinizi ve tercihlerinizi saklamak istiyorsanız, lütfen önce bunları dışa aktarın.",
+                            "cancel": "İptal"
+                        },
+                        "customisation": "Özelleştirmek",
+                        "custom_css": "Özel CSS",
+                        "custom_js": "Özel JS",
+                        "tab_name": "Sekme ismi",
+                        "timezone": {
+                            "title": "Saat dilimi",
+                            "automatic": "Otomatik"
+                        },
+                        "experimental_warning": "Deneysel mod açıksa Mue ekibinin destek sağlayamadığını lütfen unutmayın. Lütfen önce deneysel modu devre dışı bırakın ve desteğe başvurmadan önce sorunun devam edip etmediğini görün."
+                    },
+                    "stats": {
+                        "title": "İstatistikler",
+                        "warning": "Bu özelliği kullanmak için kullanım verilerini etkinleştirmeniz gerekir. Bu veriler yalnızca yerel olarak depolanır.",
+                        "sections": {
+                            "tabs_opened": "Açılan sekme sayısı",
+                            "backgrounds_favourited": "Favorilere eklenen arkaplan sayısı",
+                            "backgrounds_downloaded": "İndirilen arkaplan sayısı",
+                            "quotes_favourited": "Favorilere eklenen alıntı söz sayısı",
+                            "quicklinks_added": "Eklenen Hızlı ulaşım linki sayısı",
+                            "settings_changed": "Değiştirilen ayar sayısı",
+                            "addons_installed": "Kurulan eklenti sayısı"
+                        },
+                        "usage": "Kullanım İstatistikleri"
+                    },
+                    "keybinds": {
+                        "title": "Tuş kombinasyonları",
+                        "recording": "Kaydediliyor...",
+                        "click_to_record": "Kaydetmek için tıklayın",
+                        "background": {
+                            "favourite": "Arkaplanı favorilere ekle",
+                            "maximise": "Arkaplanı büyüt",
+                            "download": "Arkaplanı indir",
+                            "show_info": "Arkaplan bilgilerini göster"
+                        },
+                        "quote": {
+                            "favourite": "Favori alıntı söz",
+                            "copy": "Alıntı sözü kopyala",
+                            "tweet": "Alıntı sözü Tweetle"
+                        },
+                        "notes": {
+                            "pin": "Notları sabitle",
+                            "copy": "Notu kopyala"
+                        },
+                        "search": "Aramaya odaklan",
+                        "quicklinks": "Hızlı bağlantı eklemeyi aç/kapat",
+                        "modal": "Modalı aç/kapat"
+                    },
+                    "experimental": {
+                        "title": "Deneysel",
+                        "warning": "Bu özellikler tam olarak test edilmedi ve düzgün çalışmayabilir!",
+                        "developer": "Geliştirici"
+                    },
+                    "language": {
+                        "title": "Dil",
+                        "quote": "Alıntı söz dili"
+                    },
+                    "changelog": {
+                        "title": "Yenilikler",
+                        "by": "{author} tarafından"
+                    },
+                    "about": {
+                        "title": "Hakkında",
+                        "copyright": "Telif Hakkı",
+                        "version": {
+                            "title": "Version",
+                            "checking_update": "Güncellemeler kontrol ediliyor",
+                            "update_available": "Güncelleme mevcut",
+                            "no_update": "Yeni bir güncelleme mevcut değil",
+                            "offline_mode": "Çevrimdışı modda güncelleme kontrol edilemez",
+                            "error": {
+                                "title": "Güncelleme bilgisi alınırken bir hata oluştu",
+                                "description": "Bir hata oluştu"
+                            }
+                        },
+                        "contact_us": "İletişime geç",
+                        "support_mue": "Mue'ye destekde bulun",
+                        "resources_used": {
+                            "title": "Kullanılan kaynaklar",
+                            "bg_images": "Çevrimdışı arkaplan resimleri"
+                        },
+                        "contributors": "Katkıda Bulunanlar",
+                        "supporters": "Destekçiler",
+                        "no_supporters": "Şu anda Mue destekçisi yok",
+                        "photographers": "Fotoğrafçılar"
+                    }
+                },
+                "buttons": {
+                    "reset": "Reset",
+                    "import": "İçe Aktar",
+                    "export": "Dışa Aktar"
+                }
+            },
+            "marketplace": {
+                "photo_packs": "Fotoğraf Paketleri",
+                "quote_packs": "Alıntı söz Paketleri",
+                "preset_settings": "Ön Ayar Ayarları",
+                "no_items": "Bu kategoride öğe mevcut değil",
+                "product": {
+                    "overview": "Genel Bakış",
+                    "information": "Bilgilendirme",
+                    "last_updated": "Son güncelleme",
+                    "version": "Version",
+                    "author": "Yapımcı",
+                    "buttons": {
+                        "addtomue": "Mue'ye Ekle",
+                        "remove": "Kaldır",
+                        "update_addon": "Eklentiyi Güncelle"
+                    },
+                    "quote_warning": {
+                        "title": "Uyarı",
+                        "description": "Bu alıntı söz paketi, sizi izleyebilecek harici sunuculara istekte bulunabilir!"
+                    }
+                },
+                "offline": {
+                    "title": "Çevrimdışı görünüyorsun",
+                    "description": "Lütfen internete bağlanın"
+                }
+            },
+            "addons": {
+                "added": "Eklendi",
+                "check_updates": "Güncellemeleri kontrol et",
+                "no_updates": "Güncelleme mevcut değil",
+                "updates_available": "{amount} güncelleme mevcut",
+                "empty": {
+                    "title": "Boş",
+                    "description": "Hiç eklenti kurulmamış"
+                },
+                "sideload": {
+                    "title": "Manuel Eklenti Ekle",
+                    "failed": "Sideload eklenti eklenirken bir hata oluştu",
+                    "errors": {
+                        "no_name": "İsim belirtilmedi",
+                        "no_author": "Yazar belirtilmedi",
+                        "no_type": "Tür belirtilmedi",
+                        "invalid_photos": "Geçersiz fotoğraf nesnesi",
+                        "invalid_quotes": "Geçersiz alıntı söz nesnesi"
+                    }
+                },
+                "sort": {
+                    "title": "Sırala",
+                    "newest": "Yüklenenler (Önce Yeni)",
+                    "oldest": "Yüklenenler (Önce Eski)",
+                    "a_z": "Alfabetik (A-Z)",
+                    "z_a": "Alfabetik (Z-A)"
+                },
+                "create": {
+                    "title": "Oluştur",
+                    "other_title": "Eklenti Oluştur",
+                    "metadata": {
+                        "name": "İsim",
+                        "icon_url": "İkon Linki",
+                        "screenshot_url": "Ekran Görüntüsü Linki",
+                        "description": "Açıklama"
+                    },
+                    "finish": {
+                        "title": "Bitir",
+                        "download": "Eklentiyi İndir"
+                    },
+                    "settings": {
+                        "current": "Mevcut kurulumu içe aktar",
+                        "json": "JSON Dosyasını Yükle"
+                    },
+                    "photos": {
+                        "title": "Fotoğraf Ekle"
+                    },
+                    "quotes": {
+                        "title": "Alıntı Söz Ekle",
+                        "api": {
+                            "title": "API",
+                            "url": "Alıntı Söz Linki",
+                            "name": "JSON alıntı sözü ismi",
+                            "author": "JSON alıntı söz Yazarı"
+                        },
+                        "local": {
+                            "title": "Yerel"
+                        }
+                    }
+                }
+            }
+        },
+        "update": {
+            "title": "Güncelle",
+            "offline": {
+                "title": "Çevrimdışı",
+                "description": "Çevrimdışı moddayken güncelleme günlükleri alınamaz"
+            },
+            "error": {
+                "title": "Hata",
+                "description": "Sunucuya bağlanılamadı"
+            }
+        },
+        "welcome": {
+            "tip": "Hızlı ipucu",
+            "sections": {
+                "intro": {
+                    "title": "Muetab'e Hoş Geldiniz",
+                    "description": "Mue'yi yüklediğiniz için teşekkür ederiz, umarız Mue ile iyi vakit geçirirsiniz"
+                },
+                "language": {
+                    "title": "Dilinizi seçin",
+                    "description": "Mue, aşağıda listelenen dillerde görüntülenebilir. Ayrıca sayfamıza yeni çeviriler de ekleyebilirsiniz"
+                },
+                "theme": {
+                    "title": "Tema seçin",
+                    "description": "Mue hem açık hem de koyu tema desteği sunar, veya sistem temanıza bağlı olarak otomatik olarak ayarlanabilir",
+                    "tip": "Otomatik tema ayarını kullanmak, bilgisayarınızda kullanılan temayı kullanır. Bu ayar, modları ve ekranda görüntülenen hava durumu ve notlar gibi bazı widgetların görünümünü etkiler"
+                },
+                "settings": {
+                    "title": "Ayarları İçe Aktar",
+                    "description": "Mue'yi yeni bir cihaza mı yüklüyorsunuz? Eski ayarlarınızı geri getirmekten çekinmeyin",
+                    "tip": "Eski Mue kurulumunuzda Gelişmiş sekmesine giderek eski ayarlarınızı dışa aktarabilirsiniz. Ardından, ayarlarınızın bulunduğu JSON dosyasını indirip yeni cihazınızda dışa aktar düğmesine tıklamanız ve JSON dosyasını yüklemeniz gerekir"
+                },
+                "privacy": {
+                    "title": "Gizlilik ayarları",
+                    "description": "Mue ile gizliliğinizi daha iyi korumak için bazı ek ayarları etkinleştirebilirsiniz",
+                    "offline_mode_description": "Çevrimdışı modu etkinleştirmek, herhangi bir hizmete yönelik tüm istekleri devre dışı bırakır. Bu, çevrimiçi arka planlar, çevrimiçi alıntı sözler, uygulama mağazası, hava durumu, hızlı bağlantılar, yenilikler ve bazı sekme bilgilerinin devre dışı bırakılmasına sebep olacaktır",
+                    "ddg_proxy_description": "Dilerseniz resim isteklerini DuckDuckGo üzerinden gerçekleştirebilirsiniz. Varsayılan olarak, API istekleri sunucularımızdan ve görüntü istekleri orijinal sunucudan geçer. Hızlı bağlantılar için bunu kapatmak, simgeleri DuckDuckGo yerine Google'dan alır. DuckDuckGo proxy, Mağaza için her zaman etkindir",
+                    "links": {
+                        "title": "Yararlı Bağlantılar",
+                        "privacy_policy": "Gizlilik Politikası",
+                        "source_code": "Mue Kaynak Kodu"
+                    }
+                },
+                "final": {
+                    "title": "Son adım",
+                    "description": "Mue Tab deneyiminiz başlamak üzere.",
+                    "changes": "Değişiklikler",
+                    "changes_description": "Ayarları daha sonra değiştirmek için sekmenizin sağ üst köşesindeki ayarlar simgesine tıklayabilirsiniz.",
+                    "imported": "{amount} ayar içe aktarıldı"
+                }
+            },
+            "buttons": {
+                "next": "İleri",
+                "preview": "Önizleme",
+                "previous": "Geri",
+                "close": "Kapat"
+            },
+            "preview": {
+                "description": "Şu anda önizleme modundasınız. Bu sekme kapatıldığında ayarlar sıfırlanacak.",
+                "continue": "Kuruluma devam et"
+            }
+        }
+    },
+    "toasts": {
+        "quote": "Alıntı söz kopyalandı",
+        "notes": "Notlar kopyalandı",
+        "reset": "Sıfırlama işlemi başarılı",
+        "installed": "Başarıyla yüklendi",
+        "uninstalled": "Başarıyla kaldırıldı",
+        "updated": "Başarıyla güncellendi",
+        "error": "Bir hata oluştu",
+        "imported": "Başarıyla içe aktarıldı"
+    }
+}

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": "支持者",