gatsby-core-theme 44.30.0 → 44.30.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [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.1",
   "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/index.js

@@ -10,11 +10,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 { TrackingKeys } from "~constants/tracking-api";
+import VerifiedBadgeIcon from "~images/icons/verifiedBadgeIcon";
 import useTranslate from "~hooks/useTranslate/useTranslate";
 import styles from "../../notifications.module.scss";
 
@@ -25,6 +27,7 @@ const BonusItem = ({
   showUnread,
   bonusCodeLabel,
   updatedLabel,
+  hideBadges
 }) => {
   const bonus = getBonusData(item, tracker);
   const oneliner = [bonus?.mainLine, bonus?.secondLine]
@@ -42,6 +45,16 @@ const BonusItem = ({
   const timeAgo = timeData.value
     ? `${updatedLabel} ${timeData.value} ${timeKeyLabel}`
     : "";
+  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);
 
   return (
     <li className={styles.bonusItem}>
@@ -102,10 +115,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>
   );
 };
@@ -126,9 +147,10 @@ BonusItem.propTypes = {
   showUnread: PropTypes.bool,
   bonusCodeLabel: PropTypes.string.isRequired,
   updatedLabel: PropTypes.string.isRequired,
+  hideBadges: PropTypes.bool
 };
 
-const BonusesItems = ({ toplist, showUnread }) => {
+const BonusesItems = ({ toplist, showUnread, hideBadges }) => {
   const items = toplist?.items || [];
   const tracker =
     toplist?.toplist_bonus || toplist?.one_liner || toplist?.tracker || "main";
@@ -149,6 +171,7 @@ const BonusesItems = ({ toplist, showUnread }) => {
           showUnread={showUnread}
           bonusCodeLabel={bonusCodeLabel}
           updatedLabel={updatedLabel}
+          hideBadges={hideBadges}
         />
       ))}
     </ul>
@@ -163,6 +186,7 @@ BonusesItems.propTypes = {
     tracker: PropTypes.string,
   }),
   showUnread: PropTypes.bool,
+  hideBadges: PropTypes.bool
 };
 
 export default BonusesItems;

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

@@ -2,13 +2,13 @@
 /* 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";
@@ -27,7 +27,7 @@ const CategoryTag = ({ category }) => {
   return <span className={styles.tag}>{label}</span>;
 };
 
-const CardsItems = ({ module, wordLimit = 12, showUnread = false }) => {
+const CardsItems = ({ module, showUnread = false }) => {
   const { items } = module || {};
   const noNewUpdates = useTranslate("noNewUpdates", "No new items");
   const updatedLabel = useTranslate("updated", "Updated");
@@ -87,14 +87,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,7 +2,8 @@
 /* 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";
@@ -11,7 +12,7 @@ import useTranslate from "~hooks/useTranslate/useTranslate";
 import { getTimeAgo } from "~helpers/date-time";
 import styles from "../cards-v2/notification-items.module.scss";
 
-const SpotlightItems = ({ module, showUnread = false, wordLimit = 12 }) => {
+const SpotlightItems = ({ module, showUnread = false }) => {
   const { items } = module || {};
   const noNewUpdates = useTranslate("noNewUpdates", "No new items");
   const updatedLabel = useTranslate("updated", "Updated");
@@ -64,14 +65,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 +138,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;
@@ -270,3 +271,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;