chore: release 6.0.4

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

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

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

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

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>

manifest/chrome.json

@@ -4,7 +4,7 @@
   "default_locale": "en",
   "name": "__MSG_name__",
   "description": "__MSG_description__",
-  "version": "6.0.0",
+  "version": "6.0.4",
   "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.0",
+  "version": "6.0.4",
   "homepage_url": "https://muetab.com",
   "browser_action": {
     "default_icon": "icons/128x128.png"

package.json

@@ -9,15 +9,15 @@
   "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.0",
+  "version": "6.0.4",
   "dependencies": {
     "@eartharoid/i18n": "^1.0.2",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@fontsource/lexend-deca": "4.4.5",
     "@fontsource/montserrat": "4.4.5",
-    "@mui/icons-material": "5.1.1",
-    "@mui/material": "5.1.1",
+    "@mui/icons-material": "5.2.5",
+    "@mui/material": "5.2.6",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",
@@ -40,10 +40,10 @@
     "@eartharoid/deep-merge": "^0.0.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-transform-react-class-to-function": "^1.2.2",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "9.1.0",
     "css-loader": "^6.5.1",
     "eslint": "^8.2.0",
-    "eslint-config-react-app": "^6.0.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",

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

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/main/marketplace/sections/Create.jsx

@@ -3,7 +3,9 @@ import { PureComponent } from 'react';
 import { 
   SettingsRounded as Settings, 
   PhotoOutlined as Photos, 
-  FormatQuoteOutlined as Quotes
+  FormatQuoteOutlined as Quotes,
+  Upload as ImportIcon,
+  Download as ExportIcon,
 } from '@mui/icons-material';
 import { TextField } from '@mui/material';
 import { toast } from 'react-toastify';
@@ -56,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);
@@ -65,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'
       }
     });
