feat(dev): eslint and stylelint on dev, improvements, cleanup

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

@@ -1,13 +1,10 @@
 @import 'scss/variables';
-
 @import 'modules/sidebar';
 @import 'modules/navbar';
 @import 'modules/tab-content';
 @import 'modules/links';
 @import 'modules/scrollbars';
-
 @import 'settings/main';
-
 @import 'marketplace/main';
 
 .Overlay {
@@ -84,6 +81,7 @@
 #modal {
   height: 80vh;
   width: clamp(60vw, 1200px, 90vw);
+
   @include themed {
     background-color: t($modal-background);
   }
@@ -120,6 +118,7 @@ h5 {
   display: inline-block;
   width: 50px;
   height: 50px;
+
   @include themed {
     border: 3px solid t($modal-sidebar);
     border-radius: 50%;
@@ -134,6 +133,7 @@ h5 {
     transform: rotate(360deg);
   }
 }
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -188,6 +188,7 @@ h5 {
       flex-direction: row-reverse;
       justify-content: space-between;
       padding: 5px 5px 5px 20px;
+
       @include themed {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
@@ -222,6 +223,7 @@ h5 {
   padding: 25px;
   margin-top: 20px;
   transition: 0.5s;
+
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
@@ -263,6 +265,7 @@ h5 {
   bottom: 0;
   padding: 15px;
   gap: 15px;
+
   @include themed {
     background-color: t($modal-secondaryColour);
     border-radius: t($borderRadius);
@@ -284,6 +287,7 @@ h5 {
   svg {
     margin: 0 !important;
   }
+
   @extend %tabText;
 }
 
@@ -321,6 +325,7 @@ h5 {
         place-items: center;
       }
     }
+
     @include themed {
       background-color: t($modal-sidebarActive);
       border-radius: t($borderRadius);
@@ -350,6 +355,7 @@ h5 {
       border-radius: 100%;
       display: grid;
       place-items: center;
+
       @include themed {
         background-color: t($modal-sidebarActive);
       }

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

@@ -87,6 +87,7 @@
         margin-top: 8px;
         font-size: 12px;
         font-weight: bolder;
+
         @include themed {
           color: t($subColor);
         }
@@ -148,6 +149,7 @@
       box-sizing: border-box !important;
       border-radius: 12px 12px 0 0;
       backdrop-filter: blur(40px) saturate(150%) brightness(75%);
+
       @include themed {
         background-image: linear-gradient(to bottom, transparent, t($modal-background));
       }
@@ -196,6 +198,7 @@
   font-size: 12px;
   display: grid;
   place-items: center;
+
   @include themed {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
@@ -519,6 +522,7 @@ p.author {
 a.collectionButton {
   height: 40px;
   text-decoration: none;
+
   @include themed {
     border-radius: t($borderRadius);
   }
@@ -562,6 +566,7 @@ a.collectionButton {
   padding: 10px 30px;
   border-radius: 10px;
   font-size: 18px;
+
   @include themed {
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
     background: t($modal-sidebar);
@@ -570,6 +575,7 @@ a.collectionButton {
   input {
     all: unset;
   }
+
   @include themed {
     &:focus-within {
       background: t($modal-sidebarActive);

src/components/modals/main/scss/modules/_navbar.scss

@@ -1,6 +1,7 @@
 .navbar-item {
   flex-flow: row !important;
   padding: 0 15px;
+
   @include themed {
     background: t($modal-secondaryColour) !important;
     border-radius: t($borderRadius) !important;

src/components/modals/main/scss/modules/_scrollbars.scss

@@ -4,6 +4,7 @@
   width: 6px;
   height: 6px;
   border-radius: 12px;
+
   @include themed {
     background: t($modal-sidebar);
   }

src/components/modals/main/scss/modules/_tab-content.scss

@@ -4,12 +4,14 @@
   button {
     @include modal-button(standard);
   }
+
   @include themed {
     padding: 1rem 3rem 3rem;
     display: flex;
     flex-direction: column;
     width: 100%;
     background: t($modal-background);
+
     @extend %tabText;
 
     hr {
@@ -73,6 +75,7 @@
 
 table {
   border-collapse: separate;
+
   @include themed {
     border-radius: t($borderRadius);
     margin-top: 20px;
@@ -149,6 +152,7 @@ table {
     place-items: center;
     padding: 15px;
     font-size: 25px;
+
     @include themed {
       background: t($modal-sidebarActive);
     }
@@ -176,6 +180,7 @@ table {
   .messageAction {
     float: right;
   }
+
   @include themed {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);

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

@@ -1,7 +1,6 @@
 @import 'modules/resetmodal';
 @import 'scss/variables';
 @import 'modules/material-ui';
-
 @import 'modules/tabs/about';
 @import 'modules/tabs/changelog';
 @import 'modules/tabs/order';
@@ -17,6 +16,7 @@ input {
     appearance: none;
     vertical-align: middle;
     background: none;
+
     @include themed {
       border: t($modal-sidebarActive) 1px solid;
     }
@@ -55,6 +55,7 @@ input {
   /* date picker */
   &[type='date'] {
     width: 260px;
+
     @include themed {
       background: t($modal-sidebar);
       border: 3px solid t($modal-sidebarActive);
@@ -108,6 +109,7 @@ h4 {
 
     svg {
       font-size: 30px;
+
       @include themed {
         color: t($subColor);
       }
@@ -210,6 +212,7 @@ h4 {
   display: flex;
   flex-flow: row !important;
   align-items: center;
+
   @include themed {
     background: t($modal-sidebarActive);
     border-radius: t($borderRadius);
@@ -220,6 +223,7 @@ h4 {
     font-size: 20px !important;
     padding: 15px;
     border-radius: 100%;
+
     @include themed {
       background: t($modal-sidebar);
     }
@@ -228,6 +232,7 @@ h4 {
 
 .statSection.rightPanel {
   padding: 25px;
+
   @include themed {
     border-radius: t($borderRadius);
     background: t($modal-sidebar);

src/components/modals/main/scss/settings/modules/tabs/_about.scss

@@ -29,6 +29,7 @@
   img {
     width: 75px;
     height: auto;
+
     @include themed {
       border-radius: t($borderRadius);
     }
@@ -37,6 +38,7 @@
 
 .subtitle-photographers {
   font-size: 16px;
+
   @include themed {
     color: t($color);
 

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -48,6 +48,7 @@
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   padding: 20px;
   grid-gap: 20px;
+
   @include themed {
     div {
       border-radius: t($borderRadius);
@@ -87,6 +88,7 @@
     .iconButton {
       width: calc(100% - 22px);
       margin-top: 10px;
+
       @include basicIconButton(11px, 1.3rem, modal);
     }
   }
@@ -105,6 +107,7 @@
   align-items: center;
   justify-content: center;
   margin-top: 16px;
+
   @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);
@@ -122,6 +125,7 @@
 
     .quotediv .author-holder .author .author-content .title {
       font-size: 1em !important;
+
       @include themed {
         color: t($color) !important;
       }

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

@@ -13,6 +13,7 @@ div.color-preview-area > div > div:nth-child(5) {
 
 .ui-color-picker {
   padding: 10px;
+
   @include themed {
     background: t($modal-secondaryColour);
     border-radius: t($borderRadius);

src/components/modals/welcome/welcome.scss

@@ -15,6 +15,7 @@
   .MuiFormControlLabel-root {
     margin-right: 0;
   }
+
   @extend %tabText;
 
   height: 80vh;
@@ -28,6 +29,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     @include themed {
       background-color: t($modal-sidebar);
     }
@@ -163,6 +165,7 @@
   display: flex;
   flex-flow: column;
   align-items: center;
+
   @include themed {
     background: t($modal-sidebar);
     color: t($color);
@@ -196,6 +199,7 @@ a.privacy {
 .examples {
   img {
     width: 60%;
+
     @include themed {
       border-radius: t($borderRadius);
     }
@@ -272,6 +276,7 @@ a.privacy {
     text-decoration: none;
     margin-left: auto;
     padding: 0 20px;
+
     @include modal-button(standard);
   }
 }