style: more codacy fixes

src/components/modals/feedback/feedback.scss

@@ -32,7 +32,7 @@
     padding: 15px 20px;
     font-size: 1.5em;
     background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
-    color: #ffffff;
+    color: #fff;
     text-transform: uppercase;
     cursor: pointer;
   }

src/components/modals/main/marketplace/sections/Marketplace.jsx

@@ -53,7 +53,7 @@ export default class Marketplace extends React.PureComponent {
 
       const installed = JSON.parse(localStorage.getItem('installed'));
 
-      if (installed.some(item => item.name === info.data.name)) {
+      if (installed.some((item) => item.name === info.data.name)) {
         button = this.buttons.uninstall;
       }
 
@@ -125,7 +125,7 @@ export default class Marketplace extends React.PureComponent {
           </div>
         </div>
       );
-    }
+    };
 
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return errorMessage(<>

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

@@ -77,6 +77,21 @@
   box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
   overflow-y: auto;
   position: relative;
+
+  // animation
+  opacity: 0;
+  transform: scale(0);
+  transition: all 300ms cubic-bezier(.47, 1.64, .41, 0.8);
+}
+
+.ReactModal__Content--after-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+  opacity: 0;
+  transform: scale(0);
 }
 
 @media only screen and (max-height: 700px) {
@@ -92,22 +107,6 @@
   }
 }
 
-.ReactModal__Content {
-  opacity: 0;
-  transform: scale(0);
-  transition: all 300ms cubic-bezier(.47, 1.64, .41, .8);
-}
-
-.ReactModal__Content--after-open {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.ReactModal__Content--before-close {
-  opacity: 0;
-  transform: scale(0);
-}
-
 ul.sidebar {
   position: absolute;
   top: 0;
@@ -172,7 +171,6 @@ li {
   background: var(--tab-active);
 }
 
-
 @media only screen and (max-width: 1200px) {
   li.tab-list-item {
     span {
@@ -252,6 +250,16 @@ li {
 
   &:hover {
     color: rgb(165, 165, 165);
+    background: none;
+  }
+
+  span,
+  svg {
+    font-size: 1.1em !important;
+  }
+
+  svg {
+    font-size: 1.2em !important;
   }
 }
 
@@ -274,21 +282,6 @@ li {
   }
 }
 
-.navbar-item {
-  span,
-  svg {
-    font-size: 1.1em !important;
-  }
-
-  svg {
-    font-size: 1.2em !important;
-  }
-
-  &:hover {
-    background: none;
-  }
-}
-
 @media only screen and (max-width: 1300px) {
   li.navbar-item {
     span {
@@ -373,4 +366,4 @@ li {
 
 .MuiIconButton-root {
   color: var(--modal-text) !important;
-} 
+}

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

@@ -20,6 +20,7 @@
 
 .refresh {
   @extend %settingsButton;
+
   background-color: map-get($button-colours, 'confirm');
   border: 2px solid map-get($button-colours, 'confirm');
 
@@ -31,6 +32,7 @@
 
 .reset {
   @extend %settingsButton;
+
   margin-left: 5px;
   background-color: map-get($button-colours, 'reset');
   border: 2px solid map-get($button-colours, 'reset');
@@ -43,6 +45,7 @@
 
 .close {
   @extend %settingsButton;
+
   padding: 10px 50px 10px 50px;
   background-color: map-get($button-colours, 'other');
   border: 2px solid map-get($button-colours, 'other');
@@ -55,6 +58,7 @@
 
 .add {
   @extend %settingsButton;
+
   background-color: map-get($button-colours, 'other');
   border: 2px solid map-get($button-colours, 'other');
 
@@ -68,6 +72,7 @@
 .uploadbg,
 .import {
   @extend %settingsButton;
+
   background-color: map-get($button-colours, 'other');
   color: map-get($theme-colours, 'primary');
   border: 2px solid map-get($button-colours, 'other');

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

@@ -109,7 +109,12 @@ input[type=color]::-moz-color-swatch {
   margin-left: 0;
 }
 
-.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked, .MuIconButton-colorPrimary.Mui-checked, .MuiSwitch-thumb, .MuiRadio-colorSecondary.Mui-checked, .PrivateSwitchBase-input-4 {
+.MuiCheckbox-colorPrimary.Mui-checked,
+.MuiSwitch-colorPrimary.Mui-checked,
+.MuIconButton-colorPrimary.Mui-checked,
+.MuiSwitch-thumb,
+.MuiRadio-colorSecondary.Mui-checked,
+.PrivateSwitchBase-input-4 {
   color: var(--modal-text) !important;
 }
 
@@ -121,7 +126,7 @@ input[type=color]::-moz-color-swatch {
   margin-left: 0px !important;
 }
 
-.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
+.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
   background: darkgray !important;
 }
 
@@ -155,4 +160,4 @@ input[type=color]::-moz-color-swatch {
 .sortableitem {
   color: var(--modal-text) !important;
   cursor: move;
-}
+}

src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss

@@ -1,6 +1,6 @@
 // The following CSS is to work around some assumptions made by the react-color-gradient-picker
 * {
-// workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
+  // workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
   box-sizing: inherit;
 }
 
@@ -11,6 +11,7 @@ div.color-preview-area > div > div:nth-child(5) {
 
 .ui-color-picker {
   margin: 8px -12px;
+  background-color: var(--background) !important;
 }
 
 .input-field .label {
@@ -18,10 +19,6 @@ div.color-preview-area > div > div:nth-child(5) {
 }
 
 // other styling for themes support etc
-.ui-color-picker {
-  background-color: var(--background) !important;
-}
-
 .gradient-degrees {
   border: 3px solid var(--modal-text) !important;
 }
@@ -36,4 +33,4 @@ div.color-preview-area > div > div:nth-child(5) {
 
 .gradient-type-item.active::after {
   border: 2px solid var(--modal-text) !important;
-}
+}