fix: improve dropdown styles, add reset modal language support

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

@@ -3,7 +3,7 @@
 }
 
 input {
-  &[type=text]  {
+  &[type=text] {
     width: 200px;
     color: var(--modal-text);
     background: var(--sidebar);

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

@@ -4,7 +4,8 @@ export default class Dropdown extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      value: localStorage.getItem(this.props.name) || ''
+      value: localStorage.getItem(this.props.name) || '',
+      title: ''
     };
   }
 
@@ -16,7 +17,8 @@ export default class Dropdown extends React.PureComponent {
     const { value } = e.target;
 
     this.setState({
-      value: value
+      value: value,
+      title: e.target[e.target.selectedIndex].text
     });
   
     localStorage.setItem(this.props.name, value);
@@ -26,11 +28,19 @@ export default class Dropdown extends React.PureComponent {
     }
   }
 
+  // todo: find a better way to do this
+  componentDidMount() {
+    const element = document.getElementById(this.props.name);
+    this.setState({
+      title: element[element.selectedIndex].text
+    });
+  }
+
   render() {
     return (
       <>
         {this.getLabel()}
-        <select value={this.state.value} onChange={this.onChange}>
+        <select id={this.props.name} value={this.state.value} onChange={this.onChange} style={{width: `${(8*this.state.title.length) + 50}px`}}>
           {this.props.children}
         </select>
       </>

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

@@ -3,14 +3,16 @@ import React from 'react';
 import SettingsFunctions from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
+  const language = window.language.modals.main.settings.sections.advanced.reset_modal;
+
   return (
     <>
-      <h3 style={{'textAlign': 'center'}}>WARNING</h3>
-      <h4>Do you want to reset Mue?</h4>
-      <p>This will delete all data. If you want to keep your data and preferences, please export first.</p>
+      <h3 style={{'textAlign': 'center'}}>{language.title}</h3>
+      <h4>{language.question}</h4>
+      <p>{language.information}</p>
       <div className='resetfooter'>
-        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
-        <button className='import' onClick={props.modalClose}>Cancel</button>
+        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{window.language.modals.main.settings.buttons.reset}</button>
+        <button className='import' onClick={props.modalClose}>{language.cancel}</button>
       </div>
     </>
   );

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

@@ -76,13 +76,13 @@ 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=128'} 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}/></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=128'} 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}/></a>
           </Tooltip>
         ))}
         <h3>{this.language.supporters}</h3>

src/components/modals/main/tabs/Addons.jsx

@@ -8,7 +8,7 @@ export default function Addons() {
   return (
     <AddonsTabs>
       <div label='Added'><Added/></div>
-      <div label=''></div>
+      <div label='Sideload'></div>
     </AddonsTabs>
   );
 }