gatsby-core-theme 44.30.0 → 44.30.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [44.30.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.30.1...v44.30.2) (2026-06-24)
+
+
+### Bug Fixes
+
+* fixes for notification panel ([80c7649](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/80c7649bb5650317b017c336b3b9653fa52a1042))
+
+## [44.30.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.30.0...v44.30.1) (2026-06-22)
+
+
+### Bug Fixes
+
+* fix style of notification panel ([b21a180](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/b21a1808842776e36ef14f3f8f1fbe70a20f1854))
+
+
+* Merge branch 'master' of gitlab.com:g2m-gentoo/team-floyd/themes/gatsby-themes ([850c758](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/850c7581eb1a7a19fa20b63eace13032cd54919a))
+
 # [44.30.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.29.0...v44.30.0) (2026-06-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "44.30.0",
+  "version": "44.30.2",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/notifications/index.js

@@ -25,7 +25,7 @@ const getNotificationToplist = (modules) => {
   );
 };
 
-const Notifications = ({ section, market }) => {
+const Notifications = ({ section, market, hideBadges = false }) => {
   const { setShowSearch, setShowMenu, showMenu, showSearch } =
     useContext(NavigationContext);
   const notificationRef = useRef(null);
@@ -139,6 +139,7 @@ const Notifications = ({ section, market }) => {
                 activeTab={activeTab}
                 onTabChange={setActiveTab}
                 market={market}
+                hideBadges={hideBadges}
               />
 
               <div className={styles.content}>
@@ -146,6 +147,7 @@ const Notifications = ({ section, market }) => {
                   <BonusesItems
                     toplist={notificationToplist}
                     showUnread={newNotification}
+                    hideBadges={hideBadges}
                   />
                 ) : (
                   renderTrendingContent()
@@ -163,6 +165,7 @@ Notifications.propTypes = {
   section: PropTypes.shape({
     modules: PropTypes.arrayOf(PropTypes.shape({})),
   }),
+  hideBadges: PropTypes.bool
 };
 
 export default Notifications;

package/src/components/atoms/notifications/notification-items/bonuses/bonuses.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { getListToplistItem } from '~tests/factories/modules/toplist.factory';
 import BonusesItems from '.';
@@ -25,7 +25,7 @@ const buildToplist = (overrides = {}) => ({
 describe('BonusesItems', () => {
   beforeEach(() => {
     Object.assign(navigator, {
-      clipboard: { writeText: jest.fn() },
+      clipboard: { writeText: jest.fn().mockResolvedValue(undefined) },
     });
   });
 
@@ -34,7 +34,7 @@ describe('BonusesItems', () => {
     expect(screen.getByText('No new items')).toBeVisible();
   });
 
-  test('renders bonus item with promo code and copies on click', () => {
+  test('renders bonus item with promo code and copies on click', async () => {
     const toplist = buildToplist();
     const { container } = render(<BonusesItems toplist={toplist} showUnread />);
 
@@ -44,7 +44,10 @@ describe('BonusesItems', () => {
     expect(screen.getByText('BONUS123')).toBeVisible();
 
     fireEvent.click(screen.getByText('BONUS123'));
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('BONUS123');
+    await waitFor(() => {
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith('BONUS123');
+      expect(screen.getByText('CODE COPIED')).toBeVisible();
+    });
   });
 
   test('renders bonus item without promo code row', () => {
@@ -60,4 +63,4 @@ describe('BonusesItems', () => {
     expect(container.querySelector('.bonusCodeRow')).toBeFalsy();
     expect(screen.getByText('name1 Review')).toBeVisible();
   });
-});
+});

package/src/components/atoms/notifications/notification-items/bonuses/index.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import CopyIcon from "~images/icons/copyIcon";
+import CheckCircleIcon from "~images/icons/check-circle";
 import LazyImage from "~hooks/lazy-image";
 import PrettyLink from "~atoms/pretty-link";
 import ReviewLink from "~atoms/review-link";
@@ -10,11 +11,13 @@ import keygen from "~helpers/keygen";
 import {
   getBonusData,
   getPromoCode,
+  getOperatorTnc,
   imagePrettyUrl,
 } from "~helpers/getters";
 import { getAltText } from "~helpers/image";
-import { getTimeAgo } from "~helpers/date-time";
+import { getTimeAgo, parseSortableDate } from "~helpers/date-time";
 import { TrackingKeys } from "~constants/tracking-api";
+import VerifiedBadgeIcon from "~images/icons/verifiedBadgeIcon";
 import useTranslate from "~hooks/useTranslate/useTranslate";
 import styles from "../../notifications.module.scss";
 
@@ -25,7 +28,9 @@ const BonusItem = ({
   showUnread,
   bonusCodeLabel,
   updatedLabel,
+  hideBadges
 }) => {
+  const [copySuccess, setCopySuccess] = useState(false);
   const bonus = getBonusData(item, tracker);
   const oneliner = [bonus?.mainLine, bonus?.secondLine]
     .filter(Boolean)
@@ -34,14 +39,45 @@ const BonusItem = ({
   const reviewPath = item.review_link
     ? `/${item.review_link}`
     : item.path || null;
-  const timeData = getTimeAgo(item.updated_at) || {};
+  const timeData = item.updated_at ? getTimeAgo(item.updated_at) : null;
   const timeKeyLabel = useTranslate(
-    timeData.key,
-    timeData.key?.replace(/_/g, " ")
+    timeData?.key,
+    timeData?.key?.replace(/_/g, " ")
   );
-  const timeAgo = timeData.value
-    ? `${updatedLabel} ${timeData.value} ${timeKeyLabel}`
-    : "";
+  const foundedYear = item?.founded?.substring(0, 4);
+  let timeAgo = "";
+
+  if (timeData?.value) {
+    timeAgo = `${updatedLabel} ${timeData.value} ${timeKeyLabel}`;
+  } else if (foundedYear) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    timeAgo = `${useTranslate("founded", "Founded")} ${foundedYear}`;
+  }
+
+  const hasTnc = Boolean(getOperatorTnc(item, tracker));
+
+  const verifiedMonth = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+  }).format(new Date());
+
+  const verifiedLabel = useTranslate(
+    "notification_verified_in",
+    "Verified in [month]"
+  ).replace("[month]", verifiedMonth);
+  const codeCopiedLabel = useTranslate("code_copied", "CODE COPIED");
+  const isBet365 = item.short_name === "bet365";
+
+  const copyToClipBoard = async (e, copyMe) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(copyMe);
+      setCopySuccess(true);
+    } catch (err) {
+      setCopySuccess(false);
+    }
+  };
 
   return (
     <li className={styles.bonusItem}>
@@ -59,7 +95,7 @@ const BonusItem = ({
             width={52}
             height={52}
             alt={getAltText(item.logo, item.name)}
-            src={imagePrettyUrl(item.logo?.filename, 52, 52)}
+            src={imagePrettyUrl(item.logo?.filename)}
           />
         </PrettyLink>
 
@@ -70,11 +106,30 @@ const BonusItem = ({
               <span className={styles.bonusCodeLabel}>{bonusCodeLabel}</span>
               <button
                 type="button"
-                className={styles.bonusCode}
-                onClick={() => navigator.clipboard.writeText(promoCode)}
+                className={`${styles.bonusCode} ${copySuccess ? styles.bonusCodeCopied : ""}`}
+                onClick={(e) =>
+                  promoCode && !isBet365 ? copyToClipBoard(e, promoCode) : undefined
+                }
+                disabled={isBet365}
               >
-                <span>{promoCode}</span>
-                <CopyIcon width={20} height={20} />
+                {!copySuccess ? (
+                  <>
+                    <span>{promoCode}</span>
+                    {!isBet365 && <CopyIcon width={20} height={20} />}
+                  </>
+                ) : (
+                  <>
+                    <span>{codeCopiedLabel}</span>
+                    <span className={styles.bonusCodeCheckIcon}>
+                      <CheckCircleIcon
+                        width={20}
+                        height={20}
+                        bgColor="var(--notification-bonus-code-border, #20cd77)"
+                        color="#fff"
+                      />
+                    </span>
+                  </>
+                )}
               </button>
             </div>
           )}
@@ -102,10 +157,18 @@ const BonusItem = ({
         )}
         {timeAgo && <span className={styles.updated}>{timeAgo}</span>}
       </div>
+      {hideBadges && (
+        <span className={styles.customVerifiedBadge}>
+          <VerifiedBadgeIcon />
+          {verifiedLabel}
+        </span>
+      )}
 
-      <div className={styles.legal}>
-        <Tnc operator={item} tracker={tracker} isFixed />
-      </div>
+      {hasTnc && (
+        <div className={styles.legal}>
+          <Tnc operator={item} tracker={tracker} isFixed />
+        </div>
+      )}
     </li>
   );
 };
@@ -117,6 +180,7 @@ BonusItem.propTypes = {
     updated_at: PropTypes.string,
     short_name: PropTypes.string,
     name: PropTypes.string,
+    founded: PropTypes.string,
     logo: PropTypes.shape({
       filename: PropTypes.string,
     }),
@@ -126,10 +190,15 @@ BonusItem.propTypes = {
   showUnread: PropTypes.bool,
   bonusCodeLabel: PropTypes.string.isRequired,
   updatedLabel: PropTypes.string.isRequired,
+  hideBadges: PropTypes.bool
 };
 
-const BonusesItems = ({ toplist, showUnread }) => {
-  const items = toplist?.items || [];
+const BonusesItems = ({ toplist, showUnread, hideBadges }) => {
+  const items = [...(toplist?.items || [])].sort(
+    (a, b) =>
+      parseSortableDate(b.updated_at || b.founded) -
+      parseSortableDate(a.updated_at || a.founded)
+  );
   const tracker =
     toplist?.toplist_bonus || toplist?.one_liner || toplist?.tracker || "main";
   const noBonuses = useTranslate("noNewUpdates", "No new items");
@@ -149,6 +218,7 @@ const BonusesItems = ({ toplist, showUnread }) => {
           showUnread={showUnread}
           bonusCodeLabel={bonusCodeLabel}
           updatedLabel={updatedLabel}
+          hideBadges={hideBadges}
         />
       ))}
     </ul>
@@ -163,6 +233,7 @@ BonusesItems.propTypes = {
     tracker: PropTypes.string,
   }),
   showUnread: PropTypes.bool,
+  hideBadges: PropTypes.bool
 };
 
-export default BonusesItems;
+export default BonusesItems;

package/src/components/atoms/notifications/notification-items/cards-v2/index.js

@@ -2,20 +2,28 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from "react";
 import PropTypes from "prop-types";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
 import LazyImage from "~hooks/lazy-image";
 import keygen from "~helpers/keygen";
 import Link from "~hooks/link";
 import {
   imagePrettyUrl,
   getExtraField,
-  textWordsLimit,
 } from "~helpers/getters";
 import { getAltText, getImageFilename } from "~helpers/image";
 import ArticleIcon from "../../../../../images/icons/articleIcon";
 import useTranslate from "~hooks/useTranslate/useTranslate";
-import { getTimeAgo } from "~helpers/date-time";
+import { getTimeAgo, parseSortableDate } from "~helpers/date-time";
 import styles from "./notification-items.module.scss";
 
+const getTrendingSortDate = (item) =>
+  parseSortableDate(
+    item?.manual_updated_date ||
+      item?.updated_at ||
+      item?.manual_published_date ||
+      item?.created_at
+  );
+
 const CategoryTag = ({ category }) => {
   const label = useTranslate(
     `category_${category.short_name}`,
@@ -27,10 +35,11 @@ const CategoryTag = ({ category }) => {
   return <span className={styles.tag}>{label}</span>;
 };
 
-const CardsItems = ({ module, wordLimit = 12, showUnread = false }) => {
-  const { items } = module || {};
+const CardsItems = ({ module, showUnread = false }) => {
+  const items = [...(module?.items || [])].sort(
+    (a, b) => getTrendingSortDate(b) - getTrendingSortDate(a)
+  );
   const noNewUpdates = useTranslate("noNewUpdates", "No new items");
-  const updatedLabel = useTranslate("updated", "Updated");
 
   const renderItem = (item) => {
     const isArticleOrPage = ["article", "page"].includes(item?.relation_type);
@@ -46,20 +55,20 @@ const CardsItems = ({ module, wordLimit = 12, showUnread = false }) => {
     const categories = item?.categories || [];
     const description =
       subtitle || item?.short_description || item?.description || "";
-    const timeData =
-      getTimeAgo(
-        item?.manual_updated_date ||
-          item?.updated_at ||
-          item?.manual_published_date ||
-          item?.created_at
-      ) || {};
-    const timeAgo = timeData.value
-      ? `${updatedLabel} ${timeData.value} ${useTranslate(
+    const dateModified = item?.manual_updated_date || item?.updated_at;
+    const datePublished = item?.manual_published_date || item?.created_at;
+    const dateString = dateModified || datePublished;
+    const usePublishedLabel = !dateModified && Boolean(datePublished);
+    const timeData = dateString ? getTimeAgo(dateString) : null;
+    const timeAgo = timeData?.value
+      ? `${useTranslate(
+          usePublishedLabel ? "published" : "updated",
+          usePublishedLabel ? "Published" : "Updated"
+        )} ${timeData.value} ${useTranslate(
           timeData.key,
           timeData.key?.replace(/_/g, " ")
         )}`
       : "";
-
     const thumbnail = img ? (
       <LazyImage
         width={40}
@@ -87,14 +96,13 @@ const CardsItems = ({ module, wordLimit = 12, showUnread = false }) => {
             )}
             {description && (
               <p className={styles.subtitle}>
-                {textWordsLimit(
-                  description.replace(/<\/?[^>]+(>|$)/g, ""),
-                  wordLimit
-                )}
+                {description.replace(/<\/?[^>]+(>|$)/g, "")}
               </p>
             )}
           </div>
-          <span className={styles.cta} aria-hidden="true" />
+          <span className={styles.cta} aria-hidden="true">
+            <FaArrowRight size={12} />
+          </span>
         </div>
         {(categories.length > 0 || ribbon || timeAgo) && (
           <div className={styles.meta}>

package/src/components/atoms/notifications/notification-items/cards-v2/notification-items.module.scss

@@ -134,7 +134,7 @@
   }
 
   .unreadDot {
-    left: -1.2rem;
+    left: -0.8rem;
     top: -0.8rem;
   }
 
@@ -157,10 +157,6 @@
     }
   }
 
-  .text {
-    padding-right: 2.4rem;
-  }
-
   .title {
     font-weight: 700;
     color: var(--notification-oneliner-color, #1b1b1c);
@@ -169,6 +165,10 @@
   .subtitle {
     display: -webkit-box;
     overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    text-overflow: ellipsis;
     color: var(--notification-trending-description-color, #6e6e84);
   }
 
@@ -206,15 +206,16 @@
     flex-shrink: 0;
     width: 3.6rem;
     height: 3.6rem;
+    padding: 0.2rem 0.8rem 0.4rem;
+    border: var(--notification-panel-cta-border, none);
     border-radius: var(--notification-cta-border-radius, 4.8rem);
-    background: var(--notification-trending-cta-bg, #f4f4f4)
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%236B6A72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
-      no-repeat center;
+    background: var(--notification-trending-cta-bg, #f4f4f4);
+    color: var(--notification-trending-cta-color, #6b6a72);
     pointer-events: none;
   }
 }
 
 .embeddedList {
   gap: 1.2rem;
-  padding: 0.8rem 0 0 1.2rem;
+  padding: 0.8rem 0 0;
 }

package/src/components/atoms/notifications/notification-items/spotlight/index.js

@@ -2,19 +2,29 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from "react";
 import PropTypes from "prop-types";
-import { imagePrettyUrl, textWordsLimit } from "~helpers/getters";
+import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
+import { imagePrettyUrl } from "~helpers/getters";
 import { getAltText, getImageFilename } from "~helpers/image";
 import LazyImage from "~hooks/lazy-image";
 import keygen from "~helpers/keygen";
 import Link from "~hooks/link";
 import useTranslate from "~hooks/useTranslate/useTranslate";
-import { getTimeAgo } from "~helpers/date-time";
+import { getTimeAgo, parseSortableDate } from "~helpers/date-time";
 import styles from "../cards-v2/notification-items.module.scss";
 
-const SpotlightItems = ({ module, showUnread = false, wordLimit = 12 }) => {
-  const { items } = module || {};
+const getTrendingSortDate = (item) =>
+  parseSortableDate(
+    item?.manual_updated_date ||
+      item?.updated_at ||
+      item?.manual_published_date ||
+      item?.created_at
+  );
+
+const SpotlightItems = ({ module, showUnread = false }) => {
+  const items = [...(module?.items || [])].sort(
+    (a, b) => getTrendingSortDate(b) - getTrendingSortDate(a)
+  );
   const noNewUpdates = useTranslate("noNewUpdates", "No new items");
-  const updatedLabel = useTranslate("updated", "Updated");
 
   const renderItem = (item) => {
     const img = item?.image;
@@ -24,21 +34,24 @@ const SpotlightItems = ({ module, showUnread = false, wordLimit = 12 }) => {
     const ribbon = item?.subtitle?.split(",")[0]?.replace("[null]", "")?.trim();
     const metaText = item?.subtitle?.split(",").slice(1).join(",").trim();
     const description = item?.short_description || item?.text || "";
-    const timeData =
-      getTimeAgo(
-        item?.manual_updated_date ||
-          item?.updated_at
-      ) || {};
+    const dateModified = item?.manual_updated_date || item?.updated_at;
+    const datePublished = item?.manual_published_date || item?.created_at;
+    const dateString = dateModified || datePublished;
+    const usePublishedLabel = !dateModified && Boolean(datePublished);
+    const timeData = dateString ? getTimeAgo(dateString) : null;
     const timeKeyLabel = useTranslate(
-      timeData.key,
-      timeData.key?.replace(/_/g, " ")
+      timeData?.key,
+      timeData?.key?.replace(/_/g, " ")
     );
     let timeAgo = "";
 
-    if (timeData.value) {
-      timeAgo = `${updatedLabel} ${timeData.value} ${timeKeyLabel}`;
+    if (timeData?.value) {
+      timeAgo = `${useTranslate(
+        usePublishedLabel ? "published" : "updated",
+        usePublishedLabel ? "Published" : "Updated"
+      )} ${timeData.value} ${timeKeyLabel}`;
     } else if (metaText) {
-      timeAgo = `${updatedLabel} ${metaText}`;
+      timeAgo = `${useTranslate("updated", "Updated")} ${metaText}`;
     }
 
     return (
@@ -64,14 +77,13 @@ const SpotlightItems = ({ module, showUnread = false, wordLimit = 12 }) => {
             )}
             {description && (
               <p className={styles.subtitle}>
-                {textWordsLimit(
-                  description.replace(/<\/?[^>]+(>|$)/g, ""),
-                  wordLimit
-                )}
+                {description.replace(/<\/?[^>]+(>|$)/g, "")}
               </p>
             )}
           </div>
-          <span className={styles.cta} aria-hidden="true" />
+          <span className={styles.cta} aria-hidden="true">
+            <FaArrowRight size={12} />
+          </span>
         </div>
         {(ribbon || timeAgo) && (
           <div className={styles.meta}>
@@ -138,7 +150,6 @@ SpotlightItems.propTypes = {
     items: PropTypes.arrayOf(PropTypes.shape({})),
   }),
   showUnread: PropTypes.bool,
-  wordLimit: PropTypes.number,
 };
 
 export default SpotlightItems;

package/src/components/atoms/notifications/notifications.module.scss

@@ -62,6 +62,7 @@
   height: calc(100% - var(--nav-height-mobile, 4.8rem));
   background: var(--notification-panel-bg, #fff);
   border-left: var(--notification-panel-border-left, 0 solid transparent);
+  border-top: var(--notification-panel-border-top, 0 solid transparent);
 
   @include min(tablet) {
     top: 0;
@@ -115,6 +116,7 @@
   gap: 0.8rem;
   padding: 0 0 0.8rem;
   border-bottom: 1px solid var(--notification-item-border, #e3e6ef);
+  cursor: default;
 }
 
 .unreadDot {
@@ -134,6 +136,7 @@
   gap: 0.8rem;
   width: 100%;
   min-height: 5.2rem;
+  cursor: default;
 }
 
 .logo {
@@ -144,6 +147,7 @@
   height: 5.2rem;
   border: 1px solid var(--notification-logo-border, #dedede);
   border-radius: var(--notification-logo-border-radius, 0.8rem);
+  cursor: default;
 
   img {
     display: block;
@@ -153,6 +157,7 @@
   }
 }
 
+
 .bonusText {
   @include flex-direction(column);
   @include flex-align(flex-start, center);
@@ -161,6 +166,7 @@
   min-width: 0;
   gap: 0.4rem;
   padding-right: 2.4rem;
+  cursor: default;
 }
 
 .oneliner {
@@ -169,6 +175,7 @@
   font-weight: 700;
   line-height: 2.2rem;
   color: var(--notification-oneliner-color, #1b1b1c);
+  cursor: default;
 }
 
 .bonusCodeRow {
@@ -210,15 +217,36 @@
 
   svg {
     flex-shrink: 0;
+    pointer-events: none;
     color: var(--notification-bonus-code-icon, #262629);
   }
 }
 
+.bonusCodeCopied {
+  border-color: var(--notification-bonus-code-border, #20cd77);
+}
+
+.bonusCodeCheckIcon {
+  @include flex-align(center, center);
+
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  pointer-events: none;
+
+  svg {
+    display: block;
+    width: 2rem;
+    height: 2rem;
+  }
+}
+
 .meta {
   @include flex-align(center, flex-start);
 
   width: 100%;
   min-height: 1.8rem;
+  cursor: default;
 }
 
 .reviewLink {
@@ -229,6 +257,7 @@
   line-height: 1.8rem;
   color: var(--notification-link-color, #165af8);
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .updated {
@@ -240,6 +269,7 @@
   color: var(--notification-meta-color, #515156);
   text-align: right;
   white-space: nowrap;
+  cursor: default;
 }
 
 .cta {
@@ -253,6 +283,7 @@
   background: var(--notification-cta-bg, #6e33e5);
   color: var(--notification-cta-color, #fff);
   text-decoration: none;
+  cursor: default;
 
   &:hover {
     background: var(--notification-cta-hover-bg, #5a28c7);
@@ -270,3 +301,21 @@
     text-decoration: none;
   }
 }
+
+
+.customVerifiedBadge {
+  @include flex-align(center, flex-start);
+
+  box-sizing: border-box;
+  width: fit-content;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0.1rem 0.6rem 0.1rem 0.2rem;
+  border-radius: var(--notification-badge-border-radius, 10rem);
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.8rem;
+  background: var(--notification-verified-badge-bg, #DEE9FF);
+  color: var(--notification-verified-badge-color, #000);
+  border: 1px solid var(--notification-verified-badge-border, transparent);
+}

package/src/components/atoms/notifications/panel-header/panel-header.module.scss

@@ -10,9 +10,9 @@
   h2 {
     flex: 1;
     margin: 0;
-    font-size: 2rem;
+    font-size: var(--notification-panel-title-size, 2rem);
     font-weight: 700;
-    line-height: 2.8rem;
+    line-height: var(--notification-panel-title-line-height, 2.8rem);
     color: var(--notification-title-color, #0f0c28);
     text-transform: capitalize;
   }

package/src/components/atoms/notifications/panel-tabs/index.js

@@ -5,7 +5,7 @@ import CountryFlagIcon from "~images/icons/countryFlag";
 import useTranslate from "~hooks/useTranslate/useTranslate";
 import styles from "./panel-tabs.module.scss";
 
-const PanelTabs = ({ activeTab, onTabChange, market }) => {
+const PanelTabs = ({ activeTab, onTabChange, market, hideBadges }) => {
   const countryCode = market?.split("_")[0]?.toUpperCase();
   const verifiedMonth = new Intl.DateTimeFormat("en-US", {
     month: "long",
@@ -45,8 +45,7 @@ const PanelTabs = ({ activeTab, onTabChange, market }) => {
           {trendingContentLabel}
         </button>
       </div>
-
-      {activeTab === "bonuses" && (
+      {(activeTab === "bonuses" && !hideBadges) && (
         <div className={styles.badges}>
           <span className={styles.verifiedBadge}>
             <VerifiedBadgeIcon />
@@ -74,6 +73,7 @@ PanelTabs.propTypes = {
   activeTab: PropTypes.oneOf(["bonuses", "trending"]).isRequired,
   onTabChange: PropTypes.func.isRequired,
   market: PropTypes.string,
+  hideBadges: PropTypes.bool
 };
 
 export default PanelTabs;

package/src/components/atoms/notifications/panel-tabs/panel-tabs.module.scss

@@ -11,7 +11,6 @@
   @include flex-align(flex-start, stretch);
 
   box-sizing: border-box;
-  height: 4rem;
   padding: 0.4rem;
   border: 1px solid var(--notification-tabs-border, #dedede);
   border-radius: var(--notification-tabs-border-radius, 1.2rem);
@@ -21,10 +20,9 @@
 .tab,
 .tabActive {
   flex: 1;
-  height: 3.2rem;
   border: 0;
   border-radius: var(--notification-tab-border-radius, 0.8rem);
-  padding: 0.4rem 1rem;
+  padding: 0.7rem 1rem;
   font-size: 1.2rem;
   line-height: 1.8rem;
   cursor: pointer;

package/src/helpers/date-time.js

@@ -52,3 +52,11 @@ export const getTimeAgo = (dateString) => {
   }
   return { value: diffMinutes, key: diffMinutes === 1 ? "minute_ago" : "minutes_ago" };
 };
+
+export const parseSortableDate = (dateString) => {
+  if (!dateString) return 0;
+
+  const time = Date.parse(String(dateString).replace(" ", "T"));
+
+  return Number.isNaN(time) ? 0 : time;
+};

package/src/helpers/date-time.test.js

@@ -1,4 +1,4 @@
-import { formatDate, getTimeAgo } from './date-time';
+import { formatDate, getTimeAgo, parseSortableDate } from './date-time';
 
 describe('Date-Time Helper', () => {
   test('formatDate()', () => {
@@ -22,4 +22,11 @@ describe('Date-Time Helper', () => {
     expect(getTimeAgo(daysAgo)).toMatchObject({ key: 'days_ago', value: 10 });
     expect(getTimeAgo(monthsAgo)).toMatchObject({ key: 'months_ago', value: 2 });
   });
+
+  test('parseSortableDate()', () => {
+    expect(parseSortableDate(null)).toBe(0);
+    expect(parseSortableDate('2025-06-01 10:00:00')).toBeGreaterThan(
+      parseSortableDate('2024-01-01 10:00:00')
+    );
+  });
 });

package/src/images/icons/check-circle.js

@@ -6,7 +6,7 @@ export default function CheckCircleIcon({ width = 24, height = 24, color = '#272
     <svg
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox="0 0 24 24"
       fill="none"
       aria-labelledby="checkCircleIcon"
       xmlns="http://www.w3.org/2000/svg"

package/src/resolver/modules.mjs

@@ -520,6 +520,35 @@ export function shouldSavePrefilled(module = {}, siteName) {
   );
 }
 
+function normalizePathForMatch(path) {
+  if (!path || typeof path !== "string") return "";
+  return path.replace(/^\/+|\/+$/g, "");
+}
+
+function getSpotlightLinkedPage(link, pagesMappedById = {}) {
+  if (!link || link.type !== "page") return null;
+
+  if (link.page_id && pagesMappedById[link.page_id]) {
+    return pagesMappedById[link.page_id];
+  }
+
+  const linkValue = link.value;
+  if (!linkValue) return null;
+
+  if (pagesMappedById[linkValue]) {
+    return pagesMappedById[linkValue];
+  }
+
+  const linkPath = normalizePathForMatch(linkValue);
+  if (!linkPath) return null;
+
+  return (
+    Object.values(pagesMappedById).find(
+      (page) => normalizePathForMatch(page?.path) === linkPath
+    ) || null
+  );
+}
+
 export function processSpotlightModule(module = {}, content, relations, ribbons, previewPageID, translations, relationData, operators, games,
   pagesMappedById = {}
 ) {
@@ -543,11 +572,22 @@ export function processSpotlightModule(module = {}, content, relations, ribbons,
       games
     );
 
-      const pageId = item?.link?.page_id;
-      const linkedPage = pageId ? pagesMappedById[pageId] : null;
+      const linkedPage = getSpotlightLinkedPage(item?.link, pagesMappedById);
       if (linkedPage?.short_description) {
         item.short_description = linkedPage.short_description;
       }
+      if (linkedPage?.updated_at) {
+        item.updated_at = linkedPage.updated_at;
+      }
+      if (linkedPage?.manual_updated_date) {
+        item.manual_updated_date = linkedPage.manual_updated_date;
+      }
+      if (linkedPage?.created_at) {
+        item.created_at = linkedPage.created_at;
+      }
+      if (linkedPage?.manual_published_date) {
+        item.manual_published_date = linkedPage.manual_published_date;
+      }
     });
   }
 

package/src/resolver/modules.test.js

@@ -11,6 +11,7 @@ import {
   shouldSavePrefilled,
   processContentModule,
   processAnchor,
+  processSpotlightModule,
 } from "./modules.mjs";
 import { objectsHolder } from "~tests/factories/modules/modules.factory";
 import getPageDataList from "~tests/factories/pages/list.factory";
@@ -391,4 +392,43 @@ expect(module.value.ribbons[0]).toBe("testRibbon");
 
     expect(prefilledModule.items).toHaveLength(3);
   });
+
+  test("Spotlights resolve linked page by path when page_id is missing", () => {
+    const linkedPage = {
+      ...getPageData(),
+      id: 123,
+      path: "casino-bonus/irishlucks-exclusive-bonuses-vault",
+      updated_at: "2024-06-10 12:00:00",
+      short_description: "Linked page description",
+    };
+    const module = {
+      mode: "image_text",
+      items: [
+        {
+          label: "Bonus Club",
+          text: "<p>Join now!</p>",
+          link: {
+            type: "page",
+            value: "/casino-bonus/irishlucks-exclusive-bonuses-vault",
+          },
+        },
+      ],
+    };
+
+    processSpotlightModule(
+      module,
+      {},
+      {},
+      {},
+      null,
+      {},
+      {},
+      {},
+      {},
+      { 123: linkedPage }
+    );
+
+    expect(module.items[0].short_description).toBe("Linked page description");
+    expect(module.items[0].updated_at).toBe("2024-06-10 12:00:00");
+  });
 });