fix: settings fix, keybinds fix (WIP), modal ui fix

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

@@ -1,4 +1,5 @@
 import variables from 'modules/variables';
+import { Close } from '@mui/icons-material';
 
 export default function SideloadFailedModal({ modalClose, reason }) {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -10,7 +11,9 @@ export default function SideloadFailedModal({ modalClose, reason }) {
       <br/><br/>
       <span>{reason}</span>
       <div className='resetfooter'>
-        <button className='import' onClick={modalClose}>{getMessage('modals.welcome.buttons.close')}</button>
+        <button className='round import' style={{ marginLeft: '-30px' }} onClick={modalClose}>
+          <Close/>
+        </button>
       </div>
     </>
   );

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

@@ -120,8 +120,4 @@ p.author {
   min-width: 250px;
   max-width: 250px;
   overflow-x: hidden;
-
-  button {
-    margin-left: -50px;
-  }
 }

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

@@ -61,6 +61,13 @@
 
   &:disabled {
     cursor: not-allowed;
+    background: none;
+    border: 1px solid var(--tab-active);
+
+    &:hover {
+      background: none;
+      border: 1px solid var(--tab-active);
+    }
   }
 }
 

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

@@ -10,7 +10,8 @@ export default class KeybindSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
-      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
+      cancelled: false
     };
   }
 
@@ -23,14 +24,15 @@ export default class KeybindSettings extends PureComponent {
     const currentKeybinds = this.state.keybinds;
     currentKeybinds[type] = this.getMessage('modals.main.settings.sections.keybinds.recording');
     this.setState({
-      keybinds: currentKeybinds
+      keybinds: currentKeybinds,
+      cancelled: false
     });
     this.forceUpdate();
 
     let keys = '';
     let previouskey = '';
     this.keydown = document.addEventListener('keydown', (event) => {
-      if (event.key === previouskey) {
+      if (event.key === previouskey && this.state.cancelled === true) {
         return;
       }
 
@@ -44,6 +46,10 @@ export default class KeybindSettings extends PureComponent {
     });
 
     this.keyup = document.addEventListener('keyup', () => {
+      if (this.state.cancelled === true) {
+        return;
+      }
+
       document.removeEventListener('keydown', this.keydown);
       const keybinds = this.state.keybinds;
       keybinds[type] = keys.split('+').slice(0, 4).join('+');
@@ -66,7 +72,8 @@ export default class KeybindSettings extends PureComponent {
     delete currentKeybinds[type];
 
     this.setState({
-      keybinds: currentKeybinds
+      keybinds: currentKeybinds,
+      cancelled: true
     });
     this.forceUpdate();
   }
@@ -77,7 +84,8 @@ export default class KeybindSettings extends PureComponent {
     localStorage.setItem('keybinds', JSON.stringify(keybinds));
 
     this.setState({
-      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+      keybinds: JSON.parse(localStorage.getItem('keybinds')) || {},
+      cancelled: true
     });
 
     this.showReminder();

src/modules/default_settings.json

@@ -209,7 +209,7 @@
   },
   {
     "name": "backgroundFilter",
-    "value": "grayscale"
+    "value": "none"
   },
   {
     "name": "apiQuality",

src/modules/helpers/settings/index.js

@@ -115,13 +115,15 @@ export function loadSettings(hotreload) {
     return;
   }
 
-  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 (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);
+      }
     }
   }
 

src/modules/helpers/settings/modals.js

@@ -42,10 +42,30 @@ export function importSettings(e) {
 
 export function values(type) {
   const marks = {
-    zoom: [{ value: 10, label: '0.1x' }, { value: 100, label: '1x' }, { value: 200, label: '2x' }, { value: 400, label: '4x' }],
-    toast: [{ value: 500, label: '0.5s' }, { value: 1000, label: '1s' }, { value: 1500, label: '1.5s' }, { value: 2000, label: '2s' }, { value: 2500, label: '2.5s' }, { value: 3000, label: '3s' }, { value: 4000, label: '4s' }, { value: 5000, label: '5s'}],
-    background: [{ value: 0, label: '0%'}, { value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }, { value: 100, label: '100%' }]
-  }
+    zoom: [
+      { value: 10, label: '0.1x' }, 
+      { value: 100, label: '1x' }, 
+      { value: 200, label: '2x' }, 
+      { value: 400, label: '4x' }
+    ],
+    toast: [
+      { value: 500, label: '0.5s' }, 
+      { value: 1000, label: '1s' }, 
+      { value: 1500, label: '1.5s' }, 
+      { value: 2000, label: '2s' }, 
+      { value: 2500, label: '2.5s' }, 
+      { value: 3000, label: '3s' }, 
+      { value: 4000, label: '4s' }, 
+      { value: 5000, label: '5s'}
+    ],
+    background: [
+      { value: 0, label: '0%'}, 
+      { value: 25, label: '25%' }, 
+      { value: 50, label: '50%' }, 
+      { value: 75, label: '75%' }, 
+      { value: 100, label: '100%' }
+    ]
+  };
 
   return marks[type];
 }