@@ -119,9 +122,7 @@ export default class Create extends PureComponent {
 
   importQuotes() {
     this.setState({
-      addonData: {
-        quotes: JSON.parse(localStorage.getItem('customQuote')) || []
-      }
+      addonData: JSON.parse(localStorage.getItem('customQuote')) || []
     });
 
     toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
@@ -130,7 +131,16 @@ export default class Create extends PureComponent {
   importPhotos() {
     let data = [];
     try {
-      data = JSON.parse(localStorage.getItem('customBackground'));
+      const current = JSON.parse(localStorage.getItem('customBackground')) || [];
+      data = current.map((item) => {
+        return {
+          photographer: '???',
+          location: '???',
+          url: {
+            default: item
+          }
+        }
+      });
       toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
     } catch (e) {
       console.log(e);
@@ -138,9 +148,7 @@ export default class Create extends PureComponent {
     }
 
     this.setState({
-      addonData: {
-        photos: data
-      }
+      addonData: data
     });
   }
 
@@ -224,21 +232,23 @@ 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>
             </div>
             <div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
+              <ImportIcon/>
               <span>{getMessage('modals.main.addons.create.settings.json')}</span>
             </div>
           </div>
         </div>
         <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
         <br/><br/>
-        <button onClick={() => this.changeTab(2)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
+        <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={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
       </>
     );
     
@@ -253,18 +263,23 @@ export default class Create extends PureComponent {
           <option value='quote_api'>{getMessage('modals.main.addons.create.quotes.api.title')}</option>
         </Dropdown>
         {this.state.addonMetadata.type === 'quote_api' ? <>
-          <h3>{getMessage('modals.main.addons.create.quotes.api.title')}</h3>
           <TextField label={getMessage('modals.main.addons.create.quotes.api.url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.url} onInput={(e) => this.updateQuotePack(e.target.value, 'url')}/>
           <TextField label={getMessage('modals.main.addons.create.quotes.api.name')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.name} onInput={(e) => this.updateQuotePack(e.target.value, 'name')}/>
           <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/>
         </> : <>
-          <h3>{getMessage('modals.main.addons.create.quotes.local.title')}</h3>
-          <button onClick={() => this.importQuotes()} className='uploadbg' style={{ marginRight: '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={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' 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>
       </>
     );
 
@@ -273,19 +288,31 @@ export default class Create extends PureComponent {
     const addPhotos = (
       <>
         <h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
-        <h3>{getMessage('modals.main.addons.create.quotes.local.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={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
-        <button onClick={() => this.changeTab(3)} className='uploadbg' disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</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/Sideload.jsx

@@ -31,7 +31,7 @@ export default class Sideload extends PureComponent {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.no_type');
     } else if (!input.version) {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.no_version');
-    } else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
+    } else if (input.type === 'photos' && (!input.photos || !input.photos.length || !input.photos[0].url || !input.photos[0].url.default || !input.photos[0].photographer || !input.photos[0].location)) {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_photos');
     } else if (input.type === 'quotes' && (!input.quotes || !input.quotes.length || !input.quotes[0].quote || !input.quotes[0].author)) {
       failedReason = this.getMessage('modals.main.addons.sideload.errors.invalid_quotes');

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

@@ -121,3 +121,9 @@ p.author {
   max-width: 250px;
   overflow-x: hidden;
 }
+
+@media (max-height: 1080px) { 
+  .dropdownsortAddons {
+    margin-top: 40px !important;
+  }
+}

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

@@ -53,6 +53,7 @@ p.description {
   background: var(--sidebar);
   width: 350px;
   border-radius: 12px;
+  min-height: 180px;
 
   h4 {
     cursor: initial !important;
@@ -72,6 +73,18 @@ 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

@@ -54,6 +54,9 @@
   margin-right: 25px;
   width: 220px;
   cursor: pointer;
+  border-radius: 24px;
+  border: 3px solid var(--tab-active);
+  font-size: 1rem;
 
   &:hover {
     background-color: var(--tab-active);

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

@@ -25,3 +25,8 @@
   border-radius: 50%;
   padding-right: 5px;
 }
+
+.contacth3 {
+  font-size: 1.5rem;
+  margin-bottom: 0.8em !important;
+}

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

@@ -50,7 +50,7 @@ export default class Dropdown extends PureComponent {
     const label = this.props.label || '';
 
     return (
-      <FormControl fullWidth>
+      <FormControl fullWidth className={id}>
         <InputLabel id={id}>{label}</InputLabel>
         <Select labelId={id} id={this.props.name} value={this.state.value} label={label} onChange={this.onChange} ref={this.dropdown} key={id}>
           {this.props.manual ? this.props.children : this.props.children.map((e, index) => {

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

@@ -93,7 +93,7 @@ export default class About extends PureComponent {
         <p>{this.getMessage('modals.main.settings.sections.about.version.title')} {variables.constants.VERSION} ({this.state.update})</p>
         <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>{this.getMessage('modals.main.settings.sections.about.contact_us')}</h3>
+        <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>

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

@@ -15,10 +15,10 @@ export default class GreetingSettings extends PureComponent {
   }
 
   changeDate = (e) => {
-    localStorage.setItem('birthday', e.target.value);
+    localStorage.setItem('birthday', e.target.value || new Date());
 
     this.setState({
-      birthday: new Date(e.target.value)
+      birthday: e.target.value ? new Date(e.target.value) : new Date()
     });
   }
 

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/welcome/WelcomeSections.jsx

@@ -92,6 +92,13 @@ export default class WelcomeSections extends PureComponent {
     this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000);
   }
 
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+  }
+
   // cancel welcome image timer if not on welcome tab
   componentDidUpdate() {
     if (this.props.currentTab !== 0) {

src/components/modals/welcome/welcome.scss

@@ -79,25 +79,36 @@
 
 .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);
 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+
+    cursor: pointer;
+
     &:hover {
       background: var(--tab-active);
-      cursor: pointer;
     }
 
     span {
       font-size: 1rem;
     }
+
+    svg {
+      font-size: 2.5em;
+    }
   }
 
   .auto {

src/components/widgets/background/Background.jsx

@@ -401,7 +401,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/PhotoInformation.jsx

@@ -2,7 +2,6 @@ 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 Hotkeys from 'react-hot-keys';
-//import { lat2tile, lon2tile } from 'modules/helpers/background/widget';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -26,6 +25,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 +75,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,36 +90,36 @@ 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'>
@@ -129,7 +129,7 @@ export default function PhotoInformation({ info, url, api }) {
         <Info 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/>

src/components/widgets/navbar/Notes.jsx

@@ -51,7 +51,7 @@ export default class Notes extends PureComponent {
           <NotesRounded/>
           <h3>{variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.title')}</h3>
         </div>
-        <TextareaAutosize rowsmax={50} placeholder={variables.language.getMessage(variables.languagecode, 'widgets.navbar.notes.placeholder')} value={this.state.notes} onChange={this.setNotes}/>
+        <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>
         {/*variables.keybinds.pinNotes && variables.keybinds.pinNotes !== '' ? <Hotkeys keyName={variables.keybinds.pinNotes} onKeyDown={() => this.pin()}/> : null*/}

src/components/widgets/navbar/scss/_notes.scss

@@ -23,6 +23,13 @@
   position: absolute;
   top: 80%;
   margin-left: -150px;
+  max-height: 80vh !important;
+  font-size: 1rem !important;
+
+  textarea {
+    max-height: 65vh !important;
+    overflow-y: visible !important;
+  }
 
   svg {
     float: left;

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'),

src/modules/constants.js

@@ -5,14 +5,14 @@ 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';
@@ -29,4 +29,4 @@ export const DONATE_USERNAME = 'davidcralph'; // this only works if you use the
 
 export const OFFLINE_IMAGES = 20;
 
-export const VERSION = '6.0.0'; 
+export const VERSION = '6.0.4'; 

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/translations/de_DE.json

@@ -423,7 +423,7 @@
         "added": "Hinzugefügt",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "Hier ist es leer",
           "description": "Gehen Sie zum Marktplatz, um einige hinzuzufügen"

src/translations/en_GB.json

@@ -422,7 +422,7 @@
         "added": "Added",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "Empty",
           "description": "No addons are installed"

src/translations/en_US.json

@@ -422,7 +422,7 @@
         "added": "Added",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "Empty",
           "description": "No addons are installed"

src/translations/es.json

@@ -22,7 +22,7 @@
       "new": "Nuevo enlace",
       "name": "Nombre",
       "url": "URL",
-      "icon": "Icon (optional)",
+      "icon": "Icono (opcional)",
       "add": "Añadir",
       "name_error": "Debe indicar el nombre",
       "url_error": "Debe indicar la URL"
@@ -111,7 +111,7 @@
             "author_link": "Enlace del autor",
             "custom": "Cita personalizada",
             "custom_author": "Autor personalizado",
-            "add": "Add quote",
+            "add": "Añadir cita",
             "buttons": {
               "title": "Botones",
               "copy": "Botón de copiar",
@@ -133,7 +133,7 @@
             "ddg_image_proxy": "Utilizar el proxy de imágenes de DuckDuckGo",
             "transition": "Transición fade-in",
             "photo_information": "Ver información de la foto",
-            "show_map": "Show location map on photo information if available",
+            "show_map": "Mostrar el mapa de la ubicación en la información de la foto si está disponible",
             "category": "Categoría",
             "buttons": {
               "title": "Botones",
@@ -160,8 +160,8 @@
               "api": "API",
               "custom_image": "Imagen personalizada",
               "custom_colour": "Color/degradado personalizado",
-              "random_colour": "Random colour",
-              "random_gradient": "Random gradient"
+              "random_colour": "Color aleatorio",
+              "random_gradient": "Degradado aleatorio"
             },
             "source": {
               "title": "Fuente",
@@ -170,8 +170,8 @@
               "custom_colour": "Color del fondo personalizado",
               "upload": "Subir",
               "add_colour": "Añadir color",
-              "add_background": "Add background",
-              "add_url": "Add URL",
+              "add_background": "Añadir fondo",
+              "add_url": "Añadir URL",
               "disabled": "Desactivado",
               "loop_video": "Vídeo en bucle",
               "mute_video": "Silenciar video",
@@ -229,12 +229,12 @@
             "title": "Enlaces rápidos",
             "open_new": "Abrir en una nueva pestaña",
             "tooltip": "Descripción emergente",
-            "text_only": "Show text only"
+            "text_only": "Mostrar solo texto"
           },
           "message": {
-            "title": "Message",
-            "add": "Add message",
-            "text": "Text"
+            "title": "Mensaje",
+            "add": "Añadir mensaje",
+            "text": "Texto"
           },
           "appearance": {
             "title": "Apariencia",
@@ -248,9 +248,9 @@
               "title": "Barra de búsqueda",
               "notes": "Notas",
               "refresh": "Botón de recargar",
-              "hover": "Only display on hover",
+              "hover": "Solo mostrar al pasar el cursor",
               "refresh_options": {
-                "none": "None",
+                "none": "Ninguno",
                 "page": "Página"
               }
             },
@@ -279,7 +279,7 @@
             "accessibility": {
               "title": "Accesibilidad",
               "animations": "Animaciones",
-              "text_shadow": "Widget text shadow",
+              "text_shadow": "Sombra de texto del widget",
               "widget_zoom": "Zoom del widget",
               "toast_duration": "Duración de la notificación",
               "milliseconds": "milisegundos"
@@ -323,27 +323,27 @@
             "usage": "Estadísticas de uso"
           },
           "keybinds": {
-            "title": "Keybinds",
-            "recording": "Recording...",
-            "click_to_record": "Click to record",
+            "title": "Asignación de teclas",
+            "recording": "Grabando...",
+            "click_to_record": "Click para grabar",
             "background": {
-              "favourite": "Favourite background",
-              "maximise": "Maximise background",
-              "download": "Download background",
-              "show_info": "Show background information"
+              "favourite": "Fondo favorito",
+              "maximise": "Maximizar fondo",
+              "download": "Descargar fondo",
+              "show_info": "Mostrar información del fondo"
             },
             "quote": {
-              "favourite": "Favourite quote",
-              "copy": "Copy quote",
-              "tweet": "Tweet quote"
+              "favourite": "Marcar la cita como favorita",
+              "copy": "Copiar cita",
+              "tweet": "Tuitear la cita"
             },
             "notes": {
-              "pin": "Pin notes",
-              "copy": "Copy notes"
+              "pin": "Fijar notas",
+              "copy": "Copiar notas"
             },
-            "search": "Focus search",
-            "quicklinks": "Toggle add quick link",
-            "modal": "Toggle modal"
+            "search": "Enfocar búsqueda",
+            "quicklinks": "Alternar añadir enlace rápido",
+            "modal": "Alternal modal"
           },
           "experimental": {
             "title": "Experimental",
@@ -356,7 +356,7 @@
           },
           "changelog": {
             "title": "Registro de cambios",
-            "by": "By {author}"
+            "by": "Por {author}"
           },
           "about": {
             "title": "Acerca de",
@@ -382,7 +382,7 @@
             },
             "contributors": "Contribuyentes",
             "supporters": "Partidarios",
-            "no_supporters": "There are currently no Mue supporters",
+            "no_supporters": "Actualmente no hay partidarios de Mue",
             "photographers": "Fotógrafos"
           }
         },
@@ -406,7 +406,7 @@
           "buttons": {
             "addtomue": "Añadir a Mue",
             "remove": "Desinstalar",
-            "update_addon": "Update Add-on"
+            "update_addon": "Actualizar complemento"
           },
           "quote_warning": {
             "title": "Advertencia",
@@ -420,22 +420,22 @@
       },
       "addons": {
         "added": "Añadidos",
-        "check_updates": "Check for updates",
-        "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "check_updates": "Comprobar actualizaciones",
+        "no_updates": "No hay actualizaciones disponibles",
+        "updates_available": "Actualizaciones disponibles {amount}",
         "empty": {
           "title": "Vacío",
           "description": "Dirígete a la tienda para agregar algunos."
         },
         "sideload": {
           "title": "Cargar localmente",
-          "failed": "Failed to sideload addon",
+          "failed": "Fallo en la carga lateral del complemento",
           "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"
+            "no_name": "No se ha indicado el nombre",
+            "no_author": "No se ha indicado el autor",
+            "no_type": "No se ha indicado el tipo",
+            "invalid_photos": "Objeto de fotos inválido",
+            "invalid_quotes": "Objeto de citas inválido"
           }
         },
         "sort": {
@@ -492,7 +492,7 @@
       }
     },
     "welcome": {
-      "tip": "Truco",
+      "tip": "Consejo",
       "sections": {
         "intro": {
           "title": "Bienvenido a Mue Tab",
@@ -533,13 +533,13 @@
       },
       "buttons": {
         "next": "Siguiente",
-        "preview": "Preview",
+        "preview": "Vista previa",
         "previous": "Anterior",
         "close": "Cerrar"
       },
       "preview": {
-        "description": "You are currently in preview mode. Settings will be reset on closing this tab.",
-        "continue": "Continue setup"
+        "description": "Actualmente se encuentra en el modo de vista previa. La configuración se restablecerá al cerrar esta pestaña.",
+        "continue": "Continuar con la configuración"
       }
     }
   },
@@ -549,7 +549,7 @@
     "reset": "Restablecido correctamente",
     "installed": "Instalado correctamente",
     "uninstalled": "Desinstalado correctamente",
-    "updated": "Successfully updated",
+    "updated": "Actualizado correctamente",
     "error": "Algo salió mal",
     "imported": "Importado correctamente"
   }

src/translations/fr.json

@@ -422,7 +422,7 @@
         "added": "Ajoutées",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "C'est vide par ici",
           "description": "Dirigez vous vers le marché pour ajouter des options"

src/translations/nl.json

@@ -422,7 +422,7 @@
         "added": "Toegevoegd",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "Het is hier erg leeg",
           "description": "Ga naar de marktplaats om een paar extensies toe te voegen"

src/translations/no.json

@@ -422,7 +422,7 @@
         "added": "Lagt til",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "Det er tomt her.",
           "description": "Gå til markedsplassen å legg til noe"

src/translations/ru.json

@@ -422,7 +422,7 @@
         "added": "Добавлен",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "Здесь пусто",
           "description": "Зайдите в магазин, чтобы найти что-то интересное"

src/translations/zh_CN.json

@@ -422,7 +422,7 @@
         "added": "已添加",
         "check_updates": "Check for updates",
         "no_updates": "No updates available",
-        "updates_available": "Updates avaialble {amount}",
+        "updates_available": "Updates available {amount}",
         "empty": {
           "title": "这里空空如也",
           "description": "请访问插件市场来添加插件。"