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;
-}
+}

src/components/widgets/background/scss/_photoinformation.scss

@@ -88,4 +88,4 @@
   .MuiSvgIcon-root {
     cursor: initial;
   }
-}
+}

src/components/widgets/background/scss/index.scss

@@ -34,4 +34,4 @@
   to {
     opacity: 1;
   }
-}
+}

src/components/widgets/navbar/scss/index.scss

@@ -23,7 +23,7 @@
     margin: 0.5rem;
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
     cursor: pointer;
-    transition: .2s ease;
+    transition: 0.2s ease;
 
     &:hover {
       color: map-get($theme-colours, 'main-text-color');

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -111,7 +111,7 @@ export default class QuickLinks extends React.PureComponent {
         this.addLink();
         e.preventDefault();
       }
-    }
+    };
   }
 
   render() {

src/components/widgets/quicklinks/quicklinks.scss

@@ -79,7 +79,7 @@ textarea {
   img {
     height: 32px;
     width: auto;
-    transition: transform .2s;
+    transition: transform 0.2s;
     user-select: none;
 
     &:hover {

src/components/widgets/quote/Quote.jsx

@@ -23,12 +23,10 @@ export default class Quote extends React.PureComponent {
       copy: '',
       quoteLanguage: ''
     };
-
     this.buttons = {
       tweet: <TwitterIcon className='copyButton' onClick={this.tweetQuote} />,
       copy: <FileCopy className='copyButton' onClick={this.copyQuote} />
-    }
-  
+    };
     this.language = window.language.widgets.quote;
   }
 

src/components/widgets/search/search.scss

@@ -22,7 +22,7 @@
 
     &:focus {
       width: 400px;
-      background-color: rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, 0.5);
       user-select: text;
     }
   }

src/components/widgets/time/clock.scss

@@ -22,11 +22,12 @@
   user-select: none;
 }
 
-.react-clock__hand__body, .react-clock__mark__body {
+.react-clock__hand__body, 
+.react-clock__mark__body {
   background: map-get($theme-colours, 'main') !important;
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
 .clock-container {
   margin-top: 13px;
-}
+}

src/components/widgets/time/date.scss

@@ -3,4 +3,4 @@
   user-select: none;
   text-transform: capitalize;
   font-weight: bold;
-}
+}

src/components/widgets/weather/Weather.jsx

@@ -42,7 +42,7 @@ export default class Weather extends React.PureComponent {
         humidity: this.state.weather.humidity,
         pressure: this.state.weather.pressure
       }
-    }
+    };
 
     if (!this.state.weather.temp) {
       data = await (await fetch (window.constants.WEATHER_URL + `?city=${this.state.location}`)).json();