strapi-plugin-magic-mark 3.2.8 → 3.3.1

package/dist/_chunks/{App-C6T1ltR3.mjs → App-CeYRinOC.mjs}

@@ -4,9 +4,70 @@ import { useIntl } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import styled, { keyframes } from "styled-components";
 import { Flex, Loader, Box, Typography, SingleSelect, SingleSelectOption, Thead, Tr, Th, VisuallyHidden, Tbody, Td, Button, Table, TextInput } from "@strapi/design-system";
-import { Book, User, Sparkle, Pin, Link, Eye, Pencil, Trash, Search, Cross, Key, Mail, Check } from "@strapi/icons";
+import { Pin, Eye, Pencil, Trash, Cross, Key, User, Mail, Check } from "@strapi/icons";
+import { BookOpenIcon, UserIcon, SparklesIcon, LinkIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
-import { u as useLicenseInfo, p as pluginId, C as CreateEditModal } from "./index-C7wF7iqT.mjs";
+import { p as pluginId, g as getIconById, C as CreateEditModal } from "./index-Bh3DfbXD.mjs";
+const FEATURES = {
+  // Free tier features
+  basicBookmarks: { tier: "free", limit: 10 },
+  basicFilters: { tier: "free" },
+  // Premium tier features
+  extendedBookmarks: { tier: "premium", limit: 50 },
+  queryHistory: { tier: "premium" },
+  exportBookmarks: { tier: "premium" },
+  sharedBookmarks: { tier: "premium" },
+  // Advanced tier features
+  unlimitedBookmarks: { tier: "advanced", limit: -1 },
+  advancedFilters: { tier: "advanced" },
+  subGroups: { tier: "advanced" },
+  bulkOperations: { tier: "advanced" },
+  analytics: { tier: "advanced" },
+  customIntegrations: { tier: "advanced" }
+};
+const useLicenseInfo = () => {
+  const { get } = useFetchClient();
+  const [limits, setLimits] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    const fetchLimits = async () => {
+      try {
+        console.log("[useLicenseInfo] Fetching license limits...");
+        const response = await get("/magic-mark/license/limits");
+        console.log("[useLicenseInfo] Raw API response:", response);
+        console.log("[useLicenseInfo] Response data:", response.data);
+        if (response.data?.success) {
+          console.log("[useLicenseInfo] Setting limits:", response.data.data);
+          setLimits(response.data.data);
+        } else {
+          console.warn("[useLicenseInfo] API returned success=false or missing data");
+        }
+      } catch (error) {
+        console.error("[useLicenseInfo] Error fetching license limits:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchLimits();
+  }, []);
+  const tier = limits?.tier || "free";
+  const isPremium = tier === "premium" || tier === "advanced";
+  const isAdvanced = tier === "advanced";
+  console.log("[useLicenseInfo] Computed values:", { tier, isPremium, isAdvanced, limits });
+  return {
+    isLoading,
+    limits,
+    tier,
+    isFree: tier === "free",
+    isPremium,
+    isAdvanced,
+    canUseFeature: (feature) => {
+      const featureConfig = FEATURES[feature];
+      const tierOrder = { free: 0, premium: 1, advanced: 2 };
+      return tierOrder[tier] >= tierOrder[featureConfig.tier];
+    }
+  };
+};
 const theme = {
   colors: {
     primary: {
@@ -36,12 +97,8 @@ const theme = {
     },
     neutral: {
       0: "#FFFFFF",
-      50: "#F9FAFB",
       100: "#F3F4F6",
-      200: "#E5E7EB",
-      600: "#4B5563",
-      700: "#374151",
-      800: "#1F2937"
+      600: "#4B5563"
     }
   },
   shadows: {
@@ -186,7 +243,7 @@ const StatsGrid = styled.div`
   }
 `;
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   padding: ${theme.spacing.lg};
   position: relative;
@@ -195,7 +252,7 @@ const StatCard = styled(Box)`
   animation: ${fadeIn$1} ${theme.transitions.slow} backwards;
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   min-width: 200px;
   flex: 1;
   text-align: center;
@@ -247,34 +304,34 @@ const StatIcon = styled(Box)`
 const StatValue = styled(Typography)`
   font-size: 2.5rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${(p) => p.theme.colors.neutral800};
   line-height: 1;
   margin-bottom: ${theme.spacing.xs};
   transition: transform ${theme.transitions.normal};
 `;
 const StatLabel = styled(Typography)`
   font-size: 0.875rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${(p) => p.theme.colors.neutral600};
   font-weight: 500;
   letter-spacing: 0.025em;
   text-transform: capitalize;
 `;
 const DataTable = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: ${theme.borderRadius.lg};
   overflow: hidden;
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   margin-bottom: ${theme.spacing.xl};
 `;
 const StyledTable = styled(Table)`
   thead {
-    background: ${theme.colors.neutral[0]};
-    border-bottom: 2px solid ${theme.colors.neutral[100]};
+    background: ${(p) => p.theme.colors.neutral0};
+    border-bottom: 2px solid rgba(128, 128, 128, 0.15);
     
     th {
       font-weight: 600;
-      color: ${theme.colors.neutral[700]};
+      color: ${(p) => p.theme.colors.neutral700};
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.025em;
@@ -284,14 +341,14 @@ const StyledTable = styled(Table)`
   
   tbody tr {
     transition: all ${theme.transitions.fast};
-    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
     
     &:last-child {
       border-bottom: none;
     }
     
     &:hover {
-      background: ${theme.colors.neutral[50]};
+      background: ${(p) => p.theme.colors.neutral100};
       
       .action-buttons {
         opacity: 1;
@@ -300,7 +357,7 @@ const StyledTable = styled(Table)`
     
     td {
       padding: ${theme.spacing.lg} ${theme.spacing.lg};
-      color: ${theme.colors.neutral[700]};
+      color: ${(p) => p.theme.colors.neutral700};
       vertical-align: middle;
     }
   }
@@ -312,10 +369,21 @@ styled(Box)`
   border-radius: 2px;
   transition: all ${theme.transitions.normal};
 `;
-styled.div`
-  font-size: 32px;
-  line-height: 1;
-  text-align: center;
+const BookmarkIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, ${theme.colors.primary[100]} 0%, #E0E7FF 100%);
+  border-radius: 8px;
+  flex-shrink: 0;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: ${theme.colors.primary[600]};
+  }
 `;
 const ActionButtons = styled(Flex)`
   opacity: 1;
@@ -323,21 +391,26 @@ const ActionButtons = styled(Flex)`
   gap: ${theme.spacing.xs};
   justify-content: flex-end;
 `;
-const FloatingEmoji = styled.div`
+const FloatingIcon = styled.div`
   position: absolute;
   bottom: 40px;
   right: 40px;
-  font-size: 72px;
   opacity: 0.08;
   animation: ${float} 4s ease-in-out infinite;
+  
+  svg {
+    width: 72px;
+    height: 72px;
+    color: ${theme.colors.warning[500]};
+  }
 `;
 const FilterBar = styled(Flex)`
-  background: ${theme.colors.neutral[0]};
+  background: ${(p) => p.theme.colors.neutral0};
   padding: ${theme.spacing.md} ${theme.spacing.lg};
   border-radius: ${theme.borderRadius.lg};
   margin-bottom: ${theme.spacing.lg};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   gap: ${theme.spacing.md};
   align-items: center;
 `;
@@ -350,23 +423,23 @@ const SearchInputWrapper = styled.div`
   display: flex;
   align-items: center;
 `;
-const SearchIcon = styled(Search)`
+const SearchIconStyled = styled(MagnifyingGlassIcon)`
   position: absolute;
   left: 12px;
   width: 16px;
   height: 16px;
-  color: ${theme.colors.neutral[600]};
+  color: ${(p) => p.theme.colors.neutral600};
   pointer-events: none;
 `;
 const StyledSearchInput = styled.input`
   width: 100%;
   padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: ${theme.borderRadius.md};
   font-size: 0.875rem;
   transition: all ${theme.transitions.fast};
-  background: ${theme.colors.neutral[0]};
-  color: ${theme.colors.neutral[800]};
+  background: ${(p) => p.theme.colors.neutral0};
+  color: ${(p) => p.theme.colors.neutral800};
   
   &:focus {
     outline: none;
@@ -375,7 +448,7 @@ const StyledSearchInput = styled.input`
   }
   
   &::placeholder {
-    color: ${theme.colors.neutral[600]};
+    color: ${(p) => p.theme.colors.neutral600};
   }
 `;
 const HomePageModern = () => {
@@ -449,6 +522,19 @@ const HomePageModern = () => {
       console.error("[Magic-Mark] Error fetching current user:", error);
     }
   };
+  const isCurrentUserOwner = (bookmark) => {
+    if (!bookmark.createdBy || !currentUser) return false;
+    if (bookmark.createdBy.documentId && currentUser.documentId) {
+      return bookmark.createdBy.documentId === currentUser.documentId;
+    }
+    if (bookmark.createdBy.id && currentUser.id) {
+      return String(bookmark.createdBy.id) === String(currentUser.id);
+    }
+    if (bookmark.createdBy.id && currentUser.documentId) {
+      return String(bookmark.createdBy.id) === String(currentUser.documentId);
+    }
+    return false;
+  };
   const fetchLicenseLimits = async () => {
     try {
       const response = await get(`/${pluginId}/license/limits`);
@@ -473,27 +559,29 @@ const HomePageModern = () => {
       setLoading(false);
     }
   };
-  const handleDelete = async (id) => {
+  const handleDelete = async (bookmark) => {
     if (!confirm(formatMessage({
       id: `${pluginId}.confirm.delete`,
       defaultMessage: "Are you sure you want to delete this bookmark?"
     }))) {
       return;
     }
+    const deleteId = bookmark.documentId || bookmark.id;
     try {
-      await del(`/${pluginId}/bookmarks/${id}`);
-      console.log("[Magic-Mark HomePage] Bookmark deleted:", id);
+      await del(`/${pluginId}/bookmarks/${deleteId}`);
+      console.log("[Magic-Mark HomePage] Bookmark deleted:", deleteId);
       fetchBookmarks();
     } catch (error) {
       console.error("[Magic-Mark HomePage] Error deleting bookmark:", error);
     }
   };
   const handlePin = async (bookmark) => {
+    const pinId = bookmark.documentId || bookmark.id;
     try {
-      await post(`/${pluginId}/bookmarks/${bookmark.id}/pin`, {
+      await post(`/${pluginId}/bookmarks/${pinId}/pin`, {
         isPinned: !bookmark.isPinned
       });
-      console.log("[Magic-Mark HomePage] Bookmark pinned:", bookmark.id);
+      console.log("[Magic-Mark HomePage] Bookmark pinned:", pinId);
       fetchBookmarks();
     } catch (error) {
       console.error("[Magic-Mark HomePage] Error pinning bookmark:", error);
@@ -532,24 +620,24 @@ const HomePageModern = () => {
     return bookmark.name.toLowerCase().includes(query) || bookmark.description && bookmark.description.toLowerCase().includes(query) || bookmark.path.toLowerCase().includes(query);
   }).slice(0, parseInt(entriesPerPage));
   const pinnedBookmarks = bookmarks.filter((b) => b.isPinned);
-  const myBookmarks = bookmarks.filter((b) => b.createdBy?.id === currentUser?.id);
-  const sharedWithMe = bookmarks.filter((b) => b.createdBy?.id !== currentUser?.id && b.createdBy?.id);
+  const myBookmarks = bookmarks.filter((b) => isCurrentUserOwner(b));
+  const sharedWithMe = bookmarks.filter((b) => !isCurrentUserOwner(b) && b.createdBy);
   return /* @__PURE__ */ jsxs(Container, { padding: 8, children: [
     /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderContent, { direction: "column", alignItems: "flex-start", gap: 2, children: [
       /* @__PURE__ */ jsxs(Title, { children: [
-        /* @__PURE__ */ jsx(Book, {}),
+        /* @__PURE__ */ jsx(BookOpenIcon, {}),
         " MagicMark"
       ] }),
       /* @__PURE__ */ jsx(Subtitle, { children: "Save filtered views and navigate with one click" })
     ] }) }),
     /* @__PURE__ */ jsxs(StatsGrid, { children: [
       /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.primary[500], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsx(User, {}) }),
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsx(UserIcon, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: myBookmarks.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: "My Bookmarks" })
       ] }),
       /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.success[500], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(Sparkle, {}) }),
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: sharedWithMe.length }),
         /* @__PURE__ */ jsx(StatLabel, { children: formatMessage({ id: `${pluginId}.stats.shared`, defaultMessage: "Shared with Me" }) })
       ] }),
@@ -572,7 +660,7 @@ const HomePageModern = () => {
                 className: "stat-icon",
                 $bg: licenseLimits.canCreate ? theme.colors.neutral[100] : theme.colors.danger[100],
                 $color: licenseLimits.canCreate ? theme.colors.neutral[600] : theme.colors.danger[600],
-                children: /* @__PURE__ */ jsx(Link, {})
+                children: /* @__PURE__ */ jsx(LinkIcon, {})
               }
             ),
             /* @__PURE__ */ jsxs(StatValue, { className: "stat-value", children: [
@@ -608,10 +696,10 @@ const HomePageModern = () => {
       }) })
     ] }) }),
     !loading && bookmarks.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }, children: formatMessage({ id: `${pluginId}.allBookmarks.title`, defaultMessage: "🔖 All Available Bookmarks" }) }) }),
