perf: css cleanup

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

@@ -18,8 +18,6 @@
   padding: 25px;
   transition-timing-function: ease-in;
   border-radius: map-get($modal, 'border-radius');
-  -moz-user-select: none;
-  -webkit-user-select: none;
   user-select: none;
   scrollbar-width: thin;
   scrollbar-color: #34495e #bdc3c7;
@@ -161,6 +159,7 @@ li {
     width: 90% !important;
   }
 }
+
 @media only screen and (min-width: 1310px) {
   #modal {
     width: 60%;
@@ -177,9 +176,7 @@ li {
       display: none;
     }
   }
-}
 
-@media only screen and (max-width: 1200px) {
   ul.sidebar {
     h1 {
       display: none;
@@ -222,14 +219,7 @@ li {
   }
 }
 
-@media only screen and (max-width: 1400px) {
-  .tab-content {
-    left: 350px;
-    top: 75px;
-  }
-}
-
-@media only screen and (min-width: 1400px) {
+@media only screen and (max-width: 1400px), (min-width: 1400px) {
   .tab-content {
     left: 350px;
     top: 75px;
@@ -290,12 +280,6 @@ li {
   }
 }
 
-@media only screen and (max-width: 1200px) {
-  .tabContent {
-    left: 20px;
-  }
-}
-
 @media only screen and (min-width: 1200px) {
   ul.sidebar {
     width: 310px;
@@ -364,19 +348,11 @@ li {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.welcomeLink {
-  color: var(--modal-text) !important;
-}
-
 .aboutIcon {
   color: var(--modal-text) !important;
   padding-right: 10px;
 }
 
-.MuiIconButton-root {
-  color: var(--modal-text) !important;
-}
-
 .MuiFormControl-root {
   margin-top: 10px !important;
 }

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

@@ -1,22 +1,4 @@
-%settingsButton {
-  transition: ease 0.33s;
-  color: map-get($theme-colours, 'main');
-  cursor: pointer;
-  padding: 10px 30px;
-  font-size: 20px;
-  border-radius: 24px;
-  box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
-
-  &:hover,
-  &:active {
-    outline: none;
-    background: none;
-  }
-}
-
-.dark %settingsButton {
-  box-shadow: none;
-}
+@import '../../../../../scss/modules/buttons';
 
 .refresh {
   @extend %settingsButton;
@@ -163,10 +145,6 @@ input[type=number]::-webkit-outer-spin-button {
   color: var(--modal-text) !important;
 }
 
-legend {
-  color: var(--modal-text) !important;
-}
-
 .sortableitem {
   background: var(--sidebar) !important;
   padding: 10px 80px;

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

@@ -1,7 +1,3 @@
-.hidden {
-  display: none;
-}
-
 input {
   &[type=text] {
     width: 200px;
@@ -11,6 +7,46 @@ input {
     padding: 10px 10px;
     border-radius: 5px;
   }
+
+  &[type=color] {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+    vertical-align: middle;
+    background: none;
+  
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+  
+    &::-webkit-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  &[type=color]::-moz-color-swatch {
+    border-radius: 100%;
+    height: 30px;
+    width: 30px;
+    border: none;
+    outline: none;
+    -moz-appearance: none;
+    vertical-align: middle;
+    background: none;
+  
+    &::-moz-color-swatch-wrapper {
+      padding: 0;
+    }
+  
+    &::-moz-color-swatch {
+      border: none;
+      border-radius: 100%;
+    }
+  }
 }
 
 h4 {
@@ -55,46 +91,6 @@ ul {
   }
 }
 
-input[type=color] {
-  border-radius: 100%;
-  height: 30px;
-  width: 30px;
-  border: none;
-  outline: none;
-  -webkit-appearance: none;
-  vertical-align: middle;
-  background: none;
-
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-
-  &::-webkit-color-swatch {
-    border: none;
-    border-radius: 100%;
-  }
-}
-
-input[type=color]::-moz-color-swatch {
-  border-radius: 100%;
-  height: 30px;
-  width: 30px;
-  border: none;
-  outline: none;
-  -moz-appearance: none;
-  vertical-align: middle;
-  background: none;
-
-  &::-moz-color-swatch-wrapper {
-    padding: 0;
-  }
-
-  &::-moz-color-swatch {
-    border: none;
-    border-radius: 100%;
-  }
-}
-
 .newFeature {
   color: #ff4757;
   font-size: 12px;
@@ -114,14 +110,15 @@ input[type=color]::-moz-color-swatch {
 .MuIconButton-colorPrimary.Mui-checked,
 .MuiSwitch-thumb,
 .MuiRadio-colorSecondary.Mui-checked,
-.PrivateSwitchBase-input-4 {
+.PrivateSwitchBase-input-4,
+.MuiRadio-root,
+.aboutLink,
+.MuiIconButton-root,
+.welcomeLink,
+legend {
   color: var(--modal-text) !important;
 }
 
-.MuiRadio-root {
-  color: var(--modal-text);
-}
-
 .MuiFormControlLabel-labelPlacementStart {
   margin-left: 0px !important;
 }
@@ -171,7 +168,3 @@ input[type=color]::-moz-color-swatch {
     margin-left: 20px;
   }
 }
-
-.aboutLink {
-  color: var(--modal-text) !important;
-}

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

@@ -24,6 +24,6 @@ export default class FileUpload extends React.PureComponent {
   }
 
   render() {
-    return <input id={this.props.id} type='file' className='hidden' accept={this.props.accept} />;
+    return <input id={this.props.id} type='file' style={{ display: 'none' }} accept={this.props.accept} />;
   }
 }