feat: experimental settings, reduce image size on about page and use local mue icon

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

@@ -62,7 +62,7 @@ export default class About extends React.PureComponent {
     return (
       <>
         <h2>{this.language.title}</h2>
-        <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
+        <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='./././icons/logo_horizontal.png' alt='Mue logo'></img>
         <p>{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
         <p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
         <h3>{this.language.resources_used.title}</h3>
@@ -73,20 +73,20 @@ export default class About extends React.PureComponent {
         {this.state.loading}
         {this.state.contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
-            <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
+            <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}></img></a>
           </Tooltip>
         )}
         { // for those who contributed without opening a pull request
         this.state.other_contributors.map((item) =>
           <Tooltip title={item.login} placement='top' key={item.login}>
-            <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
+            <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}></img></a>
           </Tooltip>
         )}
         <h3>{this.language.supporters}</h3>
         {this.state.loading}
         {this.state.sponsors.map((item) =>
           <Tooltip title={item.handle} placement='top' key={item.handle}>
-            <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=256'} alt={item.handle}></img></a>
+            <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
           </Tooltip>
         )}
       </>

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

@@ -58,7 +58,6 @@ export default function AppearanceSettings() {
       </Dropdown>
 
       <h3>{appearance.accessibility.title}</h3>
-      <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
       {(engineName === 'Blink') ? 
         <Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' min='50' max='200' display='%'/> 
       : null}

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

@@ -1,9 +1,28 @@
 import React from 'react';
 
+import Checkbox from '../Checkbox';
+//import Text from '../Text';
+
 export default function ExperimentalSettings() {
+  const { experimental } = window.language.modals.main.settings.sections;
+
   return (
     <>
-      <p>Coming soon...</p>
+      <h2>{experimental.title}</h2>
+      <p>{experimental.warning}</p>
+      <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations}/>
+      <h3>{experimental.developer}</h3>
+      <Checkbox name='debug' text='Debug hotkey (Ctrl + #)'/>
+      {/* <Checkbox name='beta' text='Beta Mode Override'/>
+      <Text name='api_override' title='Version Override (format example: 5.0)'/>
+      <Text name='api_override' title='API URL Override'/>
+      <Text name='marketplace_override' title='Marketplace URL Override'/>
+      <Text name='unsplash_override' title='Unsplash URL Override'/>
+      <Text name='sponsors_override' title='Sponsors URL Override'/>
+      <Text name='github_override' title='GitHub URL Override'/> 
+      <br/><br/>
+      */}
+      <button className='reset' style={{'marginLeft': '0px'}} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
     </>
   );
 }

src/modules/constants.js

@@ -5,5 +5,5 @@ export const WEBSITE_URL = 'https://muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com'
 export const OFFLINE_IMAGES = 20;
-export const BETA_VERSION = false;
+export const BETA_VERSION = true;
 export const VERSION = '5.0'; 

src/modules/helpers/experimental.js

@@ -0,0 +1,18 @@
+// todo: add more
+export default function ExperimentalInit() {
+  if (localStorage.getItem('debug') === 'true') {
+    document.onkeydown = (e) => {
+      e = e || window.event;
+      if (!e.ctrlKey) {
+        return;
+      }
+      let code = e.which || e.keyCode;
+
+      switch (code) {
+        case 222:
+          debugger;
+          break;
+      }
+    };
+  }
+}

src/modules/helpers/settings.js

@@ -1,3 +1,5 @@
+import ExperimentalInit from './experimental';
+
 const defaultSettings = require('../default_settings.json');
 const languages = require('../languages.json');
 
@@ -111,6 +113,10 @@ export default class SettingsFunctions {
       `);
     }
 
+    if (localStorage.getItem('experimental') === 'true') {
+      ExperimentalInit();
+    }
+
     const widgetzoom = localStorage.getItem('widgetzoom');
     // don't bother if it's default zoom
     if (widgetzoom !== '100') {

src/translations/en_GB.json

@@ -153,7 +153,9 @@
             "experimental_warning": "Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issue continues to occur before contacting support." 
           },
           "experimental": {
-            "title": "Experimental"
+            "title": "Experimental",
+            "warning": "These settings have not been fully tested/implemented and may not work correctly!",
+            "developer": "Developer"
           },
           "language": {
             "title": "Language",