diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss index 03a274c8..1ce9c4b8 100644 --- a/src/components/Elements/MainModal/scss/index.scss +++ b/src/components/Elements/MainModal/scss/index.scss @@ -3,6 +3,7 @@ @use 'modules/topBar' as *; @use 'modules/sidebar' as *; @use 'modules/navbar' as *; +@use 'modules/buttons' as *; @use 'modules/modalTabContent' as *; @use 'modules/links' as *; @use 'modules/scrollbars' as *; diff --git a/src/components/Elements/MainModal/scss/marketplace/_main.scss b/src/components/Elements/MainModal/scss/marketplace/_main.scss index f9b3c8d0..7c6a5732 100644 --- a/src/components/Elements/MainModal/scss/marketplace/_main.scss +++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss @@ -1,24 +1,7 @@ // this file is too long -@use 'modules/item' as *; -@use 'modules/buttons' as *; @use 'modules/lightbox' as *; @use 'scss/variables' as *; -.creatorItems { - .item { - flex-flow: row !important; - } - - .item-icon { - margin: 0 !important; - } - - .card-details { - margin: 0 !important; - text-align: left; - } -} - .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 280px)); @@ -201,189 +184,6 @@ } } -.itemPage { - display: flex; - flex-flow: row; - justify-content: space-between; - align-items: flex-start; - gap: 30px; - flex-wrap: wrap; - - .itemContent { - display: flex; - flex-flow: column; - gap: 25px; - flex: 1; - - img { - width: 100%; - height: auto; - border-radius: 12px; - } - - table { - table-layout: fixed; - width: 100%; - word-wrap: break-word !important; - font-size: 16px; - border-collapse: collapse; - } - - .itemTop { - display: flex; - flex-direction: column; - gap: 18px; - } - - .itemTabs { - display: flex; - flex-wrap: wrap; - gap: 12px; - - .itemTab { - border-radius: 999px; - padding: 0.55rem 1.3rem; - border: 1px solid transparent; - background: transparent; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s ease, - box-shadow 0.2s ease; - - @include themed { - color: t($subColor); - border-color: rgb(255 255 255 / 10%); - background-color: rgb(255 255 255 / 5%); - } - - &:hover { - transform: translateY(-1px); - - @include themed { - border-color: rgb(255 255 255 / 18%); - } - } - - &.active { - @include themed { - color: t($color); - background-color: t($modal-sidebarActive); - border-color: transparent; - } - } - } - } - - .tabContent { - display: flex; - flex-direction: column; - gap: 25px; - } - - .itemHighlights { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 18px; - - .highlightCard { - display: flex; - flex-direction: column; - gap: 6px; - padding: 18px; - border-radius: 14px; - border: 1px solid transparent; - - @include themed { - background-color: t($modal-secondaryColour); - border-color: rgb(255 255 255 / 8%); - box-shadow: 0 0 0 1px t($modal-sidebarActive); - } - - .highlightLabel { - font-size: 14px; - - @include themed { - color: t($subColor); - } - } - - .highlightValue { - font-size: 30px; - font-weight: 600; - - @include themed { - color: t($color); - } - } - } - } - - .marketplaceDetails { - .moreInfo { - margin-top: 10px; - } - } - } - - .itemInfo { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - border-radius: 15px; - flex: 0 0 300px; - width: 300px; - max-width: 100%; - max-height: 700px; - - .front { - padding: 20px; - height: 100%; - display: flex; - flex-flow: column; - gap: 15px; - width: 100%; - box-sizing: border-box !important; - border-radius: 12px 12px 0 0; - -webkit-backdrop-filter: blur(40px) saturate(150%) brightness(75%); - backdrop-filter: blur(40px) saturate(150%) brightness(75%); - - @include themed { - background-image: linear-gradient(to bottom, transparent, t($modal-background)); - } - } - - .icon { - width: 100%; - height: auto; - border-radius: 12px; - box-shadow: 0 5px 25px black; - aspect-ratio: 1 / 1; - object-fit: cover; - } - - .divider { - text-transform: uppercase; - - @include themed { - color: t($subColor); - } - } - - .iconButtons { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - grid-gap: 20px; - - button { - width: 100%; - padding: 0; - } - } - } -} - .emptyItems { width: 100%; height: 100%; @@ -468,35 +268,6 @@ p.author { cursor: pointer; } -.returnButton { - display: grid; - place-items: center; - width: 48px; - height: 48px; - border-radius: 12px; - cursor: pointer; - - svg { - font-size: 2em; - } - - &:hover { - background: rgb(121 121 121 / 22.6%); - } -} - -.flexTopMarketplace { - display: flex; - margin-bottom: 15px; - - .tooltip { - margin-right: 25px; - } - - .mainTitle { - margin-bottom: 0 !important; - } -} .filter { display: flex; @@ -520,147 +291,6 @@ p.author { } } -.collectionPage { - // height: 200px; - padding: 1.5rem; - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - gap: 15px; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - - @include themed { - border-radius: t($borderRadius); - } - - .nice-tag { - border-radius: 150px; - padding: 1px 12px; - -webkit-backdrop-filter: blur(16px) saturate(180%); - backdrop-filter: blur(16px) saturate(180%); - background-color: rgb(255 255 255 / 10%); - border: 1px solid rgb(209 213 219 / 30%); - color: #fff; - } - - .content { - display: flex; - flex-flow: column; - text-align: center; - text-shadow: #000 0 0 15px; - - .mainTitle { - justify-content: center; - color: #fff !important; - } - - .subtitle { - color: #ccc !important; - } - } -} - -.collection { - display: flex; - justify-content: space-between; - padding: 36px 48px; - margin: 15px 0; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - align-items: center; - - @include themed { - box-shadow: 0 0 0 1px t($modal-sidebarActive); - border-radius: t($borderRadius); - } - - .content { - display: flex; - flex-flow: column; - gap: 15px; - max-width: 250px; - text-shadow: #000 0 0 15px; - - .title { - color: #fff !important; - } - - .subtitle { - color: #ccc !important; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 5; - line-clamp: 5; - } - } - - .items { - justify-content: center; - } -} - -.marketplaceRefresh { - display: flex; - flex-flow: row; - gap: 5px; - align-items: center; -} - -.marketplaceSearch { - display: flex; - align-items: center; - padding: 10px 30px; - border-radius: 10px; - font-size: 18px; - - @include themed { - box-shadow: 0 0 0 3px t($modal-sidebarActive); - background: t($modal-sidebar); - } - - input { - all: unset; - } - - @include themed { - &:focus-within { - background: t($modal-sidebarActive); - box-shadow: 0 0 0 1px t($color); - } - - &:disabled { - background: t($modal-sidebarActive); - cursor: not-allowed; - } - } -} - -.inCollection { - // background-image: linear-gradient(to left, transparent, #000), - // url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505'); - display: flex; - flex-flow: column; - gap: 5px; - padding: 5px; - margin: 10px 0; - - @include themed { - // background-color: t($modal-secondaryColour); - // box-shadow: 0 0 0 1px t($modal-sidebarActive); - border-radius: t($borderRadius); - } - - .title:hover { - cursor: pointer; - text-decoration: underline; - } -} - .createYourOwn { display: flex; flex-flow: column; diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss deleted file mode 100644 index 286c7b41..00000000 --- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss +++ /dev/null @@ -1,182 +0,0 @@ -@use 'scss/variables' as *; - -.side { - float: right; - margin-left: 20px; -} - -p.description { - margin-top: 0; - max-width: 800px; -} - -.moreInfo { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 30px; - - .items { - margin-top: 0 !important; - } - - .item { - flex: 1 0 40% !important; - } - - .infoItem { - display: flex; - flex-flow: row; - align-items: center; - gap: 15px; - - svg { - @include themed { - background-image: t($slightGradient); - box-shadow: t($boxShadow); - } - - font-size: 18px; - padding: 7px; - border-radius: 100%; - } - - .text { - display: flex; - flex-flow: column; - font-size: medium; - } - } - - .header { - // text-transform: uppercase; - font-size: small; - - @include themed { - color: t($subColor); - } - } - - span { - @include themed { - color: t($color); - } - } - - @include themed { - background: t($modal-secondaryColour); - box-shadow: 0 0 0 1px t($modal-sidebarActive); - border-radius: t($borderRadius); - padding: 15px; - } -} - -.subHeader { - display: flex; - flex-flow: row; - justify-content: space-between; - flex-wrap: wrap; - align-items: center; - gap: 25px; - - .itemWarning { - padding: 10px 20px; - display: flex; - flex-flow: row; - gap: 15px; - align-items: center; - - .text { - display: flex; - flex-flow: column; - } - - svg { - @include themed { - background-image: t($slightGradient); - box-shadow: t($boxShadow); - } - - padding: 7px; - border-radius: 100%; - } - - @include themed { - background: t($modal-sidebar); - border-radius: t($borderRadius); - box-shadow: 0 0 0 1px t($modal-sidebarActive); - } - } - - .items { - margin-top: 0 !important; - } - - .item { - flex: 1 0 40% !important; - } - - .infoItem { - display: flex; - flex-flow: row; - align-items: center; - gap: 15px; - flex: 1 0 44%; - - svg { - @include themed { - background-image: t($slightGradient); - box-shadow: t($boxShadow); - } - - font-size: 18px; - padding: 7px; - border-radius: 100%; - } - - .text { - font-size: medium; - display: flex; - flex-flow: column; - } - } - - .header { - font-size: small; - - @include themed { - color: t($subColor); - } - } - - span { - @include themed { - color: t($color); - } - } -} - -.showMoreItems { - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - gap: 10px; -} - -.marketplaceDescription { - display: flex; - flex-flow: column; - gap: 15px; - - .subtitle { - -webkit-user-select: text !important; - user-select: text !important; - } -} - -.moreFromCurator { - margin-top: 50px; - display: flex; - flex-flow: column; - gap: 15px; -} diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss b/src/components/Elements/MainModal/scss/modules/_buttons.scss similarity index 100% rename from src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss rename to src/components/Elements/MainModal/scss/modules/_buttons.scss diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx index f6a1a5ed..ee1ef7f4 100644 --- a/src/features/marketplace/components/Items/Items.jsx +++ b/src/features/marketplace/components/Items/Items.jsx @@ -1,16 +1,13 @@ import variables from 'config/variables'; import React, { memo, useState, useMemo } from 'react'; import { - MdAutoFixHigh, - MdOutlineArrowForward, - MdOutlineOpenInNew, MdCheckCircle, MdOutlineUploadFile, MdClose, } from 'react-icons/md'; import placeholderIcon from 'assets/icons/marketplace-placeholder.png'; -import { Button, Tooltip } from 'components/Elements'; +import { Tooltip } from 'components/Elements'; import Dropdown from '../../../../components/Form/Settings/Dropdown/Dropdown'; function filterItems(item, filter, categoryFilter) { @@ -60,48 +57,6 @@ function getTypeTranslationKey(type) { function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInstalled, isAdded, onUninstall }) { item._onCollection = onCollection; - // Convert hex color to RGB for gradient with opacity - const hexToRgb = (hex) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result - ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16), - } - : null; - }; - - const getGradientStyle = () => { - if (!item.colour) return {}; - - const rgb = hexToRgb(item.colour); - if (!rgb) return {}; - - const baseColor = `${rgb.r}, ${rgb.g}, ${rgb.b}`; - - return { - '--item-gradient0': `rgba(${baseColor}, 0.38)`, - '--item-gradient10': `rgba(${baseColor}, 0.35)`, - '--item-gradient75': `rgba(${baseColor}, 0.14)`, - '--item-gradient100': `rgba(${baseColor}, 0.06)`, - backgroundImage: `radial-gradient(circle at center 25%, var(--item-gradient0) 0%, var(--item-gradient10) 10%, var(--item-gradient75) 75%, var(--item-gradient100) 100%)`, - }; - }; - - const getBadgeStyle = () => { - if (!item.colour) return {}; - - const rgb = hexToRgb(item.colour); - if (!rgb) return {}; - - const baseColor = `${rgb.r}, ${rgb.g}, ${rgb.b}`; - - return { - backgroundColor: `rgba(${baseColor}, 0.9)`, - }; - }; - const isSideloaded = item.sideload === true; return ( @@ -109,7 +64,6 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInsta className={`item ${isSideloaded ? 'item-sideloaded' : ''}`} onClick={isSideloaded ? undefined : () => toggleFunction(item)} key={item.name} - style={getGradientStyle()} > {isAdded && onUninstall && ( )} {isInstalled && item.colour && !isSideloaded && ( -
+
)} @@ -187,13 +141,9 @@ function Items({ isCurator, type, items, - collection, toggleFunction, - collectionFunction, onCollection, filter, - moreByCreator, - showCreateYourOwn, filterOptions = false, onSortChange, isAdded = false, @@ -223,48 +173,8 @@ function Items({ } }; - const shouldShowCollection = - ((collection && !onCollection && (filter === null || filter === '')) || - (type === 'collections' && !onCollection && (filter === null || filter === ''))) && - type !== 'preset_settings'; - return ( <> - {shouldShowCollection && ( -
-
- {collection?.display_name} - {collection?.description} -
- {collection?.news === true ? ( - - {variables.getMessage('modals.main.marketplace.learn_more')} - - ) : ( -
- )} {/* Items Filter Options */} {filterOptions && (
@@ -290,7 +200,7 @@ function Items({ />
)} -
+
{items ?.filter((item) => filterItems(item, filter, filterOptions ? selectedCategory : 'all')) .map((item, index) => ( @@ -308,24 +218,6 @@ function Items({ ))}
- {!onCollection && showCreateYourOwn ? ( -
- - {variables.getMessage('modals.main.marketplace.cant_find')} - - {variables.getMessage('modals.main.marketplace.knowledgebase_one') + ' '} - - {variables.getMessage('modals.main.marketplace.knowledgebase_two')} - - {' ' + variables.getMessage('modals.main.marketplace.knowledgebase_three')} - -
- ) : null} ); }