Fix: marketplace fixes

Co-authored-by: Isaac <contact@eartharoid.me>

src/components/modals/main/marketplace/Items.jsx

@@ -35,7 +35,6 @@ export default function Items({
           ))}
         </>
       ) : null}
-
       <div className="items">
         {items.slice(0, 99).map((item) => (
           <div className="item" onClick={() => toggleFunction(item)} key={item.name}>

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

@@ -312,6 +312,15 @@ export default class Marketplace extends PureComponent {
                 <MdOutlineKeyboardArrowRight /> Collection
               </span>
             </div>
+            <div className='collectionPage'>
+              <div className="content">
+                <span className="mainTitle">Red Dead Redemption</span>
+                <span className="subtitle">A Collection of stuff inspired by the video game series Red Dead.</span>
+              </div>
+              <div className='nice-tag'>
+                Collection
+              </div>
+            </div>
           </>
         ) : (
           <>

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

@@ -333,6 +333,46 @@ p.author {
   }
 }
 
+.collectionPage {
+  height: 200px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  gap: 25px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  
+  @include themed() {
+    border-radius: t($borderRadius);
+    background-image: linear-gradient(to bottom, transparent, t($modal-background)),
+      url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
+  }
+  .nice-tag {
+    border-radius: 150px;
+    padding: 1px 12px;
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    background-color: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(209, 213, 219, 0.3);
+    color: #fff;
+  }
+  .content {
+    display: flex;
+    flex-flow: column;
+    text-align: center;
+    .mainTitle {
+      justify-content: center;
+      color: #fff !important;
+    }
+
+    .subtitle {
+      color: #ccc !important;
+    }
+  }
+}
+
 .collection {
   display: flex;
   justify-content: space-between;
@@ -367,7 +407,7 @@ p.author {
   .items {
     justify-content: center;
   }
-  
+
   button.nice-button {
     display: flex;
     align-items: center;

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

@@ -14,6 +14,14 @@
     min-width: 250px;
     overflow-x: hidden;
 
+    .mainTitle {
+      text-align: center;
+      font-size: 35px;
+      display: flex;
+      justify-content: center;
+      padding: 25px;
+    }
+
     svg {
       margin-left: 20px;
       margin-right: 20px;

src/components/modals/main/tabs/backend/Tab.jsx

@@ -46,10 +46,11 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     }
   }
 
-  let icon, divider;
+  let icon, divider, mue;
   switch (label) {
     case getMessage('modals.main.marketplace.product.overview'):
       icon = <Overview />;
+      mue = true;
       break;
     case getMessage('modals.main.navbar.settings'):
       icon = <Settings />;
@@ -163,6 +164,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
 
   return (
     <>
+    {mue === true ? <span className='mainTitle'>Mue</span> : null}
       <button className={className} onClick={() => onClick(label)}>
         {icon} <span>{label}</span>
       </button>