Merge branch 'beta' into dev

Signed-off-by: Alex Sparkes <alexsparkes@gmail.com>

src/features/marketplace/components/Items/Items.jsx

@@ -1,13 +1,16 @@
 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 { Tooltip } from 'components/Elements';
+import { Button, Tooltip } from 'components/Elements';
 import Dropdown from '../../../../components/Form/Settings/Dropdown/Dropdown';
 
 function filterItems(item, filter, categoryFilter) {
@@ -57,6 +60,40 @@ 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}`;
+
+function getTypeTranslationKey(type) {
+  const typeMap = {
+    photos: 'photo_packs',
+    quotes: 'quote_packs',
+    settings: 'preset_settings',
+  };
+  return typeMap[type] || type;
+}
+
+function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInstalled, isAdded, onUninstall }) {
+  item._onCollection = onCollection;
+
+  const isSideloaded = item.sideload === true;
+
   const isSideloaded = item.sideload === true;
 
   return (
@@ -92,7 +129,7 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInsta
         </Tooltip>
       )}
       {isInstalled && item.colour && !isSideloaded && (
-        <div className="item-installed-badge">
+        <div className="item-installed-badge" style={getBadgeStyle()}>
           <MdCheckCircle />
         </div>
       )}

src/features/quote/options/QuoteOptions.jsx

@@ -31,14 +31,6 @@ const QuoteOptions = ({ currentSubSection, onSubSectionChange, sectionName }) =>
     }
     return type;
   });
-
-  // Migration: Force authorDetails on for users upgrading from older versions
-  useState(() => {
-    if (localStorage.getItem('authorDetails') === null) {
-      localStorage.setItem('authorDetails', 'true');
-    }
-  });
-
   const [customQuote, setCustomQuote] = useState(getCustom());
 
   const handleCustomQuote = (e, text, index, type) => {