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