+      /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: "var(--colors-neutral700, #374151)" }, children: formatMessage({ id: `${pluginId}.allBookmarks.title`, defaultMessage: "🔖 All Available Bookmarks" }) }) }),
       /* @__PURE__ */ jsxs(FilterBar, { children: [
         /* @__PURE__ */ jsxs(SearchInputWrapper, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsx(SearchIconStyled, {}),
           /* @__PURE__ */ jsx(
             StyledSearchInput,
             {
@@ -668,28 +756,17 @@ const HomePageModern = () => {
           background: bookmark.isPinned ? theme.colors.warning[50] : "transparent"
         }, children: [
           /* @__PURE__ */ jsx(Td, { onClick: () => handleBookmarkClick(bookmark), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                style: {
-                  width: "36px",
-                  height: "36px",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                  fontSize: "24px"
-                },
-                children: bookmark.emoji
-              }
-            ),
+            /* @__PURE__ */ jsx(BookmarkIconWrapper, { children: (() => {
+              const IconComponent = getIconById(bookmark.icon || bookmark.emoji || "bookmark");
+              return /* @__PURE__ */ jsx(IconComponent, {});
+            })() }),
             /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 0, children: [
               /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", ellipsis: true, style: { fontSize: "1.125rem", lineHeight: "1.4" }, children: bookmark.name }),
               /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
-                bookmark.createdBy?.id && currentUser?.id && bookmark.createdBy.id === currentUser.id ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: [
+                isCurrentUserOwner(bookmark) ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: [
                   "• ",
                   formatMessage({ id: `${pluginId}.bookmark.myBookmark`, defaultMessage: "My Bookmark" })
-                ] }) : /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.neutral[600] }, children: [
+                ] }) : /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: "var(--colors-neutral600, #4B5563)" }, children: [
                   "• ",
                   formatMessage({ id: `${pluginId}.bookmark.sharedBy`, defaultMessage: "Shared by {name}" }, { name: bookmark.createdBy?.firstname || formatMessage({ id: `${pluginId}.bookmark.unknown`, defaultMessage: "Unknown" }) })
                 ] }),
@@ -748,7 +825,7 @@ const HomePageModern = () => {
                     children: /* @__PURE__ */ jsx(Eye, {})
                   }
                 ),
