fix: welcome start, marketplace item page is now responsive, update text etc

src/components/modals/main/marketplace/Item.jsx

@@ -61,7 +61,9 @@ export default class Item extends React.PureComponent {
           <br/>
           {warningHTML} 
         </div>
-        <br/><br/>
+        <div className='sidebr'>
+          <br/><br/>
+        </div>
         <div className='informationContainer'>
           <h1 className='overview'>{language.overview}</h1>
           <p className='description' dangerouslySetInnerHTML={{ __html: this.props.data.description }}></p>

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

@@ -89,6 +89,16 @@
   }
 }
 
+@media only screen and (max-width: 1680px) {
+  .side {
+    float: none !important;
+  }
+
+  .sidebr {
+    display: none;
+  }
+}
+
 p.author {
   margin-top: -5px;
 }

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

@@ -28,9 +28,9 @@ export default class About extends React.PureComponent {
     let contributors, sponsors, photographers, versionData;
 
     try {
-      versionData = await (await fetch(window.constants.GITHUB_URL + '/repos/mue/mue/releases', { signal: this.controller.signal })).json();
+      versionData = await (await fetch(window.constants.GITHUB_URL + '/repos/' + window.constants.REPO_NAME + '/releases', { signal: this.controller.signal })).json();
 
-      contributors = await (await fetch(window.constants.GITHUB_URL + '/repos/mue/mue/contributors', { signal: this.controller.signal })).json();
+      contributors = await (await fetch(window.constants.GITHUB_URL + '/repos/' + window.constants.REPO_NAME + '/contributors', { signal: this.controller.signal })).json();
       sponsors = (await (await fetch(window.constants.SPONSORS_URL + '/list', { signal: this.controller.signal })).json()).sponsors;
 
       photographers = await (await fetch(window.constants.API_URL + '/images/photographers', { signal: this.controller.signal })).json();
@@ -57,6 +57,7 @@ export default class About extends React.PureComponent {
     }
 
     this.setState({
+      // exclude bots
       contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
       sponsors: sponsors,
       update: updateMsg,
@@ -87,22 +88,23 @@ export default class About extends React.PureComponent {
     return (
       <>
         <h2>{this.language.title}</h2>
-        <img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Mue logo'></img>
-        <p>{this.language.copyright} 2018-{new Date().getFullYear()} <a href='https://github.com/mue/mue/graphs/contributors' className='aboutLink' target='_blank' rel='noopener noreferrer'>The Mue Authors</a> (BSD-3 License)</p>
+        <img draggable='false' className='aboutLogo' src='./././icons/logo_horizontal.png' alt='Logo'></img>
+        <p>{this.language.copyright} {window.constants.COPYRIGHT_YEAR}-{new Date().getFullYear()} <a href={'https://github.com/repos/' + window.constants.REPO_NAME + '/graphs/contributors'} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.constants.COPYRIGHT_NAME}</a> ({window.constants.COPYRIGHT_LICENSE})</p>
         <p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
+        <a href={window.constants.PRIVACY_URL} className='aboutLink' target='_blank' rel='noopener noreferrer'>{window.language.modals.welcome.sections.privacy.links.privacy_policy}</a>
 
         <h3>{this.language.contact_us}</h3>
-        <a href='mailto:hello@muetab.com' className='aboutIcon' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
-        <a href='https://twitter.com/getmue' className='aboutIcon' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
-        <a href='https://instagram.com/mue.tab' className='aboutIcon' target='_blank' rel='noopener noreferrer'><InstagramIcon/></a>
-        <a href='https://facebook.com/muetab' className='aboutIcon' target='_blank' rel='noopener noreferrer'><FacebookIcon/></a>
-        <a href='https://discord.gg/zv8C9F8' className='aboutIcon' target='_blank' rel='noopener noreferrer'><ChatIcon/></a>
+        <a href={'mailto:' + window.constants.EMAIL} className='aboutIcon' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
+        <a href={'https://twitter.com/' + window.constants.TWITTER_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
+        <a href={'https://instagram.com/' + window.constants.INSTAGRAM_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><InstagramIcon/></a>
+        <a href={'https://facebook.com/' + window.constants.FACEBOOK_HANDLE} className='aboutIcon' target='_blank' rel='noopener noreferrer'><FacebookIcon/></a>
+        <a href={'https://discord.gg/' + window.constants.DISCORD_SERVER} className='aboutIcon' target='_blank' rel='noopener noreferrer'><ChatIcon/></a>
 
         <h3>{this.language.support_mue}</h3>
         <p>
-          <a href='https://github.com/sponsors/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
-          &nbsp; • &nbsp;<a href='https://ko-fi.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
-          &nbsp; • &nbsp;<a href='https://patreon.com/davidjcralph' className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
+          <a href={'https://github.com/sponsors/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>GitHub Sponsors</a> 
+          &nbsp; • &nbsp;<a href={'https://ko-fi.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Ko-Fi</a> 
+          &nbsp; • &nbsp;<a href={'https://patreon.com/' + window.constants.DONATE_USERNAME} className='aboutLink' target='_blank' rel='noopener noreferrer'>Patreon</a>
         </p>
 
         <h3>{this.language.resources_used.title}</h3>
@@ -131,7 +133,7 @@ export default class About extends React.PureComponent {
         <p>{this.state.loading}</p>
         {this.state.sponsors.map((item) => (
           <Tooltip title={item.handle} key={item.handle}>
-            <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
+            <a href={'https://github.com/' + item.handle} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
           </Tooltip>
         ))}
 

src/components/modals/welcome/WelcomeSections.jsx

@@ -97,6 +97,7 @@ export default class WelcomeSections extends React.PureComponent {
   	if (this.props.currentTab !== 0) {
       if (this.timeout) {
         clearTimeout(this.timeout);
+        this.timeout = null;
       }
     } else {
       if (!this.timeout) {
@@ -115,7 +116,7 @@ export default class WelcomeSections extends React.PureComponent {
         <p>{language.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={this.welcomeImages[this.state.welcomeImage]} alt='Example Mue setup' draggable={false}/>
         </div>
       </>
     );
@@ -178,7 +179,7 @@ export default class WelcomeSections extends React.PureComponent {
         <Checkbox name='offlineMode' text={advanced.offline_mode} element='.other' />
         <p>{language.sections.privacy.offline_mode_description}</p>
         <h3 className='quicktip'>{language.sections.privacy.links.title}</h3>
-        <a className='privacy' href='https://muetab.com/privacy' target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
+        <a className='privacy' href={window.constants.PRIVACY_URL} target='_blank' rel='noopener noreferrer'>{language.sections.privacy.links.privacy_policy}</a>
       </>
     );
 
@@ -191,7 +192,7 @@ export default class WelcomeSections extends React.PureComponent {
         <div className='themesToggleArea'>
           <div className='toggle' onClick={() => this.props.switchTab(1)}>{languageSettings.title}: {languages.find((i) => i.value === localStorage.getItem('language')).name}</div>
           <div className='toggle' onClick={() => this.props.switchTab(3)}>{appearance.theme.title}: {this.getSetting('theme')}</div>
-          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>Imported {this.state.importedSettings.length} settings</div> : null}
+          {(this.state.importedSettings.length !== 0) ? <div className='toggle' onClick={() => this.props.switchTab(2)}>{language.sections.final.imported} {this.state.importedSettings.length} {language.sections.final.settings}</div> : null}
         </div>
       </>
     );

src/modules/constants.js

@@ -10,9 +10,22 @@ export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
 
 // 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-5-1';
 export const FEEDBACK_FORM = 'https://api.formcake.com/api/form/349b56cb-7e2b-4004-b32b-e8964d217dd1/submission';
 
+// Mue Info
+export const REPO_NAME = 'mue/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 = 'https://discord.gg/zv8C9F8';
+export const COPYRIGHT_NAME = 'The Mue Authors';
+export const COPYRIGHT_YEAR = '2018';
+export const COPYRIGHT_LICENSE = 'BSD-3 License';
+export const DONATE_USERNAME = 'davidjcralph';
+
 // umami
 export const UMAMI_DOMAIN = 'https://umami.muetab.com';
 export const UMAMI_ID = '1b97e723-199c-48d8-8992-17c4e22d4f3c';

src/translations/de_DE.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/en_GB.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/en_US.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/es.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/fr.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/nl.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/no.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/ru.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {

src/translations/zh_CN.json

@@ -384,7 +384,7 @@
         },
         "language": {
           "title": "Choose your language",
-          "description": "to be added"
+          "description": "Mue can be displayed the languages listed below. You can also add new translations on our GitHub!"
         },
         "theme": {
           "title": "Select a theme",
@@ -409,7 +409,9 @@
           "title": "Final step",
           "description": "Your Mue Tab experience is about to begin.",
           "changes": "Changes",
-          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab."
+          "changes_description": "To change settings later click on the settings icon in the top right corner of your tab.",
+          "imported": "Imported",
+          "settings": "settings"
         }
       },
       "buttons": {