feat: improved settings and marketplace ui, better custom background support, fix webpack

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

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

@@ -1,11 +1,17 @@
 .navbar-item {
   font-size: 22px;
   font-weight: 500;
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--photo-info);
 
   &:hover {
-    color: grey;
-    background: none;
+    svg {
+      background: var(--tab-active);
+    }
+
+    color: var(--modal-text)
   }
 
   span,
@@ -15,6 +21,10 @@
 
   svg {
     font-size: 1.2em !important;
+    width: 60px;
+    padding: 5px;
+    border-radius: 20px;
+    color: var(--photo-info);
   }
 }
 
@@ -30,6 +40,7 @@
   left: 20rem;
   top: 1rem;
   justify-content: center;
+  display: flex;
 
   svg {
     margin-right: 0.5rem;
@@ -53,19 +64,9 @@
 }
 
 .navbar-item-active {
-  background: map-get($theme-colours, 'gradient');
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  color: var(--modal-text);
 
   svg {
-    color: orange;
-  }
-
-  &:hover {
-    background: map-get($theme-colours, 'gradient');
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
+    background: var(--sidebar);
   }
 }

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

@@ -8,7 +8,7 @@ ul.sidebar {
   border-radius: 12px 0 0 12px;
   text-align: left;
   font-size: 24px;
-  min-height: 100vh;
+  min-height: 110vh;
 
   h1 {
     text-align: center;

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

@@ -17,14 +17,14 @@
 @media only screen and (max-width: 1920px) {
   .tab-content {
     left: 120px;
-    top: 50px;
+    top: 60px;
   }
 }
 
 @media only screen and (min-width: 1920px) {
   .tab-content {
     left: 350px;
-    top: 7%;
+    top: 9%;
   }
 }
 
@@ -38,6 +38,6 @@
 @media only screen and (max-width: 1200px) {
   .tab-content {
     left: 125px;
-    top: 75px;
+    top: 90px;
   }
 }