feat: new collection design, improvements

Co-authored-by: David Ralph <me@davidcralph.co.uk>
Co-authored-by: Isaac <contact@eartharoid.me>

src/components/modals/main/Main.jsx

@@ -17,7 +17,7 @@ const getMessage = (text) => variables.language.getMessage(variables.languagecod
 
 const renderLoader = (current) => (
   <Tabs current={current}>
-    <div label={getMessage('modals.main.loading')}>
+    <div label="cheese">
       <div className="emptyItems">
         <div className="emptyMessage">
           <div className="loaderHolder">

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

@@ -0,0 +1,28 @@
+import variables from 'modules/variables';
+
+export default function Collection({
+  items,
+}) {
+  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+
+  return (
+    <>
+      <div className="items">
+        {items.slice(0, 99).map((item) => (
+          <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
+            <img
+              alt="icon"
+              draggable="false"
+              src={variables.constants.DDG_IMAGE_PROXY + item.icon_url}
+            />
+            <div className="card-details">
+              <span className="card-title">{item.display_name || item.name}</span>
+              <span className="card-subtitle">{item.author}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="loader"></div>
+    </>
+  );
+}

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

@@ -159,7 +159,7 @@ export default class Item extends PureComponent {
                     <span>{this.props.data.version}</span>
                   )}
                 </div>
-              </div>
+              </div>        
               <div className="infoItem">
                 <MdAccountCircle />
                 <div className="text">
@@ -208,8 +208,24 @@ export default class Item extends PureComponent {
                   <span className="header">{getMessage('modals.main.marketplace.product.shares')}</span>
                   <span>324</span>
                 </div>
-              </div>*/}
+              </div>*/}           
             </div>
+            {this.props.data.data.quotes ? (
+              <>
+                <table>
+                  <tr>
+                    <th>Quote</th>
+                    <th>Author</th>
+                  </tr>
+                  {this.props.data.data.quotes.map((quote, index) => (
+                    <tr key={index}>
+                      <td>{quote.quote}</td>
+                      <td>{quote.author}</td>
+                    </tr>
+                  ))}
+                </table>
+              </>
+            ) : null}
           </div>
           <div className="itemInfo">
             <img

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

@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { MdAutoFixHigh } from 'react-icons/md';
+import { MdAutoFixHigh, MdOutlineArrowForward } from 'react-icons/md';
 
 export default function Items({
   type,
@@ -11,25 +11,33 @@ export default function Items({
 }) {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
+
   return (
     <>
-      {type === 'all' && !onCollection ? (
+      {(type === 'all' && !onCollection) || (type ==='collections') ? (
         <>
           {collections.map((collection, index) => (
-            <div className="collection" key={index}>
+            <div
+              className="collection"
+              key={index}
+              style={{
+                backgroundImage: `linear-gradient(to left, #000, transparent, #000), url('${collection.img}')`,
+              }}
+            >
               <div className="content">
                 <span className="title">{collection.display_name}</span>
                 <span className="subtitle">{collection.description}</span>
-                <button onClick={() => collectionFunction(collection.name)}>
-                  {getMessage('modals.main.marketplace.explore_collection')}
-                </button>
               </div>
+              <button className="nice-button" onClick={() => collectionFunction(collection.name)}>
+                <MdOutlineArrowForward /> {getMessage('modals.main.marketplace.explore_collection')}
+              </button>
             </div>
           ))}
         </>
       ) : null}
+
       <div className="items">
-        {items.map((item) => (
+        {items.slice(0, 99).map((item) => (
           <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
             <img
               alt="icon"
@@ -43,6 +51,7 @@ export default function Items({
           </div>
         ))}
       </div>
+      <div className="loader"></div>
       {type === 'all' && !onCollection ? (
         <div className="createYourOwn">
           <MdAutoFixHigh />

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

@@ -1,7 +1,7 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { MdWifiOff, MdLocalMall, MdOutlineKeyboardArrowRight } from 'react-icons/md';
+import { MdWifiOff, MdLocalMall, MdOutlineKeyboardArrowRight, MdRefresh } from 'react-icons/md';
 
 import Item from '../Item';
 import Items from '../Items';
@@ -204,6 +204,14 @@ export default class Marketplace extends PureComponent {
     });
   }
 
+  reloadItems() {
+    this.setState({
+      done: false,
+    });
+
+    this.getItems();
+  }
+
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return;
@@ -306,18 +314,25 @@ export default class Marketplace extends PureComponent {
             </div>
           </>
         ) : (
-          <span className="mainTitle">{this.getMessage('modals.main.navbar.marketplace')}</span>
+          <>
+            <div className="flexTopMarketplace">
+              <span className="mainTitle">{this.getMessage('modals.main.navbar.marketplace')}</span>
+            </div>
+            <div className="headerExtras marketplaceCondition">
+              <span className="link" onClick={() => this.reloadItems()}>
+                <MdRefresh /> Refresh
+              </span>
+              <Dropdown
+                label={this.getMessage('modals.main.addons.sort.title')}
+                name="sortMarketplace"
+                onChange={(value) => this.sortMarketplace(value)}
+              >
+                <option value="a-z">{this.getMessage('modals.main.addons.sort.a_z')}</option>
+                <option value="z-a">{this.getMessage('modals.main.addons.sort.z_a')}</option>
+              </Dropdown>
+            </div>
+          </>
         )}
-        <div className="filter">
-          <Dropdown
-            label={this.getMessage('modals.main.addons.sort.title')}
-            name="sortMarketplace"
-            onChange={(value) => this.sortMarketplace(value)}
-          >
-            <option value="a-z">{this.getMessage('modals.main.addons.sort.a_z')}</option>
-            <option value="z-a">{this.getMessage('modals.main.addons.sort.z_a')}</option>
-          </Dropdown>
-        </div>
         <Items
           type={this.props.type}
           items={this.state.items}

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

@@ -147,6 +147,14 @@ h5 {
   }
 }
 
+.marketplaceCondition {
+  display: flex;
+  flex-flow: row !important;
+  gap: -1px;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .languageSettings {
   margin-bottom: 15px;
   .MuiFormGroup-root {

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

@@ -320,6 +320,7 @@ p.author {
   gap: 15px;
   justify-content: space-between;
   align-items: center;
+  margin-top: 15px;
 
   @include themed() {
     background: t($modal-sidebar);
@@ -332,16 +333,15 @@ p.author {
   }
 }
 
-// reminder to remove this url
 .collection {
   display: flex;
   justify-content: space-between;
-  padding: 15px;
+  padding: 24px;
   margin-top: 15px;
-  background-size: fill;
+  background-size: cover;
   background-position: center;
-  background-image: linear-gradient(to left, transparent, #000),
-    url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
+  background-repeat: no-repeat;
+  background-image: linear-gradient(to left, transparent, #000);
   align-items: center;
 
   @include themed() {
@@ -367,6 +367,24 @@ p.author {
   .items {
     justify-content: center;
   }
+  
+  button.nice-button {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    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;
+    &:hover {
+      backdrop-filter: blur(16px) saturate(180%);
+      -webkit-backdrop-filter: blur(16px) saturate(180%);
+      background-color: rgba(17, 25, 40, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.125);
+    }
+  }
 }
 
 .smallBanner {

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

@@ -68,7 +68,9 @@
 }
 
 table {
+  border-collapse: separate;
   @include themed() {
+    border-radius: t($borderRadius);
     margin-top: 20px;
     tr:first-child {
       background: t($modal-sidebarActive);
@@ -76,7 +78,9 @@ table {
         padding: 1rem;
       }
     }
-
+    td {
+      padding: 15px;
+    }
     tr {
       th:last-child {
         display: grid;

src/components/modals/main/tabs/Marketplace.jsx

@@ -20,6 +20,9 @@ export default function Marketplace(props) {
       <div label={getMessage('modals.main.marketplace.preset_settings')} name="preset_settings">
         <MarketplaceTab type="preset_settings" />
       </div>
+      <div label='Collections' name="collection">
+        <MarketplaceTab type="collection" />
+      </div>
     </Tabs>
   );
 }

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

@@ -28,6 +28,7 @@ import {
   MdAddCircleOutline as Added,
   MdAddCircleOutline as Create,
   MdViewAgenda as Overview,
+  MdCollectionsBookmark as Collections,
 } from 'react-icons/md';
 
 function Tab({ label, currentTab, onClick, navbarTab }) {
@@ -146,6 +147,9 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case getMessage('modals.main.marketplace.preset_settings'):
       icon = <Advanced />;
       break;
+    case 'Collections':
+        icon = <Collections />;
+      break;
 
     default:
       break;