fix: some modal styles

src/components/modals/Modals.jsx

@@ -48,7 +48,7 @@ export default class Modals extends React.PureComponent {
           <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
             <Update modalClose={() => this.setState({ updateModal: false })}/>
           </Modal>
-          <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
+          <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
             <Welcome modalClose={() => this.closeWelcome()}/>
           </Modal>
           <Modal onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>

src/components/modals/main/scss/index.scss

@@ -329,9 +329,14 @@ li {
 .resetmodal {
   min-height: 300px !important;
   max-width: 300px !important;
+  margin: auto;
 }
 
 .resetfooter {
   position: absolute;
   bottom: 20px;
+}
+
+.resetoverlay {
+  background-color: rgba(0, 0, 0, 0.5);
 }

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

@@ -4,7 +4,7 @@ import SettingsFunctions from '../../../../modules/helpers/settings';
 
 export default function ResetModal(props) {
   return (
-    <div className='resetmodal'>
+    <>
       <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>
@@ -12,6 +12,6 @@ export default function ResetModal(props) {
         <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
         <button className='import' onClick={props.modalClose}>Cancel</button>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -52,7 +52,7 @@ export default class AdvancedSettings extends React.PureComponent {
         <p>{advanced.experimental_warning}</p>
         <Checkbox name='experimental' text={this.language.enabled} />
 
-        <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay'} ariaHideApp={false}>
+        <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />
         </Modal>
       </>

src/components/modals/welcome/welcome.scss

@@ -1,5 +1,9 @@
 @import '../main/scss/index.scss';
 
+.welcomemodal {
+  margin-top: 40px;
+}
+
 .welcomeModalText {
   line-height: 2px;