-                bookmark.createdBy && /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "ghost",
@@ -757,18 +834,18 @@ const HomePageModern = () => {
                       e.stopPropagation();
                       handleEdit(bookmark);
                     },
-                    disabled: bookmark.createdBy?.id !== currentUser?.id,
+                    disabled: !isCurrentUserOwner(bookmark),
                     children: /* @__PURE__ */ jsx(Pencil, {})
                   }
                 ),
-                bookmark.createdBy?.id && currentUser?.id && bookmark.createdBy.id === currentUser.id && /* @__PURE__ */ jsx(
+                isCurrentUserOwner(bookmark) && /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "ghost",
                     size: "S",
                     onClick: (e) => {
                       e.stopPropagation();
-                      handleDelete(bookmark.id);
+                      handleDelete(bookmark);
                     },
                     children: /* @__PURE__ */ jsx(Trash, {})
                   }
@@ -783,9 +860,9 @@ const HomePageModern = () => {
       Box,
       {
         style: {
-          background: theme.colors.neutral[0],
+          background: "transparent",
           borderRadius: theme.borderRadius.xl,
-          border: `2px dashed ${theme.colors.neutral[200]}`,
+          border: "2px dashed rgba(128, 128, 128, 0.2)",
           padding: theme.spacing["3xl"],
           textAlign: "center",
           position: "relative",
@@ -812,7 +889,7 @@ const HomePageModern = () => {
               }
             }
           ),
-          /* @__PURE__ */ jsx(FloatingEmoji, { children: /* @__PURE__ */ jsx(Sparkle, { fill: "warning500" }) }),
+          /* @__PURE__ */ jsx(FloatingIcon, { children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
           /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 6, style: { position: "relative", zIndex: 1 }, children: [
             /* @__PURE__ */ jsx(
               Box,
@@ -827,7 +904,7 @@ const HomePageModern = () => {
                   justifyContent: "center",
                   boxShadow: theme.shadows.xl
                 },
-                children: /* @__PURE__ */ jsx(Sparkle, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
+                children: /* @__PURE__ */ jsx(SparklesIcon, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
               }
             ),
             /* @__PURE__ */ jsx(
@@ -837,7 +914,7 @@ const HomePageModern = () => {
                 style: {
                   fontSize: "1.75rem",
                   fontWeight: "700",
-                  color: theme.colors.neutral[800],
+                  color: "var(--colors-neutral800, #1F2937)",
                   marginBottom: "8px"
                 },
                 children: formatMessage({ id: `${pluginId}.empty.title`, defaultMessage: "No bookmarks yet" })
@@ -903,7 +980,7 @@ const ModalOverlay = styled.div`
   padding: 20px;
 `;
 const ModalContent = styled(Box)`
-  background: white;
+  background: ${(p) => p.theme.colors.neutral0};
   border-radius: 16px;
   width: 100%;
   max-width: 580px;
@@ -1229,7 +1306,7 @@ const LicenseGuard = ({ children }) => {
                 padding: 4,
                 style: {
                   borderRadius: "8px",
-                  border: "2px solid #BAE6FD",
+                  border: "2px solid rgba(14, 165, 233, 0.3)",
                   width: "100%"
                 },
                 children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: useExistingKey ? "Enter your email and license key to activate." : useAutoCreate && adminUser && adminUser.email ? `Click "Activate" to auto-create a license with your account (${adminUser.email})` : useAutoCreate ? 'Click "Activate" to auto-create a license with your admin account' : "A license will be created with the details below." })
@@ -1293,7 +1370,7 @@ const LicenseGuard = ({ children }) => {
                   padding: 5,
                   style: {
                     borderRadius: "8px",
-                    border: "2px solid #DCFCE7",
+                    border: "2px solid rgba(34, 197, 94, 0.15)",
                     textAlign: "center"
                   },
                   children: [