Fix and CSS cleanup

src/components/modals/tabs/Settings.jsx

@@ -15,20 +15,17 @@ export default class Settings extends React.PureComponent {
     toast(this.props.toastLanguage.reset);
   }
 
-  updateCurrent() {
+  componentDidMount() {
+    // Settings
     document.getElementById('greetingName').value = localStorage.getItem('greetingName');
     document.getElementById('language').value = localStorage.getItem('language');
 
-    if (document.getElementById('modal').classList.contains('dark')) {
+    if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns
       const choices = document.getElementsByClassName('choices');
       for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542';
     }
-  }
 
-  componentDidMount() {
-    this.updateCurrent();
-
-    document.getElementById('file-input').onchange = (e) => {
+    document.getElementById('file-input').onchange = (e) => { // import settings
       const file = e.target.files[0];
       if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`);
 
@@ -89,7 +86,7 @@ export default class Settings extends React.PureComponent {
           <LanguageSettings language={this.props.language} />
 
           <button className='apply' onClick={() => SettingsFunctions.saveStuff(this.props.language.background.disabled)}>{this.props.language.apply}</button>
-          <button className='reset' onClick={() => this.props.setDefaultSettings()}>{this.props.language.reset}</button>
+          <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings()}>{this.props.language.reset}</button>
           <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
           <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
           <input id='file-input' type='file' name='name' className='hidden' accept='application/json' />

src/scss/_variables.scss

@@ -16,8 +16,8 @@ $modal: (
 );
 
 $marketplace: (
-    'item-background': rgba(242, 243, 244, 1),
-    'product-information-backgroud': rgba(242, 243, 244, 1),
+  'item-background': rgba(242, 243, 244, 1),
+  'product-information-backgroud': rgba(242, 243, 244, 1),
 );
 
 $button-colours: (

src/scss/modules/_buttons.scss

@@ -10,6 +10,7 @@
   font-size: 20px;
   border-radius: 24px;
   background: none;
+
   &:hover {
     outline: none;
   }
@@ -32,7 +33,6 @@
   }
 }
 
-
 .reset {
   @extend %settingsButton;
   background-color: map-get($button-colours, "reset");
@@ -171,11 +171,7 @@
   @extend .storebutton;
 }
 
-.sideload {
-  margin-top: 12px;
-}
-
-.seemore {
+.sideload, .seemore {
   margin-top: 12px;
 }
 

src/scss/modules/_marketplace.scss

@@ -151,7 +151,6 @@ p.author {
   font-size: 35px !important;
 }
 
-
 p.description {
   margin-top: 0px;
 }
@@ -213,14 +212,10 @@ p.description {
 }
 
 #marketplace {
-  -webkit-animation: content 0.5s;
-  -moz-animation: content 0.5s;
-  -ms-animation: content 0.5s;
-  -o-animation: content 0.5s;
-  animation: content 0.5s;
+  @include animation('content 0.5s');
 }
 
-@keyframes content {
+@include keyframes(content) {
   from {
     opacity: 0;
     transform: translateY(5%);
@@ -278,9 +273,9 @@ p.description {
 
 #seemore {
   display: none;
-}
 
-#seemore svg {
-  font-size: 35px !important;
-  margin-bottom: -30px;
+  svg {
+    font-size: 35px !important;
+    margin-bottom: -30px;
+  }
 }

src/scss/modules/_modal.scss

@@ -130,11 +130,10 @@
 }
 
 .zoom-out {
-  -webkit-animation: zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-  animation: zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  @include animation('zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both');
 }
 
-@-webkit-keyframes zoom-out {
+@include keyframes(zoom-out) {
   0% {
     transform: scale(1, 1);
   }
@@ -148,20 +147,6 @@
   }
 }
 
-@keyframes zoom-out {
-  0% {
-    -webkit-transform: scale(1, 1);
-  }
-
-  50% {
-    -webkit-transform: scale(1.05, 1.05);
-  }
-
-  100% {
-    -webkit-transform: scale(0);
-  }
-}
-
 .updateContent {
   width: 400px;
   padding: 5px;