diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx index 891005b5..83ec8864 100644 --- a/src/components/modals/main/marketplace/Items.jsx +++ b/src/components/modals/main/marketplace/Items.jsx @@ -35,7 +35,6 @@ export default function Items({ ))} ) : null} -
{items.slice(0, 99).map((item) => (
toggleFunction(item)} key={item.name}> diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index 0d174f19..a3ac0d65 100644 --- a/src/components/modals/main/marketplace/sections/Marketplace.jsx +++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx @@ -312,6 +312,15 @@ export default class Marketplace extends PureComponent { Collection
+
+
+ Red Dead Redemption + A Collection of stuff inspired by the video game series Red Dead. +
+
+ Collection +
+
) : ( <> diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 7ffc004e..964577ed 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/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; diff --git a/src/components/modals/main/scss/modules/_sidebar.scss b/src/components/modals/main/scss/modules/_sidebar.scss index 7b6475a5..8add630a 100644 --- a/src/components/modals/main/scss/modules/_sidebar.scss +++ b/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; diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx index 204c4cd7..9ea04e1c 100644 --- a/src/components/modals/main/tabs/backend/Tab.jsx +++ b/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 = ; + mue = true; break; case getMessage('modals.main.navbar.settings'): icon = ; @@ -163,6 +164,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) { return ( <> + {mue === true ? Mue : null}