style: radial gradient item card backgrounds

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -65,17 +65,6 @@
       margin-top: 7px;
     }
 
-    .item-back {
-      filter: blur(60px) saturate(180%) brightness(90%);
-      position: absolute;
-      object-fit: cover !important;
-      height: 90px;
-      width: 100px;
-      border-radius: 100px;
-      transition: 0.5s;
-      margin-top: 30px;
-    }
-
     .item-icon {
       object-fit: cover !important;
       height: 60px !important;

src/config/constants.js

@@ -1,5 +1,6 @@
 // API URLs
 export const API_URL = 'https://api.muetab.com/v2';
+// export const API_URL = 'http://127.0.0.1:8787/v2';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';
 export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';

src/features/marketplace/components/Elements/ItemCard/ItemCard.jsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
 import { useTab } from 'components/Elements/MainModal/backend/TabContext';
 import { useMarketData } from 'features/marketplace/api/MarketplaceDataContext';
-import { MdOpenInNew } from "react-icons/md";
+import { MdOpenInNew } from 'react-icons/md';
 
 function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
   const { getItemData, selectedItem, setSelectedItem } = useMarketData();
@@ -30,7 +30,11 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
   switch (cardStyle) {
     case 'list':
       return (
-        <tr key={item.name} className="py-5 hover:bg-white/5 rounded-lg cursor-pointer" onClick={SelectItem}>
+        <tr
+          key={item.name}
+          className="py-5 hover:bg-white/5 rounded-lg cursor-pointer"
+          onClick={SelectItem}
+        >
           <td className="flex flex-row items-center gap-10 py-3">
             <img
               className="w-10 h-10 rounded-lg"
@@ -46,29 +50,27 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
           </td>
           <td>{variables.getMessage('marketplace:' + getName(item.type)) || 'marketplace'}</td>
           <td>{item.author}</td>
-          <td><MdOpenInNew /></td>
+          <td>
+            <MdOpenInNew />
+          </td>
         </tr>
       );
     default:
       return (
         <motion.div
-          whileHover={{ y: -10 }}
+          // whileHover={{ y: -10 }}
-          transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.5 }}
+          // transition={{ type: 'spring', stiffness: 150, damping: 15, mass: 0.5 }}
-          className="item"
+          //  ease-in-out duration-100
+          className="item transition hover:-translate-y-2.5 motion-reduce:transition-none motion-reduce:hover:transform-none"
           onClick={SelectItem}
           key={item.name}
+          style={{
+            // alpha  66=0.4  33=0.2  00=0
+            backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}66 0%, ${item.colour}33 10%, ${item.colour}00 75%)`,
+            // backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}60, ${item.colour}0F)`,
+            // backgroundImage: `radial-gradient(circle at center 25%, ${item.colour}55, ${item.colour}0A)`,
+          }}
         >
-          <img
-            className="item-back"
-            alt=""
-            draggable={false}
-            src={item.icon_url}
-            onError={(e) => {
-              e.target.onerror = null;
-              e.target.src = placeholderIcon;
-            }}
-            aria-hidden="true"
-          />
           <img
             className="item-icon"
             alt="icon"
@@ -90,7 +92,9 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
             )}
 
             {type === true && !onCollection ? (
-              <span className="card-type">{variables.getMessage('marketplace:' + getName(item.type))}</span>
+              <span className="card-type">
+                {variables.getMessage('marketplace:' + getName(item.type))}
+              </span>
             ) : null}
           </div>
         </motion.div>
@@ -98,4 +102,4 @@ function ItemCard({ item, type, onCollection, isCurator, cardStyle }) {
   }
 }
 
-export { ItemCard as default, ItemCard };
+export { ItemCard as default, ItemCard };