feat: make the marketplace look stunning

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

@@ -60,19 +60,40 @@ function Items({
               item.author.toLowerCase().includes(filter.toLowerCase()) ||
               item.type.toLowerCase().includes(filter.toLowerCase()),
           )
-          .map((item) => (
+          .map((item) => {
+            console.log(item, item.type.split('_')[0].endsWith('s')
+              ? item.type.split('_')[0]
+              : item.type.split('_')[0] + 's'); return (
             <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>
+                <img
+                  className="item-back"
+                  draggable="false"
+                  src={variables.constants.DDG_IMAGE_PROXY + item.icon_url}
+                  aria-hidden="true"
+                />
+                <img
+                  className="item-icon"
+                  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">{variables.getMessage('modals.main.marketplace.by', {author: item.author})}</span>
+                  {
+                  type === 'all' && !onCollection
+                    ? <span className="card-type">
+                        {variables.getMessage(`modals.main.addons.create.types.${
+                          item.type.split('_')[0] === "preset"
+                            ? "settings"
+                            : item.type.split('_')[0] + 's'
+                        }`)}
+                      </span>
+                    : null} 
+                
               </div>
             </div>
-          ))}
+          )})}
       </div>
       <div className="loader"></div>
       {type === 'all' && !onCollection ? (

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

@@ -8,7 +8,7 @@
 .items {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: 1rem;
+  grid-gap: 1.5rem;
   margin-top: 15px;
   margin-bottom: 30px;
 
@@ -16,7 +16,6 @@
     position: relative;
     border-radius: 12px;
     width: auto;
-    padding: 10px;
     cursor: pointer;
     transition: 0.5s;
     display: flex;
@@ -24,14 +23,17 @@
     align-items: center;
     text-align: center;
     gap: 15px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
 
     @include themed() {
-      background: t($modal-secondaryColour);
+      background-color: t($modal-secondaryColour);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
       &:hover {
-        background: t($modal-sidebarActive);
+        background-color: t($modal-sidebarActive);
         img {
-          background: t($modal-sidebarActive);
+          background-color: t($modal-sidebarActive);
         }
       }
     }
@@ -40,21 +42,30 @@
       margin-top: 7px;
     }
 
-    img {
+     .item-back {
+       filter: blur(60px) saturate(180%) brightness(90%);
+       -webkit-filter: blur(60px) saturate(180%) brightness(90%);
+       position: absolute;
+       object-fit: cover !important;
+       height: 90px !important;
+       width: 100px !important;
+       border-radius: 100px;
+       transition: 0.5s;
+       margin-top: 30px;
+    }
+
+    .item-icon {
       object-fit: cover !important;
-      height: 50px !important;
-      width: 50px !important;
+      height: 60px !important;
+      width: 60px !important;
       border-radius: 12px;
       transition: 0.5s;
-
-      @include themed() {
-        background: t($modal-sidebar);
-      }
-
-      padding: 5px;
+      margin-top: 25px;
     }
 
     .card-details {
+      padding: 10px;
+      margin-bottom: 24px;
       display: flex;
       flex-flow: column;
       gap: 5px;
@@ -64,12 +75,27 @@
       }
 
       .card-subtitle {
-        font-size: 12px;
+        font-size: 14px;
 
         @include themed() {
           color: t($subColor);
         }
       }
+
+      .card-type {
+        margin-top: 8px;
+        font-size: 12px;
+        font-weight: bolder;
+        @include themed() {
+          color: t($subColor);
+        }
+        border-radius: 150px;
+        padding: 2px 8px;
+        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);
+      }
     }
   }
 }
@@ -379,8 +405,8 @@ p.author {
 .collection {
   display: flex;
   justify-content: space-between;
-  padding: 24px;
-  margin-top: 15px;
+  padding: 36px 48px;
+  margin: 15px 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

src/translations/de_DE.json

@@ -495,6 +495,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Fotopakete",

src/translations/en_GB.json

@@ -489,6 +489,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Photo Packs",
@@ -564,9 +565,9 @@
           "other_title": "Create Add-on",
           "create_type": "Create {type} Pack",
           "types": {
-            "settings": "Preset Settings Pack",
+            "settings": "Preset Settings",
             "photos": "Photo Pack",
-            "quotes": "Quotes Pack"
+            "quotes": "Quote Pack"
           },
           "descriptions": {
             "settings": "Collection of settings to customise Mue.",

src/translations/en_US.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Photo Packs",

src/translations/es.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Paquetes de fotos",

src/translations/es_419.json

@@ -511,6 +511,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Paquetes de fotos",

src/translations/fr.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Packs Photos",

src/translations/id_ID.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Photo Packs",

src/translations/nl.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Fotoverzamelingen",

src/translations/no.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Bilde pakker",

src/translations/ru.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "Наборы фото",

src/translations/tr_TR.json

@@ -489,6 +489,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "Tümü",
         "learn_more": "Daha Fazla Bilgi Edin",
         "photo_packs": "Fotoğraf Paketleri",
@@ -707,4 +708,4 @@
     "no_storage": "Yeteri kadar yer yok.",
     "link_copied": "Bağlantı kopyalandı."
   }
-}
+}

src/translations/zh_CN.json

@@ -494,6 +494,7 @@
         }
       },
       "marketplace": {
+        "by": "by {author}",
         "all": "All",
         "learn_more": "Learn More",
         "photo_packs": "图